BrowserSync, tester ses sites sur plusieurs navigateurs simultanément

BrowserSync est un outil basé sur Node.js qui permet de débuguer ses sites en même temps sur plusieurs navigateurs, simultanément sur des machines, plate-formes différentes. Il joue le rôle de proxy hyper-vitaminé entre le site et vos browsers. La version 2 est sortie il y a un peu moins d'un mois.

Fonctionnalités

  • Naviguer simultanément avec plusieurs navigateurs desktops ou mobiles sur un même site
  • Si un fichier CSS change, la page est rechargée sur tous les navigateurs
  • Synchronisation des clics et scrolls, remplissage des champs et validation de formulaires
  • Recharger la page sur tous les navigateurs
  • Avec Weinre, débuguer une page avec un seul et même outil proposant les fonctionnalités standards (navigation et éditions des éléments HTML/CSS/JS, accéder à la console, voir la timeline des chargements, les activités réseau...)
  • Avec Pesticide.io, afficher des informations en overlay sur les boites CSS en live sur la page
  • Simuler de la latence sur le chargement des pages

Installation

  • Pré-requis : Node.js et npm
  • npm install -g browser-sync

Démarrage

  • sudo browser-sync start --proxy "www.monsite.loc" --files "css/*.css"
browsersync-in-action-screenshot

BrowserSync en action sur un Firefox, un Chromium et un Firefox pour Android

 

La seule chose que je regrette, c'est que les changements effectués dans le DOM via Weinre ne soient pas répercutés sur toutes les fenêtres ouvertes et connectées à BrowserSync. J'ai ouvert une issue sur GitHub pour savoir s'il serait possible d'implémenter cette fonctionnalité.

Encore un bel outil à ajouter à sa trousse au plus vite, si ce n'est pas déjà fait.

Liens utiles

Chute du nombre d’utilisateurs de Firefox

Firefox est en perte de vitesse, ce n'est un secret pour aucun Mozillien qui se respecte. La question que je me suis posée est : pourquoi ?

mozilla-firefox-logo

Empreinte mémoire trop importante ?

Sa gestion de la mémoire et sa lenteur au démarrage ont souvent été pointées du doigts mais un gros effort a été fait par les développeurs et même si le panda roux est toujours gourmand, il est redevenu plus véloce. N'oubliez pas que son concurrent direct, Chrome, a un héritage de code bien moins fourni dû à sa « jeunesse » face au dinosaure qu'est Firefox. Cette dernière remarque tend d'ailleurs à devenir de moins en moins vraie.

Manque-t-il de fonctionnalités ?

Passé cet aspect, je me suis demandé si le manque de fonctionnalités précoces n'y était pas pour quelque chose. Si vous êtes développeur web, vous avez déjà du tomber sur une page de démo ou pas contenant des effets non pris en charge par Firefox (du « sucre graphique » la plupart du temps). Cependant, les utilisateurs lambda ne s'attachent pas à ce genre de choses et j'irais même plus loin en disant qu'ils ne les voient même pas.
Pour ce qui est du soft en lui même, il n'a rien de moins que les autres. Alors comment se fait-il que de plus en plus de monde le déserte et que le navigateur de Chrome grignote de plus en plus de parts de marché ?

Opt-out aggressif

Un début de piste pourrait venir de l'opt-out actif à l'installation de certains logiciels qui oblige l'utilisateur à être attentif. Bien connu des utilisateurs de Windows (et de Mac aussi il me semble), les logiciels tiers téléchargés sur le web utilisent souvent ce procédé. L'utilisateur toujours pressé ne prend pas le temps de lire toutes les indications et se retrouve à la fin de l'installation avec un nouveau navigateur devenu le logiciel par défaut sans l'avoir vraiment choisi... Les interfaces n'étant plus vraiment différentes (mauvais tournant de Mozilla pour le coup), il est facile pour un non-initié de ne même pas faire la différence ! Ou alors s'il la fait, il mettra ça sur le compte d'une mise à jour.

Opération séduction auprès des développeurs

Le fait que les développeurs web aient tendance à préférer Chrome pour ses outils intégrés, ses extensions et ses fonctionnalités intégrées de façon rapide représente selon moi un flux important de migration. Nous ne représentons certainement pas la majorité des utilisateurs (loin de là) mais qui va conseiller le grand public et choisir à la place du néophyte si ce n'est les gens qui travaillent dessus considérés comme référents concernant tout ce qui touche au web. Effet boule de neige en approche !

Que faire ?

  • Promouvoir Firefox autour de soi
  • Expliquer aux gens l'importance d'utiliser un navigateur libre soutenu par une fondation qui ne cherche pas le profit à tout prix et n'espionne pas toutes les requêtes effectuées sur son logiciel
  • Prendre un peu de temps avec eux pour vérifier leur configuration
  • Leur dire de se méfier des petites cases à décocher pour être sûr de ne pas installer n'importe quoi (c'est juste une question d'habitude) (ou leur installer Linux, ok je sors)
  • Mozilla a également pris le taureau par les cornes et reste à l'écoute de ses utilisateurs et diversifie les plate-formes où Firefox est disponible (Firefox pour Android, Firefox OS ou plus récemment Firefox Developer Edition)

Spread Mozilla's love

 

 

Script GreaseMonkey pour retrouver la fonction « marquer comme lu et masquer » de Netvibes

Si vous utilisez Netvibes depuis plus de deux semaines, vous aurez sûrement remarqué sa refonte graphique et son lot de changements au niveau du comportement de l'application. Outre le fait que la place attribuée aux flux soit désormais considérablement réduite, c'est la disparition pure et simple de la fonction « marquer comme lu et masquer » lorsque le filtrage est en mode « n'afficher que les non-lus » qui m'a plus affecté. Sans cette option, Netvibes m'est tout simplement inutilisable. Je me suis donc empressé de faire un petit script GreaseMonkey pour la simuler et retrouver le résultat précédemment. Ce n'est pas parfait, les barres regroupant les items par jour ne sont pas cachées lorsqu'elles n'ont plus d'entrées en dessous d'elles, mais c'est déjà mieux qu'avant.

netvibes_logo

Installation

Firefox

Le seul prérequis est d'avoir préalablement installé l'extension GreaseMonkey avant de :

  • cliquer sur ce lien
  • cliquer sur le bouton Installer

Chrome

  •  faire un clic droit sur ce lien
  • enregistrer le fichier JavaScript proposé
  • aller sur la page des extensions
  • faire un glisser/déposer du fichier sur cette page
  • valider l'installation du script en cliquant sur le bouton Ajouter

Utilisation

Rechargez votre page Netvibes et si tout s'est bien passé, en cliquant sur les ronds, les entrées devraient désormais disparaître comme avant.

Liens utiles

Faire de DuckDuckGo le moteur de recherche par défaut de Firefox

Je vous ai fait hier mon retour d'expérience concernant Duck Duck Go, le vilain petit canard qui essaye de se faire sa place au milieu du ? des géants de la recherche, et bien me revoilà pour vous expliquer comment l'utiliser en tant que moteur de recherche par défaut dans notre navigateur préféré, j'ai nommé Firefox. En fonction de vos habitudes, il se peut que vous utilisiez soit la barre de recherche soit la barre d'adresse pour lancer vos recherches. Vous trouverez donc ci-dessous les techniques permettant de mettre DuckDuckGo par défaut pour ces 2 options.

Utiliser DuckDuckGo comme moteur de recherche via la barre de recherche

  • allez sur la page de DuckDuckGo
  • cliquez sur l'icône à gauche dans la barre de recherche (qui a de fortes chances d'être celle de Google)
  • cliquez sur Ajouter "DuckDuckGo"
  • dans le même menu, cliquez sur la dernière entrée Gérer les moteurs de recherche
  • sélectionnez DuckDuckGo qui doit se trouver tout en bas puis cliquez autant de fois que nécessaire sur le bouton Monter pour le placer tout en haut de la liste afin qu'il devienne le moteur sélectionné par défaut au démarrage du navigateur

Utiliser DuckDuckGo comme moteur de recherche via la barre d'adresse

Si vous utilisez la barre d'adresse comme principal outil de recherche qui par défaut vous renvoie sur Google, il est tout à fait possible de faire en sorte que ce soit sur DuckDuckGo que la recherche soit effectuée. Pour ce faire, suivez les instructions suivantes :

  • ouvrez un nouvel onglet
  • tapez about:config puis validez
  • cliquez sur le bouton qui vous demande de faire attention à ne pas tout casser
  • faites un clic droit sur la liste puis sélectionnez Nouveau > Chaîne de caractères
  • comme nom, entrez :
    • keyword.URL
  • et comme valeur
    • https://duckduckgo.com/?q=
  • validez

Utiliser DuckDuckGo comme moteur de recherche principal sur Firefox pour Android

  • Rendez-vous sur la page d'accueil de DuckDuckGo
  • Appuyez sur le champs de recherche
  • Cliquez ensuite sur l'icône avec la loupe et le petit «+» qui est apparu en haut à droite
  • Donnez un nom à ce niveau moteur (pourquoi ne pas tout simplement l'appeler DuckDuckGo ?) puis validez

À partir de maintenant, DuckDuckGo apparaîtra aux côtés des autres moteurs de recherche prédéfinis.
Pour qui devienne celui par défaut, suivez les étapes ci-dessous :

  • Ouvrez le menu des options en haut à droite (les trois points à la verticale, cf. image 1) lorsque la barre d'adresse est visible
  • Rendez-vous dans le menu paramètres puis personnalisation et enfin recherche
  • Cliquez sur DuckDuckGo (ou sur le nom que vous avez entré à la fin des étapes précédentes)
  • Choisissez l'option Définir part défaut (cf. image 2)

duckduckgo-firefox-android-1 image 1 - aller dans le menu des paramètres

duckduckgo-firefox-android-2image 2 - définir DuckDuckGo comme moteur de recherche par défaut

Conclusion

Avec toutes ces astuces, vous n'avez plus d'excuse pour atterrir sur Google par inadvertance.

Configurez la qualité des vidéos avec YouTube Auto Buffer & Auto HD & Remove Ads

Avec la stratégie du pourrissement utilisée par les FAI envers Youtube, il peut s'avérer gênant de commencer à charger une vidéo pour se rendre compte que nous étions en 320p et qu'une fois mise en plein écran, elle passe en 720p et redémarre le chargement à 0. C'est en partie pour cette raison (et aussi parce qu'à avoir le choix, privilégions la qualité) que j'ai cherché un moyen d'être automatiquement dans la plus haute qualité proposée sur les vidéos YouTube. J'ai tout d'abord regardé dans les options et bien qu'il y ait une option y ressemblant, le résultat n'était pas celui attendu. Je suis tombé sur ce script YouTube Auto Buffer & Auto HD & Remove Ads proposé par Joe Simmons. Il permet de régler la qualité par défaut, retirer les publicités et choisir le lancement automatique ou pas des vidéos que vous regardez sur YouTube.com.

Installation :

  • l'extension Grease Monkey est nécessaire au fonctionnement du script que nous allons installer, rendez-vous ici pour la récupérer si ce n'est pas déjà fait
  • rendez-vous maintenant sur la page du script qui nous intéresse et cliquez sur Install
  • allez maintenant sur une page du site YouTube contenant une vidéo et cliquez sur le bouton Autobuffer Option se trouvant au dessus de la vidéo
  • libre à vous de sélectionner les options qui vous intéressent (autoplay de la vidéo, qualité par défaut, masquage des publicités/annotations)
  • sauvegardez puis relancez la page
  • voilà, c'est fini

Faites attention, cette astuce ne fonctionne pas pour le moment sur la nouvelle interface lancée en bêta il y a peu par YouTube, Cosmic Panda.

Lien utile :