UBIK - RPL’s Geek Passenger - Yet Another (b)Log about all that geeky weird stuff

MozREPL Custom Commands

2009-12-06T00:00:00+01:00

During common “XUL extensions/application” development workflow, we need to reload
XULRunner chrome environment and enable/disable common debugging preferences.

The “Extension Developer Extension” Firefox Addon can do this kind of stuff
but is bigger than our needs.

So, at work, we have extracted this two common functionalities in two
MozREPL custom commands

To enable these new custom commands set “extensions.mozrepl.initUrl”
to the correct “file:///” url in your profile preferences.

Happy Hacking,
rpl

CouchDB, ExtJS and Simile Timeline

2009-11-18T00:00:00+01:00

In this post I’ll try to summarize my first experiment on using CouchDB in a solution of a real world problem.

Problem

At work we are developing a VOIP application based on Yate (an OpenSource VOIP Engine) and in this kind of application timing is a very important factor, more important than in classic Web applications.

The application is working like a charm but sometimes it encounter exceptional conditions and we feel it can be related to something we’re not handling in the right way or… at the right time ;-)

How can we trace and debug this kind of problems?

We need a complete tracelog of messages received and how our application is handling them… and we need to trace the real-deployed-application, where this exceptional conditions occurs.

Solution

The solution we’re prototyping is based on a simple and not so new architecture:

The application push useful tracing information in a central storage, and we want to search, filter, analize and visualize useful informations from it.

This kind of problem can be solved in a number of ways and technologies but our experimental solution use CouchDB as “tracing-info” storage, and a pure client-side javascript application to access the data.

Some Tech Details

Our application is developed in PHP (sigh!) so we’re using the simpler PHP binding of the CouchDB Rest API:

NOTE: PHP-on-Couch don’t support authentication so I wrote a small patch (and I will setup a github fork asap)

In our current design decision every tracing session became a new different couchdb database:

<?php
// CONNECT TO A DATABASE AND DATABASE CREATION
$client = new couchClient ('http://localhost:5984','alcadialer_tracelogs_'.$start_tracing_datetime); 

if ( !$client->databaseExists() ) {
    $client->createDatabase();
}

// COLLECT TRACING INFO AND STORE IT ON COUCHDB
try {
  $ev->setParam("AlcaDialerCommand",get_class($command));
  $response = $client->storeDoc($ev);
} catch (Exception $e) {
  echo "ERROR: ".$e->getMessage()." (".$e->getCode().")<br>\n"; echo $e;
}
?>

So we’ve tracing logs databases in a CouchDB service…
now we need to navigate them in useful ways and in a timing problem “useful ways” means “visualize events on a timeline”… and the “simile timeline” is so pretty and simple to use:

http://www.simile-widgets.org/timeline/

Now the question is: how can we host all this stuff on CouchDB? we need a separate service?
The answer is: CouchDB is enough :-)

A more technical answer to this question can be: CouchApp is the way :-D

http://github.com/couchapp/couchapp

After CouchApp installation we can generate a CouchDB standalone application working tree (as Rails do)

$ couchapp generate myapp

$ ls -l myapp

drwxr-xr-x 4 rpl rpl 4096 2009-11-16 19:02 _attachments
-rw-r--r-- 1 rpl rpl   97 2009-11-16 07:03 couchapp.json
drwxr-xr-x 2 rpl rpl 4096 2009-11-16 07:01 lists
drwxr-xr-x 2 rpl rpl 4096 2009-11-16 07:01 shows
drwxr-xr-x 2 rpl rpl 4096 2009-11-16 07:01 updates
drwxr-xr-x 3 rpl rpl 4096 2009-11-16 07:01 vendor
drwxr-xr-x 2 rpl rpl 4096 2009-11-16 07:01 views

In our usecase we have to put all files of our javascript application in the _attachments dir:

$ ls _attachments/ -l

-rw-r--r-- 1 rpl rpl 1255 2009-11-16 19:02 index.html
drwxr-xr-x 4 rpl rpl 4096 2009-11-16 22:47 js
drwxr-xr-x 2 rpl rpl 4096 2009-11-16 19:01 style

$ ls _attachments/js -l

-rw-r--r-- 1 rpl rpl 5440 2009-11-16 22:47 application.js
drwxr-xr-x 4 rpl rpl 4096 2009-11-16 07:13 extjs
drwxr-xr-x 4 rpl rpl 4096 2009-11-16 14:52 timeline

In “_attachments/js” there is our application.js and two directories, extjs and timeline, where are our application dependencies (I think they can/could be stored under vendor directory… but I will try this in a second experiment)
From extjs and timeline directories we’ve removed unused stuff (examples, documentations etc.).

Let’s see some of the code of application.js (the interesting part of application.js code :-D).

How can we put CouchDB data in an ExtJS grid?
On CouchDB wiki there’s a CouchStore prototype for ExtJS… but it don’t work very well (it have to be reworked, I think), but in our usecase we only need to get from a CouchDB database, so we can use a classic JSONStore from the ExtJS standard lib:

var store = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        url: trace'/tracelogdb/_design/messages/_view/all_by_seqid',
        storeId: 'myStore',
        // reader configs
        root: 'rows',
        idProperty: 'key',
        totalProperty: 'total_rows',
        restful: true,
        fields: [
            {name: 'id'      },  
            {name: 'key'     },  
            {name: 'value'   },
        ]
    });

And attach it to a GridPanel.

Our JsonStore use a design view in the tracelogdb so we need to create it (we’ve not automated the task right now):

{
  "_id":"_design/messages",
  "language":"javascript",
  "views": {
    "all_by_seqid": {
      "map":"function(doc) {  emit(doc.params.AlcaDialerSeqID, doc); }"
    }
  }
}

Now we’ve a local (to the browser) store of CouchDB documents and every row in the view have a timestamp in a sub-property of ‘value’, so we can use that value to insert and visualize events in a simile timeline component:

function TimelineInit(store) {
    var eventSource = new Timeline.DefaultEventSource();
    
    var bandInfos = [
	Timeline.createBandInfo({
            width:          "70%", 
            intervalUnit:   Timeline.DateTime.SECOND, 
            intervalPixels: 100,
            eventSource:    eventSource,
        // THIS BAND ZOOM ON MOUSE WHEEL
	    zoomIndex:      0, 
            zoomSteps: [
              {pixelsPerInterval: 280,  unit: Timeline.DateTime.SECOND},
              {pixelsPerInterval: 140,  unit: Timeline.DateTime.SECOND},
              {pixelsPerInterval:  70,  unit: Timeline.DateTime.SECOND},
              {pixelsPerInterval:  35,  unit: Timeline.DateTime.SECOND},
              {pixelsPerInterval: 400,  unit: Timeline.DateTime.MINUTE},
              {pixelsPerInterval: 200,  unit: Timeline.DateTime.MINUTE},
              {pixelsPerInterval: 100,  unit: Timeline.DateTime.MINUTE}
	    ]
	}),
	Timeline.createBandInfo({
	    overview: true,
	    eventSource:    eventSource,	  
            width:          "10%", 
            intervalUnit:   Timeline.DateTime.HOUR, 
            intervalPixels: 100
	}),
    ];

    timeline_data = { 
	'wiki-url':"http://fake-url/", 
	'wiki-section':"Fake Section", 
	'dateTimeFormat': 'Gregorian',
	'events': []
    };

    var last_timestamp;
    var seq = 0;

    function render_event(record) {
	var description = "";
	// ... FORMAT EVENT DESCRIPTION FROM RECORD CONTENT

	return {
	    durationEvent: false,
	    title: "(" + record.data.key + ") - " + record.data.value.name,
	    description: description,
	    start: new Date(record.data.value.origin*1000),
	    icon: 'js/timeline/timeline_js/images/dark-red-circle.png'
	};
    }

    store.each(function(i) {
	timeline_data.events.push(render_event(i));
    });

    // SYNC TIME BAND
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;

    // CREATE TIMELINE
    tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

    // CENTER TO THE FIRST EVENT
    tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(timeline_data.events[0].start))
    
    // LOAD ALL DATA
    eventSource.loadJSON(timeline_data, document.location.href); 
    return tl;
}

We can enhance grid/timeline interactions with a listener that move timeline on grid row selection events:

listeners: {
  "rowclick": function(grid,rowIndex,e) {
    var selected = grid.getSelectionModel().getSelected();
    window.timeline_view.getBand(0).setCenterVisibleDate(
    Timeline.DateTime.parseGregorianDateTime(new Date(selected.data.value.origin*1000)));
  }
},

How it looks right now?

ohhh… Yes.. it’s only a prototype but it’s soooo fun, isn’t it? :-)

Happy Hacking,
rpl

MozRepl in a Panel

2009-09-27T00:00:00+02:00

As XUL developer, MozRepl is definitely my favourite Firefox AddOn, an open door from my emacs to my firefox development profile.

Using MozRepl from emacs is simple and agile thanks to an Emacs minor-mode
which connect an emacs buffer to a MozRepl session, over a tcp telnet-like connection.

I use MozRepl for real-time interaction session during talks and
courses on Javascript, OpenWeb e Mozilla Platform, but not all the audience is
“emacs-addicted” so they lost the interactive workflow experienced during this sessions.

Some months ago I’ve assembled a little experimental extension which embed a MozRepl
session in a XUL panel.

MozRepl in a Panel adds a Tool menupopup in Firefox, Thunderbird and Songbird,
and can be adapted to overlay other XULRunner application with no work.

It can be very useful to debug your extensions or XULRunner applications and to demostrate
scripting features during technical talks.

Give it a try, guys ;-)

MAOW 2009 - Firenze

2009-06-20T00:00:00+02:00

Seems like this is going to be my Year of Mozilla :-D

I was in Bruxelles for FOSDEM09, where I took part to a series of workshops on the Mozilla platform and to an intense debate among European XUL communities organized by Paul Rouget...

I had the opportunity to include JavaScript, DOM Scripting, JavaScript Frameworks (jQuery and ExtJS) and Mozilla Extension Development in a local Master Course...

... And negotiations are well underway for a 50-hour course on "JavaScript, the Open Web and Firefox as Development Tool" in a secondary school.

... and now?

Now it's time for the first Italian MAOW (Mozilla Add Ons Workshop) in Florence!!!

This month, in the afternoon of Saturday 27th, thanks to Mozilla Europe, Mozilla Italia and the XULit community (of which I'm part), there will be four hours packed with content and hand-on activity for aspiring Firefox Developers. Have a look at the MAOW agenda.

We hope this will be a way for other young developers in Italy to approach this powerful platform and community effortlessly, and that it will be just the first of a series of Italian Mozilla Hacking days.

Oh, and remember to register, so we can make sure everybody has a comfortable seat. ;) We're looking forward to seeing you in Florence!

Reintroducing Javascript

2009-05-26T00:00:00+02:00

When I’ve started 2 years ago to re-learn javascript myself my goals was to change
the old and wrong vision of the javascript programming language, take advantage
of the unlimited possibilities of the “Programmable Web” and learn how to use
javascript as a self-defence weapon in this not-so-open-yet web-world :-D

Everyone with a strong programming background can start to re-learn javascript
himself in really no-time:
some papers and video of presentations on the Good and Bad Parts
(Thanks Crockford!!!) and a quick review of Javascript Reference
is definitely enough.

Write and read more and more code to try yourself
bad and good parts, bad and good habits, useful tools and
develop your workspace and workflow, need’s a little more time.

Allright… now I feel confortable working in this new javascript world,
but what do I have to do to help others to re-learn Javascript?

In my first try I’ve assembled a course outline as step by step
presentations of Javascript syntax, data types, control structures,
functions and objects with embedded notes on the “bad parts”.

IMHO it worked well… but not enough.

After 4 days full of all this javascript concepts,
with good and bad parts mixed together remember exactly
“what the good part was” can be difficult

Now I’m thinking to refactor the course outline with:

a shorter lesson with only good parts and good habits
a longer lesson with all the bad parts examples and how to avoid them

Pre-processing Javascript with GPP

2009-03-13T00:00:00+01:00

Today I was reading some new posts on Mozilla Education Planet and I notice someone is going to figure out how to pre-process javascript sources:

http://johnhford.blogspot.com/2009/03/release-07.html :

If this doesn’t work I am going to have to figure out 
how to pre-process javascript files.

uhm… I remember something… I’ve seen pre-processed javascript sources somewhere… where?

Finally I remembered I’ve seen an interesting method to pre-process javascript sources with a
common and tested tool: gpp

I’ve seen this stuff after FOSDEM09 in the Oni sources, a javascript library/DSL
for concurrent programming, developed by Alexander Fritze (croczilla.com).

Let’s see how Alex use gpp on javascript sources in the master Oni Mercurial repository:

kudos to Alex ;-)

Ubiquity say something to me

2009-03-04T00:00:00+01:00

Mozilla Ubiquity is one of my favourite Mozilla Labs projects, I love command line as paradigm for user interaction so I like this Firefox extension a lot.

Some weeks ago I added a command (a verb in Ubiquity terminology) to read for me any text fragment selected in my browser, I don't really need a complex Text-to-Speech system... I only want a simple method to run espeak with the selected text as one of his parameters.

How many lines of code it needed? Not so much :-)

CmdUtils.CreateCommand({ 
  name: "say",
  homepage: "http://ubik.cc/2009/03/ubiquity-say-command.html",
  author: { name: "Luca Greco", email: "luca.greco@alcacoop.it"},
  license: "GPL3",
  description: "pronunce selected text with espeak",
  help: "pronunce selected text with espeak",
  takes: {"input": noun_arb_text},
  execute: function(input) {
    var file = Components.classes["@mozilla.org/file/local;1"]
                         .createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath("/usr/bin/padsp");

    var process = Components.classes["@mozilla.org/process/util;1"]
                            .createInstance(Components.interfaces.nsIProcess);
    process.init(file);
    var args = ['espeak','-v','en','-s','100', '-x', input.text];
    process.run(false, args, args.length);
  }
});

padsp is a wrapper needed to redirect espeak audio requests to the PulseAudio daemon (the sound mixing daemon of the GNOME desktop environment)

MDC references:

Simple and Fun :-)

A bit of Javascript in the new GNOME Shell

2009-03-02T00:00:00+01:00

Interesting stuffs are happening in the GNOME community underground... Next-Generation GNOME Shell is obviously a very interesting one :-D

http://live.gnome.org/GnomeShell

The new Gnome Shell is a prototype by now... but from a Developer POV it's ready enough to give it a try and see what GNOME scripting may be in the future.

The most interesting thing I noticed after a rapid reading of the project general vision, is the complete Javascript binding of the GNOME environment:

All desktop composition, workspace and window management will be Javascript scriptable and Gtk application can be coded in Javascript from head to tail.

All this libraries bindings are not implemented by hand but automated by a new "introspection technology" for GObject (http://live.gnome.org/GObjectIntrospection).

Build it now

Build tasks, automated by jhbuild, are simple and work out of box in my Ubuntu 8.10 laptop system, to minimize potential problems I recommend creation of a dedicated user (ex. gnomeng) for building and testing execution commands.

gnomeng@ubik:~$ curl -O http://git.gnome.org/cgit/gnome-shell/\
                        plain/tools/build/gnome-shell-build-setup.sh
gnomeng@ubik:~$ sh gnome-shell-build-setup.sh

### NOW YOU HAVE JHBUILD

gnomeng@ubik:~$ export PATH=~/bin:$PATH
gnomeng@ubik:~$ jhbuild build

You need various gnome/gtk/glib, cairo e xulrunner-1.9 **-dev packages already installed in your system and 165MB of free space.

Give it a try

If all building steps are completed without problems, in the gnome-shell directory inside gnomeng home there'll be an install and a source directory.

install contains gnome-shell compiled dependencies and resources
source contains source checkouts from git repositories

gobject-introspection: gobject introspection tools
gir-repository: repository of gboject interfaces
gjs: GNOME Javascript Shell (based on spidermonkey)
clutter: 3d interactive canvas library
metacity-clutter: metacity window manager with clutter-based composition features
gnome-shell: Javascript-scriptable replacement of gnome-desktop and gnome-panels

I tried to launch gnome-shell inside Xephyr as described in live.gnome.org, but it don't works very well for me (It's possible that my Xephyr version is not recent) so I tried to launch it with --replace option from a gnome-session already started and it worked... and worked very good :-D

Dissecting some javascript source file

All this stuffs are very interesting, this projects are very young but can already run, so we can experiment Javascript scripting of this new Desktop Composition Engine in the 20 minutes of a full build from sources.

In the file gnome-shell/js/ui/windowManage.js we can see how all the windows and workspace events are hooked by Javascript lambdas:

this._shellwm.connect('switch-workspace',
  function(o, from, to, direction) {
    let actors = me._shellwm.get_switch_workspace_actors();
    me._switchWorkspace(actors, from, to, direction);
});
this._shellwm.connect('kill-switch-workspace',
  function(o) {
    me._switchWorkspaceDone();
});
this._shellwm.connect('minimize',
  function(o, actor) {
    me._minimizeWindow(actor);
});
this._shellwm.connect('kill-minimize',
  function(o, actor) {
    me._minimizeWindowDone(actor);
});
this._shellwm.connect('maximize',
  function(o, actor, tx, ty, tw, th) {
    me._maximizeWindow(actor, tx, ty, tw, th);
});

Desktop Windows animations are configured in Javascript language too, Tweener is a port of an animation ActionScript library:

Tweener.addTween(actor,
                         { scale_x: scale_x,
                           scale_y: scale_y,
                           time: WINDOW_ANIMATION_TIME,
                           transition: "easeOutQuad",
                           onComplete: this._maximizeWindowDone,
                           onCompleteScope: this,
                           onCompleteParams: [actor],
                           onOverwrite: this._maximizeWindowOverwrite,
                           onOverwriteScope: this,
                           onOverwriteParams: [actor]
                         });

Loading of external modules is done by reference properties of the imports global object:

const Clutter = imports.gi.Clutter;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
const Signals = imports.signals;
const Tweener = imports.tweener.tweener;</p>

Gjs vs. Seed

Using gobject-introspection GNOME guys have already prototyped 2 different implementations of Javascript GNOME environment:

Gjs based on Mozilla Spidermonkey
Seed based on Webkit JavascriptCore

Two different implementation in so short time... It's good... gobject-introspection proven to work. There's a lot of people interested in this topic... it's definitely a hot topic :-P

Final Thoughts

I feel that GNOME and Mozilla could learn a lot each other:

GNOME can learn from Mozilla the "Javascript as an extension language" lesson and Mozilla can learn "deCORBAmination" one from GNOME.

In the past years GNOME project deCORBAminated its core and replaced it with:

DBUS (to replace "Services" of the CORBA technology)
gobject-introspection (to replace "Language Independent Bindings" of the CORBA technology)

Two lightweight solutions to replace a complex technologies:

Mozilla "deCOMtamination" intentions aren't so different and a "not so different" experience can be useful I think (something like XPCOM for services and JS-ctypes for native libraries bindings):

In the meantime Mozilla has a long time experience in "Javascript as extension language" and in Extension deployment and automatic update... GNOME can learn a lot from past and future direction of Mozilla in this complex topic.

... and a last word on the new GNOME Shell prototype: Could be GNOME the first Desktop to blur its edge with the Web? It would be Great!!! isn' it? :-P

Hello world!

2009-03-01T00:00:00+01:00

This is the "Hello world" of this blog... ok... it's true... it isn't my first blog but this is absolutely my first non-italian one!

Posts in Italian language are not very accessible to the rest of the world so I've started this little one to... join the conversation ;-)

... yes yes... yet another little and unuseful source of noise on the net.

I know I read English better than I write (I know... this isn't English at all ;-)) but this is a further reason to start an English blog (from my POV :-P)

As for all the other (programming) languages I've learned... I need to read, to study and to write a lot of code :-)

So I'm starting to write this blog now... and I'll run make to check if it could run without errors or need some debug work