jf-hovinne.blog

WYMeditor 0.5 alpha 1 released, Safari compatible

WYMeditor 0.5 alpha 1 has been released!

This new version brings major new features:

Safari compatibility
New skin system, easier to customize
WYMeditor namespace, no more global variables
Automatic loading of language and skin files

As always, any help and feedback is welcome at the Trac, the mailing-list, or by dropping me a line at jf.hovinne at wymeditor dotorg.

Thanks to contributors, especially to Scott Lewis for his help on the Safari implementation.

Download WYMeditor

WYMeditor for Safari

We finally found some time today to work on the WYMeditor Safari implementation, with Safari 3.1.1 for Windows under Ubuntu + Wine (sic).

The new Webkit support for designMode is a huge step forward compared to previous versions - main 'standard' features work out of the box, without the need of tricky hacks like before.

So most of WYMeditor commands have been ported to Safari: strong, em, lists, links, images, tables, containers, classes, ... and even nested lists! It's not perfect of course - bugs remain - but it's already quite usable (well, I hope there won't be too much issues with the Mac version).

For those interested, a nightly build is available. Please be aware that this is alpha software. Some example pages aren't up-to-date.

Thanks to Scott Lewis for his help on this.

New softwares using WYMeditor

I'm glad to announce new softwares that have chosen WYMeditor for their online editing:

SkyBlueCanvas, a lightweight xml-based CMS, written in PHP by Scott Lewis (major WYMeditor contributor);
TypeRoom, a free website editing tool that allows you to edit a website in seconds;
And a soon to be released GPL e-commerce project...

I'd recommend testing SkyBlueCanvas (SBC), which is now GPLed and is the result of 3 years of development by Scott Lewis.
This CMS is well-designed and really easy to use, though still in alpha.
For the moment SBC uses WYMeditor 0.2, but there are plans to integrate the latest WYMeditor codebase, with the long-awaited Safari compatibility. Yeah.

You may know TypeRoom, which allows you to remotely edit a website in minutes. TypeRoom uses a highly customized version of WYMeditor, and it's pretty impressive.
TypeRoom is available in two versions, a Lite one, which is free, and a Professional one. Screencasts are available (Lite, Pro).

FOSDEM 2008

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...

WYMeditor news

I've been very busy these last months, and unfortunately I had no time to blog, nor work on WYMeditor.
Things are finally getting back to normal, though I must admit I currently don't have so much time for the project...

Anyway, we have started to refactor WYMeditor's code, cleaning up the global object, moving classes to the WYMeditor namespace, and so on. No new feature, but I think the code is getting better and easier to maintain.
Next step: use NaturalDocs for the code documentation.

As a preview for the next features - true WYSIWYM editing, better event handling - a prototype written by Volker Mische (one year ago !) is available.
Volker has already implemented the Selection API for Gecko browsers.
This SAPI, and a better event handling, are required for a true WYSIWYM behaviour.

As always, any help is welcome. Please feel free to send a patch for current open issues, or drop me a mail (jf.hovinne at wymeditor dot org) if you have any suggestion - thanks!

And PS: sorry for the late news!

WYMeditor 0.4 released

WYMeditor 0.4 stable has been released!

This release includes Bermi Ferrer's powerful XHTML and CSS parsers, and fixes some outstanding bugs.

For your convenience, jQuery 1.1.4 has been included in the package, as well as getting started examples, which should work out of the box.

Thanks to all the contributors who made this release possible.

Enjoy!

Download WYMeditor 0.4

Related feeds widget

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

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>

jQuery wordStats plugin

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:

Dual licensed under MIT/GPL.

fixedBox jQuery plugin

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.

JSS: JavaScript Simple Syndication - yet another implementation

jFeed, the jQuery RSS/ATOM feed parser plugin I wrote lately has a drawback: you must use a server-side proxy to load cross-domain feeds.

It's a little bit annoying, so I looked for a more elegant solution.
There exist some web services and libraries that convert RSS/ATOM feeds to JavaScript code, so you can embed external content in your HTML document, but I'd prefer something more generic.

Another JSS proposal is to convert XML data (e.g. RSS) to JSON at the server-side, and to dynamically load it as a JS script at the client side.

There's a XSLT to do the conversion from XML to JSON, XSLTJSON, but unfortunately it uses XSLT 2.0, which isn't very wide-spread at the moment.

So I searched for another solution and got the best results with the BadgerFish convention, implemented (among others) in PHP.

I wrote a simple PHP class to use it:

<?php
require_once('BadgerFish.php');

class JSS {
   public static function encode($url, $callback) {
       $doc = new DOMDocument;
       $doc->load($url);
       $out = BadgerFish::encode($doc);
       return($callback . '(' . $out . ');');
   }
}
?>

JSS::encode loads the local or external XML document, applies the BadgerFish transformation, and returns the JSON data as the callback function argument, in the form:

callback({...JSON data...});

Note: the external JS script will be loaded asynchronously, thus we need a callback function.

This is the actual PHP file which will output the data:

<?php
require_once('jss/JSS.php');

$callback = $_REQUEST['callback'];
$url = 'rss.xml';

header("Content-Type: application/x-javascript");
echo(JSS::encode($url, $callback));
?>

And now the client-side JavaScript part:

var JSS = {

   counter: -1,
   getFeed: function(url, callback) {
   
       this.counter ++;
       JSS[this.counter] = callback;
       var body = document.getElementsByTagName('body')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url + '?callback=JSS[' + this.counter + ']';
       body.appendChild(script);
   }
};

We append the external script in the document's BODY, passing the callback function name in the query, in the form:

<script type="text/javascript" src="...url...?callback=JSS[counter]"></script>

And finally, the HTML document which will import the JSON data and execute the callback:

<!DOCTYPE ...
<html>
<head>
...
<script type="text/javascript">
function initJss() {
   JSS.getFeed('http://www.hovinne.net/feed/jss.php', function(data) {
       console.log(data); //use Firebug console
   });
};
</script>
</head>
<body onload="initJss();">
...
</body>
</html>

A JSS implementation example is available, as well as the JSS source code, licensed under MIT license.

Next step: parse the JSON feeds with jFeed!