or: Mashing up Blogger, Yahoo, Del.icio.us, MSN and My stuff using AJAX, JSON, XHTML and ASP/PHP
or: Buzzword-bingo webdev

Prologue

As part showcase, part playground, part repository, I really live in this website, especially this page. As such, I've been having a lot of fun lately, tailoring my surroundings to my needs. My main overriding goal for this redesign was accessibility (in the general sense) and clarity. I am happy that I've achieved my goal of readability and clarity with the layout, color and look here. But of course, I couldn't just teak the look, I had to poke around at the guts of the thing, making use of all appropriate APIs and technologies along the way.

Technologies used

Kokogiak.com reflects my work, but runs on the back of quite a few technologies and services. The site uses:

- Blogger.com for the weblog and comments, with a number of hacks acting as intermediary to get the look and interaction I wanted
- Yahoo's News Search, incorporated into this site using JSON
- Yahoo's Animation Library for the open/close sliding effects
- Del.icio.us for low-threshold links and bookmarks, also incorporated here using JSON
- Google's Mapping API for the "where" tab
- MSN Search to do site-search
- An IIS server, yet it uses very little actual ASP code (which is a good thing)

Blogger:
I've been using Blogger for a few years now, and am pretty happy with it - the archiving, ease of posting, comments - and especially the price structure (free). Unsatisfied with the static nature of the HTML emitted by blogger, I just built my main template as an HTML blob meant to be included server-side in a larger page (with ASP). See the plain HTML page here, and in context here (the right column).

Ajax-ifying Blogger comments. While I'm happy they are available, I never liked the way Blogger sends visitors 'offsite', to Blogger.com, in order to post comments on my blog. Using a bit of AJAX sleight-of-hand and an ASP page to act as proxy, I was able to make the Blogger comments work in-page, and within the design and context that I wanted.

When a visitor submits a new comment, the data from the form is passed via AJAX to a proxy page I built on kokogiak.com: poster.asp (bypassing cross-domain limitations). Poster.asp then uses Microsoft's server-side XMLHTTP object to pass along the data once again to Blogger.com via POST, returning the body of Blogger's "thank you" page. If successful, a message is sent back to the original page, kokogiak.com, and the form contents are automatically updated in-page with the submitted comment.

Drawbacks: Non-valid HTML in comments. Grrr. Blogger uses invalid HTML in their comments (things like <BR/>), so unless I can figure a hacky way around it (or they fix it), I won't be able to have an XHTML compliant blog while using blogger comments.

Yahoo!:
Yahoo's Web APIs are really great, and I'm using three of them here.

For the "News" tab (at top left on the main page), I'm using a few canned searches, like "xml" and "javascript+ajax", and simply using their JSON-formatted webservice to fetch, return and display the results in-page. Really sweet. I also use the JSON ScriptBuilder (found here) to create dynamic scripts and fetch the results.

To create the smooth open/close action that happens when you click "More+" or "Comments" links, I'm relying on Yahoo's Animation Library, part of the Yahoo! User Interface Library. I've never been a huge fan of canned script libraries like scriptaculous or dojo - mostly out of ignorance and pig-headedness, but often because they never seem to be as flexible as I want. That said, Yahoo's Animation Library really does a nice cross-platform job for me, and I'm quite happy to use it.

For the Del.icio.us links (remember, del.icio.us is part of the Yahoo! Family now), I am once again using JSON to fetch and display the links in-page. The main difference from the Yahoo! News JSON is that I already included the JSON output from del.icio.us, so the data is already in the page's memory on pageload, awaiting a click to be formatted and displayed.

Google Maps
Plenty has been written elsewhere about incorporating Google Maps into sites. About the only different things happening here are small rounded corners (top left and top right) laid over the map to make it fit the format a little better, and the dynamic creation/destruction and reveal of the map when the "where" tab is opened or closed.

The rounded corners are simply two small transparent gif images, placed after the map DIV, with negative CSS positioning to lay them on top. The dynamic creation/destruction is in part, simply the Google Map API (using their new GMap2 constructor), and part, the simple, yet effective innerHTML sledgehammer. Setting the innerHTML of the container DIV to "" effectively kills the map when another tab is clicked.

MSN Site Search

Once again, an ASP page on my domain using the server-side XMLHTTP object to fetch MSN RSS search results and display them here, in-page, all ajaxy. Why MSN? The quality of their results was the best. Plain and simple.

IIS Server

Why IIS? Why not PHP? Mostly because of cost, simplicity and laziness. I've had my site on an IIS server for many years now, with Speakeasy Webhosting and the deal is very nice. I've learned to live with the shortcomings of ASP, and how to augment it or abandon it when I need to.

Reference / Inspiration:

For legibility and layout, I consider Khoi Vinh's site subtraction very inspirational. Vinh's structure and layout and simplicity was a great touchstone when I was originally brainstorming the design.

For javascript and AJAX inspiration (and some code snippets), I was really inspired by Dan Theurer's Against the Browser's Will: Make Mashups Talk Across Domains article.

For some of the CSS Image Replacement techniques, I looked to StopDesign, and Petr Stanicek (Pixy) and Tom Gilder's Cover-up Method.

For the Yahoo! News API, I looked to the official API docs.

For the yahoo Animation API, I also referred to their official Yahoo User Interface Library API docs

For the Del.icio.us bits, I spent plenty of time in the "Tools" section of their Help Page

For Google Maps, nothing beats their official API documentation.

Background Image, courtesy of NASA/JPL-Caltech, and the Cassini Probe, the background image for this site is a view of Saturn's Rings, seen over its horizon. The upper atmosphere distorts the light, bending the rings ever-so-slightly. Original image also here. The (inserted) moon is Saturn's Dione.

2 Comments +