Slashdot.org is a social Web site where users submit URLs for anything of interest on the Web, accompanied by some brief editorial comment on the URL (the combination is a "story"). For many users of such sites, Slashdot is the most historically well known, even though some of the basic ideas go far back to the early days of communication across networks. Sites such as Slashdot feature some mechanism for discussing stories and perhaps for highlighting the more interesting ones. In the previous installment of this column I discussed del.icio.us, which focuses on aggregation and user-centered management of interesting links. Slashdot focuses instead on group discussion and news-worthiness of links. Other similar sites, such as Advogato, Kuro5hin, and MetaFilter, have introduced innovative ideas around how to apply technology to the social dynamics of discussion groups. These sites serve as the model for a new generation of user-driven news sites more closely associated with Web 2.0, two of which are digg.com and Reddit. I'll discuss these Web sites from a user and developer perspective in this article.
Some people debate about what makes digg.com and Reddit so Web 2.0. What do they have that Slashdot and company don't? Honestly, the answer is based less on technical merits than you might think. Debates over where any such technological concepts originated are almost impossible to settle. Some people point out that these sites are just newer versions of classic social networks such as Usenet, bulletin board systems, or The WELL (Whole Earth 'Lectronic Link), a social network dating from 1985 in which you can easily see the blueprint of sites such as Slashdot, digg.com, or Reddit. In this column I focus on the open data and social dynamics features of Web 2.0 sites, not just the flashy use of Ajax. Regardless of exactly where you draw the Web 2.0 line, digg.com and Reddit are valuable sites to learn from.
In the previous installment of this column I discussed del.icio.us, pointing out that its front page, its façade, is not as important to most users as the features, such as the Web feeds, that lie within. Many heavy users of del.icio.us never bother with the front page at all. The front pages of digg.com and Reddit are a different matter altogether. They are the main interface for most users, serving as the newspaper front page. A user clicks on a story of interest and reads and optionally uses the Web-based voting and commenting system. Figure 1 shows a portion of the main digg.com front page.
Figure 1. Digg home page
You can read the capsule summary of digg.com in the left hand column, and you can also see how to narrow the site down to areas of more specific interest. The stories highlighted ("promoted") on the main page are determined by the aggregate of positive and negative votes (called "diggs"), and you can click through to see details of each story, including its diggs and comments. You can see the "Upcoming Stories" tab, which is sort of the inbox of submitted stories that do not yet have enough positive ("digg") or negative ("bury") votes to be deemed worthy of promotion. You can also see how overwhelming some of the social features can be in such a popular site. There are almost 4000 "upcoming" stories at a time. Most people really only pay attention to a subset of upcoming stories, depending on their tagging.
Figure 2. Reddit home page
The Reddit interface is much simpler ("utilitarian", you might say, but this can be a good thing), and more of the top stories are listed because of the briefer summaries. The default view is of "hot" stories, which are recent stories with a threshold number of votes ("points"). The "new" view is similar to the digg.com "Upcoming Stories" view, in that the stories are primarily selected by how recently they were posted, rather than how many votes they've received.
Mashups, the combination of data from one Web 2.0 site with another's, are a very important part of the genre, because they prove how such sites put flexibility in the hands of users and owners, and they reduce the barrier to entry of new ideas that can stand on the shoulders of established ones. A mashup is a Web site that combines information from multiple sources. Sometimes the sources are of different classes of data; a mashup might superimpose current sports scores from one site with a map of the geographical locations of the sporting events from a mapping Web service. One of the characteristics of Web 2.0 sites is that they try to act as services such as Associated Press or Reuters, designed from the start to provide bits of information to be mixed into other sites and services.
One example of the genre is Doggdot.us, which only a few months ago was called Diggdot.us (the site was renamed after lawyers from digg.com warned them about using "digg" in the site name). Doggdot is a mashup of Web feeds from digg.com, Slashdot, and the del.icio.us "popular" tag (which I discussed in the previous installment), and was created because the developer liked all three sources, but was tired of dealing with stories duplicated from one site to the other. digglicious.com is something fancier. It's a real-time ticker of stories on digg.com and del.icio.us, showing users' activity in a dynamic display that doesn't require browser refresh. It does provide "what's hot" feeds using its own combined scoring system.
When it comes to aggregating social networking newspaper sites, however, the extreme example is probably popurls.com. The site shows an enormous, but stylish grid of 15 different news and media sites, looking to offer the latest buzz in links to text, pictures, audio, or video. One thing it does prove is how hard it is to keep up with the quantity of information social Web sites have opened up. When every person and company can be a broadcaster, the airwaves get rather crowded, but mashups are part of the flexibility that comes from the new genre, so you at least have some tools for managing the madness, according to your preferred style.
digg.com and Reddit might be more focused on their Web pages than, say, del.icio.us, but users can still gain a measure of customization and control over these sites. Often all you may need is a minor tweak to the interface. Perhaps you dislike the visual design, or perhaps you want to augment some aspect of the functionality. A well-known tool for such user tweaking of a Web site experience is the Greasemonkey extension for Firefox. Greasemonkey allows you to install scripts for particular Web sites that are then invoked whenever you load that site. The scripts are in JavaScript, so you have a great deal of control over all aspects of the presentation.
Some people like Reddit's scheme for displaying comments on stories, which takes into account how they have been rated as well as their chronology. On the other hand, some people like that discussion tends to be more civilized on Reddit than on digg.com or Slashdot, but they find that the odd comment display order makes it tricky for them to keep track of comment threads. Mike Purvis created a Greasemonkey script, Reddit Highlighter (see Resources), to make it easier for users to keep track of conversations to which they've made a contribution. Perhaps in your Reddit conversations you run into the occasional user who always seems to cause trouble. You can use RedditKillfile, a Greasemonkey script, to create a "killfile" of Reddit users whose comments you always want hidden from your browser view. Finally, since the keyboard can be a more efficient way to navigate user interfaces, you can add support for navigational access keys (NAK) in Reddit or digg.com using a Greasemonkey script by Paul Duncan.
To show how easy it is to customize Web sites such as Digg or Reddit, I show a portion of the Reddit Highlighter script in Listing 1.
Listing 1. Excerpts from Reddit Highlighter Greasemonkey script
// ==UserScript==
// @name Highlight My Comments (partial)
// @namespace http://uwmike.com
// @description Highlights comments by the current user on Reddit
// @include http://reddit.com/info/*
// @include http://*.reddit.com/info/*
// @include http://reddit.com/user/*
// @include http://*.reddit.com/user/*
// ==/UserScript==
//From: http://uwmike.com/articles/2006/08/16/reddit-greasemonkey/
var userURL, allLinks, thisURL;
userURL = document.getElementById('topbar').getElementsByTagName('a')[0].href;
allLinks = document.getElementById('main').getElementsByTagName('a')
thisURL = String(window.location);
if (thisURL.indexOf('reddit.com/user'))
{
// user page
for (var i = 0; i < allLinks.length; i++) {
if (allLinks[i].innerHTML == 'permalink')
{
var newLink = document.createElement('a');
newLink.innerHTML = 'context';
urlParts = String(allLinks[i].href).split('/');
last = urlParts.pop();
newLink.href = urlParts.join('/') + '#' + last;
newLink.className = 'bylink';
allLinks[i].parentNode.appendChild(newLink);
}
}
}
|
The top comment is a standard Greasemonkey script block. It specifies
basic metadata and, importantly, through the @include lines, specifies the URLs to which this
script should be applied. The rest is just JavaScript that's applied
to the page after it's loaded. Think of it as a user-specified onLoad attribute invocation. The script checks the
HTML for special constructs where it can insert needed changes. This does
mean that the script can break if the site developer changes the design,
but many Web 2.0 sites try to be friendly even for such tools that
screen-scrape HTML. There was quite a furore when Google made small
changes to its Web mail interface that broke Greasemonkey scripts (see Resources).
digg.com and Reddit are useful to developers and users because they are so entirely geared towards flexibility and customization. Their very simple Web interfaces are designed to invite users to pitch in on the site. Their native support of Web feeds opens up shared customization through mashups, and their friendliness to Web scripting opens up individual customization through the likes of Greasemonkey. What you can learn from the success of these sites is that a simple interface, open data, and rich metadata are important ingredients for broadening the utility of a modern Web site.
Learn
-
Keep up with technology, entertainment, world events, and more at digg.com and Reddit.
- Discover the world of Web mashups in
"Considering
Ajax, Part 2: Change your life with mashups," by Chris Laffra.
-
Learn all about Firefox's Greasemonkey extension on
Wikipedia's comprehensive page.
-
For a taste of the controversy that ensued when changes to Google's site
broke popular Firefox Greasemonkey scripts see "Gmail
Fighting Off Greasemonkey?"
See also Greasemonkey
and Gmail, Revisited, on the RedMonk Weblog.
-
Stay current with developerWorks technical events and webcasts.
-
Expand your site development skills with articles and tutorials that
specialize
in Web technologies in the developerWorks Web development zone, including the previous installment of this column "Real Web 2.0: Bookmarks? Tagging? Delicious!".
Get products and technologies
-
Build your own digg.com-workalike site using diggClone.
-
Check out mashups such as Doggdot.us,
digglicious.com and popurls.com for new ways of using your favorite sites.
- If you are a
Reddit user and often contribute to discussions on the site, you might find
Mike Purvis's Reddit
Highlighter a useful add-on. If you sometimes find a user's comments offensive, you can decide to screen him or her out with RedditKillfile. And as you find you're using the site more often, you can make it easier to get around using navigational access keys (NAK) .
Discuss
- Participate in the discussion forum.
-
Participate in developerWorks
blogs and get involved in the developerWorks community.
Uche Ogbuji is Partner at Zepheira, firm specializing in solutions for next generation Web technologies, including Semantic Web. He is also Principal at Uli, LLC. Mr. Ogbuji is lead developer of 4Suite, an open source platform for XML, RDF and knowledge-management applications and lead developer of the Versa RDF query language. He is a Computer Engineer and writer born in Nigeria, living and working in Boulder, Colorado, USA. You can find more about Mr. Ogbuji at his Weblog Copia.
Comments (Undergoing maintenance)
Table of contents
Next steps from IBM
Identify system and application bottlenecks with Rational Performance Tester. With Rational Functional Tester get enhanced support for Adobe Flex 3.0, Java 1.6, and the Dojo Toolkit.
- Try: Download a free trial version of Rational Functional Tester for regression testing and Rational Performance Tester to identify system and application performance problems.
- Article: See how easy it is to function test Web applications in Mozilla Firefox with Rational Functional Tester.
- Tutorial: Learn how Rational Functional Tester captures your interactions with an application into a Javascript and how to test application user interfaces.
- Buy: Rational Functional Tester
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
