Blog de Thomas ZILLIOX » Bookmarklet

Bookmarklet de mise en forme des traces de debug sous eZ Publish

tzilliox — Mon, 22 Aug 2011 20:00:00 +0000

Sous eZ Publish, on peut afficher des traces de debug directement en front-office.
Dans cet article je vous présente un petit Bookmarklet que j’ai fait pour améliorer leur rendu.

Pour installer ce Bookmarklet, faîtes glisser ce lien dans votre barre de favoris : eZ Filter Debug
Pour activer ce Bookmarklet, cliquez dessus lorsque vous êtes sur une page générée par eZ Publish avec les traces de debug activée
Vous pouvez lire cette article, si vous voulez en savoir plus sur comment faire un Bookmarklet

Le Bookmarklet « eZ Filter Debug » se résume en 3 fonctionnalités qui peuvent vous intéresser :

1. Chargement de la feuille de style debug.css

Pour mettre en forme les traces de debug, il faut charger la feuille de style debug.css.
Mais on n’a pas forcément envie de la charger tout le temps, surtout en production.
C’était l’idée de départ : ce Bookmarklet charge à la volée la feuille de style de Debug.

2. Afficher les traces de debug à la demande

La deuxième idée est de pouvoir cacher les traces de debug par défaut.
Pour cela, il suffit de rajouter dans votre feuille CSS la ligne suivante :

#debug {display: none;}

Lorsque vous activerez le Bookmarklet, les traces de Debug s’afficheront, et vous serez redirigé vers elles.

Ceci n’est pas forcément utile, car eZ Publish vous permet déjà de n’afficher les traces de Debug que pour une certaine liste d’IP.
Mais ça peut être pratique dans certains cas : IP dynamique, client interne, site mobile, etc.

3. Permettre de filtrer les traces de debug

Les traces de Debug affichent également les traces de Notice, Timing, Warning et Error.
Pas toujours facile de s’y retrouver en un coup d’oeil.
Du coup le Bookmarklet « eZ Filter Debug » vous propose également une option de filtrage :

Note 1 : ce Bookmarklet a été testé sous eZ Publish 4.3 – 4.5.
Note 2 : Le code du Bookmarklet est diponible sur GitHub.
N’hésitez pas en me faire des remarques, soit par commentaire, soit par le formulaire de contact de mon site.

En espérant que ça puisse vous être utile,
Thomas.

Connaître la version de jQuery, Mootools ou Prototype

tzilliox — Wed, 30 Mar 2011 18:00:00 +0000

J’ai récemment repris des « vieux » sites avec des scripts jQuery, Mootools ou Prototype.
Le problème est que je ne savais pas toujours quelle version du framework était utilisée.

J’ai donc créer le Bookmarklet WhatJS.

Il permet de savoir quel framework JavaScript est utilisé sur une page.
Pour l’utiliser, faîtes glisser le lien ci-dessus vers votre barre de favoris.
Cliquez dessus une fois sur la page que vous voulez scanner.
Vous pouvez le tester sur cette page par exemple.

Pour les plus curieux, voici les astuces que j’ai utilisé pour identifier la version des framework.
Vous pouvez copiez-collez les codes ci-dessous directement dans votre barre de navigation :

Connaître la version de jQuery :
javascript:alert(jQuery(document).jquery);
Connaître la version de Mootools :

javascript:alert(MooTools.version);
Connaître la version de Prototype :

javascript:alert(Prototype.Version);

En espérant que ça puisse vous aider,
Thomas.

JavaScript et Bookmarklet

tzilliox — Wed, 27 Jul 2011 18:00:00 +0000

Hier, on a codé un petit script pour entourer toutes les images d’une page.
Aujourd’hui on va s’amuser à le transformer en Bookmarklet, ou applisignet en québecois.

1. Qu’est-ce qu’un Bookmarklet
Un Bookmarklet est un Bookmark, ou favoris, qui contient un script JavaScript à exécuter.
Un Bookmarklet est simple à reconnaître, son URL commence toujours par javascript:.
Au chargement de l’URL, la navigateur exécute le JavaScript sans changer de page.

Par exemple, essayez de copier-coller la ligne suivante dans la barre d’adresse de votre navigateur :

javascript:alert('\103\145\143\151\40\145\163\164\40\165\156\40\102\157\157\153\155\141\162\153\154\145\164');

Je peux également en faire un lien avec le code HTML suivant :

<a href="javascript:alert('\103\145\143\151\40\145\163\164\40\165\156\40\102\157\157\153\155\141\162\153\154\145\164');">Example simple de Bookmarklet<a>

Si vous déplacer le lien suivant vers votre barre de favoris, celui deviendra une application-signet, ou Bookmarklet : Example simple de Bookmarklet.

2. Comment faire notre Bookmarklet
On aurait pu mettre tout le code de notre script directement dans le bookmarklet.
Mais les navigateurs ont une limite de caractères pour leur barre d’adresse.
Par exemple, pour Internet Explorer la limite 2083 caractères.

Il faut savoir, qu’on ne peut pas avoir de saut de ligne dans une barre d’adresse et que les caractères spéciaux doivent être encodés.
Au final, ne pas mettre son code directement dans le Bookmarklet permet d’augmenter la lisibilité et donc de diminuer les erreurs.

Si le Bookmarklet charge un fichier JavaScript distant, alors la mise à jour sera aisé.
Il suffira de modifier le fichier JavaScript pour mettre à jour tous les Bookmarklets.

3. Mettre le script en ligne
Pour cela on va mettre le script d’hier dans un fichier : borderimage.js.
Il faut ensuite le charger sur un site internet afin qu’il soit accessible à tous.
Pour notre Bookmarklet, l’URL sera : http://zilliox.me/resource/bookmarklet/borderimage.js

4. Coder notre Bookmarklet
Il suffit donc de créer un script qui chargera un fichier JavaScript distant.
Notre Bookmarklet doit donc ajouter à la balise body, une balise qui ressemblera à ça :

Notre Bookmarklet va donc exécuter le code JavaScript suivant :

var e=document.createElement('script');
e.setAttribute('language','javascript');
e.setAttribute('src','bookmarklet.js');
document.body.appendChild(e);

5. Mettre en forme
Il ne nous reste plus qu’à :

Supprimer les sauts de lignes
Modifier les espaces par %20
Ajouter void(0); à la fin pour que le lien ne fasse rien

Ce qui nous donne un résultat beaucoup moins lisible :

javascript:var%20e=document.createElement('script');e.setAttribute('language','javascript');e.setAttribute('src','bookmarklet.js');document.body.appendChild(e);void(0);

Vous voulez tester ce Bookmarklet ? Faîtes glisser ce lien vers votre barre de favoris : Border Image.

PS : Pour annuler l’effet du Bookmarklet, il suffit de recharger la page

En espérant que ça vous ait plu,
Thomas.