C’est tout bête et ça peut se révéler très pratique sur tous ces navigateurs mobiles qui ne permettent pas d’aller voir le code source d’une page web. Snoopy est un simple bookmarklet qui permet d’afficher plusieurs informations sur le site que vous parcourez: doctype, librairies JS, outils analytiques utilisés et bien sûr le code source.
Les fonctionnalités devraient être prochainement étendues, notamment avec la validation HTML et l’affichage syntaxique.
Je vous l’ai dit, mon truc du moment, c’est le minimalisme… Alors, en quoi ça consiste exactement ? Plutôt que de passer une heure à l’expliquer, voici un exemple simple (pour ne pas dire minimaliste, huhu).
Quelle est la différence entre ça…
… et ça?
Voila… Ca se passe de commentaire, non ? Alors, le principe de quietube, c’est juste de virer tout le superflu des sites de partage de vidéos (commentaires, vidéos similaires ou conseillées, etc…) pour se concentrer sur LA vidéo. Ca fonctionne aujourd’hui pour YouTube et Vimeo et d’autres sites seront bientôt également supportés.
Le concept est simple: vous glissez-déposez le [bookmarklet de quietube] dans votre barre de favoris et lorsque vous êtes sur une page YouTube ou Vimeo, un simple click sur le bookmarklet vous renverra sur la version minimaliste. Il ne vous reste plus qu’à profiter pleinement de la vidéo (sur fond noir ou blanc, au choix) sans distraction exterieure et même partager directement ce plaisir avec vos amis en leur donnant le short-url automatiquement généré.
Si vous êtes un twitter-addict mais que votre esprit de synthèse n’est pas des plus efficaces, la limitation à 140 caractères par tweet peut vous sembler cruelle. TwitterKeys peut vous venir en aide, en vous permettant de remplacer les mots par des pictogrammes. En effet, Twitter est compatible UTF8, ce qui permet d’afficher un nombre de symboles assez variés.
Petit exemple:
“I’m going to ✈ to ☭ in the morning after I make a ☎ to make sure my ♂ is ✔ with it. ✌ for now and don’t forget to ✍ and lets have ♨ soon!”
C’est du bonheur, non ? Et pour l’avoir toujours sous la main, un simple bookmarklet à glisser vers votre barre de favoris. Ainsi, d’un click, vous faites apparaître la fenêtre TwitterKeys. Il ne vous reste alors qu’a copier-coller le caractère désiré dans votre tweet. A utiliser avec modération toutefois car ça peut vite être saoulant pour vos followers.
Pour bien commencer, la définition d’un bookmarklet selon Wikipedia:
Un bookmarklet (en français : un applisignet, ou un marque-page scripté) est un petit programme JavaScript pouvant être stocké :
- soit en tant qu’URL dans un signet avec la plupart des navigateurs Web
- soit en tant qu’hyperlien dans une page web.
Les bookmarklets peuvent être sauvegardés et utilisés comme des signets de pages normales et sont donc des outils ‘en 1 clic’. Lors de la sélection du signet, le navigateur ne se contente pas d’afficher la page, mais exécute le code JavaScript du bookmarklet pour apporter des fonctionnalités intéressantes au navigateur.
Un des gros avantages des bookmarklets, selon moi, réside dans le fait que tout tient dans un petit bout de code javascript, ne nécessite donc l’installation d’aucune extension sur votre navigateur et par là même leur permet (pour la plupart) de fonctionner sur tous les navigateurs.
Je vous propose donc aujourd’hui, une sélection des bookmarklets qui trônent fièrement dans ma barre personnelle. Il y en a beaucoup d’autres, mais ceux-ci sont ceux qui me servent régulièrement.
Pour en profiter vous aussi, il suffit d’ajouter à vos favoris les lien situés entre crochets ci-dessous, ou encore plus simple de les glisser-déposer vers votre barre personnelle. Faites votre sélection, pour vous faciliter la vie, je les ai classé dans le désordre, hé hé:
Voila, c’est tout pour aujourd’hui. Et vous ? Des perles à faire partager ? Lachez vous dans les commentaires…
Dominic Szablewski a développé un moteur de micro-blogging, nommé Asaph, permettant de poster très facilement des liens, des extraits de texte ou des photos directement à partir de n’importe quelle page web.
L’outil est très léger (50ko une fois zippé), très simple à mettre en oeuvre (cela ne m’a pas pris plus de 5min pour en configurer un localement afin de le tester) et encore plus simple à administrer par la suite, l’interface étant plus que dépouillée et la fonction de publication passant par un simple bookmarklet sur lequel vous cliquez avant de sélectionner sur une page web ce que vous souhaitez publier. Une vidéo valant toujours mieux que des mots, je vous invite à visionner le screencast de l’auteur expliquant dans le détail comment tout cela fonctionne.
Et si vous voulez voir ce que ça donne en vrai, jetez un coup d’oeil au blog Asaph du développeur. Personnellement, j’aime beaucoup le style épuré de l’ensemble.
Les premiers commentaires enthousiastes ont poussé l’auteur à sortir une nouvelle version beta exemptes des quelques bugs déjà signalés, disponible ici.
XRAY est un bookmarklet, qui permet d’un simple click d’obtenir les informations CSS de n’importe quel élément d’une page web. Concrètement, vous cliquez sur le bookmarklet dans la barre de menu de votre navigateur, puis vous sélectionnez l’élément de la page que vous souhaitez analyser. Une boite apparait alors avec les informations de dimensions, de position, la classe et l’héritage de l’objet CSS que vous avez cliqué.
Comme l’explique le site:
Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box?
Bref, un petit outil bien pratique qui ne nécessite aucune installation, et plus rapide pour obtenir ces quelques informations que la néanmoins excellente et beaucoup plus complète extension Firefox Web Developer. De plus, le bookmarklet fonctionne sur Firefox, mais aussi sur Safari et Camino, est bien conçu et esthétiquement très réussi.
A ce propos justement, je prépare un article sur une liste de bookmarklets, parmi les plus utiles et pratiques. Si vous avez des perles rares, n’hésitez pas à me les soumettre…