Today, Alexis Ohanian and I released a new project: WTF CNN. We created the site to make it easy to compare CNN’s US front page with news sources from other countries. If you like what you see, pass it on, and check back the next time a big story emerges!

For the nerds: the site uses jQuery for the animations. It also uses a lot of modern CSS3 styling with Modernizr styles to ensure that things play nice in IE. This was my first time playing with Modernizr, and I’m super impressed by its simple approach to feature detection.

Like the original icon set, these icons are licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Feel free to use them on your site!

However, one thing I’ve never understood is the decision to use an anchor element to cancel an open reply box. I’m far more accustomed to the reddit style of placing a cancel button next to the submit button, like this:

The problem with the anchor element generated by Wordpress is that it looks really out of place when arranged next to the “submit comment” button. I had hoped there would be a parameter to change the anchor element into a button, but was disappointed to find that this particular HTML is hardcoded into the get_cancel_comment_reply_link() function.

However, the function does provide a filter hook, which I’ve used to make the change I desired. I simply intercept the HTML and return my own version with a button. It’s not very elegant, but it works.

If you’d like to use this hack, just add the following code to your theme’s functions.php file:

/**
 * Use an HTML button element for the cancel comment reply link.
 */
function cancel_comment_reply_button($html, $link, $text) {
    $style = isset($_GET['replytocom']) ? '' : ' style="display:none;"';
    $button = '<button id="cancel-comment-reply-link"' . $style . '>';
    return $button . $text . '</button>';
}
 
add_action('cancel_comment_reply_link',
           'cancel_comment_reply_button', 10, 3);

He claims to be from San Francisco. Affinity for bacon. Arrived with a document depicting various lifeforms from his home planet:

I will post further information as it becomes available.

The saidit script enhances reddit comment pages by highlighting unread comments. It works by keeping track of the comments you’ve already viewed. Here’s what it looks like:

Features

• Highlights unread reddit comments
• Read comments are stored locally
• Automatic removal of old data
• Efficient implementation

Installation

If you’d like to give it a spin, make sure you have Greasemonkey installed. Then, just install saidit from userscripts.org. Have fun!

How it works

For every comment viewed on reddit, saidit records the comment id in a “seen comments list” using DOM Storage. When a reddit comments page is loaded, saidit scans through each comment and checks if the id is in the list. If the id is not found, the class “unread”, is added to the comment div (this class can then be styled to emphasize unread comments). The seen comments list is then updated to include the new comments.

Since the script scans through hundreds of comments during the time-sensitive page loading process, I needed to make checking comment ids as fast as possible. Experimentation showed that if the seen comment ids were loaded into the fields of an Object, looking up ids was much faster than using an Array. Currently, saidit takes up to 2.5 seconds on the largest comment pages (200+) on my machine. I’m continuing to look into ways of making it faster.

Interoperability

An interesting side-effect of using DOM Storage is that read comment data is accessible to JavaScript on reddit and any other user scripts. If you can think of any clever ways to use this data, feel free to load it using the loading code below, or simply fork saidit to create a new script. Please use your new powers for good, not evil!

Here’s what the data loading code looks like, using Mozilla’s non-standard implementation of DOM Storage:

var redditStorage = globalStorage.namedItem("www.reddit.com");
var pageThingID = getThingID(getPageThing());
var seenArray = [];
var seenObject = {};
 
var seenData = redditStorage.getItem("seen-"+pageThingID);
seenArray = seenData.value.split(",");
 
// Build an object for faster access
seenArray.forEach(function(element) {
  seenObject[element] = true;
});

The “unread” class can be styled in subreddit CSS to achieve different effects. Just use a CSS rule similar to the default (perhaps with !important added):

.comment.unread .tagline {
  font-weight: bold;
  background-color: #fea;
  display: inline;
}

If you discover any interesting ways to use these, please leave a comment!

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.

I wish for change.

(and maybe 9 hours of sleep)

It’s interesting to watch Amazon take over. It seems to me that we’re experiencing a social shift, where more and more consumers are choosing to buy online instead of heading to the retail stores. I’m satisfied to believe that this is partly due to the increased amount of interaction and information (product reviews, ratings, tags) Amazon provides to shoppers. On the other hand, it scares me a bit to consider the implications massive Amazon adoption is having upon our shipping system, particularly the fuel required for personal delivery. I wonder what our society would look like if the majority shopped this way.

Speaking as a member of the so-called “Internet Generation,” my experience with Amazon and online shopping was quite the opposite of the prevailing trend.

I grew up purchasing things like music and technology on Amazon. Retail was largely off-limits, since I had limited transportation options as a child and rarely had a significant amount of cash on hand. Gift certificates became the standard from relatives, since we both agreed that it was more satisfying for me to learn to shop online and make my own choices.

Thus, Amazon was my way to acquire things: I would routinely save up a few things I wanted to purchase (enough to qualify for free shipping), and enter them into Amazon.com. Then I would wait. I remember the frustration of checking the mail each day after Takk was released. It arrived days after the release, after everybody else had a chance to listen to it.

As I grew older and able to get around myself, exploring the retail environment was a source of great excitement. It was a brand new experience: to hold, inspect, and touch the item I was interested in buying, and to arrive home with something the day I set out to purchase it. I would still read the reviews on Amazon to make my decision, but then (a traitor!) travel outside to buy things. Commuting to Portland for school further broadened my options, nullifying the advantage of Amazon’s large selection. I discovered my favorite record store, re-discovered Powell’s Books, and generally had a blast. For my first two years at PSU, I rarely if ever purchased things online.

Nowadays, I’ve revisited Amazon, but only because of their excellent MP3 service. As I’ve grown accustomed to traveling to the city to purchase things, I’ve also grown lazy about it. It’s really nice to be able to get music even faster — practically instantly — on Amazon MP3. Given my pattern of shopping based on ease and speed, I don’t think this is an environment that can be beat. For everything else, I’ll continue buying my stuff offline.