blogZero

No sooner had I added Dave Shea's (of CSS Zen Garden and mezzoblue fame) excellent (if somewhat dated) CSS Sprites ALA article to my CSS resources category, then what does he go and do?

Too Late Again

You guessed it, he publishes a follow-up article. The reason I went looking for it in the first place, or rather found it to be the best write-up on the topic, was not so much the how, but the why of using this technique. But he kind of missed the point. Sure, he explains the ins and outs and a bit of the history of sprites, but for my money the single best reason to consider using the technique is a huge reduction in the number of HTTP requests you serve up when storing a bunch of similar iconic images from one master file. Better still, once the browser downloads the aggregate file and caches it, it's a simple matter of some integer offset math to display only that portion you need as a background image in your documents.

Sprites in a Nutshell

Basically, the technique involves creating one or more fixed-sized, block-level elements with ids or classes to be used as selectors in your stylesheet, set the display property to absolute, but relative to some other containing element, say a <ul> with <li> descendants, and then use the top, right, bottom and left values of the background-position property as needed to offset that portion of the image you want revealed. Kind of like a peephole onto a larger canvas. The nice thing is you can move the canvas (the parent element) around with margins or other positioning methods, and the child elements follow right along like a duck and her little ducklings.

CSS Sprites Redux

The latest version of the article takes the technique a step further by introducing some animation effects via John Resig's outstanding jQuery JavaScript library. But Dave misses the original point again, which I found ironic after he warns his audience that using jQuery imparts a certain overhead when downloading the library for the first time.

Ajax Libraries API

However, I did learn something very interesting—Google Code is now hosting jQuery as part of their Ajax Libraries API project—allowing you to link to the library without having to host it yourself. This has two benefits: it saves you a little bandwidth, but more importantly, if enough developers are doing this then chances are your visitors already have a copy of jQuery cached locally. You can also take advantage of the Google CDN if you're using Prototype, script.aculo.us, MooTools/moo.fx, or Dojo. It would be really sweet if Google started hosting some of the more popular jQuery plugins.

google.load()

Personally, I don't understand the advantage of using the google.load() method unless your project involves using their Maps, Search, or Ajax Feed APIs. Why not just load the library and start using jQuery (or whatever) like you normally would?

<script type="text/javascript"
         src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
// when the DOM is ready
$(function() {
 // fire away
 $('#selector').method({
  // ...
 });
 // ...
});
</script>

Related Reading

• High Performance Web Sites
• Announcing Ajax Libraries API: Speed up your Ajax apps with Google’s infrastructure
• Speed up access to your favorite frameworks via the Ajax Libraries API
• jQuery Hosting With Google Ajax Libraries API

Prototype version 1.5 has just been released and includes many enhancements and bug fixes. Best of all, excellent online API documentation. For more information on the latest version, visit the Prototype blog.

Joe Hewitt has announced the final release of FireBug 1.0. Rather than go into all the details about new features and enhancements here, I'm going to refer you to the Yahoo! User Interface Blog where you can view a lengthy video featuring Joe as he demos the new version. Joe has put an enormous amount of work into this extension, if you use it regularly and it saves you time and frustration, then consider helping out with a donation.

JavaScript development just keeps getting more efficient and powerful!

The Yahoo! Developer Network has just announced that starting today, the APIs for all their properties are moving to a new domain. For instance, making a REST call to api.search.yahoo.com/Path... now becomes search.yahooapis.com/Path... Developers are encouraged to update their applications with the new URI as soon as possible. Flash developers are warned that if they do not do so by December 11th, the old location will cease to function. I'm not exactly sure why Flash developers in particular are warned rather than everyone. Another caveat from Yahoo! is only the new domain will feature updates and bug fixes.

I'm sure many programmers will find this a pain, but a simple search and replace in your source code should take care of it quickly. Hell, you could even write a sed or Perl script to do it from the command line on multiple files.

And with that, I wish you all an enjoyable Samhain if you're Irish, or Halloween for the rest of us.

Following a tip from Russ I was pleased to find an interesting post on the Official Google Webmaster Central Blog titled How to verify Googlebot. In a nutshell, it explains how to use the Unix shell program host to authenticate that an IP address copied from your Web server log file really is a Googlebot and not some email harvester (or whatever).

I decided to take this a step further and demonstrate how you can automate this procedure using a scripting language. For these examples I chose PHP and Perl, although you could certainly use Python or Ruby or whatever your preferred language is, as long as it has an interface to the gethostbyname and gethostbyaddr system calls.

Using these calls under PHP is the simpler of the two approaches, as the interface to these routines are written at a more abstract level than using the Perl Socket module. Below is an example googlebot() function in PHP that returns true if the IP address parameter authenticates, although there is no 100% guarantee of preventing a spoof getting through (but it will catch the vast majority of them). A bit of test code is included.

<?php

function googlebot($ip)  {

    // check to see if this IP really is a Googlebot

    $bot = 'googlebot.com';
    $name = gethostbyaddr($ip);
    if ($name == $ip) return false;

    return (strpos($name, $bot) !== false and gethostbyname($name) == $ip) ? true : false;
}

// test it

$ip = '66.249.66.1';

echo $ip . ' is ';
if (!googlebot($ip)) echo 'not ';
echo 'a Google bot' . "\n";
?>

The Perl version is at a much lower level, very similar to the corresponding C system calls. In fact, the module is derived directly from the sys/sockets.h header file and the functions are just wrappers around these Standard C library calls. See Berkeley Sockets for more information. If you have a copy of Programming Perl, the chapter 16 Interprocess Communications section on socket programming will help, and if you are lucky enough to have a copy of the Perl Cookbook, chapter 18 Internet Services has some great recipes for DNS lookups. For really gory details, refer to chapter 14 DNS: The Domain Name System of TCP/IP Illustrated, Volume I—The Protocols.

#!/usr/bin/perl

use Socket;

sub googlebot($)  {

    # check to see if this IP really is a Googlebot

    my $ip = shift;
    my $bot = 'googlebot\.com';
    my $name = gethostbyaddr(inet_aton($ip), AF_INET) or return 0;
    my @addr = gethostbyname($name);
    my $addr = inet_ntoa($addr[4]);

    return ($name =~ m/$bot/ and $ip eq $addr) ? 1 : 0;
}

# test it

$ip = '66.249.66.1';

print $ip . ' is ';
unless (googlebot($ip)) { print 'not '; }
print 'a Google bot' . "\n";

Finally, in case anyone is interested why it's been so long since I posted anything, much of the summer I was sick as a dog and since recovering, busy as a bee. It's nice to be feeling better and back to work!

Yahoo! has just upgraded their Maps Beta product. For end-users, you now have Satellite and Hybrid views. A major complaint from many users to date has been the lack of maps outside the US. They are now rolling out coverage across the globe, although from my tests the results are still pretty limited. For a couple of examples, check out:

• Hong Kong
• Stuttgart

For developers, several of the Map APIs have also been upgraded to Version 3. These include:

• Ajax Getting Started Guide
• ActionScript/Flash API Guide

Why it's taking so long for a killer mashup that integrates geotagged Flickr photos with Yahoo! Maps Beta is a mystery to me, although I can guess who is working on it. To stay up to date on the latest development news, join the Yahoo! Maps Developer Community.

There is never any need to get lost.

The W3C Web API Working Group has released the first draft of The XMLHttpRequest Object, a specification designed to formalize the programming interface between a browser's scripting language, typically JavaScript, and asynchronous HTTP requests made to a Web server.

The XMLHttpRequest object is implemented today, in some form, by many popular Web browsers. Unfortunately the implementations are not completely interoperable. The goal of this specification is to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code. In order to do this, only features that are already implemented are considered. In the case where there is a feature with no interoperable implementations, the authors have specified what they believe to be the most correct behavior.

Although the Working Group authors are many and represent a number of influential organizations, the principle editor of the document appears to be Anne van Kesteren of Opera Software. Most Web developers are familiar with Anne's work through his Weblog about Markup & Style and long involvement with Web standards

The Zend Framework has finally been released for evaluation. Along with the landing page, the Zend Developer Zone has a complete Zend Framework Programmer's Reference Guide.

You will find a pile of posts about this highly anticipated framework from the top PHP luminaries all over the Web, and the best of them have been collected over at Planet PHP. The easiest way to gather them all on one page is to use the search interface: zend framework (since the Planet doesn't seem to have a category or tagging system).

More news will be forthcoming on this topic as the Zend team reviews feedback, flaws are repaired, improvements are made and developers in the wild begin using the framework to build new PHP apps.

Always on the lookout for more than just code libraries and the basic documentation (if any!) that generally comes with them, I came across a very interesting piece from Dustin Diaz today. In Forget addEvent, use Yahoo!'s Event Utility, he spends some time really picking apart the Yahoo! User Interface Library: Event Utility.

These JavaScript libraries tend to be large (the Yahoo! namespace source file is only 1.5k, but event.js weighs in at a substantial 30k), so Dustin takes the time to strip extraneous whitespace from the source and then wraps the code in PHP, which by using ob_start() and the gzip callback handler, he is able to compress the code down to only 2k. And before you go crying "IE doesn't handle compressed JavaScript well or cache it!", he also takes care of sending the correct HTTP headers to do just that.

According to the Yahoo! API documentation (which is excellent by the way, ignore the crack at the top of this post):

The Event Utility facilitates the creation of event-driven applications in the browser by giving you a simplified interface for subscribing to DOM events and for examining properties of the browser's Event object.

What Dustin is interested in highlighting are these features:

• Handler Attachment Deferral
• Automatic Scope Correction
• Automatic Event Object Browser Abstraction
• Send an Arbitrary Object to the Event Handler

Along the way he drops in some great code examples and wraps up with the obligatory sample page to show off what the code can do. Dustin is very excited about this library, and even asserts dropping any of the various incarnations of addEvent() in favor of the Yahoo! Event library. Which need not concern you, since it is released under an open-source BSD license.

Nice work, but take it easy on the "dope," "tight," "sexy" and "sweet" next time, will ya?

Face it, flickr is fabulous, but these mashups and Web apps make it even more fun.

1. flappr is a really slick flash application for searching and browsing flickr photo archives. Once logged into your account, you can add the ones you really like to your favorites. Also presents the users tags by popularity, and details of each pic.

2. flickr spell couldn't be easier, just enter a word and keep clicking each letter image until your aesthetic sensibilities are satisfied. You can then use the JavaScript code provided to insert the resulting image set into your blog or Web site. I cheated (hopefully these images are not copyrighted!)

3. flickrfling is an innovative way to explore RSS feeds. Just enter the URL to an interesting one, and let the app render the feed in images based on keywords found there. The results can be quite surprising.

4. Tagnautica has to be experienced to understand it. Not that it's complicated or anything, just enter a keyword to get started.

5. Flickrball is a six-degrees-of-separation game, using flickr thumbnails and tags for clues. Warning: Kevin Bacon is watching you.

The Yahoo! Developer Network has just opened their doors on yet another excellent resource, this time for PHP Developers. The focus thus far is on providing documentation needed to make REST Web Service requests, parse the results (be they in standard XML, JSON, or serialized PHP formats), and getting the most out of the results through caching for performance and reliability.

There are plenty of code samples, including the aptly named GeoCool!, which uses the Yahoo!'s Geocoder API (from none other than Rasmus Lerdorf himself). I'm beat, go check out the rest, including various hacks, howtos maps, mashups, plugins and other assorted whatnots.

Via JZ.