The making of kokogiak.com, version 05.01.06
or: Mashing up Blogger, Yahoo, Del.icio.us, MSN and My stuff using AJAX, JSON, XHTML and ASP/PHP
or: Buzzword-bingo webdevPrologue
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:
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
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
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 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 +