arguments.callee

JavaScript Optimization: Eliminate Nested Functions

Thu, 05 May 2011 04:00:00 +0000

Encapsulation: Friend AND Foe?

In programming, encapsulation means combining data with the methods that operate on that data. It's an integral part of object oriented programming, and commonly used in modern JavaScript. For example, say you create a Carousel-style widget. You might write one Carousel object that tracks the pictures it's using and provides methods to get and set those picture, or cycle through them programmatically. This is good, because it allows JavaScript to be modular, reducing dependencies and namespace clutter. Encapsulation is our friend, but excessive nesting can cause unnecessary closures which negatively affect your JavaScript performance.

In the following example, inner exists only within the scope of the function main. Every time you call main() a new inner is created, and every time main finishes running, that inner is destroyed.

function main() {
    function inner(str) {
        return { name: str };
    }
    return inner('myName');
}

Contrast the above with the following code, where there is only ever one outer, no matter how many times you call main():

function outer(str) {
    return { name: str };
}
function main() {
    return outer('myName');
}

The difference is small in the above example, because the functions are so simple. But consider the following (admittedly contrived) comparison:

// shared variables for performance testing
var i, time, numLoops = 100000;

// with nested functions
function inners() {
    function nestOne(str)   { return str + ' + nestOne';   }
    function nestTwo(str)   { return str + ' + nestTwo';   }
    function nestThree(str) { return str + ' + nestThree'; }
    function nestFour(str)  { return str + ' + nestFour';  }
    function nestFive(str)  { return str + ' + nestFive';  }

    var data = '';
    time = (+new Date); // start timing
    for (i = 0; i < numLoops; i++) {
        // call everything
        data = nestOne(nestTwo(nestThree(nestFour(nestFive('testing')))));
    }
    time = (+new Date) - time; // stop timing
    alert('inners() took ' + time + ' milliseconds');
}

// no nested functions
function one(str)   { return str + ' one';   }
function two(str)   { return str + ' two';   }
function three(str) { return str + ' three'; }
function four(str)  { return str + ' four';  }
function five(str)  { return str + ' five';  }
function outers() {
    var data = '';
    time = (+new Date); // start timing
    for (i = 0; i < numLoops; i++) {
        // call everything
        data = one(two(three(four(five('testing')))));
    }
    time = (+new Date) - time; // stop timing
    alert('outers() took ' + time + ' milliseconds');
}

// run tests
inners();
outers();

Test Results

When I run the above tests in Firefox 3.6 outers() is about 30% faster than inners(), and in Internet Explorer 8, outers() is about 20% faster initially. The difference is staggering when you consider that the functions barely do anything! Imagine an actual web app, where you might be doing intense calculations, manipulating DOM elements, or performing other tasks that take real time and memory. Chrome takes about the same amount of time in each case, but that's because it has internal processes that modify your scripts before running them to improve performance.

Context is King

It's important to note that there is not only a performance difference here, there is a scope difference. When you pull nested functions out of their parent function, they now become available outside of their original scope. Depending on the structure of your application this may cause other side effects. Take a look at the big picture and determine if the nested functions really do need to be nested, but understand that they might then be recreated many times over the life of your app. In some cases if the parent function runs for a long time, there could be several copies of each inner function running simultaneously, causing potential memory issues.

Webcomic Wednesday: Learned 2 Play

Wed, 26 Jan 2011 05:00:00 +0000

This Webcomic Wednesday is brought to you by Nerf NOW!!, copyright Josué Pereira.

The New Yahoo Mail - Inside Out

Tue, 26 Oct 2010 04:00:00 +0000

I haven't been able to say much about what I've been working on since joining Yahoo, but now that Mail has opened its public beta, a post is finally in order. If you're interested in the technical side, this is more than just another announcement.

Yahoo Mail's new user interface. Yes, there will be themes if you don't like purple.

You can get some info from last month's reports on Mashable or the official YMail blog, or get a full summary of what's new from the Yahoo Mail feature site, but I figured it would be interesting to discuss Yahoo Mail from the perspective of someone who worked on it.

So What Did I Do?

We have a really great team with focused roles, so as a developer if you have any questions about a piece of code, you can find people with a complete understanding of that area. Even the interns (who were only here for about three months) jumped right into the code and took charge of pretty major tasks. Though I've committed bug fixes to many different areas of the new Mail, mostly I focused on Compose, which includes everything between hitting "Compose Message" and the actual "Send".

The Yahoo Mail compose tab, where I spent most of my development time.

I also worked on rich attachment features that utilized BrowserPlus. Unfortunately the BrowserPlus features are disabled for the initial release, but when they're available they provide an enhanced interface for uploading multiple files, seeing snapshots of your uploads, and being able to dynamically resize or crop images right in YMail.

Architecture

This version of Mail is a complete overhaul from the last. YUI 3 plays an integral role in the code design, with Mail components being created as YUI modules and loaded via YUI().use. There is a strong MVC leaning, which allows us to more easily swap out code as new features become available. For example, right now the attachment uploader uses a basic HTML form component, but in the future it can be automatically replaced by Flash or BrowserPlus at runtime depending on the user's system and settings.

Testing, Build, and Deployment

Every developer has his or her own personal development server with a complete instance of Yahoo Mail running on it. We use SVN for version control. Unit tests are part of the Mail codebase and run on each development server, and we run Selenium smoke tests before each commit.

All's well according to the Hudson smoke tests.

Mail is built using continuous integration with Hudson — a build is kicked off immediately after every commit, and a secondary build runs at regular intervals to produce (hopefully) stable builds which get pushed out to staging and production servers.

Questions or Comments?

Feel free to ask me anything about the new incarnation of Yahoo Mail, whether it's about the application itself or how it's written or built. I'll answer to the best of my knowledge and ability, keeping in mind that I can't discuss certain things for security/legal reasons...

Webcomic Wednesday: Working at Home

Wed, 25 Aug 2010 04:00:00 +0000

This Webcomic Wednesday is by The Oatmeal.
See this comic in its natural habitat.

Review: YUI 2.8 Learning the Library

Tue, 17 Aug 2010 04:00:00 +0000

YUI 2.8: Learning the Library is a new book by Daniel Barreiro and Dan Wellman covering the ins and outs of the Yahoo User Interface Library (hereafter "YUI"). YUI is both a set of common JavaScript utility functions and an ever-growing collection of widgets for building rich internet applications. I have studied both YUI 2 and YUI 3 from a JavaScript library developer point of view, but obviously working at Yahoo has given me much more exposure to YUI on a practical level.

Find this book on Amazon or the publisher's site.

Why YUI 2.x?

Since YUI3 is available, you may wonder why Packt would want to publish a new book on YUI2. The author does a good job of explaining why. Development has not stopped for YUI2 — gallery widgets are being added and improved consistently. YUI3's use(...) statement can even load YUI2 components, so you get lot of interoperability between versions.

Getting Started

Learning the Library assumes familiarity with HTML and JavaScript, but not necessarily with YUI. Chapter 1 teaches you how to get YUI 2.8 on your page, what license it uses and why, where else you can find help, and a bit about the library's overall history. There are also a few code snippets which serve as syntax examples, but then you jump right in and write an interactive Calendar widget. This is a practical example which includes writing a support class for dealing with date math.

CSS and DOM Utilities

The next chapter covers reset, base, fonts, and grid; these are CSS features which take the headaches out of consistent cross-browser design. The grid system allows nested grids of varying size, and it's easy to see how you can rapidly mock up a page layout with it.

YUI 2.8's CSS grids break a page into customizable "building blocks"

Chapters 3 through 5 cover several features which are now considered common across nearly all JavaScript libraries: normalizing DOM access across various browsers, handling user interface events, calling the server using AJAX, and animating CSS attributes. Via another practical example, you build an Accordion widget to put everything you've learned thus far to use.

Putting the UI into YUI

The second half of the book really dives into the widgets and controls available in YUI. As modern browsers converge on features and standardization, this is really where the biggest differences tend to be from one JavaScript library to the next. Chapter 6 introduces the generic containers - Module, Overlay, Panel, Tooltip, and Dialog. These are "virtual windows" which are suited to different purposes. For example, if your widget accepts user input, you may want to wrap it in a Dialog. If you need to drag and drop your widget, start with a Panel.

Navigation menus comprise Chapter 7, which is available as a free download from the publisher. The next few sections cover data-intensive controls such as trees, tables, autocomplete, how to link front-end UI components with back-end data sources, and how YUI handles drag and drop operations. The authors devote an entire chapter to the Rich Text Editor, and walk you through building an e-mail editor complete with formatting, input validation, sanitization against hacks and attacks, and CSS styling to make your editor look like a unified widget.

Debugging, Performance, and Wrap Up

Everyday Tools, the final chapter of the book, covers several developer tools. You see how to debug classes and events using YUI's Logger control, and how to use external tools such as JSLint and YUI Compressor to improve the quality and performance of your code.

YUI's Logger Console displays live debug information right on your webpage.

All in all, this book is great for getting up to speed with YUI 2. The examples are useful and complete, not simple snippets, and they are provided from an object-oriented and "best practice" point of view, which is to be expected if you are familiar with Yahoo's Developer Network.

Recursive Find-in-Files on Linux or Unix

Thu, 08 Jul 2010 04:00:00 +0000

I find myself needing this more and more often lately, so I figured this is as good a place as any to keep track of it. Here's how to recursively search for files containing a particular string or regular expression. This should work on most Linux or UNIX systems, depending on your configuration.

    find -type f -name "*" | xargs grep 'word, phrase, or regular expression'

Summary for the curious:

find returns the names of one or more files, but not their contents.
-type f tells find to only look at files, not directories.
-name "*" tells find to examine everything. You can replace this with "*.js" to only search JavaScript files, for example.
| "pipes" the output of the command on the left to the input of the command on the right.
xargs creates and executes a command based on the arguments you pass to it.
grep searches the contents of files and returns each line that is a match.
'...' is a regular expression (or just a word, if you prefer) that indicates what you are searching for.

Unselectable Text Using CSS and JavaScript

Sun, 04 Jul 2010 04:00:00 +0000

Here's a quick, reusable way to make text unselectable within one or more HTML elements. Actually, here's TWO ways, both useful in certain situations.

Adding and Removing a CSS Class

The good news with this method is that it's handled completely within the CSS, if you count IE's proprietary behavior property. That means you can just add class="unselectable" and you're done.

The bad news is that you can't just remove the class when you change your mind. Most browsers are fine, but IE's behavior sticks even when the class is gone. If you want to make something selectable again later, check the next section.

    <!-- save this file as unselectable.htc and remember where you put it -->
    <public:component lightweight="true">
        <public:attach event="ondocumentready" onevent="unselectable()" />
        <script type="text/javascript">
            function unselectable(){
                element.onselectstart = function(){ return false; };
                element.setAttribute('unselectable', 'on', 0);
            }
        </script>
    </public:component>

    .unselectable {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        behavior: url(unselectable.htc); /* change this path as needed */
    }

CSS via JavaScript

This method is library agnostic, just replace setStyle with the way your preferred library modifies CSS properties. If you don't use a library, then you can copy this setStyle to your own code.

    function setStyle(element, property, value) {
        property = property.replace(/-(\w)/g, function(match, letter) {
             return letter.toUpperCase();
        });
        element.style[property] = value;
    }
    function selectable(element, bool) {
        // most browsers:
        setStyle(el, 'user-select', bool ? '' : 'none');
        setStyle(el, '-moz-user-select', bool ? '' : 'none');
        setStyle(el, '-khtml-user-select', bool ? '' : 'none');
        
        // IE:
        element.onselectstart = bool ? null : function() { return false; };
        
        // IE and Opera:
        element.setAttribute('unselectable', bool ? '' : 'on', 0);
    }

My First Week at Yahoo!

Sat, 12 Jun 2010 04:00:00 +0000

As of June 1, I'm officially a Front End Engineer at Yahoo! My official title is Technical Yahoo! Software Applications Development Engineer, Sr. but Front End Engineer is plenty descriptive (and a hell of a lot easier to say). I'm a little late for a "first week" post, but I've been so busy getting set up as a new hire that it still seems about right.

Day One

Orientation on the 1st was pretty packed, it turns out that was the beginning of "intern season" as well, so there were a few dozen new hires and a few dozen interns. Unfortunately the AC was not working, and that many people in the same room for an entire day makes for a lot of body heat. Fortunately it was a beautiful day outside with a nice cool breeze, which made meeting my new supervisor for lunch that much better. Update: Chris is already planning to leave Yahoo! Not my fault, I swear... Thanks and good luck, Chris!

Fun Stuff

There's air hockey, pool, and foosball right outside URLs, the main cafeteria at Yahoo!

Music on the Green is a series of free concerts Yahoo! holds during the summer. There are also weekly barbecues with a great variety of different food on the grill each week. And check out those purple inflatable chairs, gotta get me one of those.

There's a lot of purple stuff at Yahoo!, like a lot. This purple Mini Cooper was just sitting outside on a walkway. I think later it turned out to be an ad for insurance or something.

A More Technical Note

Generally I'm working on JavaScript for the new versions of Messenger and Mail. Don't have much to show yet but both products have some big stuff in store so watch for announcements.

Importing Blog Comments to Disqus

Thu, 06 May 2010 04:00:00 +0000

This site is running completely custom blog code, meaning both its features and its flaws are up to me. While I like the flexibility and freedom that comes with, it's often difficult (or impossible) to use third-party blog plugins written for Wordpress, Blogger, or another common platform.

I recently decided migrate my custom comment system to Disqus. I love its user experience on other people's blogs, so why not run it here? Fortunately they provide an API which makes migrating comments a relatively painless process. Figured I'd post my own steps in case it helps others with their own custom blog code. Since custom blogs are by definition unique, there are a couple of assumptions (described in the comments) that depend on how you actually implemented your blog.

<?php
    // this page's output is for our eyes only, set easy debug options
    error_reporting(E_ALL);
    ini_set('display_errors', true);
    set_time_limit(0);
    header('Content-Type: text/plain');

    /**
     * Send a request to the Disqus API and return the response.
     * @param {String} fn     : Disqus API function name
     * @param {String} method : 'get' or 'post', HTTP request method
     * @param {Array}  params : key/value pairs required by the API call
     */
    function makeRequest($fn, $method='get', $params='') {
        $key = 'your Disqus User API key goes here';
        $url = "http://disqus.com/api/$fn/?user_api_key=$key&api_version=1.1";

        // "URLify" the parameters
        if (is_array($params) && count($params)) {
            $temp = array();
            foreach ($params as $k => $v) {
                $k = urlencode($k);
                $v = urlencode($v);
                $temp[] = "$k=$v";
            }
            $params = implode('&', $temp);
        }

        // make the API request
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        if (preg_match('/post/i', $method)) {
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        } else {
            if (!empty($params)) {
                $url = $url . '&' . $params;
            }
            curl_setopt($ch, CURLOPT_URL, $url . '&' . $params);
        }
        $response = curl_exec($ch);

        if (empty($response)) {
            // something went wrong, debug the response
            foreach (array(
                CURLINFO_EFFECTIVE_URL, // the target address
                CURLINFO_HTTP_CODE,     /* If $response is empty, this is likely 400
                                         * which means "bad request". Make sure your
                                         * function name is listed.
                                         */
                CURLINFO_TOTAL_TIME,    // how long it took the request
                CURLINFO_HEADER_OUT     // the complete headers
            ) as $option) {
                echo curl_getinfo($ch, $option) . "\r\n";
            }
        }

        // return as an associative array
        return json_decode($response, true);
    }

    // fetch your Disqus Forum ID
    $response = makeRequest('get_forum_list');
    $forum_id = $response['message'][0]['id'];

    // fetch your Forum API Key (different from your user API key!)
    $response = makeRequest('get_forum_api_key', 'get', array(
        'forum_id' => $forum_id
    ));
    $forum_api_key = $response['message'];

    /**
     * NOTE: $posts is assumed to be an array of all of your blog posts, doesn't 
     * matter what format.Depending on how you implemented your blog, you may be 
     * looping through filenames, database IDs, etc.
     */
    $posts = array();
    foreach ($posts as $post) {
        /**
         * NOTE: $comments is assumed to be an associative array of this post's 
         * comments. Your array keys may be different, just make sure they're
         * reflected that in $params below.
         */
        $comments = array(
            'comment',  // required: the comment we want to import
            'name',     // required: person who commented
            'email',    // required: commenter's email address
            'datetime', // optional: comment timestamp, converted to Disqus' preferred format below 
            'ip',       // optional: commenter's IP address
            'url'       // optional: commenter's own website address
        );
        if (!empty($comments)) {
            // example identifier: "/2010/05/06/importing-blog-comments-to-disqus/"
            $identifier = $post['permalink'];

            // create this post's corresponding Disqus thread...
            $thread = makeRequest('thread_by_identifier', 'post', array(
                'identifier' => $identifier,
                'forum_api_key' => $forum_api_key,
                'title' => ''
            ));
            $thread_id = $thread['message']['thread']['id']; // ...and get its new ID

            // now we can finally import this blog post's comments
            $numComments = 0;
            foreach ($comments as $comment) {
                $params = array(
                    'thread_id' => $thread_id,
                    'message' => $comment['comment'],
                    'author_name' => $comment['name'],
                    'author_email' => $comment['email'],
                    'forum_api_key' => $forum_api_key,
                    'created_at' => date('Y-m-d\TH:i', strtotime($comment['datetime'])),
                    'ip_address' => $comment['ip'],
                    'author_url' => $comment['url'],
                    'state' => 'approved'
                );
                $disqus = makeRequest('create_post', 'post', $params);
                print_r($params); // useful for debugging
                print_r($disqus); // useful for debugging
                $numComments++;
            }
            echo "$numComments comments processed for $identifier\r\n\r\n";
        }
    }
    echo "Done.\r\n";
    exit;
    
?>

Running Apache and Node.JS Together

Tue, 20 Apr 2010 04:00:00 +0000

Node.JS is a fantastic server-side JavaScript solution by Ryan Dahl. One of its common examples is how easy it is to build an asynchronous HTTP web server. The problem with integrating Node into most real-world shared hosts is the host already has a web server listening on port 80 — probably Apache — and it's already serving your existing content.

Yes, your Node.JS server can use another port, but then you have to point people to something like http://your.website.com:8000/ instead of http://your.website.com/. This makes transitioning to Node.JS feel a little less "real".

I'm going to show you how to transparently pass individual paths to Node.JS, without changing either your URLs or the way your existing content is served.

    
    /**
     * This is our Node.JS code, running server-side.
     */
    var sys = require('sys'),
        http = require('http'),
        port = 8000; // TODO: set your actual port here
    http.createServer(function(request, response) {
        response.writeHead(200, {
            'Content-Type': 'text/html'
        });
        
        /**
         * Here you can route or process the page based on request.url,
         * or you may want to use a module such as node-router.
         */
         
        response.end();
    }).listen(port);
    sys.puts('Server listening on port ' + port);

So far, so good. Run node http.js & (or whatever you called the above file) and your server should be up and running. The "&" at the end runs node in the background. Now for some easy .htaccess magic:

    # This is the .htaccess file in our document root.
    Options +FollowSymLinks -Indexes -MultiViews
    
    <IfModule mod_rewrite.c>
        
        RewriteEngine on
        
        # Simple URL redirect:
        RewriteRule ^test.html$ http://arguments.callee.info:8000/test/ [P]
        
        # More complicated (the user sees only "benchmark.html" in their address bar)
        RewriteRule ^benchmark.html$ http://arguments.callee.info:8000/node?action=benchmark [P]
        
        # Redirect a whole subdirectory:
        RewriteRule ^node/(.+) http://arguments.callee.info:8000/$1 [P]
        
    </IfModule>

Request.url is basically equivalent to PHP's $_SERVER['REQUEST_URI'], meaning if you visit http://your.website.com/node/testing/someFile.html given the above code, Node.JS will provide "/testing/someFile.html" as request.url. Query strings are also included.

The amount of control this gives you allows you to phase in support for Node.JS as quickly or as slowly as you like, and from your visitors' point of view nothing changes. Anything you don't explicitly pass to Node will be handled by Apache (or your current web server).

Do you already use Node.JS alongside an existing web server? What projects are you running on Node, or what do you plan to run?

Mysql_fetch_all: PHP's Missing Function

Tue, 13 Apr 2010 04:00:00 +0000

PHP has a ton of built-in functions (over 5700 as of this blog post), almost 50 of which deal with MySQL database manipulation. I don't think I normally use more than about 3 or 4 mysql_... functions, but one task I perform often is gather all of the returned rows into an array.

	// assume $conn is my database connection
	$query = "SELECT * FROM someTable WHERE someField = 'Some Value'";
	$result = mysql_query($q, $conn);
	$rows = array();
	while($row = mysql_fetch_assoc($r)) {
		$rows[] = $row;
	}
	// $rows now holds all of my results

If I just have to do one query, that's fine. But on large projects I may have several queries on a single page. Any time I have to type something more than twice I quickly start looking for ways to abstract it into a reusable function, so here goes:

	function mysql_fetch_all($query, $conn) {
		$result = mysql_query($query, $conn);
		$rows = array();
		while($row = mysql_fetch_assoc($result)) {
			$rows[] = $row;
		}
		return $rows;
	}
	
	// all future queries become one-liners
	$employees = mysql_fetch_all("SELECT * FROM Employees", $conn);

Nothing Earth-shattering, but fewer keystrokes means fewer chances for error. What's your favorite PHP or SQL shortcut?

Convert ZIP code to a Yahoo! WOEID

Fri, 26 Mar 2010 04:00:00 +0000

If you want to get the current weather (or weather forecast) for a given location, you might be tempted to find that information by ZIP code. Until this week, you would be able to use Yahoo's Weather RSS feed. A URL like http://weather.yahooapis.com/forecastrss?p=92260 would return weather information for the ZIP code 92260. Easy!

If you've already done that, you may have noticed your service no longer works. This is because Yahoo! recently switched to only allow "Where On Earth" IDs (WOEIDs) as input for their weather API. The reasoning behind this is better integration with Yahoo's family of geo technologies like Placemaker, GeoPlanet, GeoPlanet Data, Fire Eagle, and Yahoo! Maps.

But don't fret, it's easy to convert your ZIP code to a Yahoo! WOEID.

<?php
    function getWOEID($zip) {
        // use YQL to find the WOEID
        $q = "select woeid from geo.places where text='$zip' limit 1";
        
        // execute the YQL query we just built
        $ch = curl_init('http://query.yahooapis.com/v1/public/YQL?format=json&q=' . urlencode($q));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $response = curl_exec($ch);
        
        // if we got something back
        if ($response) {
			try {
	            $response = json_decode($response, true);               // convert JSON to an array
            	return $response['query']['results']['place']['woeid']; // path to the WOEID value
			} catch(Exception $ex) {
				return 0; // invalid response, we may have hit the rate limit (see next section)
			}
        }
        
        return 0; // we received no response at all
    }
    
    // change "?p=" to "?w=" in your URL, that's it!
    $url = "http://weather.yahooapis.com/forecastrss?w=" . getWOEID($_GET['zip']);
    
    // fetch Yahoo's weather RSS feed
    $ch = curl_init($url);
    curl_exec($ch);
    curl_close($ch);
?>

Show Me the Cache

One important thing to note is that WOEIDs will not change, at least not in the forseeable future. Once you convert one zip code, there's no reason to ever call that same query again. To avoid possibly hitting the YQL public API rate limit we can cache the responses we get back. You can do so in a database, but here's a quick and easy file-based cache which works just as well:

<?php
    function getWOEID($loc) {

        $cache = "./cache/$loc.txt";
        // if the cache directory doesn't already exist, make it
        if (!is_dir('cache')) {
            mkdir('cache');
        }
        if (file_exists($cache)) {
            return file_get_contents($cache);
        }
		
		// same query as in the first example
        $q = "select woeid from geo.places where text='$loc' limit 1";
        $ch = curl_init('http://query.yahooapis.com/v1/public/yql?format=json&q=' . urlencode($q));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $response = curl_exec($ch);
        if ($response) {
            try {
                $response = json_decode($response, true);
                $response = intval($response['query']['results']['place']['woeid']);
				
				// this block is new, we store the response locally
                if (intval($response)) { // only cache valid responses
                    file_put_contents($cache, $response);
                    return $response;
                }
				
            } catch(Exception $ex) {
                return intval(0);
            }
        }
        return intval(0);
    }
?>

Multiple cURL Requests with PHP

Sun, 21 Feb 2010 05:00:00 +0000

(jump to the practical example)

PHP has a set of cURL functions to let your script download other webpages. If you use cURL to scrape data or build mashups, you may need to fetch more than one page. This could create a massive performance problem, adding seconds to your own script's runtime because you have to wait for several individual cURL requests to come back.

Enter curl_multi_init. This family of functions allows you to combine cURL handles and execute them simultaneously.

	// this example does NOT use simultaneous requests, it must wait for each response
	
	// request 1
	$ch = curl_init('http://webservice.one.com/');  // initialize the request
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // store the page contents
	$response_1 = curl_exec($ch);                   // actually make the request
	
	// request 2
	$ch = curl_init('http://webservice.two.com/');
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$response_2 = curl_exec($ch);
	
	// normally you would process your results here
	echo "$response_1 $response_2";

	// with curl_multi, you only have to wait for the longest-running request
	
	// build the individual requests as above, but do not execute them
	$ch_1 = curl_init('http://webservice.one.com/');
	$ch_2 = curl_init('http://webservice.two.com/');
	curl_setopt($ch_1, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch_2, CURLOPT_RETURNTRANSFER, true);
	
	// build the multi-curl handle, adding both $ch
	$mh = curl_multi_init();
	curl_multi_add_handle($mh, $ch_1);
	curl_multi_add_handle($mh, $ch_2);
	
	// execute all queries simultaneously, and continue when all are complete
	$running = null;
	do {
		curl_multi_exec($mh, $running);
	} while ($running);
	
	// all of our requests are done, we can now access the results
	$response_1 = curl_multi_getcontent($ch_1);
	$response_2 = curl_multi_getcontent($ch_2);
	echo "$response_1 $response_2"; // same output as first example

If both websites take one second to return, we literally cut our page load time in half by using the second example instead of the first. Sweet!

In Action: Twitter

Here's an example where we run multiple Twitter searches and combine the results to display them on our own site.

As a bonus, it also caches the results for 1 minute so we avoid hitting Twitter's rate limit if we get a ton of visitors at the same time. You can change $minutes to any number you feel comfortable with, but it's important to include because you will end up with a complete blank list if your page gets a lot of hits, which is precisely the worst time to kill your content.

function tweets() {
    
    // check cache
    $cache = 'twitter-search.txt';
    if (file_exists($cache)) {
        clearstatcache();
        $minutes = 1; // how long to wait before refreshing the cache
        if (filemtime($cache) > (time() - (60 * $minutes)) {
            return file_get_contents($cache);
        }
    }
    
    // we are going to search for tweets mentioning these keywords
    $keywords = array(
        'javascript',
        'html5',
        'css3'
    );
    
    // build the requests
    $ch = array();
    $mh = curl_multi_init();
    for ($i = 0; $i < count($keywords); $i++) {
        $keyword = $keywords[$i];
        $ch[$i] = curl_init();
        curl_setopt($ch[$i], CURLOPT_URL, 
                'http://search.twitter.com/search.json?rpp=3&q=' . $keyword);
        curl_setopt($ch[$i], CURLOPT_USERAGENT, 
                'Twitter requires you to set a user agent, any value works here.');
        curl_setopt($ch[$i], CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch[$i], CURLOPT_HEADER, false);
        curl_multi_add_handle($mh, $ch[$i]);
    }
    
    // execute the requests simultaneously
    $running = 0;
    do {
        curl_multi_exec($mh, $running);
    } while ($running > 0);
    
    // display the results
    $output = '';
    for ($i = 0; $i < count($keywords); $i++) {
        // $results contains this keyword's tweets as an associative array
        $results = reset(json_decode(curl_multi_getcontent($ch[$i]), true));
        $resultCount = count($results);
        
        // link to our keyword
        $output .= '<dl><dt><a href="http://search.twitter.com/search?' . $keywords[$i] . '</a></dt>';
        
        // dump the search results
        for ($j = 0; $j < $resultCount; $j++) {
            $id = $results[$j]['id'];                          // twitter user ID
            $user = $results[$j]['from_user'];                 // twitter user name
            $tweet = $results[$j]['text'];                     // tweet text
            $url = "http://www.twitter.com/$user/status/$id/"; // link to the tweet
            
            $output .= '<a href="' . $url . '">' . $tweet . ' &mdash; ' . $user . '</a>';
        }
        $output .= '</dd></dl>';
    }
    file_put_contents($cache, $output); // store in local cache for performance boost
    return $output;
}
echo tweets();

Webcomic Wednesday: Google Buzz Trick

Wed, 17 Feb 2010 05:00:00 +0000

This Webcomic Wednesday is brought to you by thedoghousediaries.
Check the authors out on Twitter or Facebook.

Easy CSS Minification on Client and Server

Fri, 05 Feb 2010 05:00:00 +0000

While developing a website, it may help to add whitespace to your CSS to make it easier to read and maintain. However, when serving CSS to your actual visitors, it's often best to minify it, which involves removing that empty space. This makes the filesize smaller, reducing your bandwidth usage and improving page load time. You could see large improvements in filesize and load time, depending on your input.

The PHP example minifies your code on the server, before the page is sent to your visitor. The JavaScript example does the same thing, but after the visitor is already on the page. Obviously to reap the bandwidth and speed benefits you need to minify CSS on the server. However, by implementing this in JavaScript you can provide an easy cut-and-paste minification service to others.

Minifying CSS on the Server (PHP)

    // load your unminified CSS code
    $input = file_get_contents('/path/to/your/stylesheet.css');
    
    // minify it
    $output = preg_replace('/[\s\n]+/', ' ', $input);
    
    // on your actual site, you can refer to "minified.css"
    file_put_contents('/path/to/your/minified.css', $output);

Minifying CSS on the Client (JavaScript)

    // the regex is the same
    var output = input.replace(/[\s\n]+/g, ' ');

Simply paste a block of CSS in the text area below and press Go, and your code will be minified!

There are many additional measures you take if you want to squeeze every last byte out of your code, but even this is enough to noticeably improve your website's response time.

JavaScript Design Patterns: Lazy Initialization

Sun, 10 Jan 2010 05:00:00 +0000

Lazy initialization (also called lazy function definition or lazy loading) is a creational design pattern which often boosts performance. It's how you can avoid repeating an "expensive" process — creating a large or complex object, performing a difficult calculation, or spinning in a long loop. Lets take a look at a few variations of this design pattern.

On-Demand Script Loading

On-demand loading is becoming more widespread across JavaScript libraries. One big example is Yahoo's YUI3; their library begins small and loads additional chunks as required. By reducing the initial payload, on-demand loading can make your site load faster and be more responsive.

Outside of libraries, there are many ways to dynamically load scripts. Nicholas Zakas suggests this as the best method for loading external JavaScript files:

    function loadScript(url, callback){
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) { // IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { // not IE
            script.onload = function() {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    <!-- loadScript.js contains loadScript() as defined above -->
    <script type="text/javascript" src="loadScript.js"></script>
    <script type="text/javascript">
        loadScript('/js/BigScript.js', function() {
            var o = new BigObject(); // assume this constructor is defined in BigScript.js
        });
    </script>

By deferring BigScript.js, the page appears to finish loading before that file is even fetched. The file loads "behind the scenes", letting your visitor start interacting with your site sooner.

Lazy Factory

A Factory generates an object when it is needed. A Lazy Factory actually generates the factory. One common Factory example is the XMLHttpRequest object used to make AJAX calls:

    function getHttp() {
        if (typeof XMLHttpRequest != 'undefined') {
            return new XMLHttpRequest();
        } else if (typeof ActiveXObject != 'undefined') {
            return new ActiveXObject("MSXML2.XMLHttp");
        }
    }
    var http = getHttp();

Every time you call getHttp(), your code checks for the existance of XMLHttpRequest, and then possibly checks for the existance of ActiveXObject. Really, these checks only need to be made once, because the results will always be the same under normal circumstances. Lazy Factory to the rescue:

    function lazyHttp() {
        if (typeof XMLHttpRequest != 'undefined') {
            lazyHttp = function() { return new XMLHttpRequest(); }
        } else if (typeof ActiveXObject != 'undefined') {
            lazyHttp = function() { return new ActiveXObject("MSXML2.XMLHttp"); }
        }
        return lazyHttp();
    }
    var http = lazyHttp();

The first time lazyHttp is called, it actually redefines itself based on the current environment. The second time it is called, lazyHttp returns the proper object directly, no checks required. More complex factories might skip whole blocks of code, resulting in increased savings.

Lazy Function Definition

Closely related to the Lazy Factory is Lazy Function Definition. The first time a lazy function is called, it redefines itself based on a one-time calculation or evaluation. Often, JavaScript libraries implement this pattern when retrieving CSS style information:

    // these IF statements will be tested every time getStyle is called
    function getStyle(element, property){
        if (document.defaultView && document.defaultView.getComputedStyle) { // not IE
            return document.defaultView.getComputedStyle(el, '')[property];
        } else if (element.currentStyle) { // IE
            return element.currentStyle[property];
        }
    }
    
    // these IF statements will be tested only the FIRST time getStyle is called
    function getStyle(element, property) {
        if (document.defaultView && document.defaultView.getComputedStyle) {
            getStyle = function(element, property) {
                return document.defaultView.getComputedStyle(element, '')[property];
            };
        } else if (element.currentStyle) { // IE
            getStyle = function(element, property) {
                return element.currentStyle[property];
            };
        }
        return getStyle(element, property);
    }

Because a Factory is technically just a function, these two implementations are basically identical. The difference is a conceptual one — factory methods typically return an object, either through new or the object literal {}. Generic lazy functions may return any type.

Extreme LFD, or "But when will I really USE this?"

JavaScript is a powerful language, and can represent powerful constructs such as the Y combinator:

var Y = function(F) {
    return (function(x) {
        return F(function(y) {
            return (x(x))(y);
        });
    })(function(x) {
        return F(function(y) {
            return (x(x))(y);
        });
    });
};

It's way beyond the scope of this particular post to explain how the Y Combinator is derived and used, but here's a fantastic explanation along with a demonstration which calculates the 100th Fibonacci number instantly, though a recursive (and non-lazy) implementation would take... well, in most browsers it would never return.

Quick Tip Regarding Google Chrome Frame

Fri, 25 Dec 2009 05:00:00 +0000

When setting Internet Explorer's X-UA-Compatible header, you can tell if it worked because the compatibility view button disappears. This indicates IE is using your chosen value, whether that's ie=7 for "IE7 Standards" mode, ie=8 for "Industry Standards" mode (as close as IE8 gets, anyway), or chrome=1 for Google Chrome Frame.

Left: A typical IE toolbar. Right: The same page with the X-UA-Compatible header (or meta tag) properly set.

With the introduction of Chrome Frame for IE, many webmasters would like their sites to load in Chrome Frame if available, and IE8 Standards mode otherwise. Some advise using two meta tags to accomplish this, with the first specifying chrome=1 and the second specifying ie=8. However, according to Microsoft's documentation, IE completely ignores any X-UA-Compatible header beyond the first on a page, so if your visitor does not have Chrome Frame installed, your site will probably be viewed according to your DOCTYPE, which may be IE8 Standards mode, IE7 Standards mode, or IE5 (quirks) mode. Also, the visitor's own Compatibility View setting can override your DOCTYPE.

The proper way to specify more than one compatibility mode is to use one meta tag, with the values separated by semicolons:

	<!-- render in Chrome Frame if available, or IE8 Industry Standard mode otherwise -->
	<meta http-equiv="X-UA-Compatible" content="chrome=1;ie=8">

As always, it's best to specify a DOCTYPE to ensure cross-browser compatibility, but using Microsoft's X-UA-Compatible meta tag correctly gives you an edge in the battle against IE's ever unpredictable Quirks Mode.

Webcomic Wednesday: Design Hell

Wed, 09 Dec 2009 05:00:00 +0000

See this bad boy in its natural habitat.

Soudersize the Web

Wed, 02 Dec 2009 05:00:00 +0000

If you're a web developer, you probably already know about Steve Souders. He's quite possibly the most influential proponent of high performance websites out there.

Steve Souders

Steve's Stuff

Steve Souders has founded and participated in a number of projects, most of which involve making websites faster, making software faster, or promoting other open source projects and developers. See how many of these you already use, and try those you don't — you might even find a new favorite!

Browserscope: Profiles actual web browsers to track performance, support, adherence to web standards, and a host of other features.
Compare: Pits any two websites against each other in a performance battle.
CS193H: Lectures from the Stanford course Steve taught. Uses High Performance Web Sites as the textbook.
Cuzillion: Quickly test a variety of components (images, stylesheets, scripts) in any order, and determine that order's effect on page load time.
Episodes: An open source "framework for timing web pages", including Web 2.0 apps. (Starting to see a trend?)
Hammerhead: A Firebug add-on which provides more precise website load time measurement and stress testing.
Link Walker: Loop through and open a list of URLs extracted from your current webpage.
SpriteMe: Automatically generates CSS sprites using your website's images.
Velocity: Annual web performance and operations conference.
Web Exponents: Speaker series covering web development innovations and best practices.
YSlow: A Firebug add-on which tests websites against several high performance best practices. Also incorporates a ton of other dev-friendly tools.

Yahoo!

In 2004, Steve became "Chief Performance Yahoo!" at, well, Yahoo! His goal was to measure and improve performance across every Yahoo-run product. It was then that he discovered that over 80% of the time spent waiting for a webpage to load is spent on the front end, not the back end. This research led Souders to create 14 Rules for Faster-Loading Web Sites, the cornerstone for what would become Yahoo's own Exceptional Performance and YSlow.

Two books on website performance by Steve Souders.

Google

In January of 2008, Souders left Yahoo for Google. They have since released many of their own products and enhancements based on improving website performance. Coincidence? Perhaps. Although Google has had a history of shaving bytes to save their own bandwidth, there hadn't been a major effort to improve website performance everywhere until about a year ago.

New Slogan: Let's make the web faster
Asynchronous Analytics: Ending the reign of a notoriously picky and occasionally sluggish analytics script.
Closure: A JavaScript optimizer/compiler and a modular JavaScript library, as well as a set of templates for dynamically generating HTML.
Page Speed: A Firebug add-on which evaluates website performance against a huge variety of factors.
SPDY: An experimental transport protocol (like HTTP and FTP) to reduce website latency. Their target is to be twice as fast as HTTP.
Tutorials and Articles: An ever-growing list of ways to reduce bandwidth usage and page load time.

"Soudersize"? That's not even a word.

No, you got me. But with the "speed up the web" mantra being thrown around these days, it seems appropriate to credit one of the movement's key players. How do you Soudersize your website? Are there any best practices or performance hacks you use to keep it running smoothly?

Digital Signage Application Launch

Wed, 11 Nov 2009 05:00:00 +0000

Today we launched the second major version of DCSI's digital out-of-home media player. The first version, written primarily in Adobe Flex on Adobe AIR, has been going strong for over a year.

The PHP back end automates video and image conversion, playlist building, and content pushing, and monitors each player's health and actual play logs. Weather, sports scores, and news feeds are all pulled live, with caching built in (on server AND client) to reduce bandwidth requirements and improve reliability. Since there are hundreds of active locations with thousands more contracted, we've put a lot of effort into streamlining the way this application works.

DCSI's legacy player has one fixed state, but can display a wide variety of content.

Two point oh

Version two is written primarily in JavaScript on the Appcelerator Titanium platform. It also allows new states to be defined and added to the player, so panels can be any size, anywhere on the screen. The player smoothly transitions from state to state, which in itself can be more visually engaging and draw the eye.

Sample states for the new player (current count is over a dozen). In "real life" the panels smoothly resize and reposition themselves based on state and content. The logo, weather, and time are also regular panels, and can also change size and position, or even be replaced with any video, image, or RSS feed.

Difference in development

It can be both exciting and harrowing developing on Titanium. At Geekworks we're used to working with bleeding edge technologies, but there are times when Titanium's beta status can be risky for production code. Some days Appcelerator's cloud goes down, and that means I may not be able to compile until it comes back up.

Fortunately the bad times are few and far between, and the support team is always quick to respond. Actually, because Titanium is an open source project, it's often easier to get fast support than it can be with Adobe AIR.

And the winner is...?

I don't think either AIR or Titanium will become the One True Answer for cross-platform development and deployment. Each has its strengths and weaknesses, and the goals driving each platform appear significantly different. I will continue to use AIR for quick personal applications and things I want to make easy for "the masses". It's easier and faster to deploy an AIR app, and you can run the same installer on Windows, Mac, or Linux.

Titanium has become a better choice at work, despite its beta status. I expect we will continue using it for many client projects to come. It always seemed like we were fighting AIR's sandbox issues and other OS restrictions, which makes Titanium the clear choice for enterprise software and kiosk or other "locked down" systems. All this may change as both platforms evolve.

Roll out!

Today's launch will be about 5 venues in Phoenix, AZ. After that we will begin rolling out to over a hundred locations across the United States. Where do you live? I'd love to get some comments from people who have seen either version in action. Post your location, and I'll let you know where to find the nearest sign!

Basic Server Authentication with PHP

Wed, 11 Nov 2009 05:00:00 +0000

Sometimes you want to secure a particular webpage, but don't want to manage users or accounts, write a separate login page, etc. The easy way to authenticate is to use HTTP's WWW-Authenticate response header:

<?php
    
    $nouser = empty($_SERVER['PHP_AUTH_USER']) || ($_SERVER['PHP_AUTH_USER'] != 'MyUsername');
    $nopass = empty($_SERVER['PHP_AUTH_PW']) || ($_SERVER['PHP_AUTH_PW'] != 'MyPassword');
    
    if ($nouser || $nopass) {
        header('WWW-Authenticate: Basic realm="Geekworks Unlimited, LLC."');
        header('HTTP/1.0 401 Unauthorized');
        echo '<h1>HTTP/1.0 401 Unauthorized</h1>';
    } else {
?>
<!DOCTYPE html>
<html>
    <head>
        <title>My Secret Website</title>
    </head>
    <body>
        Your website content goes here.
    </body>
</html>
<?php    
    }
    
    exit;
    
?>

This checks against a single (hardcoded) username and password, which is fine in simple cases. If you do need to give each user his or her own username and password, you can replace the first two lines with a loop that checks $_SERVER['PHP_AUTH_USER'] and $_SERVER['PHP_AUTH_PW'] against values in your user database.

One note: You will want to change where it says realm="...". This message is shown in the popup that asks the visitor to input a username and password. It also serves as a possible set of pages to authenticate against. If you include the same realm on multiple pages, the user will only have to log in once in order to visit all of the pages.

Quick Query String Parsing with JavaScript

Wed, 28 Oct 2009 04:00:00 +0000

(skip to the parser)

The "query string" is a way to embed variables in a URL. For example, if you search for "test" in Yahoo!, you might see a URL like this:

    http://search.yahoo.com/search?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701

The query string is everything after and including the question mark, in this case ?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701. As you can see, the query string contains key-value pairs, split by ampersands (&).In PHP you can easily grab those values using the built-in $_GET superglobal:

    // assume the same query string as above: ?p=test&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701
    
    echo $_GET['p'];      // test
    echo $_GET['toggle']; // 1
    echo $_GET['cop'];    // mss
    
    echo $_GET['invalid']; // null or empty, no such key exists

JavaScript sees the query string as a plain string, called window.location.search. While there are many methods out there to parse location.search and make its key-value pairs available, I feel that most of them are overkill for what should be simple behavior.

    // JavaScript equivalent of PHP's $_GET superglobal
    function $_GET(key) {
        try {
            return window.location.search.match(new RegExp('[\?&]' + key + '=([^&#]+)'))[1];
        } catch (err) {
            return '';
        }
    }
    
    alert( $_GET('p') );      // test
    alert( $_GET('toggle') ); // 1
    alert( $_GET('cop') );    // mss
    
    alert( $_GET('invalid'); // empty string '', no such key exists

Notice that the JavaScript requires parentheses: $_GET('p'), while PHP requires brackets: $_GET['p']. This is because the JavaScript version is a function, while the PHP version is an array. To avoid the confusion you could parse out every variable on page load and store it in a single array, but I find this method suitable enough for my own needs. Hope you find it useful!

The Three Cs of Fast CSS and JavaScript

Mon, 12 Oct 2009 04:00:00 +0000

One major "best practice" from both Yahoo! YSlow and Google Page Speed is minimizing HTTP requests. Yahoo! indicates that "80% of the end-user response time is spent on the front end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc." ^cite

What does this mean? The fewer calls your page makes to the server, the faster your page is. Here are three ways to drastically improve your site response time:

Combine your stylesheets and scripts so that you only have to load one CSS file and one JS file.
Compress and minify the combined files so you save bandwidth and transfer time.
Cache the compressed output so your server doesn't have to repeat the process for each new visitor.

Here's one way to accomplish this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="load.php?type=css">
    </head>
    <body>
        ... website content ...
        <script type="text/javascript" src="load.php?type=js"></script>
    </body>
</html>

<?php
    
    /**
     * The following directory structure is assumed:
     * css/
     *     reset.css
     *     style.css
     * js/
     *     jQuery.js
     *     main.js
     * index.php
     * ...        (the rest of your webpages)
     * load.php   (THIS code block)
     */ 
    
    error_reporting(0);       // supress errors (browsers will see them as invalid CSS/JS)
    ob_start('ob_gzhandler'); // compress with GZIP
    
    $isJavaScript = ($_GET['type'] == 'js');
    if ($isJavaScript) {
        $type = 'javascript'; // content type
        $ext = 'js';          // file extension
        $files = array(       // TODO: modify this list based on your own JS files
            'jQuery',
            'main'
        );
    } else {
        $type = $ext = 'css'; // content type is the same as the extension
        $files = array(       // TODO: modify this list based on your own CSS files
            'reset',
            'style'
        );
    }
    
    header("Content-Type: text/$type"); // set the appropriate content type
    $cache = "$ext/cache.$ext";         // for example, css/cache.css
    if (!file_exists($cache)) {         // see if we've already created a cache
        $toCache = '';
        foreach ($files as $f) {
            $f = "$ext/$f.$ext";        // for example, css/style.css
            if (file_exists($f)) {
                $c = file_get_contents($f);
                if ($isJavaScript) {
                    include_once('jsmin.php');     // get JSMin here
                    $toCache .= JSMin::minify($c); // slow, but only called when there is no cache
                } else {
                    // quick and easy way to minify CSS, removes multiple spaces and blank lines
                    $toCache .= preg_replace(array('/\s\s+/', '/\n/'), array(' ', ' '), $c);
                }
            }
        }
        file_put_contents($cache, $toCache);
    }
    readfile($cache);
    exit;
    
?>

The first time the script is called (ever), it may take a few seconds to generate the cache file, but every time after that it will load extremely quickly due to the "three Cs" implemented above. Since minification is part of the process, you can work directly with unminified and commented code on the server, and let the script minify it for you. If you normally load 3+ stylesheets or scripts, you will see a massive performance boost with this type of script.

If and when you change any of your CSS or JavaScript, just delete the cached file and everything is automatically updated on your site's next visit.

Do you have a favorite method of combining scripts to improve website performance? Please share it in a comment!

Adobe AIR vs Appcelerator Titanium: Round Two

Sat, 26 Sep 2009 04:00:00 +0000

Well, it's been a few months since my last AIR/Titanium comparison, and the game has changed. Though AIR has only updated from 1.5.1 to 1.5.2, that upgrade brought a ton of bug fixes and enhancements, especially for the Mac and Linux platforms. Titanium has moved from 0.4.1 to 0.6.2, which is a lot of revision.

What's the same?

The development environments for both have not changed. I would like to clarify one point I made about packaging your applications in Adobe AIR versus Appcelerator Titanium — I mentioned the Titanium process was easier becuase you don't have to deal with certificiates. This is true, but the nice thing about AIR's packaging process is that you build one installer, and it runs on all platforms. With Titanium, if you want to run on Windows, Mac, and Linux, you must build three different packages.

What's new in Titanium?

Some of the Titanium Desktop API has changed since Round One:

    
    // OPENING AND READING FROM A LOCAL FILE
    var TF = Titanium.Filesystem; // for convenience
    var r = TF.getRootDirectories()[0]; // typically "C:\" on Windows, "/" on Mac and Linux
    var file = TF.getFile(r, 'path', 'to', 'myFile.txt');
    var stream = TF.getFileStream(file); // open the file...
    stream.open(TF.MODE_READ);           // ... for reading only ...
    var fileContents = stream.read();    // ... retrieve the entire contents ...
    stream.close();                      // ... and close the stream
    /**
     * NOTE: getFile() automatically glues arguments together with the correct
     * file separator for the operating system it runs on. "\" for Windows,
     * "/" for Mac/Linux.
     */
    
    
    // RUNNING AN EXTERNAL PROGRAM
    var notepad = Titanium.Process.createProcess({
        args : ['C:\\Windows\\notepad.exe']
    });
    notepad.launch(); // open the program
    notepad.kill();   // close the program
    
    
    // RESTARTING YOUR APPLICATION PROGRAMMATICALLY
    Titanium.Process.createProcess({
        args : [Titanium.App.path]   // automatically uses your program's executable
    }).launch();                     // inline launching
    Titanium.App.exit();             // close the "old" running copy

Where to go from here?

Adobe AIR is still a more mature, more stable platform, but Titanium is rapidly growing and becoming a serious competitor. There are things each suite can do that the other can't, and there may never be a clear winner. If you want to learn more about Titanium, they just released a series of "Zero-to-App" videos along with a roadmap for future videos. Appcelerator seems to be focused heavily on the iPhone and Android phone markets, so if you're a desktop or kiosk developer (like me) you may not get as much from those videos, but it's a start.

Join the discussion!

Do you use Adobe AIR? Appcelerator Titanium? Both? Please leave a comment, let me know what you like or don't like about these technologies.

Webcomic Wednesday: Behind Schedule

Wed, 23 Sep 2009 04:00:00 +0000

This Webcomic Wednesday is brought to you by Not Invented Here, a brand new webcomic from the creators of Unshelved and Ugly Hill.

Wampserver 2 and AMFPHP Service Browser

Sat, 05 Sep 2009 04:00:00 +0000

I installed Wampserver 2 and AMFPHP on a computer at work to run some tests, and instead ran into an error when trying to use the Service Browser.

Error retrieving service info:

Function eregi_replace() is deprecated
C:\wamp\www\amfphp\core\shared\util\MethodTable.php on line 506

Fortunately, it's easy to fix this problem. Open /amfphp/core/shared/util/MethodTable.php and find the following lines:

        $comment = eregi_replace("\n[ \t]+", "\n", trim($comment));
        $comment = str_replace("\n", "\\n", trim($comment));
        $comment = eregi_replace("[\t ]+", " ", trim($comment));

Modify those lines as follows (feel free to store a backup copy of MethodTable.php first):

        $comment = preg_replace("#\n[ \t]+#U", "\n", trim($comment));
        $comment = str_replace("\n", "\\n", trim($comment));
        $comment = preg_replace("#[\t ]+#U", " ", trim($comment));

That's it! The AMFPHP Service Browser can now interact with your AMFPHP services.

Saving Drawn Images with Canvas and Cake.js

Mon, 31 Aug 2009 04:00:00 +0000

The code on this page will not work in Internet Explorer. IE does not support the HTML5 canvas tag. Someone might be able to adapt this to detect IE and use VML instead, but that is out of the scope of this post.

Convenience functions
Creating the canvas and scene
Creating the brush
Serializing the canvas image
Storing the image with PHP
"Code all together"

Convenience functions

The only external code this example relies on is Cake.js, a library that abstracts and automates a lot of the steps required in using the HTML5 canvas tag.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #canvas {
                width: 600px;
                height: 400px;
            }
        </style>
        <title>Canvas Experiment</title>
    </head>
    <body>
        <div id="canvas">
            <!-- This container will hold our canvas element. -->
        </div>
        <button type="button">Save Image</button>
        <div id="saved">
            <!-- We will output our images here so we know they got saved. -->
        </div>

        <!-- download and host on your own site -->
        <script type="text/javascript" src="cake.js"></script>

        <!-- main.js includes all of the javascript in this blog post -->
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

    // you can use your favorite library's CSS getStyle method here...
    function getStyle(element, property) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        
        if (element.style[property]) {
            // inline style property
            return element.style[property];
        } else if (element.currentStyle) {
            // external stylesheet for Explorer
            return element.currentStyle[property];
        } else if (document.defaultView && document.defaultView.getComputedStyle) {
            // external stylesheet for Mozilla and Safari 1.3+
            property = property.replace(/([A-Z])/g, "-$1");
            property = property.toLowerCase();
            return document.defaultView.getComputedStyle(element, "").getPropertyValue(property);
        } else {
            return null;
        }
    }
    
    // we'll be calling this later to erase drawn images
    function resetCanvas() {
        canvas.clear = true;
        setTimeout(function() {
            canvas.clear = false;
        }, 100);
    }

Creating the canvas and scene

    // get the container's dimensions and create a new Cake.js Canvas
    var w = parseInt(getStyle('canvas', 'width'), 10);
    var h = parseInt(getStyle('canvas', 'height'), 10);
    var canvas = new Canvas(document.getElementById('canvas'), w, h);
    
    // setup our canvas
    canvas.frameDuration = 10;
    canvas.addEventListener('mousedown', function(e) {
        e.preventDefault();
    }, false);
    resetCanvas();
    
    /**
     * A CanvasNode can be used to group other nodes, but essentially
     * it is a drawing building block. In this case we will only need
     * one node.
     */
    var scene = new CanvasNode();

Creating the brush

    // Polygon is another Cake.js class
    var brush = new Polygon([], {
        closePath : false
    });
    
    // configure the brush size and color
    brush.strokeWidth = 2;
    brush.stroke = '#f60';
    
    // Frame frequency is based on frameDuration (which we set above)
    brush.addFrameListener(function() {
        var moves = this.root.mouseEvents.allWith(2).take(0, 1).flatten()
        if (moves.length > 0 || this.root.mouseDown) {
            
            // this block draws a series of line segments following the mouse's path
            this.segments = (this.segments.length) ? this.segments.slice(-2).concat(moves) : moves;
            if (this.segments.length == 2) {
                this.segments = this.segments.concat(this.segments);
            }
            this.visible = (this.segments.length > 0)

        } else {
            if (this.segments.length > 0) {
                this.segments = [];
            }
            this.strokeStarted = false;
            this.visible = false;
        }
    });

    // append elements
    scene.append(brush);
    canvas.append(scene);

Serializing the canvas image

    var button = document.getElementsByTagName('button')[0];
    button.addEventListener('click', function() {
        var data = canvas.canvas.toDataURL('image/png').split(/,/)[1];
        var query = 'data=' + encodeURIComponent(data);
        
        // you can use your favorite library's AJAX request method 
        var http = new XMLHttpRequest();
        http.open('POST', 'saveImage.php', true);
        http.onreadystatechange = function() {
            if (http.readyState === 4) { // XMLHttpRequest code for "Done"
                if (http.status === 200) { // HTTP status code for "OK"
                    // see below for what saveImage.php outputs
                    var img = document.createElement('img');
                    img.src = http.responseText;
                    
                    // append the new image
                    var saved = document.getElementById('saved');
                    saved.insertBefore(img, saved.childNodes[0]);
                    
                    // clear the drawing area
                    resetCanvas();
                }
            }
        };
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", query.length);
        http.setRequestHeader("Connection", "close");
        http.send(query);
    }, false);

Storing the image with PHP

<?php
    $filename = md5($_POST['data']) . '.png';
    $data = base64_decode($_POST['data']);
    file_put_contents("./saved/$filename", $data);
    echo "./saved/$filename";
    exit;
?>

"Code all together"

In case you're wondering, this section title is paraphrased from a Mitch Hedberg joke from the comedy album Strategic Grill Locations.

(function() {
    function getStyle(element, property) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (element.style[property]) {
            return element.style[property];
        } else if (element.currentStyle) {
            return element.currentStyle[property];
        } else if (document.defaultView && document.defaultView.getComputedStyle) {
            property = property.replace(/([A-Z])/g, "-$1");
            property = property.toLowerCase();
            return document.defaultView.getComputedStyle(element, "").getPropertyValue(property);
        } else {
            return null;
        }
    }
    function resetCanvas() {
        canvas.clear = true;
        setTimeout(function() {
            canvas.clear = false;
        }, 100);
    }
    var w = parseInt(getStyle('canvas', 'width'), 10);
    var h = parseInt(getStyle('canvas', 'height'), 10);
    var canvas = new Canvas(document.getElementById('canvas'), w, h);
    canvas.frameDuration = 10;
    canvas.addEventListener('mousedown', function(e) {
        e.preventDefault();
    }, false);
    resetCanvas();
    var scene = new CanvasNode();
    var brush = new Polygon([], {
        closePath : false
    });
    brush.strokeWidth = 2;
    brush.stroke = '#f60';
    brush.addFrameListener(function() {
        var moves = this.root.mouseEvents.allWith(2).take(0, 1).flatten()
        if (moves.length > 0 || this.root.mouseDown) {
            this.segments = (this.segments.length) ? this.segments.slice(-2).concat(moves) : moves;
            if (this.segments.length == 2) {
                this.segments = this.segments.concat(this.segments);
            }
            this.visible = (this.segments.length > 0)
        } else {
            if (this.segments.length > 0) {
                this.segments = [];
            }
            this.strokeStarted = false;
            this.visible = false;
        }
    });
    scene.append(brush);
    canvas.append(scene);
    var button = document.getElementsByTagName('button')[0];
    button.addEventListener('click', function() {
        var data = canvas.canvas.toDataURL('image/png').split(/,/)[1];
        var query = 'data=' + encodeURIComponent(data);
        var http = new XMLHttpRequest();
        http.open('POST', 'saveImage.php', true);
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                if (http.status === 200) {
                    var img = document.createElement('img');
                    img.src = http.responseText;
                    var saved = document.getElementById('saved');
                    saved.insertBefore(img, saved.childNodes[0]);
                    resetCanvas();
                }
            }
        };
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", query.length);
        http.setRequestHeader("Connection", "close");
        http.send(query);
    }, false);
})();

If you copy the HTML, JavaScript, and PHP to your server, you should have a fully working image saver. Let me know if you have any trouble getting this set up and I'll see what I can do.

Introduction to AMFPHP Web Services

Mon, 24 Aug 2009 04:00:00 +0000

(skip installation process)

I had my first run-in with AMFPHP this past week, and thought I'd share what I learned. AMFPHP is a technology that allows ActionScript (the programming language behind Flash and Flex applications) to talk to PHP web services. Most of the tutorials I found were for older versions of AMFPHP (current as of this post is AMFPHP 1.9 beta 20080120), and unfortunately there has not been enough backwards compatibility to get much use out of those old tutorials.

NOTE: This tutorial covers the back-end process only, future tutorials will cover writing front-end applications that connect to these types of services.

Getting Started: Downloading AMFPHP

Easy enough. Visit AMFPHP on sourceforge, click the download link under "Newest Files", and save to disk.

Getting Started: Installing AMFPHP

Step 2 is about as easy as step 1. When you unzip the file you downloaded, you will see a folder called "amfphp". Copy that folder as-is to your PHP-enabled web host.

To verify everything's fine so far, you'll want to check gateway.php in the folder you just copied. If you moved everything to http://localhost/amfphp/ then open a browser and check http://localhost/amfphp/gateway.php — you should see something like the following screenshot:

AMFPHP Default Gateway

If you click the link labeled "Load the service browser", you will see a page that lists all running AMFPHP web services. Right now, that only includes the default service which actually makes this page work: DiscoveryService.

AMFPHP Service Browser

Writing Our First Web Service

Under the /amfphp/services/ folder on your web server, create a new folder called EchoService, then create a file called EchoService.php — our service is simply going to spit back any string we send it.

Directory structure for the Echo AMFPHP web service.

<?php
    // EchoService.php example 1
    class EchoService {
        
        public function __construct() {
            // nothing yet, see the next example for more...
        }
        
        public function doEcho($strInput = '') {
            return "You said: $strInput";
        }
        
    }
?>

If we refresh our Service Browser, we now see EchoService listed. Go ahead and click EchoService, and you should see the name of the public function we just created, doEcho. Enter any text in the input field next to strInput, then press the Call button. This actually sends a call from the Service Browser to our new service, and displays the results. If everything is running smoothly, you should see "You said: ..." in the Results pane, along with whatever you sent as input.

Testing our new AMFPHP echo web service.

Adding Functionality

<?php
    // EchoService, example 2
    
    session_start(); // allows us to persist data across multiple calls
    
    class EchoService {
        
        var $samplePrivateVariable;
        
        public function __construct() {
            /* Any initialization can be done here, such as setting up 
             * database connections or initializing private variables.
             */
            $this->samplePrivateVariable = 'unused private variable, just an example';
        }
        
        public function doEcho($strInput = '') {
            return "You said: $strInput"; // same as example 1
        }
        
        /**
         * Every time this function is called, it silently stores the input.
         */
        public function addData($strInput) {
            if (!empty($strInput)) {
                $_SESSION['data'][] = $strInput;
            }
            return "Stored $strInput";
        }
        
        /**
         * This method echoes ALL stored input, then clears the buffer.
         */
        public function flushData() {
            $data = $_SESSION['data'];
            $_SESSION['data'] = array();
            return $data;
        }
        
    }
?>

Give it a spin in the Service Browser (don't forget to refresh first!). You'll also notice that the comments immediately before our new public methods are automatically parsed as descriptions in the Service Browser. It's a good habit to document your code for yourself as well as other developers.

Storing data across calls using PHP sessions.

AMFPHP is pretty straightforward, especially for those with any Object-Oriented Programming experience in PHP. Please leave a comment to let me know if this helped, or if there's anything more you'd like to see about AMFPHP.

Webcomic Wednesday: Basic Truths

Wed, 19 Aug 2009 04:00:00 +0000

Sponsored in part by recent posts elseblog that spurred no small amount of nerd rage. This week's webcomic is from Kopozky Web Solutions

Virtual Desktops with VirtuaWin

Tue, 21 Jul 2009 04:00:00 +0000

Just wanted to share VirtuaWin, a virtual desktop manager I came across recently. Microsoft has a "PowerToy" that allows for desktop switching, but I found it just got in the way more often than not, and often applications would ignore the PowerToy and sit on every desktop at the same time.

VirtuaWin lets you swap its tray icon image to suit your taste.

VirtuaWin not only stays out of the way, but it's customizable; you can assign hotkeys to easily switch windows, send programs to other windows, even automatically switch to the destination window when moving an app (or not, if you prefer).

Developers can add functionality by writing their own plug-in modules.

A lot of this functionality is native to *nix platforms, but it's nice to be able to do the same on Windows. Post a comment if you've used this or another virtual desktop manager, or just download VirtuaWin.

Corrupted EncryptedLocalStore in Adobe AIR

Tue, 14 Jul 2009 04:00:00 +0000

Adobe AIR has a feature called EncryptedLocalStore, which is where apps can store potentially sensitive data that needs to be secure or safeguarded from other applications. Examples of things you might want to store there are user passwords, SSL connection data, or even something slightly more mundane such as e-mail addresses.

According to the Adobe AIR 1.5 JavaScript Language Reference, accessing an EncryptedLocalStore should only throw an error if you don't pass it an item name to look for:

    var els      = air.EncryptedLocalStore;   // for convenience
    var password = els.getItem('MyPassword'); // returns string (or null)
    var blank    = els.getItem();             // error

However, sometimes you may find that calls to EncryptedStore.getItem or EncryptedLocalStore.setItem are failing, and catching the error doesn't produce any useful information. In this case, the application's EncryptedLocalStore may have become corrupted. After installation, if you change the contents of any installed files, that application's signature will have changed, and it will no longer be able to access its EncryptedLocalStore.

This is actually a pretty handy security feature, especially since HTML AIR apps have their source code available in plain text after installation. This safeguards against users or other programs changing your code to get sensitive data from your EncryptedLocalStore.

I just wanted to mention this problem because it is not (yet) a thoroughly documented error situation. Reinstalling the application will fix the problem.

JavaScript Design Patterns: Module, Singleton

Thu, 09 Jul 2009 04:00:00 +0000

(jump to the code)

You can read about the evolution of these patterns at KlausKomenda, along with an example that solves the same task using a number of different patterns so you can see the progression. The patterns described here are the Module and the Singleton.

The Module (more specifically, the Revealing Module) is a design pattern that provides encapsulation for data members and/or functions. Why do we care? Here are some benefits:

Encapsulation avoids naming conflicts with other code on the page.
Encapsulated data can only be accessed via public methods (if provided), which lets the module perform any necessary validation before changing data. This is not "hack proof", nor does it intend to be. It simply means that private data is scoped to the module itself, and does not exist in the "public" world. See the following code for examples.
Encourages coding behavior that produces high cohesion and loose coupling.
Improves code readibility and reuse. You can often copy well-written modules to other projects without changing a line of code.

    var RevealingModule = function() {
        
        // private variables and functions go here
        var myPrivateVar = 'test';
        function getVar() {
            return myPrivateVar;
        }
        function setVar(newVar) {
            myPrivateVar = newVar;
        }

        return {
            // public methods are revealed here
            getVar: getVar,
            setVar: setVar
        };
         
    };
    
    // each instance gets its own copies of private data
    var modFirst = new RevealingModule();
    var modSecond = new RevealingModule();
    
    // changing one instance does not affect other instances
    modSecond.setVar('new value');
    alert(modSecond.getVar()); // 'new value'
    alert(modFirst.getVar());  // 'test'

A Singleton is an object that only has one instance. The easy way to accomplish this in JavaScript is to start with the Module pattern, then immediately instantiate it by using inline execution.

    // Dude looks like a Module...
    var Dude = function() {
        // private members and functions
    	var name = "";
    	var age = 0;
    	function modifyAge(years) {
    		age = age + years;
    	}
    	
    	// these methods will be revealed below
    	function getAge() { return age; }
    	function getName() { return name; }
    	function setAge(newAge) { age = newAge; }
    	function setName(newName) { name = newName; }
    	
    	return {
    		getName: getName,
    		setName: setName,
    		getAge: getAge,
    		setAge: setAge,
    		
    		// public names do NOT have to match private names
    		changeName: setName,
    		
    		// you can also return additional public methods
    		haveBirthday: function() {
    			modifyAge(1);
    			alert(name + ' is now ' + age + ' years old!');
    		},
    		sayHello: function() {
    			// other public methods can be called using "this"
    			alert(this.getName() + ' says hello!');
    		}
    	}
    	
    }(); // inline execution turns this Module into a Singleton
    
    // cannot instantiate Dudes, there can be only one
    var myDude = new Dude(); // TypeError: Dude is not a constructor
    
    /*
     * We can't make a new instance using "var myDude = new Dude();"
     * because Dude is an Object, not a Function. Instead, access 
     * Dude's public functions directly, like this:
     */
    Dude.setName('John');
    Dude.setAge(36);
    Dude.haveBirthday(); // alerts 'John is now 37 years old!'
    
    // private data will not be overwritten, it is bound immediately at creation
    Dude.name = 'Jim';     // this makes a new, PUBLIC property called "name"
    alert(Dude.getName()); // 'John' (public method accessing private property)
    alert(Dude.name);      // 'Jim' (public property we just created)
    alert(Dude.age);       // 'undefined' (only exists in private scope)

Modules and Singletons can be great for code reuse, because they can provide a simple public interface which doesn't have to change when its inner workings change. Some Singleton examples:

Webcomic Wednesday: High-Five

Wed, 24 Jun 2009 04:00:00 +0000

For my personal safety, consider this one a general observation and not representative of any particular project... Comic courtesy of Brad Colbow.

Adobe AIR vs Appcelerator Titanium: Round One

Thu, 11 Jun 2009 04:00:00 +0000

There's been a fair amount of recent hype about Titanium, at least in certain circles. We use Adobe AIR on a daily basis at work, so my coworkers and I have been very eager to see how the new Titanium beta compares, for better or worse. You can download the Titanium Desktop developer app here. Since this is still beta software, there are wrinkles the Appcelerator team is ironing out on a daily basis, but what I've seen so far is very promising.

(click screenshots for full-sized images)

Titanium Developer

The modestly named Titanium Developer is where you create, launch, and package apps. It also ties in the Appcelerator's cloud services so you can distribute (and update) your app to Windows, Mac, and Linux platforms, track download statistics, connect to the Titanium web community, and more. However, it is not where you actually write your code.

Titanium Developer's Edit Project tab, which generates an application descriptor in a format similar to Adobe AIR.

Once your project is created, you have to hop over to an editor such as Notepad or Aptana, then hop back to Titanium Developer to test and package the application. Not so convenient. However, Marshall Culpepper has created an Eclipse plugin which helps integrate the Titanium SDK with Eclipse-based IDEs. According to the comments on that page, it may not play nicely with Aptana, so I haven't tried it yet.

Packaging Cross-Browser Applications

Building your application is easier than in Adobe AIR, as you don't have to deal with certificates during development or production. More importantly, no Adobe AIR red dialogs of doom. In my opinion, this can tip the scales strongly in Titanium's favor with regard to audience adoption — I've said before that only a developer would see a bunch of big red warnings and still hit Install; end users don't know enough about how their computer works to understand that it's OK if your desktop application actually runs like a desktop application.

No bigger screenshot here, sorry. Trust me, this AIR dialog sucks.

Versatile packaging options include whether you prefer to include the Titanium runtime in your installer, whether you want your application to be available to the general public, and whether you want updates to be distributed to existing users.

Life in the Appcelerator Cloud

Titanium Developer packages and distributes your application in Appcelerator's cloud. Cloud computing is becoming more and more prevalent in the modern software development life cycle, and it's nice to have this functionality built in.

According to the Quotas tab, resources are "free during beta". No word quite yet on what the limits or rates will be once Titanium is out of beta, but presumably you will still be able to package and distribute applications on your own via the command line interface.

It Takes a Village

Built-in community features abound in Titanium Developer. You can read what people are saying via Twitter and FriendFeed right in the Developer application, and there's also an integrated IRC client where you can talk to the Appcelerator team and other Titanium developers to get help or just chat.

Integrated Twitter and FriendFeed results talking about Titanium.

Integrated IRC client to get realtime answers.

So How Does Titanium Stack Up?

Since Titanium is barely into its beta phase, there's still work to be done before a fair and complete comparison can be made. That said, here are some things I really like about Titanium:

No Sandbox — Your desktop app is now a real boy. No untrusted content, no sandbox bridges. However, this opens Titanium apps up to scrutiny by the programmng public; because the source files are freely available on the end user's computer, there is a risk that malicious third party applications can edit your source. While this is technically true of applications written in ANY language, the fact that we're dealing with interpreted (rather than compiled) languages can raise a few eyebrows.
Multilingual — JavaScript works in HTML, no surprise there. However, now you can write Python and Ruby code, right in your HTML's script tags. Interaction between JavaScript, Python, and Ruby methods is pretty seamless, and extensions to Titanium's own code can be written in C++ in addition to the above languages. Future releases will include support for PHP, Java, and possibly other languages.
Run external programs — Adobe AIR provides no built-in methods of running a third-party application, unless you count opening the system's default browser. Titanium provides two: Titanium.Desktop.openApplication(path) and Titanium.Process.launch(command). Very cool.
Titanium.Process.restart() — Short and sweet, that's how your program restarts itself. Since our deliverables at work typically end up on unattended systems that may run (and consume resources) 24/7, we have had to come up with strange and creative ways for our applications to restart automatically. In Titanium it's a non-issue.

What Do YOU Think?

Do you use Adobe AIR? Appcelerator Titanium? Both? Please leave a comment, let me know what you like or don't like about these technologies.

Appcelerator Titanium Beta Launch

Thu, 04 Jun 2009 04:00:00 +0000

Titanium, Appcelerator's open source contender in the "web app as desktop app" arena, is moving to beta on Tuesday, June 9, 2009. To celebrate, they are throwing a product launch party at Apple's World Wide Developer Conference.

Get more information about Titanium on their homepage, or
follow @appcelerator on Twitter for the latest news.

I wish I could join the Appcelerator team at Jillian's in San Francisco (right across from Moscone), but due to a big product deadline of my own I won't be able to make it.

They've also been hinting at a big surprise announcement that will be made at the party, but haven't offered many clues as to what that might be... Any guesses?

Pad Strings in PHP and JavaScript

Wed, 27 May 2009 04:00:00 +0000

"Padding" a string ensures that its length meets or exceeds a desired minimum. PHP has a built-in function aptly named str_pad to pad strings to the left, to the right, or even on both sides. The default is to pad to the right with spaces, but you can choose to pad using any character, or even multiple characters.

    $input = "test";
    
    echo str_pad($input, 8, "x");               // testxxxx
    echo str_pad($input, 8, "x", STR_PAD_LEFT); // xxxxtest
    echo str_pad(23, 3, "0", STR_PAD_LEFT);     // 023, useful for aligning numbers
    echo str_pad(1000, 4);                      // 1000, no change

JavaScript has no built-in function to do the same, but here's an extension to the String object that works the same way:

    // arguments are "length", "character", and "direction"
    String.prototype.pad = String.prototype.pad || function(len, chr, dir) {
        var str = this;
        len = (typeof len == 'number') ? len : 0;
        chr = (typeof chr == 'string') ? chr : ' ';
        dir = (/left|right|both/i).test(dir) ? dir : 'right';
        var repeat = function(c, l) { // inner "character" and "length"
            var repeat = '';
            while (repeat.length < l) {
                repeat += c;
            }
            return repeat.substr(0, l);
        }
        var diff = len - str.length;
        if (diff > 0) {
            switch (dir) {
                case 'left':
                    str = '' + repeat(chr, diff) + str;
                    break;
                case 'both':
                    var half = repeat(chr, Math.ceil(diff / 2));
                    str = (half + str + half).substr(1, len);
                    break;
                default: // and "right"
                    str = '' + str + repeat(chr, diff);
            }
        }
        return str;
    };

    var input = 'Alien';
    alert(input.pad(10));               // "Alien     "
    alert(input.pad(10, '-=', 'left')); // "-=-=-Alien"
    alert(input.pad(10, '_', 'both'));  // "__Alien___"
    alert(input.pad(6, '___'));         // "Alien_"

My solution was adapted from PHP.js. Their port has an unused variable and does not produce the same output as native PHP str_pad for all of the examples in PHP's own documentation, but the above code should.

It can be dangerous to extend native objects in JavaScript, because changes to the language itself can produce unexpected results — If a newer version of JavaScript includes a native String.pad, you will suddenly be overriding that native function! If you prefer, you can avoid extending native String:

    function str_pad(str, chr, len, dir) {
        str = str || '';
        /* the rest of the function body is the same */
    }
    alert(str_pad('Alien', 10, '-=', 'left')); // "-=-=-Alien"

JavaScript Design Patterns: Mediator

Mon, 18 May 2009 04:00:00 +0000

(skip to the code example)

The Mediator Design Pattern

The Mediator is a behavioral design pattern in which objects, instead of communicating directly with each other, communicate only through a central message passing object (the Mediator). The Mediator pattern facilitates both loose couple and high cohesion.

Loose Coupling

Coupling measures the degree to which program modules rely on other modules. Loose coupling implies each component can operate or be tested independently of other components. Tight coupling implies each component "knows" the details or inner workings of other components. The Mediator almost entirely eliminates coupling between participating objects by becoming the only outside point of contact. All a module needs to know is how to broadcast messages through the Mediator — it doesn't matter whether 0, 1, or even 100 other modules act on those messages.

What's good about loose coupling? Loose coupling facilitates rapid prototyping by getting rid of code dependencies. Components can broadcast and/or listen for messages without worrying about the rest of the system. Messages can be completely ignored, or handled by any number of other components at once. You can add and remove listening objects without changing anything about how those messages are broadcast. It is typically much easier to add new features to software when its components are loosely coupled.
What's bad about loose coupling? By inserting the Mediator between objects, components always communicate indirectly, which may cause a very slight performance hit. Also, due to the very definition of loose coupling, there's no way to tell how the system might react to a message by only looking at the point of broadcast. For some, this may take a shift in thinking. This is actually good, though — If components call each other directly, for example using myObject.someFunction(args), then one change in how your program works may cause a ripple effect of changes through several modules. TL;DR: tight coupling causes headaches

High Cohesion

Cohesion is a measure of how focused a piece of code is. High cohesion implies a component's properties and methods are strongly related, and work toward one or more closely related tasks. Low cohesion implies a component may handle two or more unrelated or dissimilar tasks.

What's good about high cohesion? Lower maintenance cost, whether that means money, time, stress, or some combination thereof. Software modifications tend not to affect other parts of the program, which means they can be more easily and with more confidence. Reading and understanding your code also becomes easier when related tasks are grouped. High cohesion also facilitates code reuse, which again saves time and money. If you need to perform the same task in another application, you know where to go for the solution, and you know unrelated or unnecessary code won't "tag along".
What's bad about high cohesion? I could come up with no obvious downsides to high cohesion — if you know any, please leave a comment for the sake of completeness!

The following example was built on ideas presented by Paul Marcotte. I especially like his comparison between the Mediator pattern and the Observer pattern:

"Instead of using the Observer pattern to explicitly set many-to-many listeners and events, Mediator allows you to broadcast events globally across colleagues." — Paul Marcotte

    Mediator = function() {
        
        var debug = function() {
            // console.log or air.trace as desired
        };
        
        var components = {};
        
        var broadcast = function(event, args, source) {
            var e = event || false;
            var a = args || [];
            if (!e) {
                return;
            }
            //debug(["Mediator received", e, a].join(' '));
            for (var c in components) {
                if (typeof components[c]["on" + e] == "function") {
                    try {
                        //debug("Mediator calling " + e + " on " + c);
                        var s = source || components[c];
                        components[c]["on" + e].apply(s, a);
                    } catch (err) {
                        debug(["Mediator error.", e, a, s, err].join(' '));
                    }
                }
            }
        };
        
        var addComponent = function(name, component, replaceDuplicate) {
            if (name in components) {
                if (replaceDuplicate) {
                    removeComponent(name);
                } else {
                    throw new Error('Mediator name conflict: ' + name);
                }
            }
            components[name] = component;
        };
        
        var removeComponent = function(name) {
            if (name in components) {
                delete components[name];
            }
        };
        
        var getComponent = function(name) {
            return components[name] || false;
        };
        
        var contains = function(name) {
            return (name in components);
        };
        
        return {
            name      : "Mediator",
            broadcast : broadcast,
            add       : addComponent,
            rem       : removeComponent,
            get       : getComponent,
            has       : contains
        };
    }();

And here's how to use it:

    Mediator.add('TestObject', function() {
        
        var someNumber = 0; // sample variable
        var someString = 'another sample variable';
        
        return {
            onInitialize: function() {
                // this.name is automatically assigned by the Mediator
                alert(this.name + " initialized.");
            },
            onFakeEvent: function() {
                someNumber++;
                alert("Handled " + someNumber + " times!");
            },
            onSetString: function(str) {
                someString = str;
                alert('Assigned ' + someString);
            }
        }
    }());
    Mediator.broadcast("Initialize");                 // alerts "TestObject initialized"
    Mediator.broadcast('FakeEvent');                  // alerts "Handled 1 times!" (I know, bad grammar)
    Mediator.broadcast('SetString', ['test string']); // alerts "Assigned test string"
    Mediator.broadcast('FakeEvent');                  // alerts "Handled 2 times!"
    Mediator.broadcast('SessionStart');               // this call is safely ignored
    Mediator.broadcast('Translate', ['this is also safely ignored']);

Exceptional Performance: YSlow Update

Thu, 30 Apr 2009 04:00:00 +0000

YSlow, Yahoo's developer plugin for Firefox, just autoupdated yesterday, and what a massive overhaul it was! I've been playing around with it and love the new interface and features. Here's a quick walkthrough of the new interface.

YSlow's main panel, your website's "Grade". Several rules were added to the new release, including tips on improving AJAX call performance, reducing the number of DOM elements to speed up render time, and warnings about HTML-scaled images.

The Ruleset dropdown (at the top of the panel) lets you choose between the original set of rules, the new and expanded set of rules, or a "small site" ruleset which excludes some evaluations such as the CDN requirement, which can drag down otherwise highly performant websites. This screenshot was taken on my homepage... Looking good at 93%!

YSlow's components panel, very informative about the pieces that fit together to build your website, grouped by component type (document, script, stylesheet, inline vs CSS image, AJAX document, or redirect).

You can examine the gzipped and uncompressed sizes of appropriate files, whether or not they used cookies, even examine the headers sent when the browser made its request. Red highlights any of your images which were not found (HTTP 404) or have missing ETags or Expires headers.

YSlow's Statistics panel with its pretty pie charts. Pretty similar to YSlow v1's pie charts, just a bit reorganized. High performance websites have small numbers on the "primed cache" graph. To improve your statistics here, set your cache headers using .htaccess or PHP

The big new toy for this release is YSlow's Tools panel. Here you can validate the current page's JavaScript, show only JavaScript or CSS in easy-to-read formats, minify JavaScript, run Smush.it on all of the current page's images, or get a for-print version of YSlow's various panels. Very cool.

The Verdict?

Overall I think this is an excellent update to an already excellent web development tool. The new customization options will eliminate the need to "hack" the plugin via about:config, and the integrated tools panel will improve both speed to production and code review. Thanks Yahoo!

How to Start Using YSlow

Install Firefox
Install Firebug
Install YSlow

SCAN Web Design Principles: N is for Navigation

Fri, 24 Apr 2009 04:00:00 +0000

What is Website Navigation?

Website navigation answers these questions for your visitors:

Where am I? Offering feedback on the current location helps visitors feel confident they're on the right page. Everyone runs into misleading links out there — people want to know that the link they clicked leads to information they really need.
Where else can I go? Usability.gov suggests that we "do not create or direct users into pages that have no navigational options." Don't trap your visitors, on purpose or inadvertently.
What else can I do? Even basic websites are actually applications. Navigation includes messages that guide your visitors through any tasks they need or want to accomplish on your site. Friendly and useful error messages, obvious sign-up / log-in / log-out links, clearly labeled forms, prominent "buy now" buttons, etc.
How do I get back? "Undo" features also inspire confidence. If visitors feel they can easily navigate backward, they're more likely to move forward.

Consistency is Key

No matter what your design, navigation is easy to use when it's consistent. Put navigation elements in the same place on each page whenever possible. Sometimes you'll want to repeat some of your navigation, maybe summarized further down on the page. If you do this, make sure the links appear in the same order in both locations, whatever that order may be.

Adobe repeats their menu's product list further down the page. The bottom list summarizes the more common products, but both lists are in the same overall order (alphabetical).

A Picture is Worth a Thousand Words

If there's one lesson I've learned over and over from interface design, it's this: people don't read. If possible and appropriate for your site, give your main navigation icons that describe their links. Add meaningful pictures that actually indicate what clicking them will do (and make them clickable!).

Use appropriate alt attributes for accessibility — if your image has a caption, don't repeat the whole caption in the alt attribute or screen readers will say the same thing twice. Conversely, the title attribute aids usability by showing a tooltip when a visitor hovers over the image. For clickable images, this can tell your visitor what will happen when they click the image.

There's a subtle but important difference between alt and title. Alt attributes should provide useful text when an image is not visible, whether that means the visitor is blind, the image file is missing, images are turned off in the browser, or the visitor's connection is unbearably slow. Title attributes should provide useful text when an image IS visible — don't bother describing obvious images, but do provide additional information that you don't want or need to include in the body text.

Twitter's logo has a navigational tooltip, courtsey of the title attribute.

Sitemaps

Sitemaps can be both the most and least important navigational tool. Search engines do their best to spider your entire site, but a quality XML sitemap can ensure no page falls through the cracks. "Real" visitors may or may not use sitemaps, depending on your site's target audience, amount of information, and actual content. If you offer tons of products, services, galleries, or other collections, visitors may find HTML sitemaps useful in finding what they need efficiently and effectively.

The arguments.callee sitemap is dynamically generated with PHP, so any new posts are immediately visible to visitors (and Google's robot army).

SCAN Web Design Principles: A is for Accessibility

Fri, 17 Apr 2009 04:00:00 +0000

What is Accessibility?

Website Accessibility means making sure the widest possible audience can reach your content. An important distinction lies between making content accessible and making it identical — you do not need to make sure every single visitor receives the exact same user experience when visiting your site.

Why Design for Accessibility?

Accessibility is not just for handicapped visitors; millions of people surf the web from work, school, public libraries, or other public locations. Many of these locations have restrictive firewalls. You cannot know what a particular establishment may or may not allow — some corporate visitors might not only have JavaScript turned off for them, but they may also be unable to change that setting themselves.

Another reason to make your site accessible is the concept of everything as a platform. Websites aren't just for browsers anymore; people may be browsing your site with their TV remote, phone, or Nintendo Wii. Others might be viewing it on screens embedded in their car, their refrigerator, or just about anything else. Why deny yourself those hits?

Samsung's flat panel fridge, with TV and Web connectivity.

Graceful Degradation and Progressive Enhancement

Progressive Enhancement is a design strategy based on the following core principles (paraphrased):

basic content should be accessible to ALL platforms
additional content can be offered to compatible platforms
HTML markup should be sparse and semantic
CSS styles should be externally linked
scripted behavior should be unobtrusive
scripted behavior should be externally linked
visitors' browser preferences are respected (window size, font size, etc.)

How can you meet these relatively simple goals? By building your website in iterations, or cycles.Iterative design meets the smallest possible set of requirements first, then the next smallest set, and so on, until you have a complete product. Designing a website in iterations involves the following steps:

CONTENT: Write your text, and mark it up in meaningful HTML tags that indicate what the content is, rather than how it should be displayed. Use H tags for headers, UL/OL/DL tags for lists, P tags for paragraphs.
PRESENTATION: Add layout and positioning via externally linked CSS without changing your markup, other than adding IDs or CLASSes to help target elements. Don't forget to use descendent selectors to avoid cluttering your markup with too many IDs and CLASSes.
BEHAVIOR: Use JavaScript or another scripting language to add interactivity to your site. Animations, slideshows, AJAX updates and scrolling feeds.

Graceful Degradation, or "fault tolerance", means that your website can easily deal with browsers that may not support one or more feature. It could be argued that graceful degradation is a byproduct of progressive enhancement — if you use the iterative process described earlier, then visitors without JavaScript enabled will still see your properly styled content. If particular browsers doesn't implement CSS properly (or at all), or images are disabled, or your visitors are blind or deaf, they can still access all of your content, and your semantic HTML means they can still understand the relationships between different parts of your page.

Cross-Browser UI Testing

Browsershots is an excellent service that lets you see your website through the eyes of dozens of browsers across all major operating systems. No emulation is taking place — you get real screenshots from real computers. The one thing you can't completely check with Browsershots is behavior, because you only get static screenshots. However, there are for-pay tools such as CrossBrowserTesting that give you full interactive access to test systems.

When doing your own testing, try to include the following settings to make sure your actual content is accessible. They're in order of most to least common — many of your visitors may have JavaScript turned off, but few typically have CSS or images turned off.

Turn JavaScript off. Does your navigation still work? Do your forms still work? If parts of your page absolutely MUST use JavaScript in order to function, add them to the page with JavaScript. Otherwise, visitors will assume your site is broken (and they'll be right).
Turn CSS off. Not all browsers have this option. The easy workaround is to edit your source code and comment out the <link> tag that includes your external CSS file. This is an excellent test to see if your HTML is semantic. Without CSS, how does your content look? Examine font size, order of elements, proximity between content and the headers that describe that content.
Turn images off. Again, not all browsers have an easy toggle for this. A shortcut is to temporarily rename your actual images folder, that way you don't have to change any of your source code. Without images, is your content still clear? Can you still see and use some form of navigation? If you can't, neither can your visitors. Don't assume this affects only blind people — some phones turn images off by default to speed up load time and minimize data transfer.

Assist Disabled Visitors

Even though accessibility isn't ALL about disabled visitors, obviously they comprise an important audience for the discussion. The US Department of Health & Human Services provides an excellent usability guide featuring a whole chapter on accessibility and disabled visitors.

Click and Drag to Toggle Checkboxes

Wed, 15 Apr 2009 04:00:00 +0000

(skip to the example)

A coworker showed me a demo for dragging across checkboxes to check or uncheck them, and asked that I implement it in my own AJAX library. The cross-browser demo he came across answered a specific question which required the use of tables and tds, but I wanted to be able to accomplish the same feat without depending on unrelated tags.

I quickly whipped up a solution that targets the checkboxes and their labels, but the solution was easy enough that I figured I'd get rid of the library dependencies and share the method in good old fashioned cross-browser JavaScript.

<!-- This HTML is used for the following example -->

<label for="check1">Check:</label> <input type="checkbox" id="check1">

<label for="check2">Check:</label> <input type="checkbox" id="check2">

<label for="check3">Check:</label> <input type="checkbox" id="check3">

<label for="check4">Check:</label> <input type="checkbox" id="check4">

<label for="check5">Check:</label> <input type="checkbox" id="check5">

<label for="check6">Check:</label> <input type="checkbox" id="check6">

var dragCheckbox = function(root) {
    root = root || document;
    var dragging = false;
    var current = false;
    document.onmouseup = function() {
        dragging = false;
    };
    var getTarget = function(element) {
        switch (element.tagName.toLowerCase()) {
            case 'input':
                return element;
                break;
            case 'label':
                element.style['MozUserSelect'] = 'none';      // Firefox and other Gecko
                element.style['WebkitUserSelect'] = 'ignore'; // Safari, Chrome, AIR
                element.onselectstart = function() {
                    return false;                             // IE
                };
                var el = element.getAttribute('for') || element.getAttribute('htmlFor');
                return document.getElementById(el);
                break;
            default:
                return null; // invalid element
        }
    };
    var checkboxes = function() {
        var c = [];
        var inputs = root.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].getAttribute('type') == 'checkbox') {
                c.push(inputs[i]);
            }
        }
        return c;
    }();
    for (var i = 0; i < checkboxes.length; i++) {
        (function() {
            var down = function() {
                var box = getTarget(this);
                if (box) {
                    dragging = true;
                    box.checked = !box.checked;
                    current = box.checked;
                }
            };
            var over = function() {
                var box = getTarget(this);
                if (box && dragging) {
                    box.checked = current;
                }
            };
            var click = function() {
                var box = getTarget(this);
                if (box) {
                    box.checked = current;
                }
            };
            this.onmousedown = function() { down.call(this); };
            this.onmouseover = function() { over.call(this); };
            this.onclick = function() { click.call(this); };
            var label = (function() {
                var l = root.getElementsByTagName('label');
                for (var i = 0; i < l.length; i++) {
                    var f = l[i].getAttribute('for') || l[i].getAttribute('htmlFor');
                    if (f == this.id) {
                        return l[i];
                    }
                }
                return l;
            }).call(this);
            if (label) {
                label.onmousedown = function() { down.call(label); };
                label.onmouseover = function() { over.call(label); };
                label.onclick = function() { click.call(label); };
            }
        }).call(checkboxes[i]);
    }
};

Example

WITHOUT dragCheckbox()
Check:
Check:
Check:
Check:
Check:
Check:

WITH dragCheckbox()
Check:
Check:
Check:
Check:
Check:
Check:

Useful? Not? You decide.

SCAN Web Design Principles: C is for Content

Fri, 10 Apr 2009 04:00:00 +0000

Your first impression

Your homepage should clearly communicate your site's purpose or value. Provide all important options on the homepage, so your visitors can find what they were looking for quickly and easily. With that in mind, try to avoid clutter by presenting unnecessary options, text, or graphics. If someone gets information overload looking at your homepage, they'll never bother to look deeper into the site.

Aptana and Pomodoro's Pizza sell two very different products, but their homepages are remarkably similar in design. Uncluttered layouts make it obvious what they're offering, how to get it, and where to learn more.

Semantic HTML

HTML is considered "semantic" when the markup itself conveys meaning. List items are represented by LI elements, a testimonial or long quote within blockquote tags, section headers and subheaders in h1 through h6 tags, nested appropriately. If you look at the source code of your page, it should be clear what your content is, and the context in which it sits. I'll get into more reasons for doing this in the next SCAN post (A is for Accessibility), but a good rule of thumb is to write content and markup FIRST, without regard to where things will be placed or how they will look. Then style the markup using CSS, and finally add any additional behaviors using JavaScript or another language.

Web designer Joe Dolson has a simple and relatively thorough guide to semantic HTML.

Don't fight your visitors

Most people expect certain things when browsing the internet. When they hit their browser's Back button, they expect to go back a "page", whether that means undoing an action on an AJAX app, exiting your site, or retrieving what they last looked at. If something looks like a button, they expect to be able to click it to make something happen. Fighting or abusing common expectations in a site's design will confuse and lose people. Catering to these expectations will make your site pleasant to navigate, and encourage return visits.

The US Population apparently looks like an ad to people viewing census.gov, and the result is they just don't see it. This behavior is called Banner Blindness.

How do YOU WANT people to find your site?

Does your content facilitate this? If you don't include a word or phrase on your site, people generally won't be able to find you by looking for that phrase.
Does your content have "repost" or linking value? Good content will encourage organic links, which drive targeted traffic to your site and boost search engine placement.

How do YOU EXPECT people to find your site?

Are these expectations reasonable? Searches in most arenas are short and general; assuming people will type in 20-letter words or 20-word phrases to find your site will lead to a lonely website in the vast majority of cases.
Does your content facilitate this? If you don't include a word or phrase on your page that people actually look for, people will probably not be able to find it with a search engine. Use Google Insights and other keyword analysis tools to help make sure your content relates to what your target audience is looking for.

How do people REALLY FIND your site?

Tracking takes time. Don't make decisions based on a couple days of analytics. Don't expect to see immediate results in your analytics when you DO make a change. Let people get accustomed to the change, and track behavior over time.
Modify DESIGN and CONTENT based on your results. If people aren't sticking around, take another look at your design. Are you cluttering up the field of vision? Are your graphics fighting your visitors' expectations of how websites are "supposed" to work? Also reconsider your content — check for misspellings and typos, missing words (or paragraphs!), incorrect or uncommon phrases.
Make changes GRADUALLY. Revamping a whole site at once might cause you to lose returning visitors before you can even tell if new visitors like the changes. Big changes can temporarily hurt SERPs too, depending on the circumstances. If you do need to introduce a completely new layout or format, warn your visitors ahead of time.

SCAN Web Design Principles: S is for Scanning

Fri, 03 Apr 2009 04:00:00 +0000

Bounce Rate

Bounce rate is a statistic available on most web analytics applications. It tells you what percentage of visitors arrived and left your website after seeing only a single page. What it really tells you is that your website is not compelling enough to even click one link on the page. Why not? Find out by scanning your website with your eyes.

What your visitors see: The F Pattern (or E Pattern)

As you build your website, scan it the way your visitors will; in a general F-shaped or E-shaped pattern. That is, in broad horizontal strokes. The important part of this exercise is to not read your text. Don't look at any one part of the page for more than a split second. In fact, relax your gaze and look "past" the page as with a Magic Eye image.

A hypothetical heatmap tracking visitors' eyes across a webpage.

After your scan, consider the following questions:

What's the FIRST thing I see? Is that what I want people to see first? What made my eyes land there?
Does anything DEMAND ATTENTION? If so, should it? If not, should something?
Does everything have an OBVIOUS PURPOSE? Show someone new your design and watch how they use it. Do they get stuck anywhere?
Am I just used to my own design? Do something else for a while, then come back later (or tomorrow) and scan again. You may come up with completely different results!

Making sites easy to scan

Provide meaningful section headers. This helps visitors zero in on what they want to actually read.
Group related items. Don't confuse people by making them hunt and find the next step, next link, or next chunk of content.
The truth, the whole truth, and nothing but the truth. Tell your visitors everything necessary to understand that page, but no more. Don't make them remember things from other pages, don't leave "extra parts" around that will make them wonder why they're there.
Avoid jargon and acronyms whenever possible. If you do use them, use tags such as <dfn title="Tooltip description">dfn</dfn> to define them.
Keep the most important content above the fold. If a page is extremely long, consider adding a table of contents.

Strongly contrasting colors help guide the eye and tell visitors what is and isn't related on your page. Items with the same color background appear to be related, like the navigation in this example.

Differing font sizes can also guide the eye. Big fonts typically indicate section headers (in this example, "latest blog posts" and "discuss your project"), but they can also push keywords that you want visitors to remember about your website or brand.

Do you get anything useful from scanning your own websites? Why or why not? What about heatmap software — leave a comment to let others know what you like and don't like about a particular heatmap solution. Or, mention other ways you've made sites easy to absorb.

SCAN Web Design Principles

Sat, 28 Mar 2009 04:00:00 +0000

April's bringing a four-post series about interface design (primarily for websites). There's a mental checklist I run through when building a new site, and while formalizing the idea the acronym SCAN stuck with me. I encourage comments on any of my blog posts, but if you have anything to add to this design series, I truly hope you leave a comment. Enjoy!

S is for SCANNING

Website visitors do not read websites they come across for the first time. They scan quickly, and if they don't see something they need, they hit Back and move on. S is for SCANNING discusses how visitors scan sites, offers questions to consider while scanning your own site, and provides visual examples of websites that are easy to scan. Knowing how to scan your own website will help you design in a way that places important information where it will be seen and reduce bounce rate.

Read S is for Scanning.

C is for CONTENT

Catching a visitor's eye is only the first step — you must also present valuable information. Solve your visitors' problems quickly and thoroughly, fill their needs, give them what they want. Whatever the purpose of your website, knowing how to create, organize, and present content will increase returning visits.

Read C is for Content.

A is for ACCESSIBILITY

Accessibility isn't just catering to disabilities. Tons of companies have restrictive firewalls that block most (or all) JavaScript. Some may block images outside certain domains, others may even block CSS. You can't control what behaviors are allowed client-side, but you can make sure that all clients can access your valuable content. Build a robust site that can stand on its own, even when one or more of its pillars fall.

Read A is for Accessibility

N is for NAVIGATION

Navigation is the method you present for finding information in your website. Whether that information is on the same page or another page, help your visitors find it easily and quickly, or you'll lose those visitors. Don't trap people in dead-end pages or frustrate them: provide navigation, make it easy to use, and provide feedback that tells them where they are in your site.

Read N is for Navigation

Permission denied to call method Location.toString

Fri, 20 Mar 2009 04:00:00 +0000

For a while I've been noticing seemingly random errors popping up on some of my websites. It hadn't happened on my blog here, but other sites caused this error to appear in Firebug:

Permission denied to call method Location.toString

No file name, no line number, no indication where the error occurs or why. Upon further investigation I discovered that it only happened when there was Google Adsense or other remote flash media involved.

As it turns out, the error is caused by a change in Flash's security policies between versions 9.0.115.0 and 9.0.124.0 — this is both good and bad news. I'm glad to learn that it's not an error anywhere in my code, but it's unfortunate that there's nothing I can do to get rid of the error, short of removing Adsense from those pages.

Adobe AIR: Call JavaScript from a SWF (also win money)

Thu, 19 Mar 2009 04:00:00 +0000

(skip to the contest info)

The typical (and fairly safe) way to call a JavaScript function from a SWF is ExternalInterface.call. However, Adobe AIR does NOT support ExternalInterface, so we have to look for an alternative if we want to interact with embeded SWFs in HTML AIR apps. Before ExternalInterface was introduced to ActionScript, there was fscommand, navigateToURL, and getURL:

<!-- This goes in your Adobe AIR application -->
<object id="swf" type="application/x-shockwave-flash">
    <param name="allowScriptAccess" value="sameDomain">
    <param name="movie" value="myFlashFile.swf">
</object>
<script type="text/javascript">
    // this function must be in "window" scope
    function myFunc(str) {
        air.trace("Flash told me: " + str);
    }
</script>

<!--
    NOTE: myFlashFile.swf contains this AS2 code...
    getURL('javascript:myFunc("some argument");void(0);');
-->

Just like typing javascript: addresses into your browser's address bar, that example allows Flash to call a JavaScript function. HOWEVER...

Most likely for security reasons, getURL requires user interaction. You can call getURL in an on(release) handler, but if you just want the SWF to call a JavaScript function at an arbitrary point in the timeline, there must be user interaction. The user must actually be clicking or moving the mouse on top of the SWF at the exact moment getURL is called, or the call will fail silently.

What does this have to do with cash prizes? Well, at work I'm writing a touchscreen AIR app that loads SWF presentations. The user is just supposed to watch the movie, but the movie needs to call a function on my HTML page from time to time. Obviously, I can't ask the user to keep tapping the screen or constantly move their finger around the screen during the presentation, but I haven't found a clean way to allow Flash to call my JavaScript function without user interaction. We figured out a cheesy workaround, but I'm certain there must be a "real" way to accomplish this. So here are the requirements:

Demo Application and Contest Rules

This demo application reproduces the problem. Every four seconds, the included SWF tries to call callMe(), a JavaScript function the app's HTML page. You can see that while you move the mouse atop the SWF, the calls succeed, but as soon as you stop, so do the calls.

Your SWF must call some JavaScript function defined in your AIR app's HTML page. Doesn't matter what it does, I just want to see a working example. Alert something, air.trace something, change colors, write text to a div, whatever you want.
The function call must succeed with NO user interaction. No clicks, no mouse movement, no keypress.
All source code must be available. For obvious reasons I won't run any submission I can't test by compiling the source.
Your SWF can be written in either ActionScript 2 or 3, so long as you provide the source.
No external applications (AutoIt, etc.).
You can submit your solution in as many parts or files as you need, and any required installation or configuration process is fine as long as you can explain what to do.

I will send (via PayPal or personal check, whichever you prefer) $50 of my own hard earned cash to the first person to meet ALL of the above requirements. You get the cash whether the solution is an easy one-liner or a crazy convoluted workaround. No haggling, please — we already figured out a hack for work, so this contest is only for my own satisfaction. And hopefully yours if you like money.

To submit your solution, please post a link in the comments on this page. You can save the solution as text on PasteBin if you don't have your own hosting.

To embed a link in your comment here, use BBCode-style tags. For example, [url]http://your.web.site/path/file.ext[/url]

Google vs. Firebug Console

Fri, 13 Mar 2009 04:00:00 +0000

Round one: Gmail

It all started with GMail. The scary red bar at the top of the screen that proclaimed Firebug's debug console doesn't play nicely with others. That's fine, they give you the option to hide the message if you really need the console open, and tell you how to disable it for only GMail's site if not. No harm, no foul.

Aw, GMail. Why so serious?

Round two: Google APIs

As I began to use the various Google APIs, I noticed something strange. While scripts on the page were loading, I could send debug info to the console just fine. However, if I opened Firebug once the page was done loading, window.console didn't work as I expected. On a mashup for a client at work, it appeared window.console had been overwritten by an anonymous closure. Take out the Google script, and you get back your console. Huh. Well, "console" is such a generic name, I guess naming conflicts are to be expected when you apply something like that to the global namespace. No harm, no foul.

Round three: Et tu, forward-facing apps?!

The Google Map API destroys window.console during page load. Long story short: If you use a Google map on your personal site, you cannot debug it during page load using Firebug's JavaScript console. What about the Google maps homepage? Well, apparently one of their own developers fell into this trap:

No debug for you, Google dev.

What's Google's problem with the debug console? Don't Google and Mozilla like each other anymore? Oh, maybe not.

Adobe AIR: Why won't my SWF load?!

Mon, 09 Mar 2009 04:00:00 +0000

If you develop Adobe AIR applications using AJAX, you may eventually come across a strange bug. Adobe says you can embed external SWF files in your HTML application, and from that example code it's simple! So why do SWFs seem to load fine in some HTML AIR apps, but in others they don't show up at all?

    <!-- 
        Whether the window is transparent. 
        Only applicable when systemChrome is false. 
        Optional. Default false. 
    -->
    <transparent>true</transparent>

There's the culprit. One of the controversially cool features in AIR is that you can abandon system chrome to make your application transparent. Problem is, even in parts of your page that are visible, SWFs do not seem to appear when your application.xml file sets transparent to true. Set it to false and everything works again!

A side effect of this workaround is that if your application has a non-rectangular background, or parts of the application are supposed to be see-through, your users won't be able to click what's "beneath" the app on their screen.

So is this feature tradeoff a bug? I think so, as it seems of all the things that play nicely with Adobe AIR, Adobe Flash should be one. Note that this problem may not apply to AIR apps created in Flex or Flash.

This lesson brought to you by one very frustrating work day.

HTTP, HTTPS, and SSL via PHP

Tue, 10 Feb 2009 05:00:00 +0000

HTTP with PHP Sockets

// don't need to specify http, it's the default protocol
$hostname = "www.google.com";
$port     = 80;

// create and configure the client socket
$fp = fsockopen($hostname, $port); // optional: $error_number, $error_string, $connect_timeout
if ($fp) {
    stream_set_timeout($fp, 30); // seconds to wait for i/o operations
    
    // send request headers
    fwrite($fp, "GET / HTTP/1.1\r\n");
    fwrite($fp, "Host: $hostname\r\n");
    fwrite($fp, $additional_headers); // Accept, User-Agent, Referer, etc.
    fwrite($fp, "Connection: close\r\n");
    
    // read response
	$response = "";
    while (!feof($fp)) {
        $response .= fgets($fp, 128);
    }
	echo $response;
    
    // close the socket
    fclose($fp);
}

Direct SSL Sockets in PHP

You don't have to send request headers in the above example. You can actually connect to some servers and send raw text with fwrite. Because you have to implement the HTTP/HTTPS protocol yourself if you want it, sockets are considered "clean" connections.

// note that "ssl" is the protocol, NOT "https"
$hostname  = "ssl://your-secure-site.com";
$port      = 443;

// create and configure the client socket
$fp = fsockopen($hostname, $port);
if ($fp) {
    stream_set_timeout($fp, 30);
    
	// send data (or build HTTPS headers similar to first example)
	fwrite($fp, "your message goes here");
    
    // read response
    while (!feof($fp)) {
        echo fgets($fp, 128);
    }
    
    // close the socket
    fclose($fp);
}

HTTPS via cURL

PHP doesn't directly support attaching client certificates to web requests with fsockopen, so you have to use the cURL library.

$url = "https://your-secure-site.com/secure-service.php";
$port = 443;

// POST data, formatted just like a GET query string
$request = "name=hb&age=27&site=arguments.callee.info";

// the client certificate path MUST be a physical path, not url
$certificate = "C:\\certificates\\test.crt"; // windows example
$certificate = "/etc/pki/tls/private/test.crt"; // unix/linux example
$password = 'mypassword'; // client certificate's key

// more details at http://php.net/curl
$ch = curl_init();
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_PORT, $port);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
curl_setopt($ch, CURLOPT_SSLCERT, $certificate);
curl_setopt($ch, CURLOPT_SSLCERTPASSWD, $password);

// fetch response and close the socket
$response = curl_exec($ch);
curl_close($ch);

Choosing a Valid DOCTYPE

Mon, 26 Jan 2009 05:00:00 +0000

(skip to the doctypes)

When building a website, it's important to add a DOCTYPE declaration at the very top of your HTML or XHTML source code. In most cases, putting anything at all before the DOCTYPE (even whitespace!) will result in some browsers falling back to "quirks mode", causing your site to render improperly. Spelling and capitalization both matter, so often the easiest thing to do is copy and paste the particular DOCTYPE you want. But how do you know which to choose?

HTML vs XHTML

The current HTML standard is HTML 4.01, while XHTML authors might choose either XHTML 1.0 or XHTML 1.1. The most commonly quoted reason for using XHTML is that it enforces good coding practices such as proper nesting, consistent capitalization and quoting, etc. Don't listen to that crap; if you develop good HTML habits, you'll do all of that anyway. The differences are outlined at W3.org, but the main differences include capitalization of elements and attributes, and empty tag style:

    <!-- Empty tags in HTML -->
    <p></p>
    <br><br>
    <img src="/img.png">

    <!-- Empty tags in XHTML -->
    <p />
    <br /><br />
    <img src="/img.png" />

Strict vs Transitional

If you are concerned about cross-browser compatibility, I strongly suggest you use a strict DOCTYPE. Relying on transitional DOCTYPEs may require revision as deprecated features become obsolete features in newer browsers. Relying on "quirks mode" usually requires you to do more work such as adding IE hacks to your HTML and CSS via conditional comments.

DOCTYPEs

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   <-- HTML 4.01 Strict -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   <-- HTML 4.01 Transitional -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
   <-- HTML 4.01 Frameset -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <-- XHTML 1.0 Strict -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <-- XHTML 1.0 Transitional -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
   <-- XHTML 1.0 Frameset -->
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <-- XHTML 1.1 -->

Unless you are serving application/xhtml+xml to a known set of visitors (the average internet wanderer's browser cannot necessarily understand application/xhtml+xml), I suggest using either HTML 4.01 Strict or XHTML 1.0 Strict.

Update: HTML5

HTML5 has its own DOCTYPE, and interestingly enough it may be a good choice for standards-loving developers, even those who are not yet using any HTML5-specific content. It looks like this:

<!DOCTYPE html>

Short and sweet. What's great about this is that all DOCTYPE-sniffing browsers (including Firefox, Safari, Opera, and even IE5/6/7/8) will render in Standards Mode regardless of whether or not they support HTML5. If you're already using a strict HTML or strict XHTML DOCTYPE to induce Standards Mode in your visitors' browsers, you can switch to the above DOCTYPE whether or not you plan to incorporate HTML5 in your website.

Synchronous SQLite Singleton

Tue, 13 Jan 2009 05:00:00 +0000

SQLite is already pretty easy to use, but here's a simple abstraction that makes it even easier to interact with a SQLite database. I developed this to reuse in my own Adobe AIR apps, because AIR uses SQLite as its native databse implementation.

DB = function() {
    var database = air.File.applicationStorageDirectory.resolvePath('database.db');
    var exec = function(query, param) {
        try {
            c.open(database);
            s.clearParameters();
            if (typeof s.text == 'string') {
                s.text = query;
                if (typeof param == 'object') {
                    for (var i in param) {
                        s.parameters[':' + i] = param[i];
                    }
                }
                s.execute();
            }
            return s.getResult();
        } catch (e) {
            air.trace('Database error: ' + e.message);
        } finally {
            c.close();
        }
    };
    var c = new air.SQLConnection();
    var s = new air.SQLStatement();
    s.sqlConnection = c;
    return {
        exec : exec,
        init : function(filename) {
            filename = filename || 'database.db';
            database = air.File.applicationStorageDirectory.resolvePath(filename);
        }
    };
}();

    // here's how to use it
    var employees = DB.exec("SELECT * FROM employees").data;
    for (var i = 0; i < employees.length; i++) {
        alert(employees.firstName + " " + employees.lastName);
    }
    
    // if you're not using SELECT, you don't have to use an assignment
    DB.exec("DELETE FROM employees");
    
    // the second argument is an object for binding SQL statement parameters
    var insert = DB.exec("INSERT INTO employees VALUES (:id, :firstName, :lastName)", {
        id        : 123,
        firstName : 'John',
        lastName  : 'Smith'
    });
    
    // determine how many rows were affected by the last SQL statement
    if (insert.rowsAffected === 0) {
        air.trace("Database error!");
    } else {
        air.trace("Saved!");
    }
    
    // optionally, you can initialize (or REinitialize) it with a new database name
    DB.init('new-filename.db'); // future queries will act on this database

Adobe AIR 1.5: GUI-less Application Updates

Fri, 09 Jan 2009 05:00:00 +0000

Previously, I showed you how to automatically update your Adobe AIR 1.5 application using Adobe's ApplicationUpdaterUI. What if you don't need (or want) to rely on user interaction at all? While the ApplicationUpdaterUI class provides basic updating functionality and a default user interface, ApplicationUpdater provides update functionality while letting you handle the UI yourself, or providing no update-related UI at all.

    <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
    <script type="application/x-shockwave-flash" src="lib/air/applicationupdater.swf"></script>
    
    <!-- This is the file described below. -->
    <script type="text/javascript" src="Updater.js"></script>

    <!-- Include the rest of your application however you normally would. -->
    <script type="text/javascript" src="your-application-files.js"></script>

If you're using the Aptana or Dreamweaver extensions for Adobe AIR, applicationupdater.swf should be automatically generated as part of a new Adobe AIR project. You may have to check an option to create it.

// _Updater.js
Updater = function() {
    var _ = {
        /**
         * Don't change these directly!
         * Instead, use Updater.init("http://your.web.site/path/to/version.xml");
         */
        url     : false,
        updater : false
    };
    function error(e) {
        air.trace(e); // handle this error as necessary for your app
    }
    function checkComplete(e) {
        if (e.available) {
            /**
             * The application is now updating, notify other components here if necessary.
             */
        } else {
            MyApp.start(); // call your application entry point
        }
    }
    return {
        init  : function(ns, url) {
            _.url = (typeof url == "string") ? url : false;
            _.updater = (_.url) ? new runtime.air.update.ApplicationUpdater() : false;
            this.check();
        },
        check : function() {
            if (_.updater) {
                _.updater.delay = 1; // how many days between checks, can be a fraction
                _.updater.updateURL = _.url;
                assignHandler(runtime.air.update.events.UpdateEvent.INITIALIZED, function() {
                    _.updater.checkNow(); // have to call the first check manually
                });
                assignHandler(runtime.flash.events.ErrorEvent.ERROR, error);
                assignHandler(runtime.air.update.events.DownloadErrorEvent.DOWNLOAD_ERROR, error);
                assignHandler(runtime.air.update.events.StatusUpdateErrorEvent.UPDATE_ERROR, error);
                assignHandler(runtime.air.update.events.StatusUpdateEvent.UPDATE_STATUS, checkComplete);
                _.updater.initialize();
            }
        }
    };
}();

Simply include the above file in a script tag in your application's main HTML file, then call _Updater.init("http://your.web.site/path/to/version.xml"). The target XML file should follow the format below, as per the Adobe example:

<?xml version="1.0" encoding="utf-8"?>
    <update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
        <version>1.23</version>
        <url>http://your.web.site/path/to/YourApplication.air</url>
        <description><![CDATA[
            This version has fixes for the
            following known issues:
            *First issue
            *Second issue 
        ]]></description>
    </update>

Enjoy!

AJAX Phrasebook

Sun, 21 Dec 2008 05:00:00 +0000

Creating an AJAX object (XMLHttpRequest)
Setting up a callback function
Making GET requests
Setting HTTP request headers
POSTing form data
Aborting an AJAX request in progress
Server-side AJAX processing with PHP
Serving XML, JSON, (X)HTML, or plain text
Putting it all together: A reusable AJAX Singleton

Creating an AJAX object (XMLHttpRequest)

    // reusable XMLHttpRequest object
    var http = function() {
        return ('XMLHttpRequest' in window)
            ? new XMLHttpRequest()
            : (('ActiveXObject' in window)
                ? new ActiveXObject("Msxml2.XMLHTTP")
                : null);
    }();

top

Setting up a callback function

    // IE requires that you use http.open BEFORE assigning this
    http.onreadystatechange = function() {
        if (http.readyState === 4) {   // XMLHttpRequest code for "Done"
            if (http.status === 200) { // HTTP status code for "OK"
                // use http.responseText or http.responseXML here
            }
        }
    };

top

Making GET requests

    // simple GET request
    http.open("GET", "myPage.php", true); // false for synchronous (blocking)
    http.send(null);                      // null is required here
    
    // passing variables to PHP by modifying the URL
    var name = escape("Your Name");
    var age = 27;
    var queryString = "?name=" + name + "&age=" + age;
    http.open("GET", "myPage.php" + queryString, true);
    http.send(null);

top

Setting HTTP request headers

    http.open("GET", "myPage.php", true);
    
    /**
     * Set headers after open() and before send().
     * For a complete list of request headers, see:
     * http://www.w3.org/Protocols/HTTP/HTRQ_Headers.html
     */
    http.setRequestHeader("User-Agent", "arguments.callee Custom UA");
    http.setRequestHeader("Accept", "text/plain, text/html, text/xml");
        
    http.send(null);

top

POSTing form data

    // gather form data
    var name = escape(document.getElementById("form-name").value);
    var address = escape(document.getElementById("form-address").value);
    
    // build query string
    var query = "?name=" + name + "&address=" + address;
    
    // make AJAX request
    http.open("POST", "myPage.php", true);
    http.onreadystatechange = function() {};
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", query.length);
    http.setRequestHeader("Connection", "close");
    http.send(query); // not "null" as with GET requests

top

Aborting an AJAX request in progress

    http.abort(); // it's that easy!

top

Server-side AJAX processing with PHP

<?php
    // gather POST (or GET) variables
    foreach($_POST as $key => $value) {
        $$key = $value; // note the double $$
        /**
         * Using the last POST example, this loop will
         * create the variables $name and $address.
         */
    }
    
    /**
     * ALWAYS sanitize user input immediately before using it.
     * htmlspecialchars() for displaying on a webpage
     * mysql_real_escape_string() when using a MySQL database
     * filter_var() for more customizable sanitization
     */
    echo htmlspecialchars("$name lives at $address!");
    exit;
?>

top

Serving XML, JSON, (X)HTML, or plain text

<?php
    header("Content-Type: text/xml; charset=utf-8");
    echo '<?xml version="1.0" encoding="utf-8"?>
        <root>
            <name>HB</name>
            <address>123 Any St.</address>
        <root>
    ';
    exit;
?>

<?php
    // some older browsers don't recognize JSON, so serve plain text to them
    $mime = preg_match("/application\/json/i", $_SERVER["HTTP_ACCEPT"]) ? "application/json" : "text/plain";
    header("Content-Type: $mime; charset=utf-8");
    echo '[{"name":"HB","address":"123 Any St."}]';
    exit;
?>

<?php
    header("Content-Type: text/html; charset=utf-8");
    
    /**
     * JavaScript may do something like this with the following response:
     * document.getElementById("targetDiv").innerHTML = http.responseText;
     */
    echo '<p>This paragraph was retrieved via AJAX!</p>';
    exit;
?>

<?php
    header("Content-Type: text/plain"); // useful for delimited data (CSV, etc.)
    echo "1, HB Stone, 123 Any St.\n";
    echo "2, Sample Name, 345 Another St.\n";
    exit;
?>

top

Putting it all together: A reusable AJAX Singleton

    var Http = function() {
        var ReadyStates = {
            UNINITIALIZED : 0,
            OPEN          : 1,
            SENT          : 2,
            RECEIVING     : 3,
            DONE          : 4
        };
        var Status = {
            OK           : 200,
            MULTIPLE     : 300,
            FORBIDDEN    : 403,
            NOT_FOUND    : 404,
            SERVER_ERROR : 500
        };
        var http = function() {
            return ('XMLHttpRequest' in window)
                ? new XMLHttpRequest()
                : (('ActiveXObject' in window)
                    ? new ActiveXObject("Msxml2.XMLHTTP")
                    : null);
        }();
        return {
            isBusy: function() {
                return ((http.readyState !== ReadyStates.UNINITIALIZED) && (http.readyState !== ReadyStates.DONE));
            },
            request: function(obj) {
                if (typeof obj.url !== "string") {
                    return;
                }
                var orsc function() { // onreadystatechange
                    if (http.readyState === ReadyStates.DONE) {
                        switch(http.status) {
                            case Status.OK:
                                if (typeof obj.success == "function") {
                                    obj.success.call(http, http, obj);
                                }
                                break;
                            // handle other cases here as desired
                            default:
                                if (typeof obj.failure == "function") {
                                    obj.failure.call(http, http, obj);
                                }
                        }
                    }
                };
                var query = function() {
                    if (typeof obj.data !== "object") {
                        return "";
                    }
                    var q = "";
                    for (var i in obj.data) {
                        if (obj.data.hasOwnProperty(i)) {
                            q += (q.length) ? "&" : "";
                            q += encodeURIComponent(i) + "=" + encodeURIComponent(obj.data[i]);
                        }
                    }
                    return q;
                }();
                switch(obj.method) {
                    // implement other methods as desired (HEAD, PUT, DELETE, etc.)
                    case "GET":
                        http.open(obj.method, obj.url + "?" + query, true);
                        http.onreadystatechange = orsc;
                        http.send(null);
                        break;
                    case "POST":
                        http.open(obj.method, obj.url, true);
                        http.onreadystatechange = orsc;
                        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        http.setRequestHeader("Content-length", query.length);
                        http.setRequestHeader("Connection", "close");
                        http.send(query);
                        break;
                    default:
                        return; // invalid or unsupported method
                }
            }
        };
    }();

Any time you want to perform a request, you can do something like this:

    Http.request({
        url: "weather.php",
        method: "GET",
        data: {
            zipCode = "92261"
        },
        success: function(http) {
            alert("Weather report: " + http.responseText);
        },
        failure: function(http) {
            alert("AJAX call failed! Status code: " + http.status);
        }
    });

Seamless Application Updates with Adobe AIR 1.5

Tue, 25 Nov 2008 05:00:00 +0000

Providing updates to people who use your AIR apps can be a bit of a hassle. The actual Updater code only takes one or two lines, but you essentially have to write your own framework around it to consider it full-featured (check, compare, download, install). Some have supplied examples in ActionScript and JavaScript, but Adobe made it even easier in AIR 1.5. Here's the way I use the new ApplicationUpdaterUI framework in JavaScript.

    <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
    <script type="application/x-shockwave-flash" src="lib/air/applicationupdater_ui.swf"></script>
    
    <!-- This is the file described below. -->
    <script type="text/javascript" src="_UpdaterUI.js"></script>

    <!-- Include the rest of your application however you normally would. -->
    <script type="text/javascript" src="your-application-files.js"></script>

If you're using the Aptana or Dreamweaver extensions for Adobe AIR, your IDE should be generate applicationupdater_ui.swf as part of a new Adobe AIR project. You may have to check an option to create it.

// _UpdaterUI.js
_UpdaterUI = function() {
    var _ = {
        /**
         * Don't change these directly!
         * Instead, use _UpdaterUI.init("http://your.web.site/path/to/version.xml");
         */
        url     : false, // address of version.xml
        updater : false  // ApplicationUpdaterUI object
    };
    function onUpdate(e) {
        if (_.updater) {
            _.updater.checkNow();
        }
    }
    function onError(e) {
        air.trace(e); // replace this to log or handle as necessary for your app
    }
    return {
        init : function(url) {
            _.url = (typeof url == "string") ? url : false;
            _.updater = (_.url) ? function() {
                try {
                    var u = new runtime.air.update.ApplicationUpdaterUI();
                    u.updateURL = _.url;
                    u.isCheckForUpdateVisible = false; // if true: Ask user before checking
                    u.isFileUpdateVisible = false;     // if true: Ask user where to save .air file
                    u.isInstallUpdateVisible = true;   // if true: Ask user whether to update now or on restart
                    u.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED, onUpdate);
                    u.addEventListener(runtime.flash.events.ErrorEvent.ERROR, onError);
                    u.initialize();
                } catch (e) {
                    air.trace(e);
                }
                return u;
            }() : false;
        }
    };
}();

I basically encapsulated and "unobtrusified" (no, that's not really a word) the example from Adobe's AIR Developer Center, so that I could reuse it across multiple projects with minimal effort. You simply include the above file from your initial HTML document, then call _UpdaterUI.init("http://your.web.site/path/to/version.xml").

Your version.xml file should have the same overall format as the Adobe example, reproduced below:

<?xml version="1.0" encoding="utf-8"?>
    <update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
        <version>1.23</version>
        <url>http://your.web.site/path/to/YourApplication.air</url>
        <description><![CDATA[
            This version has fixes for the
            following known issues:
            *First issue
            *Second issue 
        ]]></description>
    </update>

Enjoy!

.htaccess: Cache Rules Everything Around Me

Mon, 17 Nov 2008 05:00:00 +0000

Properly configuring the cacheability of your webpages and other components can greatly improve the performance of your site for returning visitors. The longer a component is cached, the less often that same visitor has to redownload the component, saving you bandwidth and your visitors time. There are many ways to set HTTP headers for caching.

    // Example 1: cache via PHP headers
    if (!headers_sent()) {
        $offset = 60 * 60 * 24 * 7; // how long to cache the file, in seconds
        clearstatcache();           // important to call this before using filemtime()
        
        $lastmod = gmdate('D, d M Y H:i:s', filemtime($f)) . " GMT";
        $expires = gmdate('D, d M Y H:i:s', time() + $offset) . " GMT";
        
        header("Cache-Control: private, pre-check=$offset, max-age=$offset, must-revalidate");
        header("Content-Type: text/html; charset=utf-8");
        header("Last-Modified: $lastmod");
        header("Expires: $expires");
    }

Headers must be sent before any text is sent to the browser (even blank lines). If you try to set the headers after outputting anything at all, you'll raise a warning and the header will not be set.

Example 1 tells our viistors to cache our page for one week. You could calculate that value yourself (60 seconds * 60 minutes * 24 hours * 7 days = 604800) but leaving it as an expression makes it easier to adjust later if need be.

    # Example 2: using .htaccess with mod_expires
    
    <IfModule mod_expires.c>
        ExpiresActive on
        
        # 60 seconds * 60 minutes * 24 hours * 7 days
        ExpiresDefault A604800
        
        # 60 seconds * 60 minutes * 24 hours
        ExpiresByType text/html A86400
    </IfModule>
    
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js|css)$">
        # configure ETag
        FileETag -INode MTime Size
        
        # max-age set to one week as above
        Header set Cache-Control "max-age=604800, public, must-revalidate"
        
        # if you use ETags, you should unset Last-Modified
        Header unset Last-Modified
    </FilesMatch>

The benefit of using .htaccess to set your content headers is that you don't need to worry about accidentally trying to set headers after content has already been sent to the browser — .htaccess always hits before your page.

The FilesMatch directive lets you fine tune HTTP headers for certain file types, based on the regular expression inside the FilesMatch tag. Example 2 applies the rules to images, Adobe PDF documents, embeddable videos, JavaScript files, and CSS stylesheets.

    # Example 3: .htaccess when mod_expires is NOT available
    
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3)$">
        FileETag -INode MTime Size
        Header unset Last-Modified
        Header set Cache-Control "max-age=86400, public, must-revalidate"
        Header set Expires "Thu, 31 Dec 2010 20:00:00 GMT"
    </FilesMatch>
    
    <FilesMatch "\.(htm|html|php)$">
        FileETag None
        Header set Cache-Control "max-age=86400, public, must-revalidate"
    </FilesMatch>
    
    <FilesMatch "\.(js|css)$">
        FileETag None
        Header set Cache-Control "max-age=604800, public, must-revalidate"
        Header set Expires "Thu, 31 Dec 2010 20:00:00 GMT"
    </FilesMatch>

The Net tab of Firebug will show you exactly what headers your web server sends for every single file. If you tried Example 2 but your Expires headers are missing or incorrect, your web server may not include the mod_expires module. The good news is that Example 3 should still work for your server. The less good news is that I think your Expires headers must be set to an explicit date and time, rather than a time relative to when the visitor last accessed the component. To avoid having to change our .htaccess file every week to add more time, Example 3 sets it to a date and time far in the future, and relies on the Cache-Control header to handle the rest.

What if you don't want some files to cache at all? Dynamic ages that can change each time they are accessed should not be cached, and Example 4 shows how to

    <FilesMatch "\.(php|cgi|pl|htm)$">
        ExpiresDefault A0
        Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform"
        Header set Pragma "no-cache"
    </FilesMatch>

Exceptional Performance: Image Optimization

Thu, 13 Nov 2008 05:00:00 +0000

Image optimization should be a big part of tuning your website's performance. The largest components of a page are typically images, and unlike HTML, CSS, and JavaScript, images don't reap much (if any) benefit from being served gzipped. There's still a lot that can be done to speed up your images that don't involve any loss in quality.

YSlow Serious?

YSlow is a tool developed by Yahoo as a plugin for Firebug. It offers lots of information and advice that can help you target important aspects of your website's performance. YSlow evaluates your pages and displays a sort of report card based on a bunch of weighted evaluations. One "grade" it gives you that is not as useful for small- to medium-sized sites is Use a Content Delivery Network. However, you can tell YSlow not to count this grade in your overall page score by typing about:config in Firefox's address bar, creating the key extensions.firebug.yslow.pointsNotCDN and setting its value to 0. YSlow offers other features such as cache statistics, which shows what your visitors have to download the first time they hit your page, versus what they have to download on subsequent visits. Make sure the second column is as small as possible to offer loyal users a faster website.

Pretty pie charts! YSlow's cache statistics for this very page.

Smush.it

Smush.it is a great site that gets rid of metadata in your images, reducing their file sizes without reducing image quality. For some images, this can mean very significant savings. They even have extensions and bookmarklets that help you quickly and easily optimize an entire page at once. Very cool.

Diff'rent Strokes

Image format can play a major role in both size and quality. Choosing a format that suits the type of image you're making can drastically reduce the filesize. The YUI blog has a recent post that says basically everything I was going say here, but here's a quick summary:

JPG should be used for real-world photographs, despite its generation loss.
GIF should be used for animations, and for some pixel art GIF results in a smaller file size than PNG.
PNG (usually 8-bit) should be used for everything that's not covered by the other two formats.

Minimize HTTP Requests

It takes less time for your visitors to download one 100k file than it does to download four 25k files. HTTP requests add to the overall download time for your pages, so do everything you can to eliminate them.

CSS Sprites and image maps are methods of combining multiple images into a single file. One sprite and careful positioning can cut several requests, saving your visitors precious seconds.
favicon.ico — make one, and make it tiny. You should make your favicon as small as possible to improve cacheability. If you don't have one at all, browsers can attempt to request it again on every single one of your pages. Worse yet, when they don't find it they have to make a second request to get your 404 page. Making even a simple favicon will not only avoid those "double requests", and a cached icon will eliminate dozens of potential requests, saving loyal visitors time on every page.
Cacheability (which probably isn't a word) means making sure your visitors don't have to redownload the same images every time they come back to your site, or even as they navigate from page to page. Get the INode out of your ETags, set an Expires header date in the future, and make sure (only if you use ETags as mentioned) to unset the Last Modified header to make sure your images can be cached.
```
    # .htaccess file in your document root
    <IfModule mod_expires.c>
        ExpiresActive on
        ExpiresDefault "access plus one month"
    </IfModule>
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    	FileETag -INode MTime Size
    	Header unset Last-Modified
    </FilesMatch>
    
```

Maximize Parallel Downloads

Now that you've cut out unnecessary HTTP requests, it's time to make the remaining requests faster.

Flush early, flush often — no, that's not about bathroom etiquette. Flushing content to the browser immediately after the document head lets the browser fetch your CSS file while the rest of the page is processed, and flushing again before the scripts at the bottom of your page gives the impression of faster rendering while those scripts are fetched and executed.
```
    <!DOCTYPE ...>
    <html>
        <head>
        </head>
        <?php ob_flush(); flush(); ?>
        <body>
            ... 
            <?php ob_flush(); flush(); ?>
            <script src=...>
        </body>
    </html>
    
```
Serve images from another subdomain — Browsers may be configured to download only two items at a time from a single host. If you serve plain text from www.yoursite.com and images from images.yoursite.com, those same browsers should be able to download four components at a time. Obviously this also depends on the structure of your page and your visitors' browser configuration. More details and spiffy graphs are at Maximizing Parallel Downloads in the Carpool Lane.

Before and After

Preload. Once your document finishes loading, start anticipating where your visitor will go next. Google and Yahoo each load additional components after their search homepages finish loading, because they can safely guess where you'll end up next (their search results page). For other sites it's not as easy to anticipate, but often you can use browser "down time" to prefetch components. Don't get too enthuastic about preloading, though, or you may just end up wasting bandwidth.

Postload. As Yahoo puts it, "What's absolutely required in order to render the page initially?". The rest of the content and components can wait. If you have some content split up into tabs or cards, only load the first item on startup. Load the rest of the content once the page is fully rendered. Don't make the visitor wait for content they can't use or see yet.

One Size Fits One

Don't scale images at render time via HTML or CSS. If your image is 100x100, your CSS should indicate as much. Don't scale a big image down, just resize it — otherwise the visitor still has to download the big image, but doesn't get the benefit of increased resolution. Scaling a small image up can save download time, but at the expense of image quality.

jQuery Time Picker

Wed, 12 Nov 2008 05:00:00 +0000

One of the major conventions in UI design is to use what people already know. If you present an interface that is unfamiliar, people tend to be hesitant to accept or use it regardless of how good or bad it might be. That said, sometimes someone comes up with a new UI component that is both cool and useful. Maxime Heinault's jQuery timepickr is one such component.

jQuery timepickr

Its description professes a "maximum two-click" approach to choosing a time, but if the picker opens on hover it could be brought down to one click. It's unobtrusive, degrades gracefully, is navigable via keyboard or mouse, and the button sizes are even touchscreen-friendly, for those of us in the kiosk world. The only issue I have with it so far is that it lets you type in a time, but resets itself once you tab out... It should either not let you change the value or accept what you enter.

Passing Arguments to setTimeout and setInterval

Mon, 10 Nov 2008 05:00:00 +0000

(skip intermediate solutions)

Often, we need to use setTimeout and setInterval but also need to pass arguments to the function being called. There are a handful of ways to do this.

    // Example 1, BAD! :(
    var hello = 'Hello World!';
    setTimeout("alert('" + hello + "')", 1000);

Example 1 works, but it is not the generally accepted syntax for setTimeout. Passing code as a string relies on the same behavior as eval, and eval is usually evil for reasons that are beyond the scope of this post... No pun intended. As an aside, this method is often restricted by Adobe AIR, because of the implied eval. Here's the common workaround:

    // Example 2, better :)
    var hello = 'Hello World!';
    setTimeout(function() {
        alert(hello);
    }, 1000);

Using a closure is a much better solution than supplying a string as in the first example, but it can seem bulky. Turning our little alert into a closure has basically doubled the amount of code required! Okay, it's still short, but it's not quite as clear as what we would like to do:

    // Example 3, best! :D
    var hello = "Hello World";
    setTimeout(alert, 1000, hello);

The call to setTimeout in Example 3 is clear about what arguments are being passed, rather than having to read through the closure to see what variables it might refer to. The good news is that Example 3 already works on modern browsers (including Adobe AIR). The common implementation for both setTimeout and setInterval allows you to pass additional arguments by simply... passing additional arguments. Awesome.

The exception to this rule is, of course, IE. At least up through version 7, but probably including version 8, IE will simply ignore extra arguments supplied to setTimeout and setInterval. It won't even throw an error, which can make this situation hard to debug (and is probably why this method is not as widely seen as using a closure). However, here's a bit of code I originally ran across on Web Reflection that extends this behavior to IE.

    // Example 4, keep reading if this is confusing, don't worry...
     /*@cc_on
    (function(f) {
        window.setTimeout = f(window.setTimeout);   // overwrites the global function!
        window.setInterval = f(window.setInterval); // overwrites the global function!
    })(function(f) {
        return function(c, t) {
            var a = [].slice.call(arguments, 2);    // gathers the extra args
            return f(function() {
                c.apply(this, a);                   // passes them to your function
            }, t);
        };
    });
    @*/

First things first, NO you do not have to retype the above code every time you want to use setTimeout. Example 4 actually changes the way setTimeout and setInterval behave. You would include Example 4 at the top of your script, first (or early) in the code. Then you can call setTimeout and setInterval with additional arguments the same way across all browsers. This code makes Example 3 work everywhere.

Of special note is the conditional comment, /*@cc_on ... @*/. If you use a JavaScript minifier, it may consider that whole block of code a comment and delete it... Not good. A less semantic but more reliable alternative is to use object detection to identify IE, typically something like if (("ActiveXObject" in window) && !("opera" in window)) { ... }

Generate Social Bookmarks with PHP

Tue, 04 Nov 2008 05:00:00 +0000

Social bookmark links are a given on most modern sites, especially blogs or collections of articles. Here's one way to keep your list of social bookmark links easy to maintain. Start with a CSS sprite like the following:

The sprite should be a single image that consists of all of the icons for the sites you want to link to. Each icon should be the exact same size, in this case 16x16 pixels. Now lets turn that into a list.

<?php
    $sTitle = isset($pageTitle) ? $pageTitle : "You can set this before including this script.";
    $sLink = $_SERVER["SCRIPT_URI"]; // permalink
    
    $sSites = array(
        "de.licio.us" => "http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=$sLink&amp;title=$sTitle",
        "digg" => "http://digg.com/submit?phase=2&amp;url=$sLink&amp;title=$sTitle",
        "furl" => "http://www.furl.net/store?s=f&amp;to=0&amp;ti=$sTitle&amp;u=$sLink",
        "google bookmarks" => "http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=$sLink&amp;title=$sTitle",
        "mixx" => "http://www.mixx.com/submit?page_url=$sLink",
        "reddit" => "http://reddit.com/submit?url=$sLink&amp;title=$sTitle",
        "slashdot" => "http://slashdot.org/slashdot-it.pl?op=basic&amp;url=$sLink",
        "stumbleupon" => "http://www.stumbleupon.com/submit?url=$sLink&amp;title=$sTitle",
        "technorati" => "http://technorati.com/faves/?add=$sLink"
    );
    
    $sPos = 0;                         // sprite position, in pixels
    echo '<ul>';
    foreach ($sSites as $k => $v) {    // "key" => "value"
        echo '<li style="background-position: 0px '.$sPos.'px;"><a href="'.$v.'"><img src="/img/transparent.gif"></a></li>';
        $sPos -= 18;                   // shift the background image 18 pixels
    }
    echo '</ul>';
?>

Notice that each URL has components like url=$sLink and — when applicable — title=$sTitle. That means that you can use the same script on many pages (or even across many sites) without changing a thing. Just watch out for sites changing their submission link, because using the wrong URL may not let your visitor promote your site.

Can't talk about CSS sprites without showing you the CSS to use them, so here you go:

ul.social-bookmarks {
    list-style-type: none;
}
ul.social-bookmarks li {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    background-image: url(/img/social-bookmarks.png);
}
ul.social-bookmarks img {
    width: 16px;
    height: 16px;
    border: 0;
}

Floating the list elements tells them to appear horizontally. Each list item has the same background image; our PHP script takes care of shifting the position of that background image. The only semi-hack involved is filling our list items with a transparent gif. Some browsers don't let you apply width and height to empty <a> elements, or don't let you click on empty links, so to make this cross-browser compatible I used a 1x1 pixel transparent gif.

Order of Operations in JavaScript

Mon, 03 Nov 2008 05:00:00 +0000

Operators are evaluated in the order supplied in the following table. Associativity applies when more than one operation with the same precedence takes place. Left-to-right Associativity means that operations of equal weight in a single statement are performed from left to right.

Order	Assoc	Operator	Summary
1	L L L R	. [] () new	Retrieve object property. Array index or associative object property. Function call. Instantiate an object.
2	R R R R R R R R R	++ -- - + ~ ! delete typeof void	Pre- or post-increment. (unary) Pre- or post-decrement. (unary) Negation. (unary, NOT subtraction) No operation, use numerical value. (unary, NOT addition) Bitwise complement. (unary) Logical complement. (unary) Destroy an object property. (unary) Return datatype. (unary) Return undefined. (unary)
3	*, /, %	L	Multiply, divide, modulo (remainder)
4	L L	+, - +	Add, subtract. Concatenate strings.
5	L L L	<< >> >>>	Shift left. Shift right and extend sign. Shift right and pad with zeroes.
6	L L L L	<, <= >, >= instanceof in	Less than, less than or equal. Greater than, greater than or equal. Verify an object's constructor. Verify an object's property exists.
7	L L L L	== != === !==	Are operands equal? Are operands NOT equal? Are operands identical? Are operands NOT identical?
8	L	&	Bitwise AND
9	L	^	Bitwise XOR
10	L	\|	Bitwise OR
11	L	&&	Local AND
12	L	\|\|	Local OR
13	R	? :	Conditional operator (ternary)
14	R R	= *=, /=, %=, +=, -=, <<=, >>=, >>>=, &=, ^=, \|=	Assign value. Perform operation, then assign value.
15	L	, (comma)	Multiple evaluation.

Specificity in CSS

Fri, 31 Oct 2008 04:00:00 +0000

Ever wonder why some styles don't seem to get applied to your pages? Ever come across (or produce) a stylesheet littered with !important declarations? The reason is likely selector specificity. Specificity in CSS is how browsers determine which rules should be applied to a webpage. If two selectors can point to the same HTML element, the rule with the higher specificity is applied.

    div {
        width: 200px; /* less specific */
    }
    div.someClass {
        width: 300px; /* more specific */
    }
    div#someID {
        width: 400px; /* most specific */
    }

Element selectors (div) are considered the least specific, because there could be any number of matching elements on a page.
Class selectors (div.someClass) are more specific. If you have 10 divs on a page, it is likely that fewer than 10 will be assigned .someClass — if you find otherwise it may be time to start your stylesheet over!
ID selectors (div#someID) are the most specific, because by definition there should be only one of a given ID on the page. Browsers tend not to enforce that rule, but the results of assigning one ID to more than one element can be unpredictable.

A common recommendation is to create the least specific selectors to reach an element. For example:

    <html>
      <body>
       <div id="navigation">
        <ul class="links">
         <li><a>home</a></li>
         <li><a>...</a></li>
        </ul>
       </div>
      </body>
    </html>

    div#navigation ul.links li a {
        /* very specific! :(
         *  - hard to override if necessary
         *  - if we rearrange the HTML, we probably have to revise this CSS as well.
         */
    }
    ul.links a {
        /* much less specific :)
         *  - points to the same elements
         *  - we can move ul.links anywhere on the page and this rule will still work.
         *  - saves bandwidth, especially with long stylesheets
         */
    }

Attribute selectors (input[type=submit]) are grouped with class selectors when it comes to specificity. The official CSS documentation describes a more complex calculation, but if you keep in mind the relative weight of element, class, and ID selectors you should be able to assign styles using more efficient and effective rules.

Generating Unique IDs with JavaScript

Fri, 31 Oct 2008 04:00:00 +0000

Sometimes you want to generate unique IDs with JavaScript. Perhaps you're creating several DOM elements and want your script to automatically avoid naming conflicts. Anywhere automatic name or number generation is used, there's a chance you'll need to ensure you can get a unique ID.

    var uniqueID = function() {
        var id = 1; // initial value
        return function() {
            return id++;
        }; // NOTE: return value is a function reference
    }(); // execute immediately

This sneaky anonymous function doesn't actually return a "normal" value the first time it runs. We're using the powerful combination of function literal syntax with inline execution to return a new function, which is assigned to var uniqueID. This new function has access to var id, because that variable was defined in the same scope as the function that got assigned to uniqueID.

The first time we call uniqueID(), 1 is returned. That number gets incremented every time we call uniqueID(). Because the variable id belonged to the sneaky anonymous function, there's no way for us to accidentally overwrite that value and start getting duplicate values. For example, if our code later runs uniqueID.id = 0;, that creates a new property of the function uniqueID, and the result of calling uniqueID(); is unaffected. Handy!

Checking Network Availability in Adobe AIR

Fri, 31 Oct 2008 04:00:00 +0000

Here's a module that detects whether your Adobe AIR app is connected to the internet.

Net = function() {
    var url       = false; // assigned during init()
    var connected = false; // automatically updated
    var handlerEventComplete = function(e) {
        connected = true;
    };
    var handlerIoError = function(e) {
        connected = false;
    };
    var checkConnection = function() {
        var r = new air.URLRequest(url);
        r.useCache = false; // force a new fetch
        var l = new air.URLLoader();
        l.addEventListener(air.Event.COMPLETE, handlerEventComplete);
        l.addEventListener(air.IOErrorEvent.IO_ERROR, handlerIoError);
        l.load(r); // execute request
    };
    var start = function() {
        air.NativeApplication.nativeApplication.removeEventListener(air.Event.NETWORK_CHANGE, checkConnection);
        air.NativeApplication.nativeApplication.addEventListener(air.Event.NETWORK_CHANGE, checkConnection);
        checkConnection(); // 1st call must be manual, because an event may have already occurred
    };
    return {
        init        : function(u) {
            url = (typeof u == "string") ? u : false;
            start();
        },
        isConnected : function() {
            return connected;
        }
    };
}();

When you're ready to start checking the network connection, you can call Net.init("http://your.web.site/") — I usually use the URL for my app's version.xml file, which the Updater uses. If you just need to know whether you're connected, not necessarily whether a particular resource is available, then Google or some other reliable address should be fine.

The module is event-driven, rather than relying on polling. If you want to change the resource it checks for, simply call Net.init() with the new URL. Note also that this method does not require Adobe's servicemonitor framework, which it would if it polled the address using URLMonitor or ServiceMonitor.

Enjoy!

JavaScript in Action: thesixtyone.com

Thu, 30 Oct 2008 04:00:00 +0000

Just wanted to point you to thesixtyone if you don't already use it. It's really one of the few next-gen websites that I think really does it right. Thesixtyone calls itself a "music adventure" — you earn XP for listening to music as well as reaching various milestones.

You can support songs you like by bumping them. Bumps cost XP, but the more popular the song gets, the more XP you earn for having supported it. Sign up for free as a listener or an artist, and start leveling.

Exceptional Performance: Styles Up, Scripts Down

Wed, 29 Oct 2008 04:00:00 +0000

This is the first post in a series about improving website performance.

Here's a simple tip that can significantly speed up your website loading time in the eyes of your visitors. Since HTML defines the structure of your page and CSS defines how your website is presented, modern browsers hang onto your content until you tell them how it should be displayed. This behavior is called progressive rendering.

Progressive rendering makes for a more responsive user experience.

If you use style tags throughout your page, or include external stylesheets in your page body, most browsers avoid rendering until those styles are parsed. IE may avoid rendering entirely, leaving your users to stare at a blank white page until everything is done loading. Declaring all of your styles at the top of the page ensures that the browser can take full advantage of progressive rendering and display content immediately. The HTML specification confirms that all <link> tags should be within the document head.

JavaScript, on the other hand, should be saved until the very end of the page whenever possible. When a browser comes across a script tag, it waits until that entire script executes before moving on. Putting your scripts immediately before your closing </body> tag does two things:

All of your HTML and CSS will have already been loaded, so in your visitor's eyes, your page is "done" loading.
Your scripts can immediately start using DOM objects, and don't necessarily have to wait for the events that signify the document finished loading.

Hope that improves the speed of your website! Read more tips at Yahoo.

Zapping Trailing Commas Using Regular Expressions

Tue, 28 Oct 2008 04:00:00 +0000

(skip to the finished product)

Here's a PHP tip that will hopefully come in handy. Say you have an automatically generated string that dumped a bunch of stuff together and separated them with commas. Meta keywords, post tags, first and last names, whatever. Ideally you could "fix" your generation process and not introduce the trailing comma to begin with, but we all know sometimes life isn't perfect. There are many ways to eliminate that trailing comma.

    // this would be generated somewhere else, it's just assigned here for comprehension
    $generated = "this, that, the other, and something else, ";
    
    ...
    
    $generated = substr($generated, 0, strlen($generated) - 2);
    echo $generated; // this, that, the other, and something else

What if that trailing space isn't there? Sometimes another process may have trimmed it already. Revision number one...

    $generated = "this, that, the other, and something else, ";
    
    if (substr($generated, -1) == ' ') {
        $generated = substr($generated, 0, strlen($generated) - 2);
    } else if (substr($generated, -1) == ',') {
        $generated = substr($generated, 0, strlen($generated) - 1);
    }
    echo $generated; // this, that, the other, and something else

Little messier, but it gets the job done. Is there an easier way?

    $generated = "this, that, the other, and something else, ";
    
    $generated = preg_replace('/, ?$/', '', $generated);
    echo $generated; // this, that, the other, and something else

Back to one line, and now it doesn't matter if there is or isn't a space, or even if the whole trailing ", " isn't found to begin with! It's a short regex, but lets break it down character by character:

/ begins a Perl-style regular expression
, is the comma we want to zap
(space) is the space that may or may not already be trimmed
? means match zero or one of the last character (space)
$ means only match at the end of $generated
/ ends a Perl-style regular expression

I'm a PC, and I'm a Mac

Tue, 28 Oct 2008 04:00:00 +0000

What do you get when you cross 50 Mac Minis, a case of Monster energy drinks, and a bunch of programmers in the Geekworks basement? Check it out!

Fifty Mac Minis loaded with Windows XP Embedded and our digital signage app, written for Adobe AIR.

iWall

mWall? Monster really should be paying US, not the other way around.

Prepping the boxes many-at-a-time. Is this a fire hazard? Also notice the Monster energy drinks used for fuel.

Each one is labeled with an address...

... that corresponds to one of these Christmas-colored dots in Fresno.

The digital signage app is written in ActionScript, on Adobe AIR. I mostly worked on the data aggregation in PHP (news, sports scores, stock prices, and weather) which is fed to each player as XML.

Even though the hardware's Mac minis, we use Windows XP Embedded, so they're both Macs and PCs. (nevermind that Macs are PCs to begin with...)

AJAX: Cross-Browser XMLHttpRequest

Tue, 28 Oct 2008 04:00:00 +0000

The term AJAX has grown to encompass a broad range of technologies and programming methodologies. As you'll find throughout web development, there's often a DOM way to do something, and then there's The Microsoft Way to do it. In this case, there are actually two Microsoft ways.

    var http = function() {
        try {
            return new XMLHttpRequest();
        } catch (e) {}
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {}
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
        return null;
    }(); // inline execution

You can think of this pattern as the Good, the Bad, and the Ugly.

The Good: The first try/catch block uses the DOM API standard method of generating an XMLHttpRequest object. Most browsers implement this method, including Firefox, Safari, Opera, Google Chrome, and a host of others.
The Bad: Msxml2.XMLHTTP is IE's AJAX object. Msxml2.XMLHTTP is actually the preferred of the two IE objects, according to the Microsoft XML Team.
The Ugly: Microsoft.XMLHTTP is bound to version 2.0 of Microsoft's implementation of the XMLHttpRequest object, while Msxml2.XMLHTTP (despite the name...) has progressed to at least version 6.0, possibly beyond. But if you're wondering why your killer app doesn't work in IE5 on Windows 98, make sure you include that third try/catch block!

The beauty of this above pattern is that you don't have to try to detect what browser your visitor is running, nor do object detection to determine which code to execute.

Semantically, I should mention that object detection is probably the "right" way to create this object. If you're going to use try/catch blocks, you should actually handle the error, not have empty catches. However, in this particular case I believe this pattern to be the most efficient and easiest to understand way to create your AJAX object.

(function(){})(); and Scope

Mon, 27 Oct 2008 04:00:00 +0000

No, that's not a typo. (function(){})(); has a lot of punctuation, but that's what it really looks like. It's easier to understand if you break it down:

    (            // 1
        function // 2
        ()       // 3
        {        // 4
        alert("code goes here");
        }        // 5
    )            // 6
    ();          // 7

Lets the JavaScript interpreter (browser) know that we want the next few js pieces to act as a group. This is no different than grouping operations in math.
var mathStuff = (1 + 2) * 3 means to figure out 1 + 2 first.
We're declaring an anonymous function. Functions are first-class objects in JavaScript, and in many cases they don't need to be assigned a name to execute.
This is the list of arguments for our function, just like a regular function definition function() { ... } In this case there are no arguments, but just you wait...
Begins the function body.
Ends the function body.
Ends the "group" we created in line 1.
Inline execution is when you execute a function immediately upon defining it. This works the same way as calling a function named someFunction by typing someFunction();.

Waitaminute... What's the purpose of defining a function if we run it immediately and throw it away? Why not just type alert("code goes here") and avoid that whole squiggly mess?

Scope, that's why. Any variables or functions created in that anonymous function live and die with that anonymous function. A major concept of scope in javascript is inner functions can see into outer functions, but outer functions can't see into inner functions. For example:

    function withInline(){
        var year = (new Date()).getFullYear();
        (function(year){
            var lastYear = year - 1; // hidden from withInline!
            year++; // modifies this inner function's argument only
            alert("next year is " + year); // correct
        })(year); // passing the outer function's variable to the anon function
        alert("this year is " + year); // unchanged
        alert("last year is " + lastYear); // error: lastYear is not defined in this scope!
    }
    
    function withoutInline(){
        var year = (new Date()).getFullYear();
        var lastYear = year - 1; // not hidden
        year++;
        alert("next year is " + year); // correct
        alert("this year is " + year); // incorrect, overwritten :(
        alert("last year is " + lastYear); // correct
    }

Notice both withInline and withoutInline execute the statements in the exact same order. However, the withInline() button will only display two alert boxes, the third one throws an error because lastYear is not visible to withInline, it lives and dies with the anonymous inner function. The withoutInline() button doesn't throw any errors, but the value stored in year is overwritten with next year! The anonymous function construct creates its own scope, or execution context.

arguments.callee

Mon, 27 Oct 2008 04:00:00 +0000

arguments.callee is a powerful JavaScript construct that allows a function to call itself. Sound useless? It's not. arguments.callee allows even anonymous functions to be recursive. A classic example of recursion is something like this:

    function getFactorial(x) {
        if (x <= 1) {
            return 1;
        } else {
            return x * arguments.callee(x - 1);
        }
    }
    alert(getFactorial(5)); // evaluates 5*4*3*2*1, alerts "120"

That particular example can be done without recursion, and in general is not very exciting. However, this blog will delve into various ways arguments.callee can be used to solve real programming problems. Another fun construct is setTimeout(arguments.callee, x) which allows a function to call itself after a delay of x milliseconds. Here's a fun little example:

(function() {
    var message = "Asynchronous output!";                            // statement 1
    var target = document.getElementById("post-example");            // statement 2
    if (target.innerHTML === message) {
        target.innerHTML = "";                                       // statement 3
    } else {
        target.innerHTML += message.charAt(target.innerHTML.length); // statement 4
    }
    setTimeout(arguments.callee, 200);                               // statement 5
})();

(function(){})(); creates an anonymous function, then immediately runs it. Handy when you want to execute code without worrying about scope issues, but that's out of the scope of this post...

The first two statements of our anonmyous function declare what we want to output, and where we want to send it. Statement 3 resets the target once the full message has been displayed, and statement 4 copies over a single character of our message.

Statement 5 is the fun part. Our unnamed function calls itself 5 times per second, outputting one letter each time. There's more to it than that, but hopefully that serves as an introduction to recustion using arguments.callee.