<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <title>Bound Variable</title>
        <link>http://www.boundvariable.com/</link>
        <description>Somewhere on the edges of code, user interface and philosophy.</description>
        <language>en</language>
        <copyright>Copyright 2008</copyright>
        <lastBuildDate>Mon, 22 Dec 2008 09:16:05 +1000</lastBuildDate>
        <generator>http://www.sixapart.com/movabletype/</generator>
        <docs>http://www.rssboard.org/rss-specification</docs>
        
        <item>
            <title>Who cares about syntax?</title>
            <description><![CDATA[<p>The ECMAScript discussion list (es-discuss) has a thread(s) running on future proposals for lambda syntax with several hundred posts. A similar thread on class syntax has, by comparison, gone largely ignored.</p>

<p>Some <a href="http://calculist.blogspot.com/2008/12/sign-o-times.html">others</a> have noted the potential significance of this. Does it demonstrate a trend in JavaScript? Is it indicative of where programming languages in general are headed?</p>

<p>As Guy Steele has put it:</p>

<blockquote>
  <p>A closure is an object that supports exactly one method: &#8220;apply&#8221;.</p>
</blockquote>

<p>On the other hand, there&#8217;s this, usually attributed to Norman Adams:</p>

<blockquote>
  <p>Objects are a poor man&#8217;s closures.</p>
</blockquote>

<p>Still, there really isn&#8217;t that much distance from one to the other&#8230; granted, that is relative to context.</p>

<p>From my point of view, classical OO has sometimes trended towards being overbearing, particularly for UI development. This is probably why everybody is excited about finding a more elegant lambda syntax for JavaScript and less interested in class syntax, which simultaneously feels more like bookkeeping and also is likely to have a mental association with an heavy-feeling ontology that many JavaScript coders would want to avoid.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/12/22/who-cares-about-syntax/</link>
            <guid>http://www.boundvariable.com/2008/12/22/who-cares-about-syntax/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">observations</category>
            
            <pubDate>Mon, 22 Dec 2008 09:16:05 +1000</pubDate>
        </item>
        
        <item>
            <title>JavaFX script... yawn</title>
            <description><![CDATA[<p>Sun Microsystems have just announced the 1.0 version of <a href="https://openjfx.dev.java.net/">JavaFX</a>, one of the main components being JavaFX Script.</p>

<p>Let me get this straight. After twelve years Sun have finally admitted that writing UI&#8217;s in Swing blows goats and their solution is to release something that lets you create a swing UI using code that borrows heavily from JavaScript. </p>

<p>What&#8217;s it got? First-class functions, declarative syntax, list-comprehensions&#8230;</p>

<p>I&#8217;m going to repeat the name because I think it bears repeating. JavaFX Script. I guess the only name bad enough was already taken so they threw an FX in the middle.</p>

<p><a href="http://www.squidoo.com/IfItWerentForMyHorse">If it weren&#8217;t for my horse</a>&#8230; I wouldn&#8217;t have spent that year in college.</p>

<p>Here&#8217;s a JavaFX Script code sample (excuse the code formatter from getting confused with the indenting):</p>

<pre>
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle; 
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

Stage {
    title: "Declaring Is Easy!"
    width: 249
    height: 251
    visible: true
    scene: Scene { 
        content: [  
            Rectangle {
                x: 45 y: 35
                width: 150 height: 150
                arcWidth: 15 arcHeight: 15
                fill: Color.GREEN
            },
           Circle {
               centerX: 118
               centerY: 110
               radius: 83 
               fill: Color.WHITE
               stroke: Color.RED
           }
        ]
    }
} 
</pre>

<p>Looking at it, I don&#8217;t think I need to talk about where the inspiration for that comes from. Still&#8230;  haven&#8217;t the <a href="http://code.google.com/webtoolkit/">GWT</a> proponents been telling everybody for a long time that scripting languages are evil? Will GWT one day allow people to write JavaFX Script and have it compile to JavaScript? I don&#8217;t know and honestly I don&#8217;t care.</p>

<p>JavaScript is far from perfect but I think the current Ajax &#8220;stack&#8221; works for (at least) three reasons:</p>

<ol>
<li><p>1 - Some of the constraints have, by accident, improved many UI&#8217;s. I mentioned that <a href="http://www.boundvariable.com/2008/10/10/constraints/">before</a>.</p></li>
<li><p>2 - The open web.</p></li>
<li><p>3 - JavaScript actually has some features that are really good for creating UI&#8217;s. Homoiconicity, lambda and a prototypal object oriented system.</p></li>
</ol>

<p>JavaScript won&#8217;t last forever but I haven&#8217;t seen anything yet that is better on those three points.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/12/09/javafx-script-yawn/</link>
            <guid>http://www.boundvariable.com/2008/12/09/javafx-script-yawn/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">observations</category>
            
            <pubDate>Tue, 09 Dec 2008 08:55:42 +1000</pubDate>
        </item>
        
        <item>
            <title>Casual ontology</title>
            <description><![CDATA[<p>There is a short text written by Poul Anderson entitled <a href="http://groups.google.com/group/alt.language.artificial/msg/69250bac6c7cbaff">Uncleftish Beholding</a> which shows, to some extent, what English would have looked like in the absence of <a href="http://en.wikipedia.org/wiki/Loanword">loanwords</a>. It&#8217;s interesting to see the number of phrasings that somebody speaking English now would find awkward. English is something of a mixed-breed.</p>

<p>If we multiply the number of language speakers by the number of documents on the web in that language then English is far-and-away the <a href="http://www.nicemice.net/amc/tmp/lang-pop.var">winner</a> in those popularity rankings. I don&#8217;t know how important that is but I don&#8217;t think English is emerging as the single human language of the web.</p>

<p>How about programming languages? <a href="http://www.info.ucl.ac.be/~pvr/cvvanroy.html">Peter Van Roy</a> thinks that there is evidence that one true programming language is emerging. Some <a href="http://www.lshift.net/blog/2006/06/13/the-definitive-programming-language-not">disagree</a>. Esperanto anyone?</p>

<p>Programming languages have something resembling native speakers at least from a &#8220;how many users do we have&#8221; aspect because, as Yegge points out, <a href="http://steve-yegge.blogspot.com/2008/05/dynamic-languages-strike-back.html">most programmers only know one language</a>. In other words, secondary languages are rare&#8230; at least for a substantial proportion of the community.</p>

<p>There are plenty of programmers who know how to do the same thing in several languages and try to impose that where they can. JavaScript consistently fell victim to that where people were constantly conceiving ways of doing things that didn&#8217;t suit the language. Many people did that when they moved from a training in Java to JavaScript, jumping through hoops to get JavaScript to work like Java because, you know, it looks like it can.</p>

<p>There&#8217;s a difference between trying to impose unsuitable syntactic sugar on a language (classes in JavaScript) and liberating the language by demonstrating how patterns from other languages might translate more naturally (Crockford&#8217;s module pattern.) It&#8217;s good to bring ideas and techniques to a language, not so good to try hammering in conventions. </p>

<p>Of course, programming languages are not like-for-like comparable with human languages. Still, in the way that it has taken influence from other languages - for better or worse - JavaScript is kinda like English. </p>

<p>Guy Steele talks about growing a language (<a href="http://www.brics.dk/~hosc/local/HOSC-12-3-pp221-236.pdf">video</a>, <a href="http://www.brics.dk/~hosc/local/HOSC-12-3-pp221-236.pdf">pdf</a>) indicating a desire to make a language flexible enough so that the people using it can build on the language provided. The programming language provides the rules - and hence limitations - around which programs can be created. The things people do in a programming language creates the dialogue.</p>

<p>Java has been successful on that level at least partly because it makes it easy for those one language people to create a dialogue or use an existing dialogue.</p>

<p>The thing is, a programming language can be restrictive in a way that a human language typically can not.</p>

<p>Programming languages are used by <a href="http://xkcd.com/224/">world builders</a> and the type of language determines the effectiveness with which people can construct universes. Programming languages have philosophical ramifications because the construction of the programming language impacts on the types of dialogue that can happen. A human working in the regular world can invent new rules of discourse and moreover may actually invent a new language (with words or symbols) with which to describe or talk about the world.</p>

<p>The can be achieved in a programming language but the restrictiveness of a programming language can make constructing a new domain-specific language difficult enough that it&#8217;s almost never attempted in that language. On the JVM the rigidness of Java and an understandable resilience to change looks like it will lead to increased popularity of <a href="http://www.scala-lang.org/">new</a> <a href="http://clojure.org/">languages</a> running on the JVM at the expense of the Java programming language. As the language of discourse, Java looks like it will soon fade instead of grow.</p>

<p>Languages need to evolve, JavaScript managed to do that mostly by accident and in a different sense to that in which Java grew. The point though is that if JavaScript had not been able to grow at all then despite any luck it would probably now be dead.</p>

<p>Still, as <a href="http://weblogs.mozillazine.org/roadmap/archives/2008/04/popularity.html">Eich</a> and <a href="http://javascript.crockford.com/popular.html">Crockford</a> both say, popularity doesn&#8217;t usually have much to do with the design of the language except perhaps where the design seems familiar&#8230; though familiarity itself is a double-edged sword.</p>

<p>In the end though JavaScript like all languages needs to evolve or die&#8230; with care. </p>

<p>An infinitely flexible programming language would be infinitely extensible and, most likely, infinitely useless. On the other hand, a language too heavy on restrictions will be useful&#8230; but for a sufficiently small problem set that it too would ultimately be useless.</p>

<p>The growth of a language really happens in the community.</p>

<p>Just like HTML, many of the programming languages already in existence today are trying to evolve inside the constraints of standards committees&#8230; occasionally this may prove midly successful but I think the best you can hope for when doing that is a <a href="http://en.wikipedia.org/wiki/Bonsai">Bonsai</a>.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/12/03/casual-ontology/</link>
            <guid>http://www.boundvariable.com/2008/12/03/casual-ontology/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">growth</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">interface</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">language</category>
            
            <pubDate>Wed, 03 Dec 2008 20:39:12 +1000</pubDate>
        </item>
        
        <item>
            <title>Picking the time</title>
            <description><![CDATA[<p>There&#8217;s been a bit of interest in a <a href="http://haineault.com/media/jquery/ui-timepickr/page/">time picker</a> control from Maxime Haineault. Nice piece of work but I for one hope this particular interaction style doesn&#8217;t catch on. </p>

<p>As a user I have to move my mouse halfway across the screen aiming at little boxes in order to input the time. If I decide to change that time then I need to go back across the screen aiming at other boxes. Hello carpal tunnel. Further, I could be alone in this but I don&#8217;t find the control simple or intuitive at all. I&#8217;d probably rather be typing.</p>

<p>Not wanting to simply disagree with the merit of that format for a time picker and leave it there, I thought it would be sensible to provide something of an alternative. So, in the spirit of shamelessly ripping-off a UI convention from elsewhere I&#8217;ve coded up the standard OS time selector (with the exception of the little up/down arrows on the right-hand-side.)</p>

<p>Have a look at the <a href="http://www.boundvariable.com/time-picker/">example</a> time picker. Click on the hours, minutes, seconds or AM/PM and use your scroll wheel.</p>

<p>Sure, I could probably get roughly the same result using four select boxes (scroll wheel worked on a select box last time I checked) but what would be the fun in that?</p>
]]></description>
            <link>http://www.boundvariable.com/2008/11/13/picking-the-time/</link>
            <guid>http://www.boundvariable.com/2008/11/13/picking-the-time/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">User Interface</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">event handling</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">forms</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">UI controls</category>
            
            <pubDate>Thu, 13 Nov 2008 14:07:56 +1000</pubDate>
        </item>
        
        <item>
            <title>Constraints</title>
            <description><![CDATA[<p>In the physical world designs are bound by the constraints of space, time, money and the laws of physics. </p>

<p>The impact of the physical laws on creating an object is inversely proportional to the technological advancements available to the designer. Leonardo may have been able to conceive of a <a href="http://z.about.com/d/inventors/1/7/v/x/FlyingMachine.jpg">flying machine</a> but the actual flying machine, that people could use, took some four-hundred years appear.</p>

<p>In some ways this is a good thing.The required investment and risks associated with the physical world means that, for example, most people will not try to fly a helicopter <a href="http://www.videosift.com/video/Man-Tries-to-Fly-Helicopter-With-No-Training">with no training</a>. It also used to mean that objects were made by people who knew how to make those objects because they did that for a living. You know, cobblers, carpenters, tailors&#8230; engineers. Now though, we live in an age of empowerment where any monkey can go to the local hardware store and purchase the means to create a real disaster. We also live in a time where the requirements on the things we create can sometimes have little bearing on their intended use so we end up with things like beer with added vitamins and a <a href="http://www.usbfever.com/member/37704/products/296_Wireless-9-button-mouse_1.jpg">nine button mouse</a>. Luckily, the constraints of space, time, money and the laws of physics still prevent Average Joe from going ot the local hardware store and purchasing the means to destroy the solar system.</p>

<p>These physical constraints do not not apply to software&#8230; well, they do (things such as memory and processor limits), but not with anything near the same degree of impact. This added a degree of importance to the degree of training that professional programmers required. Most people would fear for their lives if attempting to fly a helicopter without adequate training. If somebody is writing software for the helicopter though, that connection is not so easy to make.</p>

<p>It&#8217;s also easy for anybody to design the user interface for software without knowing anything about user interface design. Visual development environments made it easier to create <a href="http://www.1-4a.com/rename/example_overview0.gif">ridiculously complicated</a> desktop applications. The investment in creating a user interface is small and often the thinking is that easy-to-do equates to should-do.</p>

<p><a href="http://en.wikipedia.org/wiki/Java_Swing">Java Swing</a> provides an environment for creating a user interface that is intended to make sense to Java programmers. As it turns out, Java programmers (and indeed Java language designers) are not the best people to be deciding on the design of the user interface and moreover are probably not the best people to be deciding on the programming model for writing them at all.</p>

<p>Java failed on the client. Instead the ragamuffin collection of HTML, CSS and JavaScript used for the web succeeded. There were good reasons for this.</p>

<p>The web as HTML over HTTP has always been strong for document delivery and interlinking between those documents. It is good for text content delivery, albeit in a paged, one-large-chunk-of-text-at-a-time, manner. With JavaScript, the content chunking can be controlled so that content delivery can be more finely controlled and more reactive (or proactive) to the needs of the user. </p>

<p>I think the content-oriented nature of the web is leading us to better user interfaces.</p>

<p>Programmers who do not know JavaScript complain that the language sucks. Programmers who <em>do</em> know JavaScript compain that whilst the language is elegant and powerful (warts aside) the API for controlling the UI (the DOM) sucks. </p>

<p>Yes, the DOM sucks. However, the suckiness of the DOM has actually imposed a useful constraint on programmers. If the web had from the start been really good for creating applications then there&#8217;s a good chance we would have had more applications and less content. Further, despite its shortcomings, CSS has helped to shift custodianship of the presentation layer away from application programmers and GUI toolkit developers.</p>

<p>So&#8230; much as I might bemoan the weaknesses of the DOM I actually think that the difficulties that it has imposed may have actually played a part in reducing the amount of <a href="http://tomayko.com/writings/administrative-debris">administrative debris</a> attributable to JavaScript on many websites.</p>

<p>With that said, as the emphasis on good usability on the web increases I think we&#8217;re all about due for some unshackling. My only request would be that people actually learn how to fly before jumping into that helicopter.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/10/10/constraints/</link>
            <guid>http://www.boundvariable.com/2008/10/10/constraints/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">User Interface</category>
            
            
            <pubDate>Fri, 10 Oct 2008 10:43:31 +1000</pubDate>
        </item>
        
        <item>
            <title>On being prolific</title>
            <description><![CDATA[<p>There&#8217;s a post over on <em>Coding Horror</em> with the title <a href="http://www.codinghorror.com/blog/archives/001160.html">Quantity Always Trumps Quality</a> that gives an example of a circumstance in which promoting output volume (quantity) resulted in better quality than promoting quality for itself after a set number of days.</p>

<p>That circumstance is an individual (or group) in a learning environment. </p>

<p>This seemed initially like a fairly tame and uncomplicated message for Jeff to put forward. Judging from some of the comments he&#8217;s received though, apparently it wasn&#8217;t, with a whole host of people taking exception to what he posted.</p>

<p>As I was reading those comments I had a few ideas running through my head ranging from <a href="http://en.wikipedia.org/wiki/John_Dewey">Dewey</a> to <a href="http://en.wikipedia.org/wiki/Mosh%C3%A9_Feldenkrais">Feldenkrais</a>, trying to think of how to word an argument for why it&#8217;s good advice. In the end though, I don&#8217;t think anything overly complicated is necessary. Only the following:</p>

<ul>
<li><p>In order to learn a new skill, practise is essential. There are many ways to practise and often related activities, including thinking about practise, count.</p></li>
<li><p>The individual needs to be increasingly reflective as they practise. Not only because it helps improve the skill being practised but also because it helps improve the skill of improving.</p></li>
<li><p>It is conducive to improving overall output quality if the teacher encourages volume of practise. A beginner is not really in any position to be theorising about how to produce work of the highest quality when they have no experience of the activity they are theorising about. Firstly, the beginner is typically unaware of how much they don&#8217;t know, so their theorising can be misdirected. Secondly, even if the beginner manages to find some really good ideas about <em>how</em> to produce quality work, without sufficient practise they will typically be incapable of actually producing it.</p></li>
</ul>

<p>The question is how to achieve quality, not about whether quality is important or whether that is what the student should move towards (surely those are not debated?) The question is simply about how to get the student there. The answer put forward, which I think is the correct one, is to encourage the individual to practise frequently, make mistakes, learn and improve.</p>

<p>As an aside - Steve Yegge has an old post entitled <a href="http://steve.yegge.googlepages.com/practicing-programming">Practicing Programming</a> which is worth a read.</p>

<p>As for calling software development an art, I am perfectly comfortable with that. It was good enough for <a href="http://en.wikipedia.org/wiki/Donald_Knuth">Donald Knuth</a> and there are many reasons why I think it&#8217;s still good enough today. I will, however, take the liberty of being elliptical and not detail any of them.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/08/04/on-being-prolific/</link>
            <guid>http://www.boundvariable.com/2008/08/04/on-being-prolific/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">Programming</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">practise</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">Software engineering</category>
            
            <pubDate>Mon, 04 Aug 2008 10:24:28 +1000</pubDate>
        </item>
        
        <item>
            <title>Script loading</title>
            <description><![CDATA[<p>There&#8217;s been a fair amount of interest lately in <a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/">non-blocking script downloads</a> and various <a href="http://pastie.org/244187">ways</a> to load multiple scripts for which the current script has dependancies with a callback <em>onready</em>.</p>

<p>This can be a tricky problem to solve for really old browsers but if we&#8217;re only worried about modern browsers (you know, no Netscape 4.7) then the solution is fairly straightforward. I&#8217;ve supplied the code here in a library free version for those of you who don&#8217;t have their own solution, don&#8217;t want to use any of the library solutions and don&#8217;t feel the need to unwind one of those solutions to see how it works.</p>

<p>You can get the script from <a href="http://www.boundvariable.com/dl/nolib.load.js">nolib.load.js</a>.</p>

<p>You can call this like so:</p>

<pre>

nolib.loadAll("http://example.com/script1.js,http://example.com/script2.js").oncomplete(function() {
    alert("all scripts loaded");
});


</pre>

<p>There are also <code>nolib.load()</code> and <code>nolib.insx()</code> functions which some people may find useful. As the code is (deliberately) stripped of comments you&#8217;ll have to figure out how to use them yourself.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/08/01/script-loading/</link>
            <guid>http://www.boundvariable.com/2008/08/01/script-loading/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">dependencies</category>
            
            <pubDate>Fri, 01 Aug 2008 11:26:43 +1000</pubDate>
        </item>
        
        <item>
            <title>Dear Gmail, please stop stealing my focus</title>
            <description><![CDATA[<p>I&#8217;m as much of a Gmail junkie as anybody, to the point where I rarely bother running mail servers anymore but instead opt for using Gmail via Google Apps.</p>

<p>Not that I think Gmail is perfect, just that all the webmail clients I&#8217;d used before gmail slow and annoying to the point of being practically useless.</p>

<p>I do have one annoyance with Gmail though and that is that frequently when I go to login, the focus is removed from the <em>Username</em> field and placed on the <em>Password</em> field halfway through me trying my user name. Like this:</p>

<p><img src="http://static.boundvariable.com/i/posts/gmail-focus.gif" alt="gmail focus stealing" /></p>

<p>It doesn&#8217;t happen all the time and I haven&#8217;t looked into the exact circumstances (connection speeds, browser, plugins, etc) under which it happens but it&#8217;s definitely annoying. In terms of how the page is coded, what happens is that I start typing my username as soon as the page comes up, then the <code>window.onload()</code> event fires, then the focus is moved to the password field because there is already something in the username field. The code is there to make it quicker for people who have the username already populated by their browser. In my case though, with my fingers on autopilot as soon as the page loads this intended convenience turns into an inconvenient annoyance. </p>

<p>In my last post about <a href="http://www.boundvariable.com/2008/07/16/intentionality-and-adverse-effects/">intentionality &amp; adverse effects</a> I wrote about the dangers of making unrefined guesses about what the user wants. I think that is going on here - for me at least.</p>

<p>I know that a similar trick on the Google homepage has been called the <a href="http://www.blogstorm.co.uk/billion-dollar-javascript/">Billion dollar line of JavaScript</a> but in the case of this one, I don&#8217;t see why Google haven&#8217;t done something about it (assuming that I&#8217;m not the only person in the Googleverse getting annoyed by this one.)</p>

<p>The reason I don&#8217;t see why Google haven&#8217;t done something is that the fix looks pretty simple. I know it is a bit presumptuous of me to think that I can look at this and solve the problem in a matter of minutes so read the following suggestion with that disclaimer in mind. </p>

<p>This is definitely <strong>not</strong> how I would recommend they code it but instead just demonstrates very roughly what could be done to the existing code (my additions are indicated by the comments):</p>

<pre>
// global flag allowing focus switch or not
// I wouldn't normally use a global variable, this is only to 
// demonstrate the potential change in the simplest way
var gaia_allowFocusSwitch = true;

// Set the global flag to disallow if the user types into the Username field
// This would need to be attached before the onload event fires so the exact
// placement of it, and any capability or element checks would also need to be done here
document.getElementById("gaia_loginform").Email.onkeypress = function() {
    gaia_allowFocusSwitch = false;
};

function gaia_setFocus() {
    var f = null; 
    if (document.getElementById) { 
        f = document.getElementById("gaia_loginform");
    } else if (window.gaia_loginform) { 
        f = window.gaia_loginform;
    }

    if (f) {
        if (f.Email && (f.Email.value == null || f.Email.value == "")) {
            f.Email.focus();
        // add a check on the global flag to the password focus switch
        } else if (f.Passwd && gaia_allowFocusSwitch) {
            f.Passwd.focus();

            f.Email.onfocus = function() {
                gaia_allowFocusSwitch = false;
            };
        }
    }
}


//
//
</pre>

<p>If the user  has started typing into the <em>Username</em> field, then don&#8217;t move the focus to the <em>Password</em> field.</p>

<p>Could it be that simple? Given the expertise that Google has in these things there&#8217;s a decent chance that there is a very good reason why it isn&#8217;t already setup to do something along those lines. </p>

<p>I&#8217;m certainly happy to hear from anyone who knows.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/07/26/dear-gmail-please-stop-stealing-my-focus/</link>
            <guid>http://www.boundvariable.com/2008/07/26/dear-gmail-please-stop-stealing-my-focus/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">event handling</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">focus</category>
            
            <pubDate>Sat, 26 Jul 2008 11:03:03 +1000</pubDate>
        </item>
        
        <item>
            <title>Intentionality &amp; adverse effects</title>
            <description><![CDATA[<p>After my post on <a href="http://www.boundvariable.com/2008/06/23/perceived-speed/">perceived speed</a> the question was posed to me as to whether it was possible for a response to a user action to happen <em>too quickly</em>.</p>

<p>The classic example given here is a CSS and/or JavaScript powered dropdown menu which triggers immediately <code>onhover</code> or <code>onmouseover</code> causing problems for users as they move their mouse past the menu - triggering it to open unintentionally. The solution occasionally offered is to place a delay on the menu opening.</p>

<p>The user does not want a delay on the menu any more than they want their computer to take a long time to boot up or to have a slow internet connection. I&#8217;m happy to be proved wrong by some actual user testing on this but I don&#8217;t think it would make any difference to the point I&#8217;m trying to illustrate. The user has not <em>asked</em> for a delay. No matter how cute the transition, there is ultimately no pleasure in waiting for a menu to appear, time and time again.</p>

<p>The delay on the menu in such an instance is put in place to avoid having the UI respond to a user action in a way that the user did not intend. It is imperfect in that it does not actually try to decide whether the user wants the menu to open or not but instead says &#8220;<em>if the user keeps the mouse of the menu for more than this amount of time then we assume that they intend for the menu to open.</em>&#8221;</p>

<p>In technical terms - a guess.</p>

<p>The problem with an unrefined guess is that it&#8217;s a shotgun approach. It might hit the target but there&#8217;s likely to be collateral damage or, as they call them in pharmaceuticals,  <a href="http://en.wikipedia.org/wiki/Adverse_drug_reaction">adverse effects</a>. </p>

<p>This happens too often on the web. Users have been slipped roofies by way of popup windows, broken URL&#8217;s, back button trickery, slow pages and a plethora of other embarrasments that were dreamt up by people thinking that they were only solving the problem at hand when in fact they were simultaneously creating other problems. All too often, JavaScript has been one of the tools used to do so.</p>

<p>The problem for JavaScript runs deeper too, with the programming environment (the DOM) inflicting pain on programmers at the other end. Here&#8217;s a cute one from IE that you may have seen:</p>

<pre>
document.body.onbeforeunload = function() {
    alert("about to unload");
}
</pre>

<p>The onbeforeunload event will actually fire in IE if a pseudo-protocol link <code>href="javascript:"</code> is clicked or one is pasted into the address bar. The problem with this, and with too many DOM quirks in various browser is that it goes against how the programmer rightly thinks what they do influences the universe. It goes against <a href="http://en.wikipedia.org/wiki/Intentionality">intentionality</a> - just like the exampes inflicted on website users. Links lead to content - having the browser open a popup window is a side-effect, introducing effects on the user that they did not ask for. Any JavaScript developer can feel a real sense of empathy for their users on that point alone.</p>

<p>So, back to the dropdown menu, what&#8217;s a better alternative than a delay? </p>

<p>One option is to poll the mouse position to determine mouse velocity. Something like this:</p>

<pre>
(function() {
    var nav = document.getElementById("nav"),
        vector = [],
        lvector = [],
        velocity = 0,
        t,
        interval = 25,
        threshold = 0.5,
        fire = function() {


            // display the dropdown


        },
        load = function() {
            vector = [];
            lvector = [];


            // remove the dropdown


            return function() {
                fire();
                trigger = function() {};
            };
        },
        trigger = load(),
        sample = function() {
            velocity = vector[2]/interval;
            if (lvector.length == 3) {
                if (lvector[2] === vector[2] || threshold >= velocity) {
                    trigger();
                }
            }
            lvector = [].concat(vector);
        };

    //
    nav.onmouseover = function(e) {
        document.onmousemove = function(e) {
            vector[0] = (e || window.event).clientX - (lvector[0] || 0);
            vector[1] = (e || window.event).clientY - (lvector[1] || 0);
            vector[2] = Math.sqrt(Math.pow(vector[0], 2) + Math.pow(vector[1], 2));
        };
        t = window.setTimeout(function() {
            sample();
            t = window.setTimeout(arguments.callee, interval);
        }, interval);
    };
    //
    nav.onmouseout = function() {
        document.onmousemove = null;
        clearTimeout(t);
        // re-cock the trigger
        trigger = load();
    };
});
</pre>

<p>The example above helps to reduce a &#8220;delay when the user doesn&#8217;t want a delay&#8221; effect at the expense of introducing more work for the CPU. The reader may, or many not, find this an acceptable trade-off in individual circumstances.</p>

<p>Note that this code currently handles the mouse velocity only. It would need to be extended to correctly handle a dropdown menu completely. I may provide an update when I get time.</p>

<p>This example is provided in a slightly altered form as a download: <a href="http://www.boundvariable.com/dl/nolib.velocitor.js">nolib.velocitor.js</a>.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/07/16/intentionality-and-adverse-effects/</link>
            <guid>http://www.boundvariable.com/2008/07/16/intentionality-and-adverse-effects/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">User Interface</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">correctness</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">intentionality</category>
            
            <pubDate>Wed, 16 Jul 2008 00:47:10 +1000</pubDate>
        </item>
        
        <item>
            <title>Perceived speed</title>
            <description><![CDATA[<p>Ten years ago my most commonly used operating system was <a href="http://en.wikipedia.org/wiki/BeOS">BeOS</a> (with *nix second and windows third). I&#8217;ll try not to wax nostalgic about that particular OS (as much as I&#8217;d like to) but I vaguely remember a quote from the Be CEO Jean-Louis Gassée that it was not so much the actual speed of the OS that mattered but the perceived speed of the OS to the user. Of course, research into thresholds for computer responsiveness goes back at least to Robert Miller&#8217;s 1968 paper <em>Response Time in Man-Computer Conversational Transactions</em> but the quote from Gassée was more about the way that the BeOS had been built to in such a way that the <abbr title="User Interface">UI</abbr> responsiveness was maintained regardless of what other processes were running at the time.</p>

<p>Still, whilst responsiveness thresholds have been known for a long time, it took my first dual processor system for me to be able to use Windows without the frustration of random processes temporarily locking-up the UI. Anybody who ever used Windows 95 will surely remember the dreaded &#8220;floppy drive selected UI lockup.&#8221; Usually what would happen is that if the floppy drive was accidentally selected in the drive dropdown then the UI would lockup whilst some other part of the OS did the disk seek. Not a good user experience.</p>

<p>The same problem is still apparent today in devices ranging from expensive LCD and plasma televisions, mobile phones and set top boxes to ATM&#8217;s&#8230; given a selection of ATM&#8217;s my choice is always the one that isn&#8217;t St George. Whilst this aversion could partly be attributed to some other quirks in the UI, I think the primary reason is that these St George ATM&#8217;s respond to my key presses slow enough that I&#8217;m often never sure if it&#8217;s registered my input or not. Not a good user experience. Trying to use one of these ATM&#8217;s is not only slow but also annoying in the same sense that a poorly dubbed movie is annoying.</p>

<p>Web browsers have usually been reasonably good at feeling responsive even though it often takes a long time for them to fetch the actual UI and content of the site I&#8217;m trying to visit. It&#8217;s been a long time since I&#8217;ve used mosaic so I can&#8217;t be sure but every browser I can remember using has usually kept the UI responsive and provided feedback to me for what it was doing. There have been exceptions to this in most browsers I&#8217;ve used but in general, one of the aspects I&#8217;ve liked in every browser I&#8217;ve used is that if a website is loading too slow, I can hit stop, refresh, or simply leave the site and go elsewhere.</p>

<p>So, browsers have usually done this stuff pretty well by default. The websites they serve have varied wildly in how they handle things internally though. Hidden PDF downloads, Flash loaders that bear no relevance to how long things will actually take and poorly implemented iframes (the browser says something is loading but nothing is happening) are some of the offenders. JavaScript code has been another offender, not due to the nature of the language itself but simply because it gives the power to create interaction other than page loads, which means that good UI responsiveness and feedback of the browsers can be subverted.</p>

<p>So, to JavaScript then. What are some things that a UI developer working in JavaScript and interacting with the <abbr title="Document Object Model">DOM</a> can and should do to maintain UI responsiveness? I&#8217;m going to look at this in terms of the three basic thresholds from Miller&#8217;s paper.</p>

<h3>One tenth of a second is the limit for the user to think the system is responding immediately.</h3>

<p>This generally means that ajax requests will usually not feel instantaneous unless you are caching, memoising or predictively prefetching the responses.</p>

<p>Ajax requests aside, if a JavaScript event handler has to do some processing you should handle the processing after providing feedback to the user. So, instead of this:</p>

<pre>
something.onclick = function() {
    // do some intensive processing
   alert("UI response");
}
</pre>

<p>It&#8217;s better to do this where possible</p>

<pre>
something.onclick = function() {
   alert("UI response");
   // do some intensive processing
}
</pre>

<p>Of course, processing can often be done well in advance of the event hander being fired in many instances, which is also good. Additionally, whilst JavaScript is single threaded, functional techniques (and <code>setTimeout</code>) can be used to fork processing in terms of how the user perceives the UI.</p>

<p>Selecting the most appropriate event to fire on is also important. In many cases it&#8217;s better to use <code>onmousedown</code> than <code>onclick</code> due to the former firing earlier than the latter by something like 80 milliseconds.</p>

<p>Another point is to avoid querying the DOM repeatedly to determine state of the UI. In many cases the current state can be modelled in code - many UI responses are based on simple mathematical formulas (or can be approximated) which means it&#8217;s possible to avoid repeatedly, and expensively, querying DOM elements for their current state. In <a href="http://en.wikipedia.org/wiki/Design_Patterns">Gang of Four</a> terms we&#8217;re basically talking about a mediator. </p>

<h3>1.0 second is about the limit for the user&#8217;s flow of thought to stay uninterrupted</h3>

<p>If the UI is responding to user action somewhere between one tenth of a second and one second then the user&#8217;s flow will not be interrupted, but they will not feel that they are acting directly on the system. For many UI controls like tabs and accordions I&#8217;ve found it important to have the response right down near one tenth of a second important. This also applies to image galleries - whilst a cross fade can be cute, it is cutting into the time for the user getting the response action they want - a long transition for user initiated switches will diminish the user feel for acting directly on the system. Transitions longer than one second should be avoided for anything user initiated.</p>

<p>Personally, I tend towards user initiated actions responding within one tenth of a second and either completing immediately or transitioning to completion in under one second.</p>

<h3>10 seconds is about the limit for keeping the user&#8217;s attention focused on the dialogue</h3>

<p>For anything above one second, the user needs to know that the UI has registered their input and is doing something. This applies whether the delay is caused by processing or by the fetching of data in some ajaxy fashion. I personally find that one second doesn&#8217;t feel quite zippy enough to make a loading indicator of some sort useful but the specified time would need to be tested for a given application. For the purposes here I will be using half a second.</p>

<p>One way to approach the crossover into loading-message-required territory would be something along the lines of this (incomplete) code fragment:</p>

<pre>
(function() {
    var showLoader = function() {
            // some code to show the user that something is happening
    };
    var hideLoader = function() {
         // some code to hide that same loader
    };



    something.onclick = function() {
        var t = setTimeout(showLoader, 500);

        // a call to some myapp.doProcessing function that 
        // accepts a callback for when it completes
        var myCallback = function() {
            // just in case we return immediately, 
            // stop the loader from appearing
            clearTimeout(t);

            // remove the loader in case it was there.
            hideLoader();
        };
        myapp.doProcessing({"data": ""}, myCallback);
    };
}());
</pre>

<p>In the example above, we will display a loading message if the UI control hasn&#8217;t finished after half a second. If the loader is displayed, it is removed as soon as the UI control returns.</p>

<p>It should be noted that single threading means the accuracy of timers in JavaScript is inversely proportional to the amount of processing that is happening. So, if a transition needs to complete in under one second it&#8217;s best to shoot for something less than one second. In addition, it&#8217;s important to understand how timers work and the difference between <code>setInterval</code> and <code>setTimeout</code> but instead of also covering that here, I&#8217;ll refer to a post from <a href="http://ejohn.org/blog/how-javascript-timers-work/">John Resig</a>.</p>

<p>In the example above, adding a further timeout at 10 seconds to handle longer response times (and possible errors) is an exercise left up to the reader.</p>

<h3>More than 10 seconds</h3>

<p>Anything that takes more than ten seconds will need to allow the user to interact with some other part of the UI whilst the user input is being acted upon. There are a number of ways to achieve a <a href="http://www.google.com.au/search?q=ajax+file+upload+progress">file upload progress bar</a> but if it&#8217;s going to take more than ten seconds, the UI should allow the user to get on with it and let them know later when it&#8217;s done. Modeling this on browser download managers would be a good start.</p>

<h3>Knowing how long it should take to generate a response</h3>

<p>There&#8217;s a large amount of variation in responsiveness for different users depending on their individual connection and configuration. If you&#8217;re profiling the performance of your UI then for any given action, it&#8217;s possible to have a baseline responsiveness. From there, you&#8217;re able to compare that baseline to something like the page load time for the given user, and adjust the feedback provided by the UI accordingly. Comparing the page load time would be something along these lines:</p>

<pre>
(function() {
    var baselineLoad = 1800,
        startTime = (new Date()).getTime(),
        diff;

    window.onload = function() {
        diff = baselineLoad - ((new Date()).getTime() - startTime));
    };

}());
</pre>

<p>The diff will give <em>some</em> indication of the performance of the client relative to tests. In addition to this comparison, an average of response times for specific UI components could be kept throughout the page session. That is also left as an exercise for the reader. </p>

<p>Hopefully there were a few useful tips in there around UI performance and applying responsiveness thresholds to JavaScript powered UI&#8217;s.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/06/23/perceived-speed/</link>
            <guid>http://www.boundvariable.com/2008/06/23/perceived-speed/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">Performance</category>
            
                <category domain="http://www.sixapart.com/ns/types#category">User Interface</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">event handling</category>
            
                <category domain="http://www.sixapart.com/ns/types#tag">responsiveness</category>
            
            <pubDate>Mon, 23 Jun 2008 23:53:29 +1000</pubDate>
        </item>
        
        <item>
            <title>Web directions government presentation</title>
            <description><![CDATA[<p>I presented a talk on JavaScript at <a href="http://gov08.webdirections.org/">Web Directions Government</a> on the 19th of May.</p>

<p>The title of the presentation was &#8220;One paper clip, a box of matches and some JavaScript&#8221; with the focus primarily being on the approach you need to take with the language when working in less than favorable circumstances&#8230; </p>

<p>Of course - given browser inconsistencies and a long history of people abusing the bad parts of JavaScript and ignoring the good - &#8220;less than favorable&#8221; circumstances is another term for &#8220;all the time.&#8221;</p>

<p>My slides got cropped rather badly when I uploaded to SlideShare so instead they are available as a <a href="http://www.boundvariable.com/pdf/gov08-patricklee.pdf">2MB PDF</a>.</p>

<p>You can find more details and a podcast of <a href="http://www.webdirections.org/resources/patrick-lee/">my talk</a> over at the Web Directions site. As a piece of errata, Brendan Eich, of course, was actually working at Netscape. The minor slip of the tongue there was due to me also talking about <a href="http://research.sun.com/self/">Self</a> in that section, which at the time was a research project at Sun.</p>
]]></description>
            <link>http://www.boundvariable.com/2008/06/09/web-directions-government-presentation/</link>
            <guid>http://www.boundvariable.com/2008/06/09/web-directions-government-presentation/</guid>
            
                <category domain="http://www.sixapart.com/ns/types#category">JavaScript</category>
            
            
                <category domain="http://www.sixapart.com/ns/types#tag">speaking</category>
            
            <pubDate>Mon, 09 Jun 2008 02:21:37 +1000</pubDate>
        </item>
        
    </channel>
</rss>
