My eBay Motors Maps Mashup

In my copious free time, I have been writing a little mashup using eBay Motors and Google Maps. This is equal parts eBay Web services marking, a learning exercize, and an excuse to code.

Like all Web 2.0 concepts, it’s in perpetual beta. (Why does “perpetual beta” seem like the Web 2.0 phrase for Web 1.0’s “Under Construction” image?) Thanks to a helpful prod, I sat down this morning and fixed the outstanding IE bugs, so now it works in IE, Firefox, and Safari. That means I can officially blog about it.

For those of you interested in the technical details, the backend code is written in PHP 5. I’m using the ext/soap extension to talk with eBay Web services and PEAR’s HTML_QuickForm, HTML_Javascript, and Date packages. I tried to use HTML_AJAX, but it was buggy when I first tried it; I see there have been many recent updates, so I should look again.

Not surprisingly, writing the PHP part was pretty easy. It was the JavaScript code that took forever and a day to write and debug. Many thanks to the QuirksMode Web site for documenting cross-browser woes.

Please check out the site and let me know what you think.

CSS Tip: Assigning Multiple Classes to a Single Element

The 37signals team wrote up a nice trick on creating a default styling for an element using an element id and then customizing it using an element class.

Here’s one of their examples:

#Flash {
  text-align: left;
  border: 1px solid #ccc;
  font-size: 14px;
  margin: 0 7px 12px 0;
  padding: 5px 5px 5px 30px;

div#Flash.good {
  border-color: #9c9;
  color: #060;
  background: url(/images/alertgood_icon.gif) #E2F9E3 left no-repeat;

<div id="Flash" class="good">Oh yes, that's nice!</div>

This technique is nice when you have one specific element that needs decorating. Since element ids are unique within a document, you can apply the exact formatting you need to that one section. However, you need to define an explicit CSS block — div#Flash.good in this case — each time you wish to combine styles.

A similar approach is assigning multiple classes to the same element:

.Flash {
  text-align: left;
  border: 1px solid #ccc;
  font-size: 14px;
  margin: 0 7px 12px 0;
  padding: 5px 5px 5px 30px;

.good {
  border-color: #9c9;
  color: #060;
  background: url(/images/alertgood_icon.gif) #E2F9E3 left no-repeat;

<div class="Flash good">Oh yes, that's nice!</div>

Use this to compose more general styles. For example, if you want all error text to be red and bold, you could define a general error class. You can then use that style anywhere in the document with any other style without needing to update your CSS.

Nothing too earth shattering, but two good tools to have in your bag.

Apple Webkit Bug of the Week

It’s not Friday, but here is my Apple bug of the week: “offsetTop values incorrect for tr elements“.

Backpack mobility support

I guess there really are two sides of every story. :)

  1. My favorite use of Backpack (Marc Hedlund)
  2. Backpack: Too Bad It’s Not Mobile (Russell Beattie)

Y! Traffic Data RSS Feed

Yahoo!’s jumped on the Dashboard bandwagon with their Y! Local Traffic widget. As someone who has been hacking around with Dashboard, I know that for this to work, Yahoo has to expose the data in an easily digestiable format. I also know it’s no problem to decompile the widget, since it’s just HTML/JS/CSS.

So I took a peek and was quite surprised by what I found. RSS.

I think this is brilliant. RSS is XML, so it’s easy to parse. It’s also easily consumable by RSS readers, so other people can piggy-back on the feed. Of course, it does mean you need to be willing to open this up to the world because it won’t take before this is figured this out and people start publicizing the interface.

Sure enough, there’s already a blog post describing how the widget works and it even provides a little form for making your own URL.

We’re finally beginning to see the adoption of Web services into client applications. One of the advantages of REST is that it’s super easy to consume from programs such as Dashboard and Firefox.

I can’t wait to see where this goes.

Sparklines are cool

If I had a link blog, I would link to the Sparkline PHP Graphing Library. (Found via Sam’s pointer to BitWorking and RedHanded.)

XSLT Cookbook: Generating an RFC 822 Date

You want to generate an RFC 822-formatted date in XSLT. This is needed, for example, in RSS feeds.

Use this code:

<xsl:value-of select="concat(date:day-abbreviation(), ', ', 
  format-number(date:day-in-month(), '00'), ' ', 
  date:month-abbreviation(), ' ', date:year(), ' ', 
  format-number(date:hour-in-day(), '00'), ':', 
  format-number(date:minute-in-hour(), '00'), ':', 
  format-number(date:second-in-minute(), '00'), ' GMT')"/>

This assumes your server is in GMT.

XSL uses a different default date format style than RSS, so it’s a bit of a pain to generate the current date in the RFC 822 format.

This code requires the use of the EXSLT date functions. Add them to your stylesheet by modifying the top to look like this:

<xsl:stylesheet xmlns:xsl="" 

I use the format-number() function to make sure all numbers have leading 0s. The date functions return 3 instead of 03, for example.