Google Chrome – Récupérer l’URL des onglets de la fenêtre courante

Lorsque je travaille sur un article, je passe beaucoup de temps à faire de la recherche sur mon sujet. Sans exagérer, il y a des fois où je peux avoir près d’une vingtaine d’onglets d’ouvert pour une seule fenêtre dédiée au sujet que je recherche.

En général, une fois que je suis satisfait de ma recherche, je vais procéder au classement de ceux-ci dans un article dédié à ce sujet. Le processus est relativement long car cela ne se fait pas nécessairement le jour même. Pour chaque lien, je vais copier/coller l’URL dans l’article et revoir ce que je peux y extraire.

Comme le dis le proverbe : La nécessité est mère de l’invention. C’est à ce moment que je me suis demandé s’il y avait une façon d’y extraire l’URL et de les rassembler sous un seul document que je peux rapatrier dans mon article?

J’ai tenté l’expérience avec Google Chrome et il s’avère que cela est possible en passant par une extension!

Première étape – Création de l’extension de base

Avant de procéder à la création de l’extension, ma plus grosse appréhension était que l’opération allait être compliquée puisqu’il fallait interagir avec le navigateur directement.

Il s’agit du genre de faits que j’aurais dû valider bien avant. Il s’avère que la création d’une extension pour Google Chrome est très facile.

Dans mon cas, j’ai eu recours du guide d’introduction documenté par Google permettant la création d’un canevas de base.

Ce guide permet d’avoir une extension qui est visible dans la barre d’extensions à droite de la barre d’URL dans le haut du navigateur. Au clic sur l’icône, l’information qui est programmée est visible.

Deuxième étape – Développement du plugin

Comme je disais précédemment, mon but de pouvoir rassembler l’URL de tous mes onglets ouverts de la fenêtre courante dans le même document.

La seule modification que j’ai eu à faire au canevas initial a été d’ajuster le code Javascript dans le fichier popup.js.

Sommairement, ce code récupère de l’appel à la fonction chrome.tabs.query() une liste, sous la forme d’un tableau, des onglets.

Par la suite, il suffit de les parcourir dans une boucle pour ainsi récupérer leur URL. C’est ainsi que je popule la liste à puce finale.

Résultat final

Au final, le résultat n’est peut-être pas très beau mais c’est fonctionnel. Le but est atteint.

De cette façon, je peux maintenant regrouper, d’un seul clic, les liens que j’ai récupéré pour mes recherches.

Firefox 16 – À la découverte de la nouvelle ligne de commande

En avril dernier, j’ai écrit au sujet des nouvelles fonctionnalités d’inspection offertes par la version en cours de développement de Firefox.

Dans cet article, la fonctionnalité permettant d’afficher en trois dimensions la structure HTML de votre site. À ce moment là, j’étais assez étonné de retrouver cette fonctionnalité dans le navigateur.

Depuis ce temps, l’équipe de développement a continué à améliorer et ajouter des fonctionnalités à l’inspection de documents du navigateur.

La fonctionnalité qui a attiré mon attention est l’ajout d’une interface agissant comme une ligne de commande permettant d’interagir avec le navigateur. Cette fonctionnalité est nommée, en anglais, GCLI (l’acronyme pour Graphical Command Line Interface). Je crois bien qu’il est inutile de procéder à une traduction française.

Le principal but de cet ajout est d’éviter, le plus possible, de manipuler la souris lors qu’il est temps de faire du développement web. Je crois beaucoup en ce concept.

À titre de mise en contexte, il a été déterminé, dans une recherche financée par Apple, que l’utilisation du clavier était significativement plus rapide la souris pour une même opération.

Le besoin pour cette fonctionnalité, à mon avis, est bien présent pour le développement web. Êtes-vous en mesure d’énumérer les étapes nécessaires pour l’inspection d’un élément dans une page web?

  1. Prendre votre souris à une main
  2. Positionner votre curseur au niveau de l’élément en question
  3. Clic droit sur celui-ci
  4. Sélectionner l’élément de menu « Inspecter cet élément« 

Il s’agit d’une opération que nous répétons à multiple reprises à chaque jour. Le tout est long, fastidieux et répétitif.

Utilisation

Le GCLI est activé à l’aide du raccourcis clavier SHIFT-F2 ou par le menu contextuel Web developer > Developer Toolbar.

Il y a plusieurs commandes qui sont à votre disposition afin d’y accomplir le travail que vous avez besoin. En tout temps, vous pouvez y taper la commande help afin d’avoir la liste des commandes disponible pour exécution.

Par exemple, pour y consulter l’aide sur l’utilisation de la commande Resize, il suffit de taper help resize.

La syntaxe des commandes à utiliser est très bien balisée. En tout temps, il y a une aide visuelle qui permet de visualiser les paramètres à compléter pour une commande donnée.

Il est à noter, qu’en tout temps, la complétion de syntaxe est présente afin de vous aider à écrire vos commandes.

Exemples

Voici quelques commandes que j’ai trouvées intéressantes et que je crois pouvoir utiliser dans mon flux de travail quotidien.

Inspection d’un élément

Par exemple, la balise H1 de ce mon blogue se retrouve de la façon suivante : inspect #site-title

Redimensionnement de la taille visible du navigateur à une taille précise

resize to 320 480

Redimensionnement à la taille régulière

resize off

Gestion des cookies

cookie list

cookie set MonCookie 1

cookie remove MonCookie

Replacer le contenu d’un élément spécifique

pagemod replace « frenchcoding » « French Coding » true « a » « h1 » false true 

Ou simplement : pagemod replace « frenchcoding » « French Coding »

Prendre une copie d’écran de la page courante

screenshot page.png 0 true

Augmentez la sécurité de votre identité en ligne

Mon compte courriel personnel Gmail est au centre de mon identité en ligne, depuis que j’ai été en mesure de le créer en 2004. Tous les courriels personnels que j’ai envoyés et reçus ont passés par ce compte.

Avez-vous réfléchi aux conséquences possibles si un individu mal intentionné mettait la main sur votre compte courriel?

Plusieurs possibilités sont sur la table. D’une part, il pourrait envoyer des courriels frauduleux en votre nom. En deuxième lieu, tenter de mettre la main aux comptes que vous possédez à votre insu. Ensuite? Qui sait ce qu’un individu mal intentionné peut faire pour mal faire.

À titre d’exemple, j’ai vu passer cela sur mon fil de nouvelles Facebook. Il s’agit d’un ami avec qui j’ai étudié au CEGEP.

Il est vrai que de se faire pirater son compte courriel peut être humiliant.

J’ai aussi en tête l’histoire de contournement du nom de domaine du blogue http://secretgeek.net. Pour faire simple, un pirate russe a mis la main sur le mot de passe de son compte courriel. En tirant profit d’une faiblesse dans le protocole POP3, il a été en mesure de deviner son mot de passe par une attaque par force brute. Ensuite, il a procédé au transfert des noms de domaines en sa possession.

Dans les dernières années, j’ai vu énormément de cas similaires. Tous ont d’énormes conséquences. Il est difficile d’estimer où le pirate a pu se rendre avec vos informations courriels. En général, il est recommandé de réinitialiser tous vos mots de passes sur les services en lignes que vous utilisez. Cela passe de Facebook à votre compte bancaire.

D’ailleurs, avez-vous une liste des services qui pourraient être compromis en cas d’une brèche à votre compte courriel?

Il existe deux éléments de prévention pour vos comptes courriels :

  • Utilisation d’un mot de passe complexe
  • Activation du mécanisme d’authentification en deux étapes.

Tout le monde le dit, personne ne le met en application. Votre mot de passe doit être complexe ou d’une bonne longueur.  Une technique intéressante pour obtenir un mot de passe d’une certaine complexité est d’en faire une phrase. L’avantage de celle-ci est qu’il est beaucoup plus simple de se souvenir d’une phrase composé d’un acrostiche de votre prénom qu’un simple mot de 8 caractères se terminant par un astérisque.

Prévisiblement, dans le top 25 des mots de passe les plus fréquemment utilisés sur le web, des aberrations comme 123456qwerty111111passw0rd s’y retrouvent.

L’authentification en deux étapes est un mécanisme ajoutant une étape obligatoire nécessitant la saisie d’une série de chiffres générés par une clé unique configurée au préalable entre vous et le service courriel.

Gmail

Pour le service Gmail, l‘activation de cette fonctionnalité se fait dans vos paramètres de comptes. Alternativement, vous pouvez aussi consulter un guide illustré mis à votre disposition par Coding Horror.

À ce sujet, je recommande fortement d’utiliser l’application iPhone, Android ou même BlackBerry. Sinon, un code vous sera envoyé par SMS ou communiqué par téléphone.

Hotmail

L’authentification en deux étapes n’existe pas pour Hotmail. Toutefois, un mécanisme similaire peut être activé. Il s’agit d’un code à utilisation unique vous permettant d’accéder à votre compte courriel sans avoir à entrer votre mot de passe. Ce code vous est envoyé par SMS. La différence est que ce code n’est pas une deuxième étape dans le processus de connexion mais bien une alternative au mot de passe.

Si vous désirez l’activer cette fonctionnalité, suivez les étapes tel que documenté par Microsoft.

Pour la suite des choses, il serait souhaitable que les principaux services puissent offrir une sécurité augmentée avec un  mécanisme d’authentification à deux étapes.

Facebook

Depuis déjà un moment, Facebook a annoncé la mise en place d’une fonctionnalité nommée Login Approval permettant l’envoi d’un code par SMS lorsque vous tentez de vous connecter à Facebook avec un ordinateur ou appareil non reconnu.

Dropbox

Finalement, Dropbox a récemment annoncé l’activation d’une authentification en deux étapes pour ses utilisateurs. L’activation est assez simple. Visitez l’adresse http://www.dropbox.com/try_twofactor. L’idée intéressante pour Dropbox est que le générateur de clé utilise la même application que celle utilisée par Gmail. Une pierre, deux coups!

Mot de la fin

Il est évident que l’ajout de mesures de sécurité supplémentaires implique l’ajout d’étapes et complique de façon significativement le processus de connexion à votre service préféré en plus de vous forcer à garder votre téléphone cellulaire à portée de main.

Toutefois, savoir que la possibilité de sécuriser l’accès à votre compte devrait prévaloir sur la facilité d’accès. Dans mon cas, c’est ce que j’ai décidé de faire.

Après tout, il est hors de question que je laisse une partie de mon historique en ligne dans les mains d’un inconnu qui aurait pu deviner mon mot de passe.

Visual Studio 2012 – Mes impressions sur des changements à l’interface utilisateur

Le 12 septembre passé a été la date à laquelle la nouvelle version de l’éditeur de code Visual Studio a été publiée. Il s’agit de Visual Studio 2012.Plaisir de développer avec VS2012

Les changements apportés à cette version sont trop volumineux pour être couverts dans un seul article de blogue. Une bonne référence à ce sujet est Scott Hanselman. Sur son blogue, il y a quelques articles au sujet des changements apportés à cette version de Visual Studio et particulièrement aux développeurs web.

Il est aussi possible de consulter la liste détaillée qui a été documentée par Microsoft même.

Les grandes lignes des améliorations à Visual Studio sont les suivantes :

Pour ma part, il y a deux changements que j’ai appréciés plus particulièrement. Un code de couleur est associé à l’état dans lequel se trouve l’éditeur et il est maintenant possible d’explorer le contenu du code source à même l’explorateur.

Barre de statut

La barre de statut du bas change de couleur afin d’indiquer dans quel état se trouve l’éditeur.

État initial – Au démarrage de Visual Studio

Prêt – Lorsqu’une solution est ouverte

Compilation – Lorsque l’éditeur compile le projet

Débogage – Lorsque l’éditeur est dans ce mode

Explorateur de solution

Avec les versions précédentes de Visual Studio, pour consulter le contenu d’une classe, il fallait l’ouvrir en mode édition.

Un ajout intéressant a été ajouté à l’explorateur de solution afin de lui permettre la navigation et la recherche du contenu des fichiers sources.

Ce changement est assez subtil mais signifie une amélioration assez significative dans la façon de travailler avec l’éditeur.

D’une part, il est maintenant possible de faire une recherche sur les fonctions et classes présentes dans la solution. Cette recherche se fait dans la boîte de texte sous les icônes dans le haut du panneau. Il est à noter qu’il est aussi possible d’invoquer la recherche à l’aide du raccourcis « CTRL + ;« .

La navigation dans le contenu des fichiers, comme la capture d’écran le démontre, permet de naviguer jusqu’à la signature des fonctions à l’intérieur des différentes classes d’un fichier source. Il était temps que Visual Studio se dote d’une fonctionnalité similaire. Pour ceux qui ont fait du Java dans le passé, cette fonctionnalité était présente dans Eclipse depuis déjà un bon moment.

NGINX

Qu’est-ce que NGINX? Son nom laisse présager peu de choses à vrai dire. NGINX se prononce comme Engine-X.

Il s’agit d’un logiciel qui agit comme un proxy inverse. C’est à dire qu’il va se placer en amont du ou des serveurs web et prendre, à leur place, la charge des requêtes web.

D’un point de vue de sécurité, il peut être utilisé pour abstraire totalement l’accès aux ressources web qui sont sur les serveurs. Par exemple, il est possible d’associer les requêtes du serveur A et B à des URL comme http://www.monsite.com/a/ et http://www.monsite.com/b/ sans que cela ne paraisse pour le commun des mortels.

Dans la majorité de cas, un proxy inverse comme NGINX est utilisé comme un outil permettant d’augmenter la performance d’un site web. Il est possible de répartir la charge des requêtes vers une ressource statique sur plusieurs serveurs ou même de procéder à la mise en cache localement du contenu accessible à partir du web.

Il est aussi possible d’utiliser NGINX comme un proxy de serveur courriel POP3, IMAP et SMTP.

NGIX est présent sur le web depuis maintenant huit ans et est développé sous une licence libre de style BSD. Initialement, il a été développé par un développeur Russe nommé Igor Sysoev. Les premières utilisations de NGIX ont été avec les sites de premier ordre Russes comme Yandex, Mail.ru et même Rambler.

Depuis,  l’utilisation de NGINX est en constante hausse. Des sites américains de haut niveau l’ont intégré dans leur architecture. On peut noter des sites comme Netflix, Pinterest et même Github.

Le principal point de vente de NGINX est sa capacité à prendre une charge considérable de requêtes simultanées avec une faible et prévisible trace en mémoire. Son architecture, basée sur des événements,  lui permettant, de façon asynchrone, de gérer les requêtes entrantes. Son architecture a été conçue spécifiquement pour adresser la problématique du C10k.

Qu’est-ce que le C10k? Il s’agit du nom qui a été donné à la problématique d’optimisation des serveurs applicatifs pour leur permettre de fournir plus de 10 000 connexions simultanées.

Pour les fans de statistiques, il est question d’une utilisation d’environs 2.5mo de mémoire pour chaque 10 000 connexions.

L’éventail des plateformes supportées est assez large. NGINX a été initialement développé pour les plateformes UNIX/Linux. On peut aussi noter que Windows est supporté.

NGINX n’est pas le seul de sa catégorie. Il existe d’autres solutions offrant un même genre se possibilités. Il y a notamment HAProxy qui agit un proxy inverse mais aussi et principalement comme un répartiteur de charge (Load balancer) ou même Varnish qui permet uniquement une cache HTTP.

À première vue, si j’avais l’occasion d’implémenter proxy inverse dans l’un de mes sites web, je le ferais initialement pour le contenu statique. Cela passe par les images mais aussi pour les scripts et les feuilles de style. Ils ne changent pas très souvent et ils peuvent être distribuées aux clients sans que ça ait à passer par le serveur web.

En plus de la cache, ces fichiers n’auraient l’obligation d’être distribuées sur le même serveur que celui qui en charge des pages web. Il pourrait y avoir un serveur dédié à l’hébergement du contenu statique.

La cerise sur le Sundae est l’annonce par l’équipe de développement de NGINX du support pour le protocole SPDY. Ce n’est pas déjà assez pour se laisser tenter par l’expérience?