Minor Site Improvements

Monday, 2007-08-13; 10:43:00



So I've implemented a few minor site improvements here at Technological Supernova.

First off, the My iTunes Widgets are now back in the sidebar. But they're off by default. Simply click the "Enable My iTunes Widgets" link in the "iTunes Store" sidebar section, and both the My iTunes Purchases and My iTunes Favorites widgets will show up.

Your preference will be stored in a cookie, too, so if you like them enabled all the time, just enable them once, and they'll stay like that. Again, though, remember that they eat up 20-30% CPU usage just sitting there, so you might want to just enable them temporarily every once in a while to see what songs I've been listening to.

One annoying thing: the HTML code that Apple provides generates a ridiculous number of errors when you go to validate your page. You can use this page over at A List Apart to change the code so that it validates: I used the code under the "Making Progress" section, 'cause I can't create a new Flash movie for the Satay method. Note that you'll need to manually change the symbol & in your URL to "&" wherever it appears, and similarly = should be changed to "=" .

Second, I've replaced the Linkable Supernova link in the sidebar with a self-updating Linkable Supernova section. There are now links to the ten most recent entries on L.S. I've been wanting to do this for a while, but I never figured out an acceptable solution that didn't require any text parsing or anything lame like that.

That said, the only viable solution I came up with is still such a large hack that I'm kind of ashamed to explain how it works here. :P iBlog has some limitations in the dynamic information that is placed in the various static pages that it generates that this was the only way I could figure out how to implement this feature.

Basically what happens is Linkable Supernova's archive page uses JavaScript to get the entry and category UUIDs for the latest ten entries so that it can generate a URL for each entry. I realized at this point that a link is useless without a title for the link, and entry titles aren't stored in the JavaScript file generated by iBlog like the entry and category UUIDs are (and I can't modify the template so that they are). Suddenly my friend's random Starcraft-esque comment, "You must construct additional iframes!" seems all the more appropriate.

So to get link titles, the archive page actually creates 10 hidden inline frames and loads the entry pages for the last 10 entries, and dynamically retrieves the title from the pages. Once it's retrieved the title and URL for each entry, it generates the list of links as you see them in the sidebar here in a hidden div. Then, Technological Supernova itself loads Linkable Supernova's archive page into a hidden iframe, retrieves the list of links from the hidden div, and places them in the sidebar.

Surprisingly, there doesn't seem to be any perceptible slowdown to loading 11 hidden inline frames, probably because browsers don't bother to render the markup until it needs to actually display it. Since these hidden iframes never actually get displayed, the only overhead is downloading the extra 11 files. I chose the archive page specifically because it was so small (4 KB), and each entry page is about 8 KB, so it's about an extra 84 KB of extra data to download.

(Note: I just noticed this doesn't seem to work in Gecko-based browsers. I'll have to check that out and see if I can fix it. This is probably because I use "window.frames['linkableSupernovaArchivePage'].document.getElementById('recent_links').innerHTML" to get the HTML from the hidden iframe, and maybe this method isn't supported in Gecko browsers?)

The advantage of this method, though, is that I never have to manually update the list of links. I just posted a new Linkable Supernova article, and the list automatically updated for me. Yay!

(Things like this could be super-optimized if I switched over to a host that had server-side scripting support or if .mac gained that feature. But it's actually kind of fun and educational to see if I can do it with JavaScript and static HTML pages. ;) )

The one thing that annoys me is that I need to have an "onload" attribute for an inline frame, but apparently that's not valid XHTML. Is it just not supported in XHTML 1.0 Transitional? It's the only validation error for Technological Supernova. :(

Finally, I've made a slight change to the templates so that if you have JavaScript off, there's still a CSS stylesheet to be used. So now the layout of the page remains largely the same, but many of the links and sidebar sections completely go away as a result of scripting being turned off. Even the text in the banner at the top of the page goes away. Perhaps I can improve these a bit, too.


Technological Supernova   Tips   Older   Newer   Post a Comment