If you’re still interested, update your bookmarks and RSS/Atom feeds:

• http://floriancargoet.com/
• http://blog.floriancargoet.com/
• http://blog.floriancargoet.com/atom.xml

See you there!

You’ve built a web application and it’s time to write the user documentation. Your app is localized and you ship new features every three months.

In your documentation, you want screenshots of specific parts of your application: the login box, the collapsed Help panel, the main data grid…

You need to take screenshots in 4 languages.

Do you want to take them manually? You could probably define a bunch of rectangular zones and automate the process but the login box is bigger in French than in English since the text is longer. And in six months, you’ll ship a feature which will require a change in the global application layout.

Do you want to define your rectangular zones 4 times? And redefine them (4 times) whenever you resize/move a component?

Solution: component based screenshots

What if you could tell: “Take a screenshot of this div” instead of “Take a screenshot of this app and cut here, here and there”?

Even better: “Take a screenshot of this <insert your favorite UI framework> component”.

With PhantomJS, you can.

Installation

There are builds for Windows and MacOS X available on the download page, there is brew install phantomjs, there is a PPA for Ubuntu, and there are several git repositories.

I chose to compile it on my 32 bits Ubuntu computer:

sudo apt-get install libqt4-dev libqtwebkit-dev qt4-qmake
git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 1.4.1
qmake-qt4
make

There is no install target in the Makefile so do whatever you usually do in this case (move/symlink the binary to /usr/bin/, add the bin/ directory in your $PATH, use the full path when invoking phantomjs…). The PhantomJS binary is bin/phantomjs.

Usage

phantomjs your_script.js [parameters]

Examples

You can find some examples on the site. Here are some of them:

Load a web page:

var page = new WebPage();
 
page.open(url, function (status) {
  // do something
});

Take a screenshot a a page:

var page = new WebPage(),
    address, output, size;
 
if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 600, height: 600 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Evaluate some JS code in the context of the web page:

var page = new WebPage();
page.open(url, function (status) {
    var title = page.evaluate(function () {
        return document.title;
    });
    console.log('Page title is ' + title);
});

Combine of these possibilities and you have a nice screenshotting solution!

Component screenshotting

With PhantomJS, this is really simple:

1. Load your app
2. Find your divs / Find your components
3. Get their bounding boxes (top, left, width, height)
4. Render with clipRect

Example with an ExtJS demo app:

This is a RSS feed viewer and I want screenshots of:

• The left panel
• The preview button
• The whole application, with the left panel collapsed

Here it is:

var page    = new WebPage(),
    address = 'http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/feed-viewer/feed-viewer.html';
 
page.viewportSize = {
    width  : 800,
    height : 600
};
 
// define the components we want to capture
var components = [{
    output : 'feed-viewer-left.png',
    //ExtJS has a nice component query engine
    selector : 'feedpanel'
},{
    output : 'feed-viewer-preview-btn.png',
    selector : 'feeddetail > feedgrid > toolbar > cycle'
},{
    output : 'feed-viewer-collapsed.png',
    //executed before the rendering
    before : function(){
        var panel = Ext.ComponentQuery.query('feedpanel')[0];
        panel.animCollapse = false; // cancel animation, no need to wait before capture
        panel.collapse();
    },
    selector : 'viewport'
}];
 
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        /*
         * give some time to ExtJS to
         *   - render the application
         *   - load asynchronous data
         */
        window.setTimeout(function () {
            components.forEach(function(component){
                //execute the before function
                component.before && page.evaluate(component.before);
                // get the rectangular area to capture
                /*
                 * page.evaluate() is sandboxed
                 * so that 'component' is not defined.
                 *
                 * It should be possible to pass variables in phantomjs 1.5
                 * but for now, workaround!
                 */
                eval('function workaround(){ window.componentSelector = "' + component.selector + '";}')
                page.evaluate(workaround);
 
                var rect = page.evaluate(function(){
                    // find the component
                    var comp = Ext.ComponentQuery.query(window.componentSelector)[0];
                    // get its bounding box
                    var box = comp.el.getBox();
                    // box is {x, y, width, height}
                    // we want {top, left, width, height}
                    box.top  = box.y;
                    box.left = box.x;
                    return box;
                });
                page.clipRect = rect;
                page.render(component.output);
            });
            // job done, exit
            phantom.exit();
        }, 2000);
    }
});

Result

And here are the screenshots:

Conclusion

Now, we can automate screenshotting of specific components, even if we don’t know their position or size. Relaunch this script with your application in Spanish and voilà: 3 Spanish screenshots in 5 seconds, even if the button is bigger (or smaller, I don’t speak Spanish)!

Ideas:

• Components to capture defined in the app itself
• Browser extension/Bookmarlet to define the components to capture just by clicking on it
• Use it for unit testing, with image comparison
• Make a product of this, make profit

I hope you liked it!

I recently switched to XFCE, using the NOX theme. Unfortunately, Firebug’s tabs use the same color as NOX’s background color.

grey text + grey background = invisible tabs!

This is extremely specific, nobody’s going to use it except me but I know I will need it whenever Firebug is updated.

Solution

Change Firebug!

$ mkdir myfirebug
$ cd myfirebug
$ unzip /path/to/firebug@software.joehewitt.com.xpi
$ vim skin/classic/win/firebug.css

Now, edit the color in the panelTab rule.

Zip everything and install it in Firefox.

$ cd myfirebug
$ zip -r custom-firebug@software.joehewitt.com.xpi *

If you’d like to read more from Hacker Monthly, we’ve got 5 digital subscriptions to give away — worth $29 each! Just post a comment with your favourite JavaScript one-liner, and I’ll select 5 winners.

Thanks to this piece of code, I am the happy winner of one of the subscriptions:

(function ___(__){return function(_){return _!='?' && ___(__+_) || __+'!';};})('d')('a')('i')('l')('y')('j')('s')(' ')('r')('o')('c')('k')('s')('?')

In this article, I’ll explain what it does and how it works.

What it does?

If you copy/paste/run it in your favorite JavaScript debugger you’ll see that the weirdly formatted question ('d')('a')('i')('l')('y')('j')('s')(' ')('r')('o')('c')('k')('s')('?') is answered: "dailyjs rocks!"
Yes, this was blatant flattery (even called ass-kissing ). Well… It worked!

How it works?

To understand it I am going to uncompress this one-liner bit by bit.

Let’s add some new lines and spaces:

(function ___(__){
    return function (_){
        return _ != '?' && ___(__ + _) || __ + '!';
    };
})
('d')('a')('i')('l')('y')('j')('s')(' ')('r')('o')('c')('k')('s')('?')

I obviously use the underscore character to make the variable and function names more meaningful. Who wants obscure names like these:

(function createAccumulator(allPreviousLetter){
    return function (newLetter){
        return newLetter != '?' && createAccumulator(allPreviousLetter + newLetter) || allPreviousLetter + '!';
    };
})
('d')('a')('i')('l')('y')('j')('s')(' ')('r')('o')('c')('k')('s')('?')

createAccumulator is the best name I could think of but it’s not that good… I really prefer ___.

It’s more readable now but what is this && and || stuff ?

You know what it means here: 

if( conditionA && conditionB || conditionC){ }

Since JavaScript is fun, you can use objects instead of booleans and it works since there are such things as truthy and falsy values (“” == false, for instance).

if( newLetter != '?'  && someFn() || someString ){ }

What more interesting is that if (A && B) is true, it doesn’t “returns” true but it returns B! You probably use the same feature with || to specify a default value:

var a = b || c;

So with all this knowledge it’s easy to translate

return newLetter != '?' && createAccumulator(allPreviousLetter + newLetter) || allPreviousLetter + '!';

into:

return newLetter != '?'  ? 
    createAccumulator(allPreviousLetter + newLetter) :
    ( allPreviousLetter + '!' );

or more readable:

if ( newLetter != '?' ){
    return createAccumulator(allPreviousLetter + newLetter);
} else {
    return allPreviousLetter + '!';
}

Now let’s remove this disturbing Immediately-Invoked Function Expression (IIFE) and these chained function calls.

function createAccumulator(allPreviousLetter){
    return function (newLetter){
        if ( newLetter != '?' ){
            return createAccumulator(allPreviousLetter + newLetter);
        } else {
            return allPreviousLetter + '!';
        }
    };
}
 
var accumulate_D_and_return_a_new_accumulator   = createAccumulator('d');
var accumulate_DA_and_return_a_new_accumulator  = accumulate_D_and_return_a_new_accumulator ('a');
var accumulate_DAI_and_return_a_new_accumulator = accumulate_DA_and_return_a_new_accumulator('i');
//…
var lastOne                                     = accumulate_STUFF_and_return_a_new_accumulator('s');
var totalStringWithExclamationMark              = lastOne('?');

Crystal clear now, isn’t it?

ssh -XCf hostname  x2x -west -to :0.0

Remplacer -west par la direction la plus appropriée (north, south, east)

Sur la cible : installer x2x

Et voilà, quand votre souris dépasse le « coté ouest » de l’écran, elle continue son chemin sur la 2ème machine ! Le clavier « suit » la souris, évidemment.

• http://kathack.com/ : pour jouer à Katamari Damacy sur n’importe quelle page
• http://www.m-ms.dk/spaceheroes/ : un vaisseau M&M’s qui shoote sur la page
• http://erkie.github.com/ : l’original sur lequel se base M&M’s

http://kathack.com est tout particulièrement intéressant pour son usage des transformations CSS et du z-index pour produire un bel effet 3D.

Changer de layout avec setxkbmap

On peut évidemment utiliser les possibilités de son environnement de bureau (Gnome, KDE…) qui gèrent en général bien le passage d’un clavier à l’autre mais pour ceux qui préfèrent la ligne de commande :

setxkbmap fr bepo

Pour revenir à la disposition par défaut :

setxkbmap fr

Assigner les touches non fonctionnelles avec xmodmap

J’ai une bonne raison de préférer la ligne de commande : quand on change de layout, les touches “spéciales” mappées avec xmodmap sont perdues… C’est valable pour un changement par KDE 3 (pour Gnome et KDE4, j’ai pas encore testé mais je pense que ce sera pareil) ou par setxkbmap mais au moins, setxkbmap, ça se met dans un script qui peut aussi en profiter pour rétablir les mappings xmodmap.

J’ai un petit script qui regarde si on est en bépo ou azerty, qui bascule vers l’autre disposition et qui rétablit les mappings. J’ai ensuite créer un raccourci clavier pour lancer ce script avec la touche calculatrice qui ne me sert à rien.

#!/bin/sh
setxkbmap -print | grep bepo
if [ $? -eq 0 ]; then
        setxkbmap fr
else
        setxkbmap fr bepo
fi
#load xmodmap configuration
if [ -f "/etc/X11/Xmodmap.fix" ]; then
        xmodmap /etc/X11/Xmodmap.fix
fi

Le fichier Xmodmap.fix, il est dans /etc/X11 par que je m’en sers aussi au démarrage, il est chargé par un script xsession : /etc/X11/Xsession.d/60×11-xmodmap-fix

if [ -f "/etc/X11/Xmodmap.fix" ]; then
        xmodmap /etc/X11/Xmodmap.fix
fi

Et enfin, le fichier Xmodmap.fix qui contient les mappings :

keycode 160 = XF86AudioMute
keycode 174 = XF86AudioLowerVolume
keycode 176 = XF86AudioRaiseVolume
keycode 144 = XF86AudioPrev
keycode 153 = XF86AudioNext
keycode 161 = XF86Calculator
keycode 162 = XF86AudioPlay XF86AudioPause
keycode 178 = XF86HomePage
keycode 233 = XF86Forward
keycode 234 = XF86Back
keycode 236 = XF86Mail

Selon votre distribution, il est possible que certaines touches fonctionnent déjà, mais je suis sur Debian Lenny, et ce n’est pas le cas. Pour “keycode 178 = XF86HomePage”, j’avoue que j’ai un doute. C’est une touche “Navigateur” mais je n’ai pas trouvé de code XF86WWW ou similaire dans /usr/share/X11/XKeysymDB.

S’entraîner avec klavaro

Puisque je débute, pas grand chose à dire sur klavaro (logiciel d’apprentissage de la saisie) si ce n’est un petit problème (et une solution) : il ne retenait pas ma langue ni mon choix de layout qu’il fallait donc définir à chaque lancement. Une solution simple qui marche : créer le dossier ~/.klavaro pour qu’il puisse y stocker vos préférences.

Quelques remarques sur le clavier

Les remarques suivantes font suite à une utilisation d’à peine quelques heures donc seront peut-être revues et corrigées dans quelques temps :

• la skin est un peu lâche. Elle tient bien sur le haut du clavier mais en bas, ça ne tient pas du tout… Du coup, on sent un flottement un peu curieux sur les touches du bas. On verra avec l’habitude.
• quand on veut taper correctement (pas comme je fais en AZERTY, disposition apprise sur le tas), on sépara le clavier en deux : une moitié pour les doigts de la main gauche, et l’autre pour ceux de la droite. Les index s’occupent de deux colonnes de lettres chacun et sont donc assez mobiles. Sur un clavier classique, je pense qu’on a facilement tendance à déborder avec l’index gauche sur la zone de l’index droit et inversement. Le TypeMatrix empêche ça grâce à sa colonne centrale pour les touches Suppr., Entrée et Retour. Je trouve ça génial pour l’instant.
• les touches en colonnes, ça me semble pas mal non plus. Quand on sait, par exemple, qu’une touche est deux rangées au-dessus d’une autre, il suffit d’avancer le doigt et on trouve automatiquement la touche. Avec un clavier classique, il faut avancer en diagonale (et pour la main gauche, pas dans le sens naturel) et c’est pas aussi évident. Je pense qu’on ne peut s’en rendre compte qu’en essayant. C’est pour l’instant l’élément que j’apprécie le plus sur le clavier.

Conclusion

Pour l’instant, je n’ai que ces trucs techniques à partager, je ferais probablement un retour d’expérience sur la disposition bépo dans quelques semaines.

Pour ceux qui se posent la question, non, cet article n’est pas tapé en bépo mais cette dernière phrase oui ! Et sans regarder le clavier !

Lecteur francophone : une version en français est disponible.

Usage

KeySequenceMap works almost the same way as KeyMap :

KeyMap :

KeySequenceMap :

It’s the same excepted the key property which is now the sequence property.

Demo

Here is the Ext.ux.KeySequenceMap demo page where you can enter cheat codes !

Source code

As usual, on Github : Ext.ux.KeySequenceMap under the GPLv3.

English reader : an english version is available.

Utilisation

KeySequenceMap fonctionne quasiment de la même façon que KeyMap :

KeyMap :

KeySequenceMap :

C’est donc la même chose à part la propriété key qui devient sequence.

Démo

Vous pouvez tester tout ça en tapant des cheat codes sur la page de démonstration d’Ext.ux.KeySequenceMap !

Code source

Comme d’habitude, sur Github : Ext.ux.KeySequenceMap sous licence GPLv3.

% svn diff | grep toto
zsh: command not found:  grep

WTF ? Il ne trouve pas grep ?

En fait, c’est très bête comme problème : sur un clavier français, on fait Alt.Gr.+6 pour obtenir le pipe, et si on tape un peu vite, il arrive qu’on tape l’espace qui suit avant d’avoir relâché la touche Alt.Gr. ce qui donne une espace insécable au lieu d’une espace normale (apparemment, c’est le cas pour le layout fr-latin9).

Or, par défaut, le séparateur de mots est l’espace normale donc le shell ne voit pas “grep” mais ” grep” avec une espace insécable. D’où le “command not found”…