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

SPDY – Le nouvel acronyme du web à venir

L’internet a toujours été une source d’innovation et de tentatives pour rentre l’expérience utilisateur la plus agréable possible. Cette amélioration se fait à plusieurs points. Il va d’améliorations à l’ergonomie design des pages web en passant par la façon dont les pages web sont indexées par les moteurs de recherche.

Un facteur reste, toutefois, au cœur des préoccupations lorsqu’il est temps d’améliorer l’expérience utilisateur sur le web : La vitesse. La rapidité à laquelle les données doivent être communiquées au visiteur est littéralement le nerf de la guerre. Ce constat est très analogue au concept de la saucisse Hygrade : Plus tu sers de contenu rapidement, plus tu seras capable d’en servir, plus ton site paraîtra rapide et mieux il sera référencé.

SPDY, c’est quoi?

SPDY (Comme dans l’expression Speedy) est un protocole développé par Google depuis déjà 2009. Le but de ce protocole est de remplacer directement HTTP 1.1 qui est le protocole de-facto sur Internet.

Un groupe de travail de l’IETF (Internet Engineering Task Force) a été mis en place pour définir quel sera le protocole sera utilisé pour ce qui a été nommé comme HTTP 2.0. Comme tout ce qui a trait à la standardisation des procédures et technologies entre les gros joueurs d’internet, l’enjeu est important car il est de déterminer quel protocole sera recommandé pour l’implémentation de HTTP 2.0.

Au menu, il y a trois protocoles à l’étude :

D’un point de vue technique

L’avantage proposé par SPDY est qu’il est conçu pour utiliser moins de connexions TCP que HTTP et il est aussi conçu pour utiliser TLS par défaut. Ceci veut donc dire que SPDY est par design plus rapide et surtout plus sécuritaire que HTTP.

Il faut aussi noter que SPDY est un ajout au fonctionnement actuel de HTTP. C’est à dire que SPDY modifie seulement la façon que les paquets de données sont envoyées par les serveurs aux clients. Cette modification se fait au niveau de l’ajout d’une couche Session (Bien située entre HTTP et SSL) lors d’une connexion TCP.

Comment plus rapide?

Le gain de vitesse de téléchargement est très intéressant. Selon les scénarios suggérés (Section Preliminary results), le gain de téléchargement varie entre 30% et 63%.

À titre d’exemple, un téléchargement qui prend 3111.916 millisecondes avec HTTP son équivalent avec SPDY prend environs 1695.72 millisecondes. Ici, on parle d’un gain de 45%.

Vocabulaire

La venue de ce nouveau protocole implique aussi un changement au niveau de la terminologie utilisée pour désigner les éléments faisant partie d’une connexion SPDY.

  • Stream : Représente l’équivalent d’une connexion / réponse du protocole HTTP.
  • Frame : Un Stream est divisé en Frames. Un Control Frame contient les entêtes HTTP et un Data Frame contient les données de ce frame.

L’ordre d’exécution

Le plus simple des scénarios prévoit l’exécution suivante  :

  • Le client initie une requête SYN_STREAM.
  • Le serveur envoie une réponse SYN_REPLY.
  • Le serveur envoie un ou plusieurs éléments DATA. Ceux-ci contiennent les données à retourner au client.

L’implémentation

SPDY est actuellement supporté entièrement par Google Chrome/Chromium et Firefox. Toutefois, il n’est pas activé par défaut chez Firefox. Pour l’activer, il faut aller mettre la variable network.http.spdy.enabled à true dans la section about:config.

Tout récemment, Opera a mis de l’avant le support de SPDY dans une version expérimentale de leur navigateur.

Il reste maintenant à Internet Explorer et Microsoft d’implémenter SPDY dans leur navigateur. Le chemin ne semble tout à fait clair de ce côté. Microsoft propose lui aussi un protocole visant à améliorer la vitesse de connexion au web : HTTP Speed+Mobility. Il semble donc que, tant et aussi longtemps qu’il n’y aura pas consensus sur le protocole à utiliser, Microsoft va être adepte du statut quo pour Internet Explorer.

Engagement envers SPDY

Il va de soi que Google a déjà mis de l’avant, il y a de ça un bon moment, SPDY sur ces services. SPDY est utilisé notamment chez GMail, Google+ ainsi que la recherche Google.

Des acteurs  importants du web ont signifié leur intérêt envers la bonification proposée du protocole HTTP.  Il y a notamment :

Est-ce que mon site est déjà SPDY?

Il y a actuellement deux indicateurs permettant d’identifier si un site utilise déjà SPDY.

La console interne de Google Chrome. Cet outil est accessible par l’adresse chrome://net-internals/#spdy. Dans la section « SPDY Sessions », vous pouvez voir un résumé des sites ainsi que certaines statistiques d’utilisation de SPDY du navigateur. En bonus, vous pouvez voir en temps réel le déroulement des connexions SPDY en cliquant sur le lien View live SPDY sessions.

Dans le cas où vous n’êtes pas très orienté statistiques et détails internes, je vous conseille d’installer l’extension vous permettant d’activer un témoin visuel pour indiquer la présence d’une connexion SPDY.

Ce qu’attends SPDY

SPDY / HTTP 2.0 a un bel avenir devant lui.

Le protocole livre exactement ce qu’il promet : Une amélioration de la vitesse de téléchargement du contenu qu’une page web. Le plus magique dans tout cela est que la transition à SPDY se fait sans aucun impact aux applications et aux utilisateurs. Cela veut dire que l’implémentation de SPDY se fait de façon transparente.

Le support pour SPDY est encore embryonnaire. Nous allons entendre encore plus en parler à mesure que les grands joueurs (ex: Facebook) vont le proposer à ses utilisateurs.

Firefox – Nouvelles fonctionnalités d’inspection

Travaillant dans le domaine du développement web, j’ai toujours l’habitude d’alterner le navigateur web que j’utilise dans mes tâches courantes.

Cette semaine, j’ai fais l’utilisation du navigateur Firefox Nightly afin d’avoir une idée d’où s’en va le développement du navigateur de Mozilla.

Firefox Nightly est le navigateur qui est la sortie quotidienne de la branche de développements du navigateur. C’est dans cette branche de développements que se retrouvent les fonctionnalités expérimentales et parfois brisées.

Le principal ajout qui m’a intéressé est l’ajout d’un inspecteur HTML et de styles CSS au même titre que Firebug directement dans le navigateur.

La vue 3D de votre code HTML

Certains pourront dire que le nouvel inspecteur de styles de Firefox imite sommairement les fonctionnalités de Firebug. Ce qui est à retenir cependant est que cet inspecteur permet d’afficher le contenu de votre DOM en 3D en utilisant WebGL pour alimenter le tout.

En plus de donner la représentation 3D de votre structure HTML, il est possible d’interagir avec votre page web en cliquant avec votre souris sur le modèle 3D.

Les possiblités sont les suivantes :

  • Glisser vers le haut, bas, gauche et droite : Permet de changer l’angle de vue de votre structure HTML
  • Clic : Permet de sélectionner un élément dans le DOM
  • Scroll : Permet de faire un zoom sur votre structure HTML.

Pour les gens qui ne tenteront pas d’installer Firefox Nightly sur leur ordinateur, vous pouvez voir un aperçu vidéo de la fonctionnalité de prévisualisation 3D de votre DOM sur Youtube.