Développement

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 :

$ /chemin/vers/sdk/platform-tools/adb devices

La sortie devrait ressembler à ça :

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 :

$ /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 :

$ 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 :)

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 :

Le code source du script est en shell :

#!/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é :

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!

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 :

$ git clone git://git.deblan.org/wall-deblan.git

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 :

$ git clone git://git.deblan.org/wall-deblan.git

La génération de PDF fait souvent partie des cahiers des charges de projets de moyenne et grande envergure. Il existe quelques outils comme HTML2PDF qui repose sur FPDF ou TCPDF. Cependant, bien qu'ils soient puissants et fonctionnels, leur utilisation peut très vite devenir complexe quand il s'agit de mettre en forme précisément les contenus.

C'est pourquoi nous avons décidé d'utiliser Wkhtmltopdf. Ce petit bijou a la particularité de reposer sur un moteur de rendu Webkit. Le javascript est interprété et des plugins additionnels (comme Flash) peuvent être ajoutés. En plus de ça, il interprète extrêmement bien le CSS et toutes les balises HTML sont prises en compte.

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 en production. Vous devrez donc adapter la suite de l'article à votre système.

$ 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 d'en créer un virtuel.

# aptitude install xvfb

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

# cat > /usr/bin/wkhtmltopdf.sh << EOF
#!/bin/sh

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

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

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

Activons à présent le bundle dans AppKernel.php :

$bundles = array(
    /* ... */
    new Knp\Bundle\SnappyBundle\KnpSnappyBundle(),
)

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

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.

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.

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