The folks over at the Hype Machine have created a 2008 music zeitgeist that can best be described as a loving work of information wizardry. To the curious and musically-inclined, it’s an incredible resource for mining the past year’s trends in popular music. To followers of the blogosphere, the Hype Machine’s offering is unique because all of the content is derived from the social web: the rankings were based on individual bloggers’ year-end top lists, the reviews were written by thousands of independent music fans, and the artist photos were shot by a horde of different flickr users.

The art of aggregation

In the albums section of the zeitgeist (pictured), large cover art is featured alongside a clear, easily skimmed summary sentence for each album. When cover art is clicked, it slides up to reveal the entire album’s tracks streaming for free from imeem. Statistics are displayed in the top right corner containing the number of mentions in blogs, number of mentions in top lists, and the average rank in those lists. In the background, each album block subtly features a fan photograph released under a Creative Commons license on flickr. At the bottom of each block, prices are listed from popular digital distribution sites, where a license to download the music can be purchased within minutes.

While the Hype Machine created very little of the content that they’re presenting, their role as the aggregator is easily equal in importance. They’ve produced the web glue that combines their diverse sources into a highly aesthetic presentation of the year’s trends. As a rare treat, all of the music featured on the site is available for high quality streaming in full. The Hype Machine does not host the files themselves, but rather serves as a gatekeeper to external mp3 files and other free services on the Internet.

Looking back and looking forward

Less than ten years ago, Napster took the the web by storm by popularizing distribution of music in the form of mp3s on the Internet. The legal and technological landscapes have no doubt changed greatly over the past decade, but to the listener, we’ve ended up close to where it all started. On the Hype Machine zeitgeist, listeners can browse the year’s best music, chosen democratically, all free to be heard.

As mentioned in a blurb on the Creative Commons website, the raw data used to organize the lists is free for download and reuse (under the terms of the BY-NC-SA CC license). This means that any enterprising developers can add their own ideas and data into the mix to create their own extended mashups. The original availability of the blogosphere’s content is thus respected, and the Hype Machine adds their own value to the data.

As both a music discovery site and a fresh mashup, the Hype Machine’s zeitgeist is forward-thinking and beautiful. It’s an example of the promise the future of the web holds to continue spreading and opening up human creativity. I hope sites like the Hype Machine are only the beginning of the tools we’ll create to take advantage of the massive communities emerging on the Internet.

This morning, I bit the bullet and finally took a look at my site in IE6. A few minutes later, after fruitlessly experimenting with compatibility scripts, I decided to formally drop IE6 support for this site. I’ve long felt that it’s a waste of effort to cater to browsers that don’t meet developers halfway, so I’ve typically put minimal effort into designing my pages around them. I’ve also felt that the best way to finally stab the stake into IE6’s heart is to simply let pages look bad and out of date in it. I’m pleased to see that this practice is finally gaining critical mass.

Thus, I set out to find some JavaScript glue to formally explain my intentions to visitors. After surveying the options, some of which were a bit too preachy, and others a bit too mild, I decided to write my own little IE6 handler script.

My script, IE6unstyled.js, adds the header seen at the top of this post. The page is then displayed unstyled (based on David Dorward’s bookmarklet), which works well if your page degrades gracefully. Rather than allow IE6 to mangle the page layout, I choose to simply give it the raw content. This frees me from worrying about the presentation in IE6 and restores the layout to a basic, usable state. I feel that this projects the right message: to experience the current web to its fullest, you’d best switch from using IE6.

Here’s the script.

window.onload = function() {
	for(i=0;i<document .styleSheets.length;i++) {
		document.styleSheets.item(i).disabled=true;
	}
	el = document.getElementsByTagName('*');
	for ( i=0; i<el.length; i++) {
		el[i].style.cssText = '';
	}
 
	div = document.createElement('div');
	div.innerHTML = '<h1 style="font-size:18pt;">Note: a version of Internet Explorer of 6 or lower has been detected.<p>Your browser cannot display this page properly. For compatibility, this page has been reduced to a low-graphics mode. To view this site the way it was intended, please upgrade Internet Explorer or <a href="http://browsehappy.com/browsers/">switch to another browser</a>.</p>';
	div.style.cssText = 'color:black; background-color:yellow; border:5px solid black; padding:15px;';
	document.body.insertBefore(div, document.body.firstChild);
};

To use it, stash the file somewhere on your server. Then, add the following HTML to your header (edited to reflect the file location).

<!--[if lte IE 6]>
	<script src="path/to/IE6unstyled.js" type="text/javascript"></script>
<![endif]-->

Please feel free use this and make any modifications as you see fit.