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!

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.