TrackChanges.js

posted January 13th 2006 at 0513 EST in All, HTML, Javascript, Python, Web, memcached

Why make your users pay attention to what changes on your site? Let the website do it for them.

With a clever combination of a few scripts, you can allow the page to highlight what has changed from the last time a user visited the page.

Go visit the example page and see for your self, then come back here and find out how it works.

How it works:

When the user visits a page TrackChanges.js uses a javascript implementation of MD4 to make hashes of the text of all the interested elements. It recursively gets the text, so if you tell it to watch <li> elements, it will pick get the string "This is a test" from <li>This is a <strong>test</strong></li>. (I lied It also strips out whitespace).

Next it sends those off to a server side script along with a unique id which gets taged in a cookie. The server side script just checks your memcached and if all the hashes are new, it just stores them. If only some of the hashes are new, it will return those.

Back on the client side, if it get's any hashes back (meaning you havn't seen the corresponding string of text before), it will go higlight that block using the Fade Anything Technique.

Thats it =)

Implementing TrackChanges.js on a page is as easy as this


<script language="javascript" src="/js/TrackChanges.js"></script>
<script language="javascript">
TrackChanges.initialize({                          // ** All parameters optional **
        title:"trackChangesTitle",                 // title text
        data:"trackChangesData",                // txt showing # changes
        url:"/path/to/TrackChanges.cgi",  // server script
        elements:['li','p'],                                // elements to watch
        speed:5000});                                    // speed to fade
</script>
 

I chose a python cgi script TrackChanges.cgi to handle the server side, but memecache api's are available in many languages (even ColdFusion soon) so you can easily do it in any language.

Requirements? You can download everything you need in the zip file below. TrackChanges.js uses prototype.js, md4.js, json.js, and fat.js.

TrackChanges.zip

Comments are closed.