Utiliser la console de débug sous Firefox mobile

La vue adaptative de Firefox est très intéressante mais je ne couvre pas tous les problèmes d'affichage d'un Firefox mobile. En effet, j'ai déjà rencontré des cas où Firefox mobile ne réagissait pas du tout pareil que sur la vue adaptative.

Il est possible d'utiliser la console de débug de votre Firefox PC pour inspecter votre Firefox mobile. Ça fonctionne à l'aide d'ADB. Ainsi, la première chose à faire est d'installer le SDK Android sur votre machine. Vous le trouverez ici et vous aurez simplement à décompresser l'archive quelque part.

Une fois le SDK disponible sur votre machine, activez le débogage USB sur votre terminal Android (Paramètre > Option de développement > Débogage USB). Branchez votre terminal sur votre machine et lancez Firefox mobile. Dans les paramètres, allez dans "Outils de développement" et cochez "Débogage distant".

Pour tester si l'Android est détecté, lancez cette commande :

Afficher/masquer le code
$ /chemin/vers/sdk/platform-tools/adb devices

La sortie devrait ressembler à ça :

Afficher/masquer le code
List of devices attached   
xxxxxxxxxxxxx	device

Ouvrez la console de débug et activez le débogage distant (à gauche de l'onglet "Console").

La dernière étape de configuration consiste à forwarder le port 6000 de votre machine vers le terminal Android :

Afficher/masquer le code
$ /chemin/vers/sdk/platform-tools/adb forward tcp:6000 tcp:6000

En plus de message de confirmation d'ADB, on pourra s'assurer que ça fonctionne avec netstat :

Afficher/masquer le code
$ netstat -nl | grep 6000
tcp        0      0 127.0.0.1:6000          0.0.0.0:*               LISTEN

Ouvrez une page sur votre Firefox mobile, puis, dans votre Firefox PC, allez dans Outils > Développeur Web > Se connecter. Une demande confirmation s'affichera sur votre terminal Android. Vous pouvez à présent débugger plus facilement vos sites web sur Firefox mobile :)

[Astuce] i3wm : liste des processus les plus actifs

Quand j'utilisais conky, l'un de mes objectifs était de connaître la liste des processus les plus actifs. En effet, il n'était pas rare (et ça continue aujourd'hui) qu'un programme s'affole un peu en mangeant un peu trop de ressources. Mon passage à i3-wm m'a légitiment fait abandonner conky puisque j'ai toujours une fenêtre affichée en plein écran. Du coup, j'ai décidé d'ajouter une barre qui s'affiche uniquement quand j’appuie sur une touche.

Voici un aperçu : i3-wm : barre de processus

Le code source du script est en shell :

Afficher/masquer le code
#!/bin/sh                                          

echo "{\"version\":1}"

INFO='#E9F1FF'
NORMAL='#B3FF6C'
WARNING='#FF6836'
CRITICAL='#FF474A'

echo "[[]"

while true; do
	(
		echo -n ",["
		
		ps ux --sort -%cpu | head -n 30 | sed 's/\s\{2,\}/ /g' | cut -d" " -f3,11 | uniq | grep -v uniq | egrep -v '^0.0' | egrep '^[0-9.]* [a-z]' | while read cpu bin; do
			if [ $(echo "if (${cpu} < 3 ) 1 else 0" | bc) -eq 1 ]; then
				COLOR=$INFO
			elif [ $(echo "if (${cpu} < 40.0 ) 1 else 0" | bc) -eq 1 ]; then
				COLOR=$NORMAL
			elif [ $(echo "if (${cpu} < 70.0 ) 1 else 0" | bc) -eq 1 ]; then
				COLOR=$WARNING
			else
				COLOR=$CRITICAL
			fi
			echo -n "{\"full_text\": \" $bin ($cpu%) \", \"color\": \"$COLOR\"}," 
		done
		
		echo "]"
	) | sed 's/,\]/]/'
		
	sleep 5
done

Au niveau de la conf de i3, voila comment j'ai procédé :

Afficher/masquer le code
bar {
    status_command /chemin/vers/le/script
    workspace_buttons yes
    position top
    tray_output none
    mode hide
    modifier mod1

    /* d'autres confs */    
}

That's all folks!

Chiffrement des données sur le Wall

Une mise à jour majeure a été déployée sur le colorisateur de code. En effet, il est maintenant possible de chiffrer les sources que vous envoyez.

J'ai choisi d'utiliser l’algorithme AES avec une clé de 256-bit et une passphrase de 256 caractères.

La clé est placée dans l'URL via une ancre. Coté serveur, je n'enregistre que le message chiffré. Le chiffrage (comme le déchiffrage) est fait par votre navigateur uniquement.

Voici un code chiffré sans clé : https://wall.deblan.org/x1a29/texte/0/, et le lien complet pour le lire correctement : https://wall.deblan.org/x1a29/texte/0/#aes=pmCMT59...

Je rappel que le Wall est un projet libre et que vous avez la possibilité de le forker :

Afficher/masquer le code
$ git clone git://git.deblan.org/wall-deblan.git

Le wall a lui aussi été mis à jour !

Après le service d'indentation, c'est au tour du Wall (service de colorisation syntaxique) de subir quelques mises à jour.

Il s'affiche à présent mieux sur des écrans peu larges (sans pour autant être responsive design) et une nouvelle fonctionnalité est apparue et concerne les langages de balisage (HTML et XML), le Javascript et le PHP. On peut à présent cocher une case pour indenter le code.

L'indentation du HTML et du XML repose sur mon algo d'indentation utilisé sur Markup language indenter. Les sources sont libres donc je vous laisse fouiller pour trouver le code.

Concernant le Javascript, j'ai utilisé JS-Beautify qui provient du service en ligne Jsbeautifier.

Le PHP est quant à lui traité par PHP-CS-Fixer, écrit par Fabien Potencier (le papa de Symfony).

L'indenteur XML et PHP-CS-Fixer font partie des sources du wall. Si vous forkez mon projet, vous devrez installer js-beautify de manière à le rendre accessible via /usr/local/bin/js-beautify.

Le Wall est totalement libre et vous pouvez récupérer les sources via GIT :

Afficher/masquer le code
$ git clone git://git.deblan.org/wall-deblan.git

Générer des PDF dans Symfony2

La génération de PDF fait souvent partie des cahiers des charges de projets de moyennes et grandes envergures. Il existe quelques outils pour en faire tel que HTML2PDF qui repose sur FPDF ou TCPDF suivant la version de PHP. Cependant, bien qu'elles soient puissantes et fonctionnelles, leur utilisation peut très vite complexe quand il s'agit de mettre en forme précisément les contenus.

C'est pourquoi nous avons décidé d'utiliser Wkhtmltopdf qui fait presque le café. Ce petit bijou a la particularité de reposer sur un moteur de rendu Webkit, ce qui le rend très puissant. Par exemple, le javascript est interprété et des plugins additionnels comme Flash peuvent être ajouté. C'est complétement inimaginable de l'envisager avec FPDF ou TCPDF. En plus de ça, il interprète extrêmement bien le CSS et toutes les balises HTML sont prises en compte. Vous comprenez à présent l'intérêt d'utiliser un tel outil.

Bon, trêve de bavardage, voici comment l'installer et l'utiliser.

Je travail avec Debian Wheezy, que ce soit sur mon poste de développement ou sur les serveurs de production. Vous devrez donc adapter la suite de l'article à votre système.

Installation de Wkhtmltopdf

Coté système

Afficher/masquer le code
$ su - 
# aptitude update
# aptitude install wkhtmltopdf

Wkhtmltopdf a besoin d'un serveur X pour fonctionner. Comme les serveurs n'en disposent pas, nous allons installer xvfb qui permet de créer un serveur X virtuel.

Afficher/masquer le code
# aptitude install xvfb

Il faut ensuite préparer un wrapper pour lancer wkhtmltopdf via xvfb :

Afficher/masquer le code
# cat > /usr/bin/wkhtmltopdf.sh <<< EOF
#!/bin/sh

xvfb-run -a wkhtmltopdf $@
EOF
# chmod +x /usr/bin/wkhtmltopdf.sh

Coté Symfony2

KNP Labs a développé un bundle dédié à wkhtmltopdf, ici je vais passer par composer pour l'intégrer au framework :

Afficher/masquer le code
$ cd /chemin/vers/le/projet
$ ./composer.phar require knplabs/knp-snappy-bundle

Il est nécessaire de configurer le bundle en indiquant le chemin de wkhtmltopdf. Dans le fichier app/config/config.yml, ajoutez ces lignes :

Afficher/masquer le code
knp_snappy:
    pdf:
        enabled:    true
        binary:     /usr/bin/wkhtmltopdf.sh
        options:    []

Videz le cache et lisez la doc pour savoir comme il fonctionne. Un truc intéressant à savoir : il utilise des feuilles de styles dédiées à l'impression.

Une astuce pour gérer la pagination

Bien qu'il soit ultra puissant, il n'y a pas d'outil pour gérer la pagination. Wkhtmltopdf va récupérer du code HTML et convertir le tout en PDF. En fonction de la taille de la page (qui est paramétrable) et de son format (portait ou paysage), il va enquiller le contenu et générer une page quand il sera nécessaire de le faire. Si vous souhaitez faire des sauts de page, vous devrez faire un peu de javascript. Voici la démarche que j'ai employée pour un projet.

J'ai découpé le contenu en différentes divisions portants la classe "print-page". Chaque division représente un contenu qui doit nécessairement être affiché en début de page. Dans mon projet, j'ai utilisé un rendu en A4 paysage et la zone représentant le contenu fait 1340px de largeur pour 934px de hauteur. Il suffit à présent de modifier la hauteur des divisions en calculant le nombre de pages nécessaires à leur affichage.

Afficher/masquer le code
// Dépend de jQuery

var page_height   = 934;
var $print_pages  = $('.print-page');

$print_pages.each(function(i, v) {
	var $content    = $(this);	
	var height      = $content.height();
	var pages_count = 1;
	var newheight   = pages_count * page_height;

	while(height - 20 > newheight) {
		pages_count++;
		newheight = pages_count * page_height;
	}
	
	$content.css({height: newheight});
});

Il est également important d'indiquer des largeurs à vos contenus car j'ai eu quelques problèmes de génération avant de le faire.