<?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>0xDECAFBAD &#187; l.m.orchard</title>
	<atom:link href="http://decafbad.com/blog/author/lmorchard/feed" rel="self" type="application/rss+xml" />
	<link>http://decafbad.com/blog</link>
	<description>It's all spinning wheels and self-doubt until the first pot of coffee.</description>
	<lastBuildDate>Wed, 10 Mar 2010 18:26:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0-alpha</generator>
		<item>
		<title>Pondering the cobwebs</title>
		<link>http://decafbad.com/blog/2010/03/10/pondering-the-cobwebs</link>
		<comments>http://decafbad.com/blog/2010/03/10/pondering-the-cobwebs#comments</comments>
		<pubDate>Wed, 10 Mar 2010 17:55:13 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[metablogging]]></category>
		<category><![CDATA[motivation]]></category>
		<category><![CDATA[writing]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1822</guid>
		<description><![CDATA[It&#8217;s plain to see that I&#8217;ve not been a blogger for a long time.

This place is a long-neglected ghost town that sees a begrudged entry every few months, when I happen to remember it still exists and I feel guilty for not feeding it with content. What I&#8217;ve yet to figure out is if the [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s plain to see that I&#8217;ve not been a blogger for a long time.</p>

<p>This place is a long-neglected ghost town that sees a begrudged entry every few months, when I happen to remember it still exists and I feel guilty for not feeding it with content. What I&#8217;ve yet to figure out is if the cause is a matter of motivation, publishing tools, audience, or writing topics.</p>

<p>Behold as I ramble on for many tens of words pondering the cobwebs here at 0xDECAFBAD.</p>

<p><span id="more-1822"></span></p>

<h2>Motivation</h2>

<p>Other outlets have absorbed nearly all of my motivations that once prompted casual blogging. And those other outlets, in most cases, provide better rewards:</p>

<ul>
<li>For quick top-of-the-head thoughts and quips, <a href="http://twitter.com/lmorchard">Twitter</a> works best for the brain-spew and gets me feedback from interesting people faster than my spam-embattled comments here ever did.</li>
<li>For sharing things I find on the web, <a href="http://delicious.com/deusx">Delicious</a> took that job over years ago and <a href="http://www.google.com/reader/shared/l.m.orchard">Google Reader</a> has been angling for the job as well.</li>
<li>For sharing code and projects, I&#8217;ve started doing more and more over at <a href="http://github.com/lmorchard/">my GitHub account</a>.</li>
</ul>

<p>Quite awhile ago, I even went so far as to redirect the front page of my decafbad.com domain straight to a page that&#8217;s nothing more than  <a href="http://decafbad.com/blog/lifestream">a shell for a FriendFeed widget that aggregates my output from elsewhere</a>. It&#8217;s kind of a cop-out, but if you want to see what I&#8217;m really up to, that&#8217;s a much better page than my stagnant blog index anyway.  I&#8217;ve got a <a href="http://decafbad.com/ffa/lmorchard">local archive of my activity</a>, and have been meaning to make a self-hosted lifestream more front-and-center, but I&#8217;ve been too busy to bother.</p>

<h2>Publishing tools</h2>

<p>In fact, I&#8217;ve been thinking about killing my WordPress installation here altogether, and switching the blog over to a static fossil snapshot.  Since I rarely post, there&#8217;s rarely a comment inbound here these days that&#8217;s not trying to slip through an ad for pills or fake handbags. Thus, most of the CPU cycles on my web host are spent on busy work processing requests that will never amount to anything real. So, why bother having an actual PHP application running here?</p>

<p>The one thing that I haven&#8217;t done a lot of lately—and would like to carve out time to get back to—is some real long-form writing. You would think that that&#8217;s where this WordPress thing would come in handy, but oddly it seems not to. I hate writing in textareas in browsers, haven&#8217;t found a desktop blog client that I liked in years.</p>

<p>So, because of the little things that annoy me, I stop writing before I start because the anticipated process to publish seems like a chore. I&#8217;d much rather be writing in MacVim and checking text files into a git repository. Then, I could throw <a href="http://github.com/mojombo/jekyll">Jekyll</a> or something yak-shavingly homebrewed on top of post-receive hooks to do indexing magic and such in static HTML. You know, the stuff that took forever in MovableType back in the day, but decoupled from my actual writing process. </p>

<p>Huh, now that I describe it, the above sounds like a chore too—but it would be a shiny new toy!  At that point, I wouldn&#8217;t be blogging so much as publishing an archive of essays on the web.  But, at least I&#8217;d know the format would be future-proof, the platform exploit-resistant, and the overall maintenance less worrisome.  If I had comments, I could even outsource them to another service and run periodic backups to be safe.</p>

<h2>Audience</h2>

<p>But, beyond the mechanisms, there&#8217;s who I imagine might be reading this stuff. I hold off on writing a lot of things that could be posted here because they&#8217;re maybe not tech-nerdy enough. If it doesn&#8217;t have at least one code example, I hesitate to share it here—and if I don&#8217;t share it here, I probably don&#8217;t share it anywhere.</p>

<p>And then there&#8217;s the thought that whatever I write here, no one will read it if it&#8217;s too long.  This entry is mostly written to myself, and I expect a single-digit comment count—most likely zero.  I get the most feedback on the shortest things, which has ultimately lead to Twitter and its 140 character limit yielding some of my most rewarding interactions on the web in years. I post an essay here, and it&#8217;s all crickets.</p>

<p>The exceptions are where I post something really useful, like that article about <a href="http://decafbad.com/blog/2009/07/15/html5-drag-and-drop">HTML 5 Drag &amp; Drop</a> or a <a href="http://decafbad.com/blog/2008/09/01/writing-a-delicious-command-for-ubiquity">Delicious command for Ubiquity</a>.  That is, of course, a clue if comments and feedback are what I&#8217;m after.</p>

<h2>Writing topics</h2>

<p>So, what could I be writing about these days? Let&#8217;s see, I could write about:</p>

<ul>
<li>what I&#8217;ve been up to at Mozilla since I started;</li>
<li><a href="http://www.flickr.com/photos/deusx/tags/homebrewing/">brewing beer</a> and roasting coffee at home;</li>
<li><a href="http://www.flickr.com/photos/deusx/4389264445/">retro computing on my C64 and Amiga</a>;</li>
<li>developing for Palm webOS;</li>
<li>random thoughts on life;</li>
</ul>

<p>Huh. That all sounds like a blog, and one I would read myself—though that last one sounds like <a href="http://deus-x.livejournal.com/">my LiveJournal</a>, long neglected since I started dating my wife and got much less emo in general. We probably don&#8217;t need to go there so much, but I could probably bore with more even-tempered philosophical expositions.</p>

<h2>What&#8217;s the problem?</h2>

<p>I wonder what my real problem is, then? Is it really just a matter of <a href="http://www.dawsbrothers.com/2010/03/09/butt-in-the-seat-a-writers-technique/">butt in the seat</a> that I&#8217;m missing?  I write every day—in a paper journal, in wiki pages, in emails, to myself—I just don&#8217;t write much here. Maybe all the above is just a collection of excuses.</p>

<p>Lately, I&#8217;ve had this notion that I should try writing and publishing for an earlier version of myself. That is: all these things I end up searching for and researching on the web, I should write them up in a way that I wish had been the first search result in Google. Whatever the topic, if a younger version of me wanted to find it, I should put it out there to be found. Never mind who else I think might read it or (not) comment on it.</p>

<p>Write for myself, write what I&#8217;d want to read—sounds pretty obvious when I put it out there like that. So, is that the deal? Who knows; we&#8217;ll see if a change in perspective results in more happenings here.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2010/03/10/pondering-the-cobwebs/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Professional JavaScript Frameworks is a real book!</title>
		<link>http://decafbad.com/blog/2009/08/20/professional-javascript-frameworks-is-a-real-book</link>
		<comments>http://decafbad.com/blog/2009/08/20/professional-javascript-frameworks-is-a-real-book#comments</comments>
		<pubDate>Thu, 20 Aug 2009 20:22:58 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1813</guid>
		<description><![CDATA[Introducing Professional JavaScript Frameworks, my first multi-author book project and the result of almost 2 years&#8217; writing, editing, revising, and cat herding.  The author roster changed a few times in the process, as did the editorial oversight, but finally the thing&#8217;s hitting shelves.

This one&#8217;s been a long time coming, but it&#8217;s finally sitting in [...]]]></description>
			<content:encoded><![CDATA[<p>Introducing <a href="http://www.amazon.com/gp/product/047038459X?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=047038459X">Professional JavaScript Frameworks</a>, my first multi-author book project and the result of almost 2 years&#8217; writing, editing, revising, and cat herding.  The author roster changed a few times in the process, as did the editorial oversight, but finally the thing&#8217;s hitting shelves.</p>

<p>This one&#8217;s been a <strong><em>long</em></strong> time coming, but it&#8217;s finally sitting in my grubby little hands:</p>

<p><a href="http://www.flickr.com/photos/deusx/3840812372/"><img src="http://farm4.static.flickr.com/3583/3840812372_2d43e66612.jpg" /></a></p>

<p>My contribution to this book includes all of the material from <a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=0470452021">The Concise Guide to Dojo</a>, plus a second concise guide worth of material on the <a href="http://mootools.net/">MooTools JS framework</a>.  In addition to my work, you can find the work of <a href="http://arapehlivanian.com/">Ara Pehlivanian</a> on <a href="http://developer.yahoo.com/yui/">YUI</a>, <a href="http://www.lazycoder.com/weblog/">Scott Koon</a> on <a href="http://www.prototypejs.org/">Prototype</a>, and Harley Jones on <a href="http://extjs.com/">ExtJS</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/08/20/professional-javascript-frameworks-is-a-real-book/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>HTML5 drag and drop in Firefox 3.5</title>
		<link>http://decafbad.com/blog/2009/07/15/html5-drag-and-drop</link>
		<comments>http://decafbad.com/blog/2009/07/15/html5-drag-and-drop#comments</comments>
		<pubDate>Thu, 16 Jul 2009 02:26:40 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[dhtml]]></category>
		<category><![CDATA[draganddrop]]></category>
		<category><![CDATA[eventdelegation]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[mozilla]]></category>
		<category><![CDATA[outliners]]></category>
		<category><![CDATA[outlining]]></category>
		<category><![CDATA[webdev]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1793</guid>
		<description><![CDATA[
Oh hey, look! It&#8217;s another blog post—and this one
is cross-posted on hacks.mozilla.com.
I won&#8217;t say this is the start of a renewed blogging habit, but let&#8217;s see what happens.



dl { margin-left: 2em; }
dd { margin-left: 2em; margin-bottom: 0.25em; }



    
        Drag and drop is one of [...]]]></description>
			<content:encoded><![CDATA[<p><i>
Oh hey, look! It&#8217;s another blog post—and this one
<a href="http://hacks.mozilla.org/2009/07/html5-drag-and-drop/">is cross-posted on hacks.mozilla.com</a>.
I won&#8217;t say this is the start of a renewed blogging habit, but let&#8217;s see what happens.
</i></p>

<p><style type="text/css">
dl { margin-left: 2em; }
dd { margin-left: 2em; margin-bottom: 0.25em; }
</style></p>

<div id="introduction">
    <p>
        Drag and drop is one of the most fundamental interactions
        afforded by graphical user interfaces.  In one gesture, it
        allows users to pair the selection of an object with the
        execution of an action, often including a second object in the
        operation.  It&#8217;s a simple yet powerful UI concept used to
        support copying, list reordering, deletion (ala the Trash / Recycle Bin),
        and even the creation of link relationships.
    </p><p>
        Since it&#8217;s so fundamental, offering drag and drop in web
        applications has been a no-brainer ever since browsers first
        offered mouse events in DHTML.  But, although
        <code>mousedown</code>, <code>mousemove</code>, and
        <code>mouseup</code> made it possible, the implementation has been
        limited to the bounds of the browser window.  Additionally,
        since these events refer only to the object being dragged,
        there&#8217;s a challenge to find the subject of the drop when
        the interaction is completed.
    </p><p>

        Of course, that doesn&#8217;t prevent most modern JavaScript
        frameworks from abstracting away most of the problems and
        throwing in some flourishes while they&#8217;re at it.  But, wouldn&#8217;t
        it be nice if browsers offered first-class support for drag and
        drop, and maybe even extended it beyond the window sandbox?
    </p><p>
        As it turns out, this very wish is answered by the HTML 5 specification 
        <a target="_new" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#dnd">section on new drag-and-drop events</a>, and 
        <a target="_new" href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Firefox 3.5 includes an implementation</a> of those events.
    </p><p>
        If you want to jump straight to the code, I&#8217;ve put together 
        <a target="_new" target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html">some simple demos</a> 
        of the new events.  
    </p><p>

        I&#8217;ve even scratched an itch of my own and
        built <a target="_new" target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/outline.html">the beginnings of an outline editor</a>,
        where every draggable element is also a drop target—of which
        there could be dozens to hundreds in a complex document, something
        that gave me some minor hair-tearing moments in the past
        while trying to make do with plain old mouse events.
    </p><p>
        And, all the above can be downloaded or cloned from 
        <a href="http://github.com/lmorchard/fx35-drag-and-drop">a GitHub repository</a>
        I&#8217;ve created especially for this article—which continues after the jump.
    </p>
</div>

<p><span id="more-1793"></span></p>

<div id="events">

    <h2>The New Drag and Drop Events</h2>
    <p>
        So, with no further ado, here are the new drag and drop events,
        in roughly the order you might expect to see them fired:
    </p>
    <dl>
        <dt><code>dragstart</code></dt>
        <dd>
            A drag has been initiated, with the dragged element as the
            event target.
        </dd>

        <dt><code>drag</code></dt>
        <dd>
            The mouse has moved, with the dragged element as the event target.
        </dd>
        <dt><code>dragenter</code></dt>
        <dd>
            The dragged element has been moved into a drop listener,
            with the drop listener element as the event target.
        </dd>
        <dt><code>dragover</code></dt>

        <dd>
            The dragged element has been moved over a drop listener,
            with the drop listener element as the event target.  Since
            the default behavior is to cancel drops, returning
            <code>false</code> or calling <code>preventDefault()</code> in
            the event handler indicates that a drop is allowed here.
        </dd>
        <dt><code>dragleave</code></dt>
        <dd>
            The dragged element has been moved out of a drop listener,
            with the drop listener element as the event target.
        </dd>

        <dt><code>drop</code></dt>
        <dd>
            The dragged element has been successfully dropped on a drop
            listener, with the drop listener element as the event
            target.
        </dd>
        <dt><code>dragend</code></dt>
        <dd>
            A drag has been ended, successfully or not, with the
            dragged element as the event target.
        </dd>
    </dl>

    <p>
        Like the mouse events of yore, listeners can be attached to
        elements using <code>addEventListener()</code> 
        directly or by way of your favorite JS library.  
    </p><p>
        Consider the following example using jQuery, 
        <a target="_new" target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#newschool">also available as a live demo</a>:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&lt;div id=&quot;newschool&quot;&gt;
    &lt;div class=&quot;dragme&quot;&gt;Drag me!&lt;/div&gt;
    &lt;div class=&quot;drophere&quot;&gt;Drop here!&lt;/div&gt;
&lt;/div&gt;
&nbsp;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
    $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><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;">'#newschool .dragme'</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'draggable'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'true'</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragstart'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>
                dt.<span style="color: #660066;">setData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Text&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Dropped in zone!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragend'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#newschool .drophere'</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragenter'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                $<span style="color: #009900;">&#40;</span>ev.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragleave'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                $<span style="color: #009900;">&#40;</span>ev.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragover'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dragover'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
            .<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'drop'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ev<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>
                <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>dt.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Text'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</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: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>



    <p>
        Thanks to the new events and jQuery, this example is both short
        and simple—but it packs in a lot of functionality, as the rest
        of this article will explain.  
    </p><p>
        Before moving on, there are at least three things about the above
        code that are worth mentioning:
    </p>
    <ul>
        <li>

            <p>
                Drop targets are enabled by virtue of having
                listeners for drop events.  But, 
                <a target="_new" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#drag-and-drop-processing-model">per the HTML 5 spec</a>,
                draggable elements need an
                attribute of <code>draggable="true"</code>, set either in
                markup or in JavaScript.  
            </p>
            <p>
                Thus, <code>$('#newschool&nbsp;.dragme').attr('draggable', 'true')</code>.
            </p>

        </li>
        <li>
            <p>
                The original DOM event (as opposed to jQuery&#8217;s event
                wrapper) offers a property called <code>dataTransfer</code>.
                Beyond just manipulating elements, the new drag and drop
                events accomodate the transmission of user-definable data
                during the course of the interaction.  
            </p>
        </li>
        <li>
            <p>

                Since these are first-class events, you can apply 
                <a target="_new" href="http://icant.co.uk/sandbox/eventdelegation/">the technique of Event Delegation</a>.
            </p><p>
                What&#8217;s that?  Well, imagine you have a list of 1000
                list items—as part of a deeply-nested outline document,
                for instance.  Rather than needing to attach listeners
                or otherwise fiddle with all 1000 items, simply attach
                a listener to the parent node (eg. the
                <code><ul></ul></code> element) and all events from
                the children will propagate up to the single parent listener.
                As a bonus, all new child elements added after page
                load will enjoy the same benefits.
            </p><p>
                <a target="_new" target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#delegated">Check out this demo</a>, 
                and 
                <a target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/js/drag-delegated.js">the associated JS code</a> 
                to see more about these events and Event Delegation.
            </p>

        </li>
    </ul>
</div>

<div id="datatransfer">
    <h2>Using dataTransfer</h2>
    <p>
        As mentioned in the last section, the new drag and drop events
        let you send data along with a dragged element.  But, it&#8217;s even
        better than that:  Your drop targets can receive data
        transferred by content objects dragged into the window from 
        other browser windows, and even <i>other applications</i>.
    </p><p>

        Since the example is a bit longer,  
        <a target="_new" target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer">check out the live demo</a>
        and 
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/js/drag-datatransfer.js">associated code</a>
        to get an idea of what&#8217;s possible with <code>dataTransfer</code>.
    </p><p>
        In a nutshell, the stars of this show are the
        <code>setData()</code> and <code>getData()</code> methods of
        the <code>dataTransfer</code> property exposed by the Event object.
    </p>

    <p>
        The <code>setData()</code> method is typically called in the 
        <code>dragstart</code> listener, loading <code>dataTransfer</code>
        up with one or more strings of content with associated
        <a href="https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#link">recommended content types</a>.
    </p>

    <p>
        For illustration, here&#8217;s a quick snippet from the example code:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>    
dt.<span style="color: #660066;">setData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/plain'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#logo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
dt.<span style="color: #660066;">setData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/html'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#logo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
dt.<span style="color: #660066;">setData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/uri-list'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#logo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">src</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>



    <p>
        On the other end, <code>getData()</code> allows you to query
        for content by type (eg. <code>text/html</code> followed by
        <code>text/plain</code>).  This, in turn, allows you to decide
        on acceptable content types at the time of the
        <code>drop</code> event or even during <code>dragover</code>

        to offer feedback for unacceptable types during the drag.
    </p><p>
        Here&#8217;s another example from the receiving end of the example code:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>    
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content_url .content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>dt.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/uri-list'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content_text .content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>dt.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/plain'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.content_html .content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>dt.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>



    <p>
        Where <code>dataTransfer</code> really shines, though, is that
        it allows your drop targets to receive content from 
        sources outside your defined draggable elements and even from
        outside the browser altogether.  Firefox accepts such drags, 
        and attempts to populate <code>dataTransfer</code> with
        appropriate content types extracted from the external object.
    </p><p>

        Thus, you could select some text in a word processor window and
        drop it into one of your elements, and at least expect to find
        it available as <code>text/plain</code> content.  
    </p><p>
        You can also select content in 
        another browser window, and expect to see <code>text/html</code>
        appear in your events.  Check out the 
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/outline.html">outline editing demo</a>
        and see what happens when you try dragging various elements 
        (eg. images, tables, and lists) and highlighted content from
        other windows onto the items there.
    </p>

</div>

<div id="dragfeedback">
    <h2>Using Drag Feedback Images</h2>
    <p>
       An important aspect of the drag and drop interaction is a
       representation of the thing being dragged.  By default in
       Firefox, this is a &#8220;ghost&#8221; image of the dragged element itself.  But,
       the <code>dataTransfer</code> property of the original Event
       object exposes the method <code>setDragImage()</code> for use
       in customizing this representation.
    </p><p>

        There&#8217;s
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#feedback_image">a live demo</a> of this feature, as well as
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/js/drag-feedback-images.js">associated JS code</a> 
        available.  The gist, however, is sketched out in these code snippets:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>    
&nbsp;
dt.<span style="color: #660066;">setDragImage</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#feedback_image h2'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
dt.<span style="color: #660066;">setDragImage</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#logo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">32</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">32</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> canvas <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;canvas&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
canvas.<span style="color: #660066;">width</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">height</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> ctx <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;2d&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">lineWidth</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">8</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">25</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">25</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ctx.<span style="color: #660066;">stroke</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
dt.<span style="color: #660066;">setDragImage</span><span style="color: #009900;">&#40;</span>canvas<span style="color: #339933;">,</span> <span style="color: #CC0000;">25</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">25</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>



    <p>
        You can supply a DOM node as the first parameter to 
        <code>setDragImage()</code>, which includes everything from
        text to images to <code>canvas</code> elements.  The
        second two parameters indicate at what left and top offset
        the mouse should appear in the image while dragging.
    </p><p>

        For example, since the <code>#logo</code> image is 64&#215;64,
        the parameters in the second <code>setDragImage()</code>
        method places the mouse right in the center of the image.
        On the other hand, the first call positions the feedback
        image such that the mouse rests in the upper left corner.
    </p><p>
    </p>
</div>

<div id="dragfeedback">

    <h2>Using Drop Effects</h2>
    <p>
        As mentioned at the start of this article, the drag and drop
        interaction has been used to support actions such as copying,
        moving, and linking.  Accordingly, the HTML 5 specification 
        accomodates these operations in the form of the 
        <code>effectAllowed</code> and <code>dropEffect</code>
        properties exposed by the Event object.
    </p>
    <p>

        For a quick fix, check out the
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#drag_effects">a live demo</a> 
        of this feature, as well as the
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/js/drag-effects.js">associated JS code</a>.
    </p><p>
        The basic idea is that the <code>dragstart</code> event
        listener can set a value for <code>effectAllowed</code> like so:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>ev.<span style="color: #660066;">target</span>.<span style="color: #660066;">id</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrag0'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">effectAllowed</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'copy'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrag1'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">effectAllowed</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'move'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrag2'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">effectAllowed</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'link'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrag3'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">effectAllowed</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'all'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrag4'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">effectAllowed</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'none'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>



    <p>The choices available for this property include the following:</p>
    <dl> 
        <dt><code>none</code></dt><dd>no operation is permitted </dd>
        <dt><code>copy</code></dt><dd>copy only </dd>

        <dt><code>move</code></dt><dd>move only </dd>
        <dt><code>link</code></dt><dd>link only </dd>
        <dt><code>copyMove</code></dt><dd>copy or move only </dd>
        <dt><code>copyLink</code></dt><dd>copy or link only </dd>
        <dt><code>linkMove</code></dt><dd>link or move only </dd>

        <dt><code>all</code></dt><dd>copy, move, or link </dd>
    </dl>
    <p>
        On the other end, the <code>dragover</code> event listener 
        can set the value of the
        <code>dropEffect</code> property to indicate the expected effect
        invoked on a successful drop.  If the value does
        not match up with <code>effectAllowed</code>, the drop will
        be considered cancelled on completion.
    </p><p>

        In the 
        <a target="_new" href="http://decafbad.com/2009/07/drag-and-drop/api-demos.html#drag_effects">a live demo</a>,
        you should be able to see that only elements with matching
        effects can be dropped into the appropriate drop zones.  This
        is accomplished with code like the following:
    </p>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dt <span style="color: #339933;">=</span> ev.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">dataTransfer</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>ev.<span style="color: #660066;">target</span>.<span style="color: #660066;">id</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrop0'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'copy'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrop1'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'move'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrop2'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'link'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrop3'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'all'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'effectdrop4'</span><span style="color: #339933;">:</span> dt.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'none'</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>



    <p>
        Although the OS itself can provide some feedback, you 
        can also use these properties to update your own visible 
        feedback, both on the dragged element and on the drop zone
        itself.
    </p>

</div>

<div id="conclusion">
    <h2>Conclusion</h2>
    <p>
        The new first-class drag and drop events in HTML5 and Firefox
        make supporting this form of UI interaction simple, concise,
        and powerful in the browser.  But beyond the new simplicity of
        these events, the ability to transfer content between
        applications opens brand new avenues for web-based applications
        and collaboration with desktop software in general.
    </p><p>
    </p><p>
    </p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/07/15/html5-drag-and-drop/feed</wfw:commentRss>
		<slash:comments>62</slash:comments>
		</item>
		<item>
		<title>I (used to) like rev=&#8221;canonical&#8221;</title>
		<link>http://decafbad.com/blog/2009/04/13/i-like-revcanonical</link>
		<comments>http://decafbad.com/blog/2009/04/13/i-like-revcanonical#comments</comments>
		<pubDate>Mon, 13 Apr 2009 06:05:50 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[revcanonical]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[urls]]></category>
		<category><![CDATA[urlshortening]]></category>
		<category><![CDATA[webdev]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1735</guid>
		<description><![CDATA[Update 4/14: So, I liked rev="canonical", but I like the notion of pages offering sets of alternative URLs better.  There are enough cracks in the case for rev="canonical" to stop caring about it and instead focus on the notion behind it.  However it&#8217;s expressed—is it rel="shortlink" now?—the final remaining things I&#8217;d like to [...]]]></description>
			<content:encoded><![CDATA[<p><em>Update 4/14</em>: So, I liked <code>rev="canonical"</code>, but I like the notion of pages offering sets of alternative URLs better.  <a href="http://www.mnot.net/blog/2009/04/14/rev_canonical_bad">There are enough cracks in the case</a> for <code>rev="canonical"</code> to stop caring about it and instead focus on the notion behind it.  However it&#8217;s expressed—is it <a href="http://groups.google.com/group/shortlink"><code>rel="shortlink"</code></a> now?—the final remaining things I&#8217;d like to see are:</p>

<ul>
<li><p>An more generalized scope for alternate URL choices asserted by publishers, not just URL shortening.  Other criteria beyond character length include ease of entry on mobile devices (eg. short, but also simple, maybe mostly numeric), ease of verbal mention (eg. billboards, postcards, etc).</p></li>
<li><p>HTTP headers are great where available—hooray for HEAD—but it still needs to be in the page for publishers who can&#8217;t set custom headers.</p></li>
<li><p>Microformats are great, but I&#8217;d rather not parse a whole page to the footer to lift out the desired URLs.</p></li>
<li><p>Don&#8217;t panic. Have fun.</p></li>
</ul>

<p>And with that, I&#8217;m going to try coming up with other things to write about so this blog doesn&#8217;t stay dormant.  The rest of this entry remains unedited below&#8230;</p>

<p><span id="more-1735"></span>
<hr /></p>

<p><strike>So, like it says up there: I like <a href="http://revcanonical.appspot.com/">rev=&#8221;canonical&#8221;</a>.</strike></p>

<p>Basically, it&#8217;s a way of saying—instead of using that 3rd-party service <em>you</em> like for munging <em>my</em> URLs, use one of these pre-munged URLs I&#8217;ve provided.  Ideally, the URLs I provide will be shorter for your needs, but my URLs won&#8217;t be subject to <a href="http://joshua.schachter.org/2009/04/on-url-shorteners.html">potentially distasteful things I object to with respect to a service you might pick</a>.</p>

<p>I like keeping control of URL spaces in the hands of their publishers.  This also opens the field for more individual choice in URL shortening services, allowing more people to try their hand at building a better mouse trap—or allowing publishers to opt out of the mess altogether.  </p>

<p>And, apropos of that, I tend to like <code>rev="canonical"</code> as the means of expressing this choice.</p>

<p>There&#8217;s a lot more background on this whole shebang, but I&#8217;ll just stick to my $0.02 on the discussion so far.</p>

<h3><a href="http://www.25hoursaday.com/weblog/2009/04/11/revcanonicalDiggBarOutrageCausesBadIdeasToComeOutOfTheWoodWork.aspx">It&#8217;s too alpha geeky to get adopted—also: NERDS!</a></h3>

<p>Alpha geeks write plugins for web publishing systems used by less-alpha geeks, who eventually install web publishing systems for those even further down the geek scale.  It&#8217;s not unheard of for something incredibly nerdy to become relatively common, if it proves useful.</p>

<p>Feed auto-discovery is in blogging software and browsers now—it was once considered a somewhat arcane usage of the <code>rel</code> attribute on <code>&lt;link&gt;</code> tags in HTML <code>&lt;head&gt;</code>.</p>

<h3><a href="http://www.25hoursaday.com/weblog/2009/04/11/revcanonicalDiggBarOutrageCausesBadIdeasToComeOutOfTheWoodWork.aspx">Everyone needs to implement their own URL shortener.</a></h3>

<p>No, but everyone gets to pick a shortener for their own URLs—which could coincidentally be self-hosted or third-party.  Isn&#8217;t the web great?</p>

<h3><a href="http://benramsey.com/archives/a-revcanonical-rebuttal/">The <code>rev</code> attribute is too hard to understand, people will get it wrong</a>.</h3>

<p>I hadn&#8217;t paid much attention to the <code>rev</code> attribute until a week or so ago.  I <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rev">read the HTML spec on links</a> again.  Within 10 minutes of reading the spec, my understanding became this:</p>

<ul>
<li><code>rel="{X}"</code> — &#8220;this link means {X} in relation to the current page&#8221;.</li>
<li><code>rev="{X}"</code> — &#8220;this current page means {X} in relation to this link&#8221;.</li>
</ul>

<p>I may have misunderstood it—if so, explain to me how and I&#8217;ll admit it&#8217;s harder to understand than I think.  There are harder concepts in the HTML 4 spec.</p>

<h3>The <code>rev</code> attribute is removed in HTML5</h3>

<p>That&#8217;s too bad for HTML5.  </p>

<p><a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2006-July/006888.html">The rationale given for the removal</a> seems sensible enough.  But, I&#8217;d say the rationale for removal is weakened if someone finds a use for the attribute and uses it correctly.</p>

<h3><code>rel="shorter"</code> / <code>rel="short"</code> is better and more explicit.</h3>

<p>I like this idea in general, and I don&#8217;t <em>really</em> care strongly enough about <code>rev="canonical"</code> vs <code>rel="short"</code> to make much noise beyond this blog post.  </p>

<p>But, I prefer the semantics of <code>rev="canonical"</code>, I don&#8217;t think <code>rel="short(er)"</code> is better, and actually I think the less explicit assertion is a feature.  I&#8217;ve not yet been convinced otherwise—but realistically, if either catches on, I&#8217;ll probably use the most popular.</p>

<h3><code>rev="canonical"</code> doesn&#8217;t mean &#8220;shorter URL&#8221;</h3>

<p>That&#8217;s okay—what if I don&#8217;t <em>want</em> you to have shortened versions of my URLs?  Doesn&#8217;t fit in your tweet?  Screw you.  I didn&#8217;t want you to link to me that badly anyway.  Bah.  </p>

<p>That, of course, is self-defeating.  Conventional use of the attribute will probably yield shorter URLs out of self-interest.  Furthermore, I could even offer a half-dozen URL variations, and you could use the string length function in the language of your choice to pick one on the basis of shortness.  There&#8217;s a lot of choice to go around here.</p>

<p>Also, feed auto-discovery links don&#8217;t always lead to truly alternate versions of the current page—but instead to a useful set of items, many of which may currently appear somewhere on the page.  So, even the &#8220;clear&#8221; semantics have some play in them as used in the wild.</p>

<h3><a href="http://shiflett.org/blog/2009/apr/a-rev-canonical-http-header">A <code>rev="canonical"</code> HTTP header is better.</a></h3>

<p>Hmm, maybe.  It would certainly allow for possibly lighter-weight HEAD requests in determining the alternative URL for a given URL.  But, I would expect it to fall apart in collections of static HTML pages baked by an offline script where web server configuration might not make setting custom headers easy.</p>

<p>Not everyone has the luxury / inclination to have a dynamic language capable of setting headers running in their web server.</p>

<h3><a href="http://adactio.com/journal/1568/"><code>rev="canonical"</code> should appear on hyperlinks in the body of the page</a></h3>

<p><a href="http://decafbad.com/blog/2005/05/08/whats-old-scraping-is-new-again-microformats">I like microformats</a>, <a href="http://decafbad.com/blog/2005/05/17/magic-microformat-forms">in general</a>.  But, I don&#8217;t really want to potentially parse a whole page to find the shorter URL that might be in the footer.  With <code>rev="canonical"</code> in the <code>&lt;head&gt;</code>, I only have to parse so far before I find it or give up.</p>

<p>There&#8217;s a lot of prior art on this with relation to feed autodiscovery—we used to mainly look for RSS feed URLs inside the page, too.  It sucked.</p>

<h3><a href="http://benramsey.com/archives/a-revcanonical-rebuttal/#comment-288465">Claiming to be canonical for another URL is trouble.</a></h3>

<p>Okay, how about requiring a reciprocal <code>rel="canonical"</code> on the same page with <code>rev="canonical"</code>.</p>

<p>Trust but verify—and only accept <code>rev="canonical"</code> where <code>rel="canonical"</code> matches the current URL <em>and</em> <code>rev="canonical"</code> yields a 301 redirect to the <code>rel="canonical"</code>.</p>

<p>I can&#8217;t see this verification process being necessarily more burdensome than using a 3rd-party shortener API—and that&#8217;s <em>if</em> you&#8217;re paranoid and building an index that needs some measure of resistance to gaming.</p>

<h3><a href="http://samj.net/2009/04/revcanonical-considered-harmful.html?showComment=1239617160000#c7231589643969293690">A single character slip from <code>rev="canonical"</code> to <code>rel="canonical"</code> could wreck your Googlejuice!</a></h3>

<p>So, don&#8217;t do that.  </p>

<p>Maybe Googlejuice should be more resilient.  Maybe it actually is—has anyone actually soured their juice yet with a mistake like this and lived to tell the tale?  </p>

<p>Either way, characters mean things in computer languages, so make sure you use the right ones in the right order.</p>

<h3>You guys are moving on this stuff too fast!</h3>

<p>Welcome to 2002, when lots of us had more spare time than employment and we deployed new crap like this on our blogs and sites daily.  </p>

<p>Back in those olden days, we manipulated raw HTML with our bare hands and deployed radioactive code using our teeth—all without benefit of protective change control.  We probably all have cancer of the access logs now, but it was all in the name of Web Science!</p>

<h3>Too long; didn&#8217;t read</h3>

<p>So, yeah.  I like the idea behind <code>rev="canonical"</code> and I prefer its expression as <code>rev="canonical"</code> best—but the idea is the important thing.  Let&#8217;s get over the expression part fast and spend more time exploring the nuts and bolts and implications of the concept itself.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/04/13/i-like-revcanonical/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>7 facts about me</title>
		<link>http://decafbad.com/blog/2009/01/23/7-facts-about-me</link>
		<comments>http://decafbad.com/blog/2009/01/23/7-facts-about-me#comments</comments>
		<pubDate>Fri, 23 Jan 2009 16:59:54 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[7things]]></category>
		<category><![CDATA[memes]]></category>
		<category><![CDATA[mozilla]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1699</guid>
		<description><![CDATA[So, it finally happened—I&#8217;ve been tagged by Stephen Donner.  I&#8217;ve not been one to follow memes in this blog, but this one&#8217;s been going around the Mozillasphere for awhile now and has been kind of interesting.  I&#8217;m half-tempted to bookmark and tag all the entries I&#8217;ve caught so far.  Anyway, the rules:


Link [...]]]></description>
			<content:encoded><![CDATA[<p>So, it finally happened—<a href="http://weblogs.mozillazine.org/stephend/archives/2009/01/7_facts_about_s.html">I&#8217;ve been tagged by Stephen Donner</a>.  I&#8217;ve not been one to follow memes in this blog, but this one&#8217;s been going around the <a href="http://planet.mozilla.org/">Mozillasphere</a> for awhile now and has been kind of interesting.  I&#8217;m half-tempted to bookmark and tag all the entries I&#8217;ve caught so far.  Anyway, the rules:</p>

<ol>
<li><a href="http://weblogs.mozillazine.org/stephend/archives/2009/01/7_facts_about_s.html">Link to your original tagger(s)</a> and list these rules in your post.</li>
<li>Share seven facts about yourself in the post.</li>
<li><strike>Tag seven people at the end of your post by leaving their names and the links to their blogs.</strike></li>
<li><strike>Let them know they’ve been tagged.</strike></li>
</ol>

<p>Now, for your random facts, after the jump:</p>

<p><span id="more-1699"></span></p>

<ol>
<li>My wife is a nerd, who tracked me down via a user name shown in the webcam picture I used for my Yahoo! Personals ad, in order to avoid paying to reply.  <a href="http://deus-x.livejournal.com/91013.html" title="An old entry on LiveJournal, only a few dates in with my now-wife.">Dial-up BBSes and DOOR games played a part in our courtship</a>.</li>
<li>We have <a href="http://en.wikipedia.org/wiki/Ocicat">two ocicats</a>, littermates named <a href="http://en.wikipedia.org/wiki/Puck_(mythology)">Puck</a> and <a href="http://en.wikipedia.org/wiki/Inanna">Inanna</a>.  They&#8217;re both <a href="http://www.flickr.com/photos/deusx/60975345/in/set-1316941/" title="Look at these cute kitties.">very cute</a> and are <a href="http://www.flickr.com/photos/deusx/60976282/in/set-1316941/" title="Look at these awesome cats.">more awesome</a> than anyone else&#8217;s cats. </li>
<li>I have <a href="http://www.sleepapnea.org/">sleep apnea</a>, and use <a href="http://en.wikipedia.org/wiki/Positive_airway_pressure">a CPAP machine</a> every night.  <a href="http://decafbad.com/blog/2004/12/03/if-you-snore-get-tested-for-sleep-apnea-now" title="No, really, go get tested for sleep apnea if you snore.">If you snore, go get tested</a>.  Heart disease, <a href="http://decafbad.com/blog/2007/09/25/dad" title="RIP Dad.">of which my snoring father died</a>, is one of many possible consequences of untreated sleep apnea.</li>
<li><a href="http://decafbad.com/blog/2003/06/13/newly-digital" title="I was newly digital in 1983">Although I have been a computer nerd since the age of 7</a>, I had the wild notion in starting college that I wanted to be <a href="http://www.algonac.k12.mi.us/ahs/Newspaper/newspaper1.htm" title="I was production editor of my High School newspaper!">a journalist</a> or a psychologist.  Luckily, the web took off during my freshman year, which let me be a little of all the above.  <a href="http://decafbad.com/blog/colophon#growup" title="An explanation of that image at the bottom of the page.">I&#8217;m not sure why I ever thought I&#8217;d be anything other than a computer nerd</a>.</li>
<li>I&#8217;m <a href="http://www.theatlantic.com/doc/200303/rauch">a complete introvert</a> and though I work hard at being sociable, I need a day or two alone for every half-day or so spent being social.  My main coping mechanism since even before my teenage years was to make friends from behind a keyboard and screen, and the internet has made that even more scalable as I&#8217;ve grown up.  And now, I get to work that way too—HUGE SUCCESS!</li>
<li>In my senior year of High School, I won 2nd place in <a href="http://www.aynrand.org/site/PageServer?pagename=education_contests_tf">the Ayn Rand Institute&#8217;s <em>The Fountainhead</em> essay contest</a>.  This was the culmination of having read every scrap of Ayn Rand&#8217;s writing I could get my hands on throughout High School.  I used the money to take a summer trip to visit a friend who&#8217;d moved to Texas and to buy my <a href="http://decafbad.com/blog/2007/09/21/sadness-for-my-dead-palmtop">well used, now dead palmtop PC</a>.</li>
<li>I like extremely hot spicy food, insanely hop-saturated beer, Irish whiskey, and fresh locally roasted coffee.</li>
</ol>

<p><a href="http://blog.mozilla.com/bhearsum/archives/71">Per Ben Hearsum</a>, I think I&#8217;ll make this a leaf node in the meme spanning the <a href="http://planet.mozilla.org/">Mozillasphere</a>.  In a quick 5 minute search, it looks like most blogging Mozillans have already been tagged, and I&#8217;m not going to spread the contagion outside the organization.  :)</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/01/23/7-facts-about-me/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Tags do work (for me, at least)</title>
		<link>http://decafbad.com/blog/2009/01/18/tags-do-work-for-me-at-least</link>
		<comments>http://decafbad.com/blog/2009/01/18/tags-do-work-for-me-at-least#comments</comments>
		<pubDate>Sun, 18 Jan 2009 06:29:34 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[delicious]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[folksonomy]]></category>
		<category><![CDATA[tagging]]></category>
		<category><![CDATA[tags]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1612</guid>
		<description><![CDATA[For the &#8220;too long; didn&#8217;t read&#8221; crowd:


I&#8217;ve been using a lot of tags on Delicious over a relatively long time, so they seem very useful to me.
Delicious encourages the use of tags through UI convention and tool usage patterns, whereas Flickr presents no particular bias toward collecting tags from users.
Since title and description attract more [...]]]></description>
			<content:encoded><![CDATA[<p>For the &#8220;<a href="delicious.com/tag/tl;dr">too long</a>; <a href="http://delicious.com/tag/tldr">didn&#8217;t read</a>&#8221; crowd:</p>

<ul>
<li>I&#8217;ve <a href="http://del.icio.us/deusx">been using a lot of tags on Delicious</a> over a relatively long time, so they seem very useful to me.</li>
<li>Delicious encourages the use of tags through UI convention and tool usage patterns, whereas Flickr presents no particular bias toward collecting tags from users.</li>
<li>Since title and description attract more contribution effort from users on Flickr than on Delicious, it&#8217;s natural that search over those fields will be more productive than for tags.</li>
<li>Search on Delicious doesn&#8217;t have access to the complete text of the bookmarked resource, and often tags will contain information missing from the supplied title or description.</li>
<li>All told, tags on Delicious are more essential than tags on Flickr.</li>
<li>In conclusion, I think <a href="http://www.tekka.net/10/tags.html">Do Tags Work?</a> misses the value of tags, as I know them, by focusing on Flickr.</li>
</ul>

<p>Of course, I don&#8217;t really care what this means for folksonomy and the rest of Web 2.0—tags work for me on Delicious.  So, I suspect this means I&#8217;m not <em>entirely</em> opposed to the sentiment in <a href="http://www.tekka.net/10/tags.html">Do Tags Work?</a>, because I don&#8217;t think tags work everywhere their use is attempted.</p>

<p>The rest of this entry elaborates on the above.</p>

<p><span id="more-1612"></span></p>

<p>From Cathy Marshall&#8217;s <a href="http://www.tekka.net/10/tags.html">Do Tags Work?</a>:</p>

<blockquote>Have I convinced you that tags aren&#8217;t all they&#8217;ve cracked up to be? I hope I have, but nonetheless there&#8217;s a lingering fascination. Surely there&#8217;s something to be done about tags: we don&#8217;t want to just turn up our noses at Mr. Weinberger&#8217;s argument.</blockquote>

<p>From Mark Bernstein&#8217;s <a href="http://www.markbernstein.org/Jan09/InTEKKATags.html">In TEKKA: Tags</a>:</p>

<blockquote>
The study could be repeated on more images, and in additional contexts. It might be bad luck. But if it’s a repeatable result — and I think we all know it is — then we’re going to have to rethink a lot of our Web 2.0 rhetoric. Folksonomy is an illusion.</blockquote>

<p>From my <a href="http://delicious.com/url/125aaf42e2dfbf53b1cb8672d584bbdd#item-125aaf42e2dfbf53b1cb8672d584bbdd972759">bookmark on Delicious</a>:</p>

<blockquote>If you can get past the rambling paragraphs of awkward fun-poking at tags interspersed with library science / web 2.0 / cultural references—as well as a discovery of what, you know, Flickr is all about—there&#8217;s a well-embellished and obsessively-assembled statistical analysis of tags vs title vs notes in finding photos featuring tourist heel-spinning on the testicles of a bull mosaic in Milan. My impression is that she&#8217;s missed the point of tags, but I&#8217;m having trouble reducing the impression to a critique.</blockquote>

<p>It might be that I&#8217;m intimidated by the writing in <a href="http://www.tekka.net/10/tags.html">Do Tags Work?</a> or by the fact that a lot of work was done to produce numbers I can&#8217;t dispute.  Either way, I have neither the time to produce a counter-study nor the wherewithal to extract and refute points in that article with precision.  So, I&#8217;m just going to throw my impressions out there and hope they coalesce.</p>

<ul>
<li>Tags are extremely useful to me.
<ul><li>I&#8217;ve been using tags on Delicious since shortly after the site was created.  </li>
<li>To date, <a href="http://del.icio.us/deusx">I&#8217;ve saved 11825 bookmarks and spawned 6069 tags</a>.  (More on that ratio later.)  </li>
<li>Tags have worked very well for me, both in later finding my own saved resources and in finding aggregates of others&#8217;.</li></ul></li>
<li>Flickr is not the poster child of tagging—Delicious is.<br />
<ul><li>On Flickr, I&#8217;ve found tags occasionally interesting, but not incredibly so.  More a curiosity than a killer feature, really.  (More on that in a bit, too.)</li>
<li>To be honest, I&#8217;ve not found a great deal of use for tags around Web 2.0 properties beyond Delicious, folksonomy hype notwithstanding.  </li>
<li>Fun fact: When I worked on Delicious, we disliked the term &#8220;<a href="http://en.wikipedia.org/wiki/Folksonomy">folksonomy</a>&#8221; and tried never to use it in serious discussion.</li></ul></li>
<li>The places where I&#8217;ve found tags useful are text-heavy, where the full text is either not indexed or not displayed in results when using search.
<ul><li>Consider magazine articles or blog posts bookmarked on Delicious.</li>
<li>Those bookmarks are subject to the character limits of title or description fields.  </li>
<li>Far more often than on Flickr, there is information in tags not present in a bookmark&#8217;s title or description.</li></ul></li>
<li>On Delicious, the use of bookmarklets and extensions is the primary source of new bookmarks.<br />
<ul><li>These tools tend to produce a title based on the original bookmarked page and, when present, a description summarized from the page contents by way of highlighted text.</li>
<li>With this in mind, consider that tags often make up the <strong>sole intentional contribution</strong> made to the bookmark by the person saving it.<br />
<ul><li>Beyond the choice to save the bookmark in the first place, that is.</li></ul></li>
<li>Whereas on Flickr, the effort is spent on title and, sometimes, the description.  Beyond that point, tags are an afterthought, at best.</li></ul></li>
<li>The user interface of tagging is near effortless versus, say, formal taxonomies or nested folders.<br />
<ul><li>Even the much-debated choice of the big, fat space bar as a delimiter supports minimal effort.</li>
<li>Minimal effort lowers mental cost, which promotes more noise, but also encourages more input (or  any input) and thus more signal overall.</li>
<li>People have limited attention span budgets from which useful metadata can be solicited.  Tagging lowers the budget requirement.</li></ul></li>
<li>The reason why I have generated a ratio of 1 new tag for every 2 bookmarks is that I use tags in a way akin to free association, made possible by the low cost of tagging.<br />
<ul><li><strong>This is a feature, not a bug.</strong></li>
<li>I have many, many tags used only once and never again—some of them are, in fact, jokes.  </li>
<li>But, I have generated some tags that I&#8217;ve come to adopt more heavily, most of which proved surprisingly useful over months or years of recurrence.</li>
<li>As for those tags I&#8217;ve never used again: They cost nothing, can be hidden below visibility thresholds, and can be merged later into more appropriate tags if I care to do so.</li></ul></li>
</ul>

<p>And, there&#8217;s where I run out of steam.  For the conclusion, go back to the beginning of this entry.  Biased though I might be, I think Delicious is the place to study tagging, and there they&#8217;re of great use.  This is where I think <a href="http://www.tekka.net/10/tags.html">Do Tags Work?</a> misses the value, despite the volume of writing and data.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/01/18/tags-do-work-for-me-at-least/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Enter the LizardFeeder</title>
		<link>http://decafbad.com/blog/2009/01/05/enter-the-lizardfeeder</link>
		<comments>http://decafbad.com/blog/2009/01/05/enter-the-lizardfeeder#comments</comments>
		<pubDate>Tue, 06 Jan 2009 00:01:54 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[activitystreams]]></category>
		<category><![CDATA[atom]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[lizardfeeder]]></category>
		<category><![CDATA[mozilla]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[webdev]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1533</guid>
		<description><![CDATA[Behind Firefox is Mozilla, and behind Mozilla is a community.  And the Mozilla community acts a lot like an ecosystem, which can be visualized as a kind of living tree—not to confused with the mozilla-central tree.  Oh yeah, and Mozilla is the name of both a Foundation and a Corporation.

Confused yet?  If [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1582" class="wp-caption alignright" style="width: 257px"><a href="http://blog.lizardwrangler.com/2008/07/29/the-mozilla-tree/"><img src="http://decafbad.com/blog/wp-content/uploads/2009/01/moz-tree.jpg" alt="The Mozilla Tree" title="moz-tree" width="247" height="191" class="size-full wp-image-1582" /></a><p class="wp-caption-text">The Mozilla Tree</p></div>

<p>Behind Firefox is Mozilla, and behind Mozilla is a community.  And the Mozilla community acts a lot like an ecosystem, which can be visualized <a href="http://blog.lizardwrangler.com/2008/07/29/the-mozilla-tree/">as a kind of living tree</a>—not to confused with the <a href="https://developer.mozilla.org/en/mozilla-central">mozilla-central tree</a>.  Oh yeah, and Mozilla is the name of <a href="http://www.mozilla.org/reorganization/">both a Foundation and a Corporation</a>.</p>

<p>Confused yet?  If not, then we should talk so you can explain it to me, because it all looks pretty tangly and <a href="http://en.wikipedia.org/wiki/Intertwingularity">intertwingled</a> to me.  Nonetheless, it seems to work, and produces a good chunk of my favorite software and technologies.</p>

<p>There are many efforts to track what&#8217;s going on—including <a href="http://planet.mozilla.org/">planets</a> and <a href="http://blog.mozilla.com/about_mozilla/">newsletters</a> and <a href="https://bugzilla.mozilla.org/">bugzillas</a> and <a href="https://wiki.mozilla.org/WeeklyUpdates/2009-01-05">wikis</a> and <a href="http://hg.mozilla.org/">repositories</a> and <a href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=Firefox">tinderboxen</a>.  Some of these resources report on, or are driven by, the activity occurring in the others.  Some are automated, and others are carefully stitched together by hand.  None offer a full picture of what&#8217;s going on in the <a href="http://ascher.ca/blog/2008/06/19/whats-mozillas-scope-what-should-it-be/">Mozilla galaxy</a> in a way that&#8217;s casually comprehensible by a sane human being.</p>

<p>Of course, that&#8217;s not a slight against any of these sites or the people maintaining them—extracting an overview from such an organic phenomenon is neither easy nor straightforward.  But, it might be fun to try.</p>

<p>As an infovore and avid practitioner of <a href="http://decafbad.com/blog/2005/09/23/the-zen-of-firehose-drinking">continuous partial attention</a>, my first impulse is to reach for a firehose and stick my head into the stream.  Relax, defocus, and try to let my pattern recognizers do their thing—sometimes those pattern recognizers are in my head, and <a href="http://decafbad.com/hgwebdir.cgi/hacking_rss_and_atom/file/f7a85b9fd48a/ch15_popular_links.py">sometimes they&#8217;re written in Python</a>.</p>

<div id="attachment_1585" class="wp-caption alignright" style="width: 235px"><a href="http://www.flickr.com/photos/intothefuzz/2571283860/in/set-72157605179678562/"><img src="http://decafbad.com/blog/wp-content/uploads/2009/01/robo-225x300.jpg" alt="Firefox Victory Robot" title="firefox-victory" width="225" height="300" class="size-medium wp-image-1585" /></a><p class="wp-caption-text">Firefox Victory!</p></div>

<p>But, for Mozilla, I couldn&#8217;t find a stream of sufficient volume or completeness to satisfy me or <a href="http://www.digitpress.com/dpsoundz/destroyhimrobots.wav">my robots</a>.  Happily, though, my feeding urge found itself aligned with a project to discover the patterns of contribution in the Mozilla community and to find a way to thank the contributors responsible.</p>

<p>So, while we&#8217;re still working on the thank-you angle, allow me to introduce you to <a href="http://feeds.mozilla.com/">the Lizardfeeder</a>.  The <a href="http://feeds.mozilla.com/">LizardFeeder</a> is a feed aggregator, <a href="https://svn.mozilla.org/projects/lizardfeeder/trunk/">whose source code</a> is built atop <a href="http://www.intertwingly.net/code/venus/">Sam Ruby&#8217;s Planet Venus</a>. The <a href="http://feeds.mozilla.com/">LizardFeeder</a> pulls together and archives activity streams from a wide variety of Mozilla community sources.  Beyond the usual human-readable pages produced by a <a href="http://planet.mozilla.org/">blog-gathering Planet</a>, the <a href="http://feeds.mozilla.com/">LizardFeeder</a> accumulates <a href="http://feeds.mozilla.com/archives/index.json">statistical and historical data</a> meant for consumption and analysis by robots.</p>

<p>At present, the only robot navigating the <a href="http://feeds.mozilla.com/">LizardFeeder</a> archives is an AJAX-ified user interface that animates the firehose as a near real-time or time-lapsed stream of events scrolling by.  </p>

<p>This is just meant as a conversation starter, though.  I&#8217;m hoping to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=469838">gather feedback and find more sources</a>, as well as to entice creative community members to come up with more sophisticated visualizations of this data.  </p>

<p>So, take a look, <a href="http://feeds.mozilla.com/">check it out</a>, and let me know what you think!</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/01/05/enter-the-lizardfeeder/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
<enclosure url="http://www.digitpress.com/dpsoundz/destroyhimrobots.wav" length="27236" type="audio/x-wav" />
		</item>
		<item>
		<title>Resolutions</title>
		<link>http://decafbad.com/blog/2009/01/05/resolutions</link>
		<comments>http://decafbad.com/blog/2009/01/05/resolutions#comments</comments>
		<pubDate>Mon, 05 Jan 2009 19:10:22 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1524</guid>
		<description><![CDATA[So, after all that, I suppose the thing to do for a new year is to figure out what&#8217;s next, maybe compose some disposable resolutions for the coming months. Well, here are some off the top of my head:


Spend time with my lovely wife.
Eat less, move more.
Write more.
Be a valuable contributor at Mozilla.
Make a few [...]]]></description>
			<content:encoded><![CDATA[<p>So, <a href="http://decafbad.com/blog/2009/01/05/three-years-in-review">after all that</a>, I suppose the thing to do for a new year is to figure out what&#8217;s next, maybe compose some disposable resolutions for the coming months. Well, here are some off the top of my head:</p>

<ul>
<li>Spend time with my lovely wife.</li>
<li>Eat less, move more.</li>
<li>Write more.</li>
<li>Be a valuable contributor at Mozilla.</li>
<li>Make a few new friends.</li>
<li>Spend time with friends.</li>
<li>Paint the front porch.</li>
<li>Treat the back deck.</li>
<li>Reseed the lawn.</li>
<li>Maybe grow a garden.</li>
<li>Maybe learn Haskell.</li>
</ul>

<p>Note that most of what&#8217;s happened in my life <a href="http://decafbad.com/blog/2009/01/05/three-years-in-review">over the past 3 years</a> is missing from that list.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/01/05/resolutions/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Three Years in Review</title>
		<link>http://decafbad.com/blog/2009/01/05/three-years-in-review</link>
		<comments>http://decafbad.com/blog/2009/01/05/three-years-in-review#comments</comments>
		<pubDate>Mon, 05 Jan 2009 19:09:22 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1496</guid>
		<description><![CDATA[It&#8217;s been a busy 3 years or so.  

Yes, this promises to be one of those posts I seem to keep writing.  It&#8217;s not quite LiveJournal material, but it&#8217;ll be completely devoid of code or any notable geekery—so feel free to move along.

In late 2005 to early 2006, after a busy and stressful [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a busy 3 years or so.  </p>

<p>Yes, this promises to be one of <em>those</em> posts I seem to keep writing.  It&#8217;s not <em>quite</em> LiveJournal material, but it&#8217;ll be completely devoid of code or any notable geekery—so feel free to move along.</p>

<p>In late 2005 to early 2006, after <a href="http://decafbad.com/blog/2006/02/07/reading-lists-for-auto-shows">a busy and stressful Autoshow season working at Organic</a>, I finished <a href="http://decafbad.com/blog/2005/12/14/hacking-delicious-is-a-real-book">a book on del.icio.us</a>. Meanwhile, the girl and I prepared for a wedding and a <a href="http://decafbad.com/blog/2006/04/25/a-honeymoon-in-san-francisco">honeymoon in San Francisco</a>. Unexpectedly, I got offered a job at Yahoo! a month or so before getting married. <a href="http://decafbad.com/blog/2006/06/09/wedding-day-is-today">We got married on June 9, 2006</a>. We had a honeymoon in San Francisco. Then, less than a month after that, <a href="http://decafbad.com/blog/2006/06/24/go-west-young-man">we moved to Santa Clara and I started at Yahoo! working on del.icio.us</a>.</p>

<p>Three months <a href="http://decafbad.com/blog/2006/07/25/youngmangonewest">after moving to Santa Clara</a>, I <a href="http://decafbad.com/blog/2006/09/18/just-call-me-crash">got injured and lived in a Vicodin-fueled haze on the couch for a month or two</a>. I limped around through to Spring 2007, <a href="http://decafbad.com/blog/2006/10/02/back-in-the-saddle-again">back to work</a> and occasionally trying to make it to geek events like <a href="http://superhappydevhouse.org/LesOrchard">SuperHappyDevHouse</a>. At Yahoo!, <a href="http://blog.delicious.com/blog/2008/01/using-delicious-on-your-iphone.html" title="the team has been heads down working on the next version of Delicious We’ll have an update to share with you guys next week.">we started complete ground-up rewrite work on Delicious 2</a> with a <a href="http://blog.delicious.com/blog/2007/04/we_are_hiring.html">much expanded team</a>. <a href="http://decafbad.com/blog/2007/05/16/hack-day-in-london">I went to Hack Day London</a>, but couldn&#8217;t say much about Delicious. <a href="http://blog.delicious.com/blog/2007/07/usability-lab.html">We continued working on Delicious 2 throughout the Summer of 2007</a>.</p>

<p><a href="http://decafbad.com/blog/2007/09/25/dad">My Dad passed away in August of 2007</a>, and we flew back to Michigan to take care of things. From remote, at my Mom&#8217;s house in Michigan, I worked a little on Delicious 2. <a href="http://blog.delicious.com/blog/2007/09/taste-test.html">It seemed so close to launch</a>, and I wanted distractions. Then, after a month or so back in CA, I started work on a new <a href="http://www.wiley.com/WileyCDA/WileyTitle/productCd-047038459X.html">JavaScript book</a>. <a href="http://blog.delicious.com/blog/2008/01/using-delicious-on-your-iphone.html" title="the team has been heads down working on the next version of Delicious We’ll have an update to share with you guys next week.">Work on Delicious 2 trudged on</a>. I took on more work for the JavaScript book. We didn&#8217;t go out much at all, and weren&#8217;t all that happy. The holidays were particularly hard.</p>

<p>Around that point, my wife and I got fed up with our state of affairs in the Bay Area and decided it was time for things to change. Having gotten injured and couch-bound right at the beginning probably didn&#8217;t help, but we never quite felt at home in California. I still have a lot of <a href="http://decafbad.vox.com/library/post/so-simultaneously-extraordinary-and-mundane.html">starry-eyed regard</a> for <a href="http://bits.blogs.nytimes.com/2008/09/12/buying-tomatoes-at-the-birthplace-of-silicon-valley/?apage=2">the birthplace of Silicon Valley</a> and all, but for us it&#8217;s maybe a better place to visit than to live.</p>

<p>In early 2008, <a href="http://www.flickr.com/photos/missadroit/sets/72157605078355701/">my wife found us a wonderful house in Michigan</a>. Work on Delicious 2 hadn&#8217;t yet completed, but <a href="http://twitter.com/lmorchard/statuses/787565793">I left Yahoo! anyway</a>. I changed jobs twice in one month, <a href="http://twitter.com/lmorchard/statuses/804009957">finally landing at Mozilla</a>. After 6 weeks or so of working from Mountain View, <a href="http://decafbad.com/blog/2008/05/14/go-midwest-young-man">we left California and moved into our new house back in our home state</a>. Relatives and old friends were suddenly thousands of miles closer, and we got out of the house more in the first 2 weeks than we had in the previous 2 years. Telecommuting for Mozilla presented me with <a href="http://decafbad.com/blog/2008/05/22/week-3-at-mozilla">a steep learning curve</a>, but <a href="http://www.flickr.com/photos/deusx/2867692971/">an undeniably great working arrangement</a>.</p>

<p>Finally, more than half a year later, I&#8217;m still at Mozilla and they seem to like me there so far. Also, <a href="http://decafbad.com/blog/2008/12/19/the-concise-guide-to-dojo-is-a-real-book">part of my work on the JavaScript book has made it to the shelves</a> in the form of the <a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=0470452021" title="BUY MY BOOK!">Concise Guide to Dojo</a>. This past summer, <a href="http://decafbad.com/blog/2008/08/04/delicious-20-is-more-than-a-pretty-new-face">Delicious 2 finally launched</a>—and though I&#8217;m sad not to have been there when the finish line was crossed, I still think leaving was the best decision for me and mine. We&#8217;ve settled into the new house, and I&#8217;ve been gradually trying to leave the hermitage to get into the happenings in the Ann Arbor / Detroit area, of which there seem to be an interestingly growing number.</p>

<p>And, that&#8217;s pretty much the past 3 years&#8217; exhausting adventure so far&#8230; <a href="http://decafbad.com/blog/2009/01/05/resolutions">what&#8217;s next</a>?</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2009/01/05/three-years-in-review/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>The Concise Guide to Dojo is a real book!</title>
		<link>http://decafbad.com/blog/2008/12/19/the-concise-guide-to-dojo-is-a-real-book</link>
		<comments>http://decafbad.com/blog/2008/12/19/the-concise-guide-to-dojo-is-a-real-book#comments</comments>
		<pubDate>Sat, 20 Dec 2008 03:35:16 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1473</guid>
		<description><![CDATA[This year has been a doozy.  A full account of it would fill a book, so it&#8217;s telling that I&#8217;ve neglected to raise much of a fuss about the fact that I actually have been working on a new book.  Not only that, but part of that book has been spun off into [...]]]></description>
			<content:encoded><![CDATA[<p>This year has been a doozy.  A full account of it would fill a book, so it&#8217;s telling that I&#8217;ve neglected to raise much of a fuss about the fact that I <a href="http://www.amazon.com/gp/product/047038459X?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=047038459X">actually <em>have</em> been working on a new book</a>.  Not only that, but part of <em>that</em> book has been spun off into <a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=0470452021">yet another book of its own</a>:</p>

<p><a href="http://www.flickr.com/photos/deusx/3119942359/"><img src="http://farm4.static.flickr.com/3117/3119942359_9e5b32fa13.jpg?v=0"/></a></p>

<p>So what is this new book of mine?  Well, besides being a showcase for my lovely author photo (thanks Wrox!), it&#8217;s the result of having spent several months&#8217; worth of <a href="http://twitter.com/lmorchard/status/744700442">very early mornings</a> pouring line-by-line over the source code of <a href="http://dojotoolkit.org/">the Dojo JavaScript framework</a> and making the rounds by assorted community resources—all in an effort to cook up a distilled guide of a little over 250 pages.  </p>

<p>I&#8217;ve tinkered with various releases of <a href="http://dojotoolkit.org/">Dojo</a> over the years—so I didn&#8217;t just drop into this cold.  However, this book project represents an intensive push to really wrap my head around the latest releases and share the process on paper.  As such, this isn&#8217;t a book of case studies or in-depth projects.  Instead, you should be able to flip to any section and drop straight into succinct explanations and demonstrations of the various utilities and facilities offered by <a href="http://dojotoolkit.org/">the Dojo framework</a>.  You&#8217;ll find all of the usual bits and bobs offered by modern JavaScript frameworks, but I&#8217;m hoping I&#8217;ve been able to surface a few of the more unique advantages offered by <a href="http://dojotoolkit.org/">Dojo</a>.</p>

<p>Essentially, this book is a better written, professionally edited version of the sort of reference notebook I assemble for myself whenever my <a href="http://decafbad.com/blog/2006/05/26/confessions-of-a-serial-enthusiast">serial enthusiasm</a> strikes and I go headlong into a new technology.  Usually these end up in a private laptop wiki or text file, occasionally as a blog post, but this one got turned into a book.  I&#8217;m prone to embarrassment about the condition of the former, but hopefully you&#8217;ll find that the extra effort put into the latter by myself and my editors make it worth the &#8220;Programmer to Programmer&#8221; sentiment behind the Wrox imprint.</p>

<p>At any rate, <a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=0470452021">go order a copy</a> for yourself.  Hell, order another few for (belated) stocking-stuffers.  Then, stop by the <a href="http://p2p.wrox.com/book-concise-guide-dojo-isbn-978-0-470-45202-8-431/">book forum hosted by Wrox</a> and let me know what you think.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/12/19/the-concise-guide-to-dojo-is-a-real-book/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>An unnecessary Template Attribute Language</title>
		<link>http://decafbad.com/blog/2008/11/01/an-unnecessary-template-attribute-language</link>
		<comments>http://decafbad.com/blog/2008/11/01/an-unnecessary-template-attribute-language#comments</comments>
		<pubDate>Sat, 01 Nov 2008 20:23:23 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[tal]]></category>
		<category><![CDATA[templates]]></category>
		<category><![CDATA[webdev]]></category>
		<category><![CDATA[zope]]></category>
		<category><![CDATA[zpt]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1450</guid>
		<description><![CDATA[A funny thing happened on the way to building a delayed real-time feed display:  I got temporarily obsessed with implementing a template language in JavaScript that, as it turned out later, I didn&#8217;t need.  About the feed project itself, I hope to write more soon—but for now I want to get this extra [...]]]></description>
			<content:encoded><![CDATA[<p>A funny thing happened on the way to building <a href="http://svn.mozilla.org/projects/lizardfeeder/trunk/">a delayed real-time feed display</a>:  I got temporarily obsessed with implementing <a href="http://github.com/lmorchard/jquery-tal-template/tree/master">a template language in JavaScript</a> that, as it turned out later, I didn&#8217;t need.  About <a href="http://svn.mozilla.org/projects/lizardfeeder/trunk/">the feed project itself</a>, I hope to write more soon—but for now I want to get this extra template language thing out of my system and see if anyone else might have a use for it.</p>

<p>See, I had a notion it would be keen if I had access to the same template language on the client as on the server.  I needed to render a number of list items statically on the server with feed entries, then update that list with new entries on the client as they became available through JSON feed polling.  It&#8217;d be a pain in the butt to maintain two separate list item templates for client and server, so I reached for a shared template language.</p>

<p>Never mind that I&#8217;d just gotten done writing <a href="http://www.amazon.com/gp/product/0470452021?ie=UTF8&amp;tag=0xdecafbad01-20&amp;linkCode=as2&amp;camp=1789&amp;c%0D%0Areative=9325&amp;creativeASIN=0470452021">a small book on Dojo</a>, and was already aware of the existence of the <a href="http://svn.dojotoolkit.org/src/dojox/trunk/dtl/README">DojoX Django Template Language</a>.  This might&#8217;ve worked, since the server end of things was written in Python (though not with Django).  That the JavaScript side already used <a href="http://jquery.com/">jQuery</a> wasn&#8217;t <em>too</em> tall a hurdle.  Also, I&#8217;m sure there are a handful of other JavaScript/Python template language match-ups to be found.</p>

<p>But, let&#8217;s be honest here:  I&#8217;ve always been a fan of Zope&#8217;s <a href="http://wiki.zope.org/ZPT/TALSpecification14">Template Attribute Language</a> for their <a href="http://wiki.zope.org/ZPT/FrontPage">Page Templates</a>, and have long wondered how hard it would be to implement.  The concept seems so much cleaner to me than most string-formatting template languages, and the workflow from mockup-to-template and back again has always been appealing to me when it works.  So, when my first few experimental steps in trying my hand at it actually started working, I couldn&#8217;t stop coding.  </p>

<p>And now, <a href="http://github.com/lmorchard/jquery-tal-template/tree/master/jquery.taltemplate.js">the thing</a> is mostly done.  It has no tests, has features left undone, and probably yields plenty of bugs—but I finished it enough to use it practically, and that was long enough to convince me it wasn&#8217;t the right tool for the job.  </p>

<p>Still, though, I can&#8217;t help thinking it might be the right tool for <em>some</em> job.  That could be because I spent a lot of time on it, or that I&#8217;m unreasonably fond of <a href="http://wiki.zope.org/ZPT/TALSpecification14">TAL</a>, but it still feels like a decent little plugin to have on hand.  Maybe someone reading this will have a similar conclusion.</p>

<p>Oh and by the way, plain <a href="http://jquery.com/">jQuery</a> turned out to be a better tool for <a href="http://svn.mozilla.org/projects/lizardfeeder/trunk/">the job in question</a>.  This seems to nicely balance the duplicate effort between server and client, demanding only that I stick with semantically significant CSS class names in the server template—something I should be doing anyway:</p>

<pre><code>        // Clone and populate a new entry.
        var new_item = $('#feed-items .entry:last')
            .clone()
            .attr('class', entry_classes.join(' ')) 
            .find('.group span')
                .text(tags['group'])
            .end()
            .find('.title')
                .find('.favicon')
                    .attr('src', favicon)
                .end()
                .find('.link')
                    .attr('href', entry.link)
                    .text(entry.title)
                .end()
            .end()
            .find('.updated')
                .find('.timeago')
                    .attr('title', entry.updated)
                    .text(entry_updated.strftime('%+'))
                    .timeago()
                .end()
                .find('.time')
                    .text(entry_updated.strftime('%I:%M %p'))
                .end()
            .end()
            .find('.author')
                .text(entry.author || 'n/a')
            .end()
            .prependTo('#feed-items')
            .hide();
</code></pre>

<p>Of course, <em>plain</em> is a relative term here.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/11/01/an-unnecessary-template-attribute-language/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Jelly Stains and Web Masons</title>
		<link>http://decafbad.com/blog/2008/10/29/jelly-stains-and-web-masons</link>
		<comments>http://decafbad.com/blog/2008/10/29/jelly-stains-and-web-masons#comments</comments>
		<pubDate>Wed, 29 Oct 2008 15:42:23 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[books]]></category>
		<category><![CDATA[jellystains]]></category>
		<category><![CDATA[webdev]]></category>
		<category><![CDATA[webmasons]]></category>
		<category><![CDATA[webscience]]></category>
		<category><![CDATA[webscientists]]></category>
		<category><![CDATA[writing]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1424</guid>
		<description><![CDATA[From Mark Bernstein&#8217;s entry on Practical Prototype and script.aculo.us:


  When chemists consult a volume about professional chemical technique, or when surgeons reach for the latest update on neuroanatomy, they can usually find a book that isn&#8217;t couched in terms of silly examples and jokes. So can poets, mathematicians, and geologists. For some reason, though, [...]]]></description>
			<content:encoded><![CDATA[<p>From Mark Bernstein&#8217;s entry on <a href="http://www.markbernstein.org/Oct0801/PracticalPrototypeandscrip.html">Practical Prototype and script.aculo.us</a>:</p>

<blockquote>
  <p>When chemists consult a volume about professional chemical technique, or when surgeons reach for the latest update on neuroanatomy, they can usually find a book that isn&#8217;t couched in terms of silly examples and jokes. So can poets, mathematicians, and geologists. For some reason, though, it has become the accepted practice that language manuals should spend lots of time with silly, self-deprecating jokes, and that their example applications should be breakfast loggers and fantasy football leagues (or, conversely, payroll programs).</p>
</blockquote>

<p>As an tech author with just a few books under my belt, Mark&#8217;s take on <a href="http://www.amazon.com/gp/product/1590599195?ie=UTF8&amp;tag=0xdecafbad-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1590599195">Practical Prototype and script.aculo.us</a> struck a bit of a sour note for me, because I&#8217;d like to work on making my tech writing more entertaining than not.  I think that&#8217;s a good thing, but I&#8217;m willing to be convinced otherwise.</p>

<p>I think the issue is that there are different meanings for &#8220;professional&#8221; when it comes to the web.  There are web scientists and there are web masons.  Web scientists pursue fundamentals and disambiguations, while web masons are busy building the next micro-site for the new product release from the almighty client.  Many web scientists are also computer scientists and many web masons are also web scientists—but most web masons I&#8217;ve known come from creative liberal or fine arts backgrounds.</p>

<p>Though, for what it&#8217;s worth, even amongst computer scientists there&#8217;s still a tradition of <a href="http://www.amazon.com/Little-Schemer-Daniel-P-Friedman/dp/0262560992/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1225292376&amp;sr=8-1">leaving room for jelly stains</a> and other oddities.  This seems to be the sort of thing Mark acknowledges with dismay.  (&#8220;It’s not fair to blame Mr. DuPont for the general vice.&#8221;)</p>

<p>Is playfulness in literature just a computer science thing?  I&#8217;m not a chemist; maybe chemists just  don&#8217;t like being funny in writing, or maybe their jokes are more subtle.</p>

<p>In any case, I think the &#8220;practical&#8221; genre of tech books is aimed at people who want to get something done, aren&#8217;t interested in or have little time for context or background, yet wouldn&#8217;t mind being entertained during the course of weekend tinkering and self-education.</p>

<blockquote>
  <p>So, a good book. But take out the jokes, trim back the sample code (or dispatch it to the Web site where it makes more sense), and give us to professional perspective, and everyone is going to be much happier.</p>
</blockquote>

<p>The guidelines with which I&#8217;m familiar for tech books in the &#8220;practical&#8221; or similar genres include advice such as &#8220;show, don&#8217;t tell&#8221;.  They also suggest that, although sample code should be made available online, the author should compose the book assuming that it&#8217;s a standalone product.  Web sites and CDROMs with code often vanish, but a bound book remains stable—which is especially useful on a cross-country flight without net access.  Professional perspective is of course a desirable thing to work into the prose, but job #1 is to illustrate the right way to do things through running code.</p>

<blockquote>
  <p>How does Prototype+Javascript relate to other languages — C++/STL, say, or SELF? What, precisely, are the semantics of the key methods? I don&#8217;t need the inevitable chapter 1 pitch for the wonderfulness of Javascript and the badness of MSIE, but it might be a good place for a quick summary for the pros. Call by reference • no pointers • primitives are objects • everything has a prototype slot • parens() do this, braces {} do that, brackets [] do something else • single and double quotes are different. Kernighan &amp; Ritchie did this so well in C, and it’s not like we’re not familiar with their example.</p>
</blockquote>

<p>I&#8217;d posit that most in the audience for &#8220;practical&#8221; tech books are entirely unfamiliar with Kernigan &amp; Ritchie and haven&#8217;t touched a line of C source code.  Most of these readers have probably tumbled down the slope from HTML to CSS and finally to JavaScript in order to get something interesting to happen in a browser—and usually while under an unreasonable deadline.</p>

<p>I&#8217;d really be surprised if many readers have heard of <a href="http://en.wikipedia.org/wiki/Self_programming_language">Self</a> or <a href="http://en.wikipedia.org/wiki/Standard_Template_Library">C++/STL</a> or have much of a grounding at all in computer science or programming language fundamentals.  Having these fundamentals would of course help web masons get a deeper understanding of the technologies that make the job possible, but the pragmatic rewards tend not to make up for the effort involved.</p>

<p>So, to sum up, the purpose for this entry isn&#8217;t to beat up on Mark Bernstein.  He&#8217;s written a great deal of prose and code that I respect, so his opinion is interesting to me.  Rather, I&#8217;ve tried to express my own understanding of this writing market, and hoping I&#8217;ve aimed at the right goals.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/10/29/jelly-stains-and-web-masons/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Upgrades versus Antiques</title>
		<link>http://decafbad.com/blog/2008/10/19/upgrades-versus-antiques</link>
		<comments>http://decafbad.com/blog/2008/10/19/upgrades-versus-antiques#comments</comments>
		<pubDate>Sun, 19 Oct 2008 17:07:19 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[hardware]]></category>
		<category><![CDATA[laptops]]></category>
		<category><![CDATA[pcs]]></category>
		<category><![CDATA[personalcomputers]]></category>
		<category><![CDATA[sustainability]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1407</guid>
		<description><![CDATA[From Greenmonk: The Blog &#8211; Cherish The AIR? Just because you can doesn’t mean you should:


  &#8230;the core idea that should be upheld by companies like Apple should be about making things better and less often. Making things that will be able to evolve, be upgraded, be adaptable, hackable and more fun to use [...]]]></description>
			<content:encoded><![CDATA[<p>From <a href="http://greenmonk.net/?p=111">Greenmonk: The Blog &#8211; Cherish The AIR? Just because you can doesn’t mean you should</a>:</p>

<blockquote>
  <p>&#8230;the core idea that should be upheld by companies like Apple should be about making things better and less often. Making things that will be able to evolve, be upgraded, be adaptable, hackable and more fun to use for longer so that as a customer I don’t think that I’m buying version 3.4 of something that will only be as good as it’s last press release. I want to buy “the” quintessential Apple product and cherish it for years, like people would cherish a vintage car.</p>
</blockquote>

<p>From <a href="http://describe.blogspot.com/2008/10/upgrade-treadmill-is-wearing-us-out.html">De-Scribed: The upgrade treadmill is wearing us out</a>:</p>

<blockquote>
  <p>Replace &#8220;quintessential Apple product&#8221; with pretty much &#8220;any product&#8221; (use your imagination) and you start to get at a shift in both attitude and culture that would solve a lot of problems. Get off the upgrade treadmill. There are already too many others.</p>
</blockquote>

<p>When&#8217;s the last time you upgraded your watch to one with a more reliable chronometer?  Bought a new pen with a better ink formulation or superior delivery mechanism?  You may, of course, <a href="http://delicious.com/deusx/pens">be an exception</a>—but there are a lot of other personal artifacts that have reached similar plateaus for most, where the classic vintage version is every bit as useful as the modern iteration.</p>

<p>I keep wondering when personal computers will hit a flat spot in Moore&#8217;s Law.  Or, failing that, <a href="http://www.amazon.com/Invisible-Computer-Products-Information-Appliances/dp/0262640414/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1224345788&amp;sr=1-1&amp;tag=0xdecafbad01-20">when the capabilities and usability of such a machine meet and surpass any reasonable owner&#8217;s practical demands to the point where fashion and style become the selling features</a>.  I think we&#8217;re almost there—actually, we&#8217;re probably there now for most people who aren&#8217;t me.</p>

<p>Beyond the constantly growing demands of gaming, it seems like most personal computers now can do most of what anyone wants them to do.  Even for me, this last-gen MacBook Pro feels like the best computer I&#8217;ve owned to date, and strangely enough I&#8217;m hesitant to think about upgrades for awhile this time.  I like the product design, performance is very good, and I&#8217;ve got the memory maxed out to the point where I can run several copies of Windows in Parallels—which, itself, I think is a very weird requirement, yet still satisfied by this machine.</p>

<p>Storage media can hold amazing amounts of personal photos and video, and will reach near-incomprehensible levels pretty soon.  Screen resolution is just about at a point where most people don&#8217;t care if it gets better, and the same goes for sound.  Barring any sort of Moore&#8217;s Law for finding new uses for personal computers that require significantly more power, demands for functionality will likely be completely met by even the lowest end laptop soon.</p>

<p>So, how long until the first new personal computer arrives that turns out to be the old beater I still use 15 years from now, or sell to a kid down the block who just got his web learner&#8217;s permit?</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/10/19/upgrades-versus-antiques/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Improving my Delicious command for Ubiquity</title>
		<link>http://decafbad.com/blog/2008/09/07/improving-my-delicious-command-for-ubiquity</link>
		<comments>http://decafbad.com/blog/2008/09/07/improving-my-delicious-command-for-ubiquity#comments</comments>
		<pubDate>Sun, 07 Sep 2008 06:20:20 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[delicious]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[mozilla]]></category>
		<category><![CDATA[ubiquity]]></category>
		<category><![CDATA[web20]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1380</guid>
		<description><![CDATA[After writing up my first stab at a Delicious command for Ubiquity, I planned to continue revising it based on feedback and to work on exploring more of what Ubiquity enables.  I started looking into writing my own nouns for tag suggestions, as well as playing with page load and browser startup hooks.  [...]]]></description>
			<content:encoded><![CDATA[<p>After writing up my <a href="http://decafbad.com/blog/2008/09/01/writing-a-delicious-command-for-ubiquity">first stab at a Delicious command for Ubiquity</a>, I planned to continue revising it based on feedback and to work on exploring more of what Ubiquity enables.  I started looking into writing my own nouns for tag suggestions, as well as playing with page load and browser startup hooks.  And, I also started poking at a little bit of deeper extension development, which took up most of my time today.</p>

<p>I&#8217;ve <a href="http://decafbad.com/UbiquityCommands/">updated my UbiquityCommands</a> page and checked in my latest revision of <a href="http://decafbad.com/hgwebdir.cgi/UbiquityCommands/file/tip/delicious.ubiq.js">the Delicious command</a>.  </p>

<p>The main new feature is a status bar item reporting bookmarks for the current page:</p>

<p><img style="padding: 0.25em" src="http://decafbad.com/2008/ubiq-del-status.jpg" />&nbsp;<img style="padding: 0.25em" src="http://decafbad.com/2008/ubiq-del-tip.jpg" /></p>

<p>As you can see above, the command now comes with a status bar panel powered by the <a href="http://delicious.com/help/feeds">Delicious URL info JSON feed</a>, providing bookmarking info on every page visited.  It shows a bookmark count, a tooltip with further information, and sends the user to the URL info page on Delicious when clicked.  It mostly works, but it could use some looking at.  This is my first time really cracking open the hood on Firefox and XUL, and so I&#8217;m feeling around in the dark.</p>

<p>Specifically, I&#8217;m using Ubiquity&#8217;s page load hook—but I&#8217;m also trying to augment that by tracking tab selection events, in order to keep the status bar info updated for the active tab.  But then, that leads me to trying to track new windows, to attach the tab selection event handler for every newly opened window.  Or I could just be barking up the wrong tree entirely.  At any rate, the code is probably brain-dead dumb, so I hope someone can clue me into a better way.</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/09/07/improving-my-delicious-command-for-ubiquity/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>The more things change&#8230;</title>
		<link>http://decafbad.com/blog/2008/09/02/the-more-things-change</link>
		<comments>http://decafbad.com/blog/2008/09/02/the-more-things-change#comments</comments>
		<pubDate>Tue, 02 Sep 2008 05:46:46 +0000</pubDate>
		<dc:creator>l.m.orchard</dc:creator>
				<category><![CDATA[asides]]></category>
		<category><![CDATA[decafbad]]></category>
		<category><![CDATA[metablogging]]></category>

		<guid isPermaLink="false">http://decafbad.com/blog/?p=1370</guid>
		<description><![CDATA[So, in anticipation of hopefully carving out time to write more article-length entries like my last one on Ubiquity, I&#8217;ve revamped the design on this blog and updated the colophon.  I&#8217;m also hoping to post more short entries as well, and get this place revived again in general.  Let me know what you [...]]]></description>
			<content:encoded><![CDATA[<p>So, in anticipation of hopefully carving out time to write more article-length entries like <a href="http://decafbad.com/blog/2008/09/01/writing-a-delicious-command-for-ubiquity">my last one on Ubiquity</a>, I&#8217;ve revamped the design on this blog and <a href="http://decafbad.com/blog/colophon">updated the colophon</a>.  I&#8217;m also hoping to post more short entries as well, and get this place revived again in general.  Let me know what you think about the new look!</p>
]]></content:encoded>
			<wfw:commentRss>http://decafbad.com/blog/2008/09/02/the-more-things-change/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
