I mentioned a little while back that there seems to be more and more bits of me scattered around the internet. My photos are on Flickr, my wishlist is on Amazon, my links are on Del.icio.us and my events are on Upcoming.
I’ve been working on a way of pulling these pieces together. This is what I’ve come up with: Adactio Elsewhere.
All of those sites I mentioned have something in common. They all provide APIs. I like the idea of using each API to display the different services in a combined way.
I intend to write up the process of building my little app in more detail. I’ll document the back-end and front-end programming and put it in the articles section. For now, let me give you a quick run down.
First of all, the back end…
I’m using RESTful requests to send and receive information from each web service. This isn’t out of any ideological bias against SOAP or XML-RPC, it’s just the simplest and easiest way to get something up and running.
The XML being sent back is parsed using PHP5’s superb new DOM functions. If I was trying to parse XML in PHP4, I’d have to write a function or class (or use one that someone else had written). In PHP5, it’s all built-in.
I’m particularly fond of the Amazon API because it allows you to specify an XSL file to style the returned XML. That said, the Flickr API was probably the nicest to use. It’s very feature-rich and well documented. Both the Del.icio.us and Upcoming APIs are relatively new and will probably be introducing more features and options.
The Flickr section pulls in my contacts, my newest pictures and the newest pictures from my contacts. Clicking on a thumbnail brings up a larger view of that image. Clicking on that brings up a larger view again. Clicking on a contact’s username starts the whole process again but this time you see their contacts, their photos, etc.
I find it quite addictive clicking through to pictures from someone who is a contact of a contact of a contact.
The Amazon section has a link to my wishlist. Clicking on an item in the wishlist brings up the item’s details. There’s also a form so you can search through the shop for anything you want.
The Del.icio.us section shows a list of the latest links. The Upcoming section shows a list of future events. Pretty straightforward.
I also threw in a little RSS reader. I put together an OPML file of RSS feeds from my friends and acquaintances. The feeds are sorted alphabetically. Clicking a letter brings up a list of people whose name starts with that letter. Clicking on a name shows the latest posts from their feed. Clicking on the title of post will show the post in full.
Once I had all the back-end functionality working, I covered it with a nice dollop of Ajax. This is pretty much exactly what I was talking about before: progressive enhancement with Ajax.
First I built the old-school version replete with page refreshes. The Ajax script intercepts the actions that would normally trigger a page refresh and just refreshes the relevant portion of the page instead.
You can view pictures on Flickr, shop at Amazon and read RSS feeds all from the same page without a single page refresh.
I encourage you to switch off JavaScript and browse around Adactio Elsewhere. Everything will still work but the experience won’t be quite as fluid. The important thing is that all the content is still accessible without JavaScript.
Finally, I wanted to make the page look pretty. I’ve gone for a bit of a mixture of styles. The colours are autumnal and there’s a floral background. The navigation has a kind of bookish, classical feel to it but the pages themselves have been slightly grunged up.
I had a lot of fun making this little app. At times, I was positively grinning with glee as I programmed the latest addition. I really enjoyed being able to use so many different technologies at one time: PHP5, Web Services, XML, XSL, OPML, RSS, JavaScript, DOM Scripting, Ajax, XHTML and CSS. Personal projects like this really help me get to grips with ins and outs of technologies that will come in useful on commercial work.
I’m going to keep tweaking the page. I need to investigate how screen readers cope with portions of the page being refreshed. I may add an optional checkbox. Ticking this would trigger an alert whenever new content is loaded. This alert could then notify screen readers to trigger a fresh reading of the page.
Hopefully, it won’t take me too long to write the documentation of the building process. In the meantime, have a play around with my new toy: