C’est très pratique pour développer un site Web puisque si vous modifiez un template, un fichier JavaScript, une image ou un fichier CSS, vous n’avez pas besoin de cliquer sur la fenêtre du navigateur et appuyez sur F5 pour voir le résultat. Si vous avez un double écran (et si vous faites du dev Web, vous devriez), vous ne quittez pas votre éditeur de code.

L’extension est gratuite, mais le serveur existe en plusieurs version. Il y a une version graphique pour Windows et Mac qui est payante. Si vous avez un peu de budget et pas envie de vous prendre la tête, achetez là et arrêtez la lecture de l’article, c’est beaucoup plus facile.

Sinon, suivez le guide pour la version gratos en ligne de commande.

Installation

Il existe une version Python en ligne de commande du serveur : Python livereload. Il y a aussi une version pour les rubistes.

Je vous invite donc à l’installer avec pip:

pip install livereload

Il vous faudra aussi l’extension de navigateur.

Après, depuis votre terminal, mettez vous dans le dossier que vous voulez surveiller (par exemple le dossier contenant vos fichiers CSS), et lancez le serveur :

livereload

Et activez l’extension pour la page que vous voulez recharger automatiquement. Normalement, c’est juste un clic sur un bouton.

C’est bon, votre page devrait recharger automatiquement.

Rechargement à la carte

On peut choisir ce qu’on va recharger plus précisément en créant un fichier de configuration.

Créez un fichier de code Python nommé “Guardfile”, sans l’extension “.py”. Il va ressembler à ceci :

#!/usr/bin/env python
# -*- coding: utf-8 -*-
 
from livereload.task import Task
 
# watcher les js ou les css
Task.add('chemin/relatif/vers/fichier/a/surveiller.css')
Task.add('chemin/relatif/vers/fichier/a/surveiller.js')
 
# watcher les images ou les templates
Task.add('chemin/relatif/vers/dossier/a/surveiller')

Et lancez la commande livereload en étant dans le même dossier que ce fichier. Notez que le serveur ne parse ce fichier que quand l’extension est activée et que vous avez visité la page au moins une fois.

On peut même demander d’effectuer des tâches avant le rechargement de la page. Cela peut être des tâches complètement arbitraires, mais des raccourcis existent pour les tâches les plus courantes, telle que minifier du JS ou compiler un pre-processeur CSS.

Par exemple, j’utilise cette fonctionnalité pour compiler mes fichiers LESS CSS à chaque modification.

Pour cela, il faut installer le compilateur LESS. Sous Ubuntu, ça se fait en deux coups de cuillère à pot :

sudo apt-get install npm
sudo npm install -g less

Et dans le Guardfile, il faut ajouter un code du style :

from livereload.task import Task
from livereload.compiler import lessc
 
Task.add('../apps/core/static/less/boostrap/boostrap.less',
         lessc('../apps/core/static/less/boostrap/boostrap.less',
               '../apps/core/static/css/boostrap.css'))

Il y a un a tas d’options donc checkez la doc, mais aussi le code source car la doc n’est pas exhaustive.

10 ans d’extensions. 10 ans à installer et désinstaller des trucs, à faire planter ce qui s’est appelé Phoenix, puis Firebird, puis Firefox. Puis à chercher des équivalents sous Chrom(e|ium). En voici le florilège.

1 – Last pass

J’espère que vous en entendez parler souvent. J’espère qu’on vous gave avec last pass tellement souvent que vous en êtes lassés. On ne communiquera jamais suffisamment sur ce service, qui est le seul gestionnaire de mots de passe valable:

– chiffrement côté client (last pass ne possède pas vos mots de passe);
– génération de mots de passe aléatoires;
– bonne ergonomie;
– multi-plateforme (client mac, windows, linux, android, iphone, app web, extension FF, Chrome, Opera, IE, etc);
– synchronisation automatique entre toutes les plateformes;
– notes sécurisées (on peut mettre autre chose que des mots de passe);
– très bonne réactivité (lors de la dernière attaque sur leurs serveurs, l’équipe a été très pro);
– tous les mots de passes sont accessibles hors ligne.

Site officiel

2 – Adblock (plus)

Je doute qu’il existe encore un lecteur de blog qui ne connaisse pas ce bloqueur de pub donc ne nous attardons pas dessus. Naviguer sans, c’est naviguer à poil.

Site officiel

3 – Flash block

Parce qu’une seule page contenant un applet Flash peut faire ramer tout un ordi, cette extension qui les bloque jusqu’à ce que l’on appuie sur le bouton “play” est une petite merveille.

Pour FF
Pour Chrome

4 – Ghostery

Bloque les mouchards: boutons sociaux (+1, partager, etc), libs de stats (analytics, etc) et commentaires (disqus, FB comment). Tout est configurable, et ça libère l’esprit.

Site officiel

5 – WOT

À installer par défaut sur l’ordinateur de tous les membres de votre cercle familial et social afin qu’ils arrêtent de vous appeler une fois que leur ordinateur est pourri par leurs habitudes de surf merdiques.

Affiche un rond vert, jaune ou rouge sur chaque lien pour indiquer si il est sûr ou pas. Si on va sur un site à risques, affiche une GROSSE bannière. Leur système collaboratif a jusqu’ici bien réussi à éviter le détournement de leur notation.

Site officiel

6 – Lazarus form recovery

Vous saisissez un formulaire. Quelque chose se passe mal.

– Option 1: vous vous retapez tout le formulaire;
– Option 2: vous cliquez sur le bouton “sauve moi la vie je t’en prie je t’en prie putain” de lazarus, et il vous restaure tout ça en une seconde.

Site officiel

7 -Raccourcisseur d’URL

Créer une URL courte en un clic. Pratique quand on chat/twit beaucoup, d’autant qu’il y a une option pour twitter l’URL en question. Plein de choix de providers.

Pour chrome
L’équivalent FF est moins sympa

8 – Awesome Screenshot

Capturer une page web complète sous forme d’image, l’annoter avec des mots doux et des flèches taquines, la mettre en ligne, et passer à son voisin.

Site officiel

9 – Forcer l’HTTPS

Force le navigateur à toujours passer par une connexion sécurisée quand c’est possible. Fire and forget.

Attention à l’extension que vous choisissez pour faire ce boulot. Certaines comme HTTPS enforcer redirigent vos requêtes par un proxy privé.

Chrome
FF

Problème, parfois si un site redirige https sur http, ça boucle :-(

10 – Download video helper

Télécharger les vidéos des tubes, et les encoder. On peut même récupérer uniquement la bande son en mp3. Mais cette extension n’existe que sur Firefox, car il me semble que Google refuse ce genre d’extensions sur sa Web store. C’est là qu’on voit tout l’intérêt d’avoir Mozilla dans la course, ils ont gardé l’esprit de leurs débuts.

Ce qui n’est pas dans le lot

– noscript: trop contraignant. On passe des heures à configurer chaque acceptation pour chaque site.
– web developer et firebug. Indispensables il y a quelques années, c’est maintenant un poids inutile au regard de la qualité des outils d’introspection intégrés au navigateur.
– mouse gesture. Au début je ne jurais que par ça. Comme tous les gadgets, on se lasse.
– grease monkey. Idem.
– live HTTP Headers. Utile une fois tous les 6 mois. On installe, on utilise, on désinstalle.
– selenium. Uniquement dans un navigateur spécialisé pour ça.
– stumble uppon. Génial. Trop génial. Je n’ai qu’une vie.

Rappel

Malgré l’apparente légèreté des extensions Chrome, chacune d’elles bouffe énormément de ressources. Pour vous en convaincre, ouvrez un logiciel qui vous liste les process tels qu’htop, et regardez:

Ressources consommées par chromium du fait des extensions

Ici, Chromium spawn un process pour chaque extension. C’est le prix à payer du sand boxing. Vous noterez qu’à lui tout seul le navigateur bouffe 10,9 + 3,8 + 3,4 + 3 + 2, 4 + 2,3 + 2, 1 = 27,9% de la mémoire sans même une page d’ouverte. Certes, je suis sur une machine toute pourrie qui possède 715Mo de RAM et qui fait tourner Lubuntu, mais tout de même, c’est plus que l’OS…

Cela dit, Firefox et Opera ne font guère mieux, le seul navigateur un peu respectueux de ma config de secours étant Epiphany. Mais il faut dire adieu aux extensions, à Flash et au débugger. En clair, l’expérience Web des années 2010 demande une machine de guerre.

Les navigateurs Web ne peuvent plus êtres classés dans la catégorie des clients légers: local storage, accélération matérielle, video, 3D, web socket, web worker, machine virtuelle super optimisée et sandboxée, compilation just in time… Vous vous souvenez de l’époque à laquelle on se moquait des applets Java parce qu’ils étaient trop lourds ?

Pour ceux qui se demandent où ils peuvent faire l’acquisition de l’item utilisé pour illustrer l’article sur la page d’accueil, c’est par ici. Notez que l’utilisation des puces qui font penser à un blog bien connu est un pur hasard.