jf-hovinne

The eighth FOSDEM is a two-day event organized by volunteers to promote the widespread use of Free and Open Source software.

Taking place in the beautiful city of Brussels (Belgium), FOSDEM meetings are recognized as "The best Free Software and Open Source events in Europe".

I'm (of course) going to FOSDEM (again) this year, on Sunday 24 February.

FYI, a LinkedIn group has been created for those who will attend the event.

There's also a FOSDEM channel on fidzu available for your enjoyment.

And last but not least, Emakina, the company I work for, is an official FOSDEM sponsor, and is hiring...

This a widget example, using the jQuery jFeed and wordStats plugins, to display a list of articles related to the current document.

• wordStats computes the top keywords
• jFeed asks Google Blogsearch for related articles (matching the top keywords), using a server side proxy
• jQuery displays the results

• Basic related feeds example
• The PHP proxy

JavaScript code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wordstats.js"></script>
<script type="text/javascript" src="jquery.wordstats.en.js"></script>
<script type="text/javascript" src="jquery.jfeed.pack.js"></script>
<script type="text/javascript">

$(function() {
   
   var count = 3;
   $.wordStats.computeTopWords(count); //compute the 3 first top words
   
   //create the query
   var query = '';
   for(var i = 0; i < count && i < $.wordStats.topWords.length; i++) {
       query += $.wordStats.topWords[i].substring(1) + ' ';
   }
   query = query.substring(0, query.length - 1);
   $('#related').html('Querying blogs for: "' + query + '" ...');
   
   //load and parse the feed
   jQuery.getFeed({
       url: 'proxy.php?query=' + query,
       success: function(feed) {
           var html = "<h2>Related articles</h2><ul>";
           for(var i = 0; i < feed.items.length; i++) {
           
               html += '<li><h3 class="feeditemtitle">'
                       + '<a href="' + feed.items[i].link + '">'
                       + feed.items[i].title + '</a></h3>'
                       + '<p class="feeditemdescription">'
                       + feed.items[i].description + '</p>';
               }
           
           html += '</ul>';
           $('#related').html(html);
       }
   });
});

</script>

The jQuery wordStats plugin tries to determine what a page is about by computing the density of its keywords.
It uses a simple algorithm which adds a variable weight for each keyword occurence, depending on its 'position' in the document.
Although this computation model is quite simple, I get good results with all sorts of documents.
There's of course a system to exclude 'stop words' (frequent pronouns, prepositions, adverbs and so on).

Example: computing top keywords of a Wikipedia article.

Usage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wordstats.js"></script> <!-- core code -->
<script type="text/javascript" src="jquery.wordstats.en.js"></script> <!-- English stop words -->
<script type="text/javascript">

       $(function() {

           var count = 3;            
           $.wordStats.computeTopWords(count);

           //$.wordStats.topWords[0] returns the most frequent keyword
           //$.wordStats.topWords[1] the second, and so on

           $.wordStats.clear(); //release memory

           //compute top keywords of the element with id="content"
           $.wordStats.computeTopWords(count, $('#content'));

       });

</script>

Download:

• wordStats plugin
• English stopwords
• French stopwords

Dual licensed under MIT/GPL.

fixedBox is a lightweight jQuery plugin that allows you to display a fixed box in the web page.
The box is centered by default, but you can also define the left and/or top positions.

Look at a fixedBox example.

Usage:

centered:
$('div.message').fixedBox();

left = 200px, top = 100px:
$('div.message').fixedBox({x: 200, y: 100});

Note: you'll need to set the width and height of the matched nodes (e.g. in your CSS, see the styles in the provided example), in order to correctly center them.

Tested with jQuery 1.1.3.1, Firefox 1.5+, Opera 9.0+, MSIE 6.0+. Should also work with Safari 2.0+.

Download fixedBox.
Download fixedBox packed.

License: MIT/GPL.