Deblan blog

Tag #Script

Twidge, inverser l'odre d'affichage

Quand on passe une partie de sa journée devant un shell, on aime bien avoir accès à certaines choses sans booter un navigateurs graphique. Du coup, si on est un "twittos", on pourra installer Twidge, un client CLI pour Twitter.

Seulement, on notera deux "problèmes" : des commandes relativement longues et un ordre d'affiche non ergonomique à mon goût. En effet, il affiche les twitts du plus récent au plus ancien, mais quand on est dans un shell, ça oblige à scroller pour visualiser les nouveautés. Pour résoudre un des deux problèmes, il suffit de faire des alias. Pour l'autre, j'ai fais un script assez simple mais efficace.

#!/bin/sh
TMP=/tmp/twitter


if [ -f "$TMP" ]; then
	rm "$TMP"
fi

getRecent() {
	tweets=$(twidge lsrecent | sed 's/\s\s*/ /g;s/^\s\s*//')
	echo "$tweets" | while read line; do
		if [ $(echo "$line" | cut -c 1) = "<" ]; then
			echo -n "\n$line" >> "$TMP"
		else
			echo -n " $line\`" >> "$TMP"
		fi
	done

	F=
	IFS="\`"
	for i in `cat "$TMP"`; do
		if [ ! -z $i ]; then
			F="$i$F"
		fi
	done

	echo "$F" | awk '$O!=""{ print $O"\n"; }'
}

case "$1" in
	ls|lsrecent) getRecent;;
	up|update) twidge update "$2";;
	*) twidge "$1" "$2";;
esac

Pour l'utiliser :

# ici, le script s'exécute via "tw"
prompt> tw ls # affiche les derniers twitts
prompt> tw up <message> # ajoute un twitt
prompt> tw <une commande twidge>

Animations html5 en wysiwyg

Sur mon précédent article, un petit débat a été ouvert concernant Flash.
C'est un langage, ou tout du moins, une technologie que je méprise depuis un moment déjà.

Je ne reviendrai pas sur l'ensemble des arguments qui ont été postés, mais plutôt la partie où nous avons parlé de Javascript et Html 5.

Avec l'avancée des navigateurs sur l'interprétation de Javascript et le développement grandissant des bibliothèques telles que Mootools et JQuery, on est capable aujourd'hui de construire des sites web complexes et proches d'applications desktop.

Cependant, l'animation est parfois complexe à mettre en oeuvre. Bien que les bibliothèques gèrent les différences entre les navigateurs, on est souvent contraint de passer des heures sur un problème à priori simple.

Cela dit, j'ai envie que cela change et je ne suis visiblement pas le seul. Quand on me dit que c'est chiant d'écrire du JS pour animer de manière complexe une page, je répond "oui", mais pour combien de temps encore ?

Adobe est en train de travailler sur un logiciel d'animation wysiwyg pour Javascript et HTML5. Imaginez une timeline et une scène telles que celle de Flash mais qu'au final, seuls du Html et du Javascript soient pondus.

Basé sur JQuery et le moteur de rendu Webkit (Safari & Chrome essentiellement), c'est pour l'instant bluffant.

Quelle sera la qualité du code ? Aucune idée. Est-ce que ça fonctionnera correctement sur Firefox, IE et Opera ? Je ne sais pas. En tout cas, ça à le mérite de commencer à exister.

a vidéo

Edit :

Il semble d'Adobe veuille rapidement passer à autre chose que le Flash. Ils ont présenté un outil pour convertir une animation Flash directement en HTML et Javascript ! Vous pouvez regarder cette vidéo de démonstration.


Greasemonkey, l'extension du webuser developpeur

Cette extension qui fonctionne sur pas mal de navigateurs (je met IE dans le tas) permet d'ajouter des scripts Javascript sur tout les sites qu'on visite.

Une fois qu'on a installé et configuré un script, il s'exécute une fois que le DOM de la page est complétement chargé.

Pour la télécharger, c'est du coté du site officiel que ça se passe.

L'intérêt de cette extension est majeur quand on en a marre de voir des fonctionnalités inexistantes sur nos sites préférés.
L'ensemble des outils proposés par Greasemonkey ont été soigneusement implémentés pour permettent de développer facilement des scripts complets.

Basiquement, pour créer un script il faut lui donner un nom, une description, un espace de nom et les pages sur lesquels il s'exécutera.

De ces 4 informations, seule la description n'est pas essentielle. Le nom et aussi celui du fichier javascript généré sur la machine du client (vous). Si 2 scripts ont le même nom, alors le namespace (espace de nom) permettra de les différencier car plus tard, on verra que chaque script peut enregistrer des informations indépendamment. Les url à inclures sont évidement un point clé pour que les scripts soit exécutés.

Si je veux ajouter un script pour mon blog, je ferai :

// ==UserScript==
// @name  Mon script
// @namespace Mon script
// @include https://www.deblan.io/*
// ==/UserScript==

Le caractère « * » indique "tous les caractères possibles". Ainsi, toutes les pages de mon blog seront cibles.

Le reste de la manoeuvre demande simplement de savoir écrire du javascript.

Le meilleur ami de l'Homme 2.0 est la console d'erreur. Vous pouvez interfacer Greasemonkey avec la console Firebug mais vous pouvez également loguer des données (le alert() du riche en gros ^^) :

GM_log("Ceci est un log =)");
console.log("Ceci est un message qui sera affiché dans la console de Firebug");

Par défaut, on ne peut pas interagir avec les scripts originaux des pages cibles, donc par défaut, si JQuery ou Mootools sont présents, vous ne pourrez par les utiliser. Forte heureusement, on peut palier au problème en utilisant une des fonctionnalité très intéressante de Greasemonkey : unsafeWindow.

Pour donner un exemple concret, en développant un script pour Facebook, j'ai eu besoin d'avoir accès à l'objet "window.presenceNotifications". Pour pouvoir l'utiliser, voila le code utilisé :

var w = unsafeWindow;
var foo = w.presenceNotifications;
// A noter que c'est un poil plus complexe pour une bibliothèque

En javascript, on utilise les cookie pour enregistrer des données (dans le cas où on n'a pas de langage type Php pour le faire à sa place).
Avec Greasemonkey, 4 fonctions nous sont accessibles :

// http://wiki.greasespot.net/GM_setValue
// GM_setValue : enregistre une donnée
GM_setValue('Nom', 'Valeur');

// http://wiki.greasespot.net/GM_getValue
// GM_getValue : retourne une donnée enregistrée
GM_getValue('Nom');

// http://wiki.greasespot.net/GM_deleteValue
// GM_deleteValue : supprime une donnée enregistrée
GM_deleteValue('Nom');

// http://wiki.greasespot.net/GM_listValues
// GM_listValues : retourne toutes les données enregistrées
GM_listValues();

Bien sûr, entre 2 espaces de noms différents, impossible d'interagir avec les données.

Un tas d'autres fonctions sont présentes, en voici une liste :

  • GM_addStyle() : ajoute du CSS à la page
  • GM_xmlhttpRequest() : permet de faire des requêtes asynchrones
  • GM_getResourceText() : permet de télécharger une ressource textuelle
  • GM_getResourceURL() : télécharge une ressource (une image par exemple)

La documentation complète de Greasemonkey est disponible sur le wiki.

Pour donner des exemples, voila quelques-uns des scripts que j'ai développé :

Userscripts recense des milliers de scripts Greasemonkey pour une tripoté de sites web.

Si j'ai un conseil à donner avant d'écrire du code, c'est de savoir parcourir et modifier le DOM Html d'une page proprement, sans quoi vous allez avoir des problèmes.

A utiliser !


Site web multilangues

J'ai trouvé aujourd'hui un bout de code javascript qui permet de traduire instantanément un site web dans plusieurs dizaines de langues.

C'est Translateth qui propose ce service à travers un bouton qui s'insère très simplement :

Voila le résultat :