August 04, 2002
More on my redesign

I've been having a lot of fun finding tricks to play with the redesign of The Long Letter.

Much of my project last night was integrating a program that displays the current .mp3 that I'm listening to, and then getting the page set up so that the display text will auto-update to keep the display current. It seems to finally be working correctly - details follow...

(And yeah, the redesign doesn't display correctly in IE <= 5.5 at the moment - Kirsten told me about that, and I need to find a way to fix it, but as I don't have 5.5 running on my PC here, it may be a bit difficult...grrr.)

Okay, here's what I've got going.

There's a cool little OS X program called Kung-Tunes that ties into iTunes and creates a text file displaying what .mp3 is playing at the moment, and uploads that file to a webserver.

Incidentally, the '.shtml' suffix on all my webpages stands for 'Server-Parsed HTML', and lets Apache know that there are SSI commands on the page that need to be processed before the page is sent to the requested browser. I started by just creating a box to display the track information in, and using an SSI command to insert that text file when someone requests the page...

<div class="sidebox">
<h1>Music of the moment:</h1>
<p><!--#include file="itunes.txt" --></p>
</div>

This worked, but the downside was that it only loaded once - right when the page was called and loaded to the visitors browser. I wanted to have the track info update on a regular basis, but without having to force the entire page to refresh. So, after a little experimenting, I figured I could drop the track info into an iframe tag. So I set the iframe to a width of 150px to fit the size of the box, told it not to display scroll bars, and told it to call the 'itunes.txt' file. By leaving the SSI 'include' command inside the iframe tag, older browsers that don't display inline frames will still call the music file - it won't refresh, but it won't look broken, either.

<div class="sidebox">
<h1>Music of the moment:</h1>
<iframe src="itunes.txt" width="150" height="100" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
<p><!--#include file="itunes.txt" --></p>
</iframe>
</div>

This almost got me there, but not quite. As the iframe loads whatever URL it's given as a page on its own, the 'itunes.txt' file was being displayed without any formatting - white background, 12-pt Times text, and so on. Easily fixed, however - I just created a small HTML file with an embedded stylesheet that is a subset of the overall stylesheet, put the SSI 'include' command in that, and pointed the iframe at that page.

<div class="sidebox">
<h1>Music of the moment:</h1>
<iframe src="kungtunes.shtml" width="150" height="100" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
<p><!--#include file="itunes.txt" --></p>
</iframe>
</div>

That page (which you can load on its own if you want to peek at the code) has a meta tag that forces it to refresh every 30 seconds - but since it's embedded within the iframe, that small section of the page is the only page that gets refreshed, the rest of my page stays static.

And, with that, we're good to go! End result: as I listen to music, Kung-Tunes creates a small .txt file of the currently playing track that it uploads to my webserver. When someone makes a call for the 'longletterbeta.shtml' page, the iframe loads the 'kungstunes.shtml' file, which in tune pulls in the uploaded .mp3 information from Kung-Tunes. Every 30 seconds the iframe refreshes, ensuring that there's always a current display of what i'm listening to (as long as i'm listening to something) displayed on my page.

Fun with useless tricks...

Posted by djwudi at August 04, 2002 02:07 PM
Comments

Addendum: Kung-Tunes default code for wrapping the artist and album names in links defaults to a Google search. Since I'm an Amazon Associate, I changed that code so that the links now perform a search on Amazon - and if anyone happens to buy something after clicking through one of the links, I'll get a (very) small percentage of the sale! Coolies.

If anyone reading this is an Amazon Associate and would like to do the same, copy and paste the following code into your Kung-Tunes 'Music track format' box (items you'll want to changes are bolded):

(NOTE: The two really long Amazon URLs should each be entered as one line, with no spaces or breaks - I just broke them down here for legibility.)

djwudi is listening to #p<a href="http://www.amazon.com/exec/obidos/external-search?tag=AmazonAssociatesID &amp;keyword=%22^p%22&amp;mode=music" title="Search Amazon for ^p" target="_parent"><strong>^p</strong></a> #p"^t"[^l] #afrom <em><a href="http://www.amazon.com/exec/obidos/external-search?tag=AmazonAssociatesID &amp;keyword=%22^p%22%20%22^a%22&amp;mode=music" title="Search Amazon for ^p ^a" target="_parent"></em> #a#y(^y)#y. [<a href="http://www.kung-foo.tv/itti.html" title="Last updated by Kung-Tunes on ^d" target="_parent">?</a>]

Posted by: djwudi on August 4, 2002 07:47 PM

amazon pimping you out baby?

whore!

wwwhhhooorrreeee!!!

(*cackle*)

Posted by: cailan on August 5, 2002 10:49 AM

Addendum 2: This may be a caveat for people who currently use A List Apart's Java-Script based stylesheet switcher. I was just playing with this last night, thinking of integrating it into my site, and it (obviously enough once I think about it) change the stylesheet for the page embedded inside the iframe tag. Visually, this can get pretty jarring.

I tried putting the switcher code into the linked page, but that didn't work at all - rather than picking up the cookie and using the new style when the option was switched, for some reason (that I've yet to figure out) all text within that iframe completely disappeared. Hrmpf. I'll keep putzing with it, though.

I have no idea how this might work if you're using Domesticat's PHP-based skinning tool - I've yet to jump into the world of PHP, though it may be a project for the near future.

I may end up forgoeing the stylesheet switcher until I can get the PHP version running to test it out - I like keeping Kung-Tunes going more than playing with alternative stylesheets at this point. YMMV, of course!

Posted by: djwudi on August 5, 2002 10:52 AM

I've just gotten notice that this writeup is now going to be listed in the Kung-Tunes readme file - too cool! Does this mean I'm published now? (grin)

Posted by: djwudi on August 5, 2002 11:05 AM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?