TrackChanges.js

by @jehiah on 2006-01-13 05:13
Filed under: 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 tagged 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 haven't seen the corresponding string of text before), it will go highlight that block using the Fade Anything Technique.

Thats it =)

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

[html]
<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>
[/html]

I chose a python cgi script TrackChanges.cgi to handle the server side, but memcache 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

Subscribe via RSS ı Email
© 2017 - Jehiah Czebotar