De l'intérêt d'utiliser des standards

Lorsqu'il y a peu, Opera a annoncé sa migration sous Webkit, certains se sont réjouis à l'idée de voir réduire le nombre de moteurs de rendus et donc la diversité des navigateurs à supporter lorsqu'on développe un site.

D'autres ont rétorqué qu'une réduction de la diversité, si elle pouvait potentiellement faire gagner du temps à court terme, ne pouvait qu’être néfaste à long terme pour le web en général. En effet, le développement des standards et leur respect dans les différents navigateurs ne se fait que parce que plusieurs moteurs ont une part de marché significative. Pour preuve : à l'époque où Internet Explorer faisait 95% de part de marché, non seulement l'innovation se faisait uniquement en mode propriétaire à la seule initiative de Microsoft mais pire encore, elle a fini par s'assécher totalement après la sortie d'IE6. Seule l'arrivée de Firefox a fini par relancer la machine.

Actuellement, si Webkit est encore loin d'atteindre la part de marché passée d'IE sur les ordinateurs de bureaux, il est largement majoritaire sur les mobiles et tablettes, ce qui conduit de plus en plus de développeurs à ne développer leurs sites et applications web que dans l'optique de webkit, ignorant totalement les autres.

Faire ce choix de la facilité est à mon sens une grave erreur, car si webkit est largement majoritaire actuellement, qu'en sera-t-il dans un ou deux ans ? Nul doute que l'écart se sera resserré si Firefox OS prend des parts de marché significatives. Je doute assez peu que ce soit le cas, la seule inconnue restant la taille de cette part.

L'importance de respecter les standards est essentielle pour fonctionner sur un large panel de navigateur. Et fonctionner sur un large panel de navigateurs en respectant les standards (plutôt qu'en abusant de hacks en tout genre ou en développant des versions parallèles) est non seulement plus maintenable mais aussi plus pérenne.

En effet, quand on se base sur les spécificités d'un navigateur, on est à la merci de son évolution. Car si les standards implémentés dans les différents navigateurs sont destinés à durer (un site qui fonctionnait bien sur les standards d'il y a dix ans fonctionne toujours actuellement), les éléments spécifiques, eux, peuvent disparaitre ou changer du jour au lendemain.

Nous en avons fait la douloureuse expérience avec RBS Change ces derniers mois. En effet, le backoffice est basé sur XUL, une technologie propriétaire de Mozilla, donc limitée au seul moteur Gecko (donc Firefox essentiellement). Depuis qu'elle a renoncé il y a quelques années à en faire un standard, Mozilla tend à réduire progressivement la portée de XUL. Initialement utilisables pour des applications web standard comme alternative plus riche à (X)HTML, XUL n'est actuellement plus utilisé que pour l'interface de Firefox. Pour continuer à l'utiliser dans le backoffice de Change, il nous faut passer par une extension.

Or la version 17 de Firefox a introduit un changement qui entrainait un plantage de Firefox dès l'ouverture du backoffice. Ce bug, critique pour les utilisateurs de Change était loin de l'être pour Mozilla puisque si un patch a été proposé en quelques jours par un contributeur externe, la validation du patch et son intégration dans Firefox a pris plusieurs mois. Et ce n'est que dans la future version 20, soit trois versions plus tard qu'il sera enfin corrigé (alors qu'il avait été remonté le jour de la sortie de la 17).

Le choix de reposer sur XUL, s'il semblait bon en 2005 lorsqu'il a été fait (et l'était probablement étant donné ce qu'il permettait à une époque où les frameworks JavaScript étaient balbutiants et où les API standard étaient bien plus limitées) s'avère aujourd'hui avoir des conséquences coûteuses : redévelopper l'intégralité de l'interface ça a un coût assez élevé. Avec une technologie standard, on n'aurait pas eu ce problème. Certains pans auraient dû être repensés de toute façon, mais cela aurait pu être bien plus progressif.

Je viens d'évoquer une techno 100% propriétaire comparable à Flash ou Silverlight par exemple dans le sens où, propulsée par un seul éditeur elle peut du jour au lendemain cesser d’être maintenu ou bannie de certaines plateformes. On est donc assez loin de ce qu'on risque de voir arriver avec le ciblage en "Webkit only", du moins dans un premier temps.

Mais les problèmes de ce choix de XUL a d'autres conséquences moins évidentes. En effet, choisir XUL c'est faire du développement dédié à Firefox uniquement. C'est donc se permettre d'utiliser des spécificités de Firefox à tous les niveaux, voire d'en exploiter sans s'en rendre compte ce qui s'avère être des bugs.

Nous en avons fait l'expérience une fois le bug évoqué plus haut puisque même si le navigateur ne plantait plus, le backoffice n'en était pas pour autant redevenu fonctionnel ! En effet, à partir de Firefox 17, E4X (déprécié et désactivé dans la version 10) ne cause plus des erreurs seulement lorsqu'il est utilisé, mais déjà des erreurs de parsing lorsqu'il est simplement présent dans un fichier. Or si on avait fait en sorte de ne plus passer dedans pour un usage normal, certaines fonctionnalités dépréciées de Change en contenaient encore... nous avions donc le choix entre tuée définitivement ces fonctionnalités ou assurer la compatibilité avec les versions actuelles de Firefox. C'est le second choix qui a été fait mais d'une part ça implique qu'il faut mettre à jour Change pour pouvoir tourner sur les dernières versions de Firefox et d'autre part ça a impliquer de tuer des fonctionnalités (certes dépréciées depuis longtemps) dans une version corrective, ce qui n'est pas forcément très réjouissant.

De même, Firefox 20 modifie le comportement de la méthode setAttribute() sur un élément du DOM. Jusqu'à présent en affectant la valeur null, cela affectait au final une chaine vide et maintenant cela affecte la chaine "null". En soi, c'est très bien puisque c'est conforme à ce que font tous les autres navigateurs, mais ça a des conséquences sur le fonctionnement de l'interface. Si nous avions travaillé en contexte multi-navigateur, nous aurions remarqué cela très tôt. Là encore une fois, ça impose une mise à jour de Change pour rester compatible avec les derniers Firefox.

Et c'est bien cela qui pend aux nez de tous ces développeurs qui font du "Webkit only" : lorsqu'un bug sera corrigé, si leurs applications reposent dessus (parfois sans qu'ils s'en doutent), il leur faudra faire des correctifs en urgence pour réparer voir coincera des entreprises sous des vieilles versions comme cela a pu et est encore le cas avec IE6. Et cela arrivera de plus en plus souvent si Webkit continue à progresser en part de marché.

Donc, on ne le dira jamais assez : utilisez des standards (et de préférence matures, sans reposer sur des propriétés préfixées) et validez vos développements, même mobiles, sur plusieurs moteurs différents ! Ne reproduisez pas le désastre d'IE6.

Et en ce qui me concerne, sur ma tablette Android, par principe je ne lance jamais aucun navigateur sous Webkit (sauf tests justement). Jusqu'à présent, j'utilisais Firefox et Opera. Maintenant, je n'utiliserai plus que Firefox. C'est dommage, mais c'est comme ça. Et si un site ne fonctionne que sous Webkit, tant pis pour lui.


Quelques trucs sur PHPMyAdmin #1

Durée de la session

C'est toujours lourd d'avoir une session qui expire et de devoir se reconnecter. Pour augmenter la durée de la session, rendez-vous dans le fichier config.inc.php situé à la racine du site et modifiez la valeur de la clé 'LoginCookieValidity' du tableau $cfg :

$cfg['LoginCookieValidity'] = 3600 * 48; // 48 hours

Évidemment, c'est à éviter sur les serveurs en production, pour des raisons de sécurité, mais sur un poste de développement, c'est tout à fait approprié.

Si ça ne passe pas, c'est que la valeur de session.gc_maxlifetime est trop restrictive dans le php.ini. Ceci peut être changé là-bas ou bien directement via ini_set() dans le fichier de configuration de PHPMyAdmin si votre configuration serveur l'autorise.

Pagination des tables

Un projet Change comporte en facilement plus de 200 à 300 tables (selon le nombre de modules utilisés) du coup, ça active la pagination de la liste. Pour augmenter le nombre d'éléments par page et éviter ce problème, rendez-vous dans le fichier config.inc.php situé à la racine du site ajoutez l'entrée suivante :

$cfg['MaxTableList'] = 500;

Défilement des colonnes

Toujours dans Change, les tables comportent un assez grand nombre de champs puisqu'on a toujours au moins la 15aine de champs standards des documents qui se retrouvent devant... Du coup quand on défile pour voir les champs utiles, on perd les menus, notamment le bouton "actualiser", ce qui oblige à défiler en sens inverse (puisque PHPMyAdmin a la mauvaise idée d'être basé sur des frames, faire juste un F5 n'est pas forcément toujours une bonne idée).

Du coup, je me suis ajouté les styles suivants via Stylish sur Firefox qui place le défilement horizontal sur le tableau plutôt que sur la page complète (en remplaçant évidemment l'URL du site) :

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("<URL_DU_SITE>") {
  .data {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
  }
}

Quelques petites BD #3

Troisième fournée de BD pour ceux qui les auraient ratées sur Twitter et deviantART :

 Afficher BD #8 - 24/11/2012  Afficher BD #9 - 10/02/2013  Afficher BD #10 - 20/02/2013
Images sous licence CC-BY

Pas grand-chose à expliquer sur celles-là, elles se suffisent à elles-mêmes ^^


Le champ de recherche qui se vide au clic...

Certains développeurs (ou plus souvent encore, leurs clients) ont des fois des idées saugrenues. De ces idées qu'une personne normalement constituée n'aurait jamais eu (et quand bien même l'aurait-elle eue qu'elle l'aurait écartée aussi sec). De ces idées qui leur vaudront d'être maudits par une bonne partie de leurs utilisateurs.

Des fois l'idée initiale peut se défendre, mais l'implémentation finale la relègue au même rang que les précédentes.

L'une d'elle consiste à vider par JavaScript le contenu d'un champ de recherche lorsqu'on clique dessus. Souvent, c'est parce qu'on a voulu mettre dedans un descriptif initial qui doit partir lorsqu'on clique sur le champ. Il y a des solutions pour le faire bien, comme, par exemple, celle-ci.

Il y a aussi des solutions pour le faire mal, comme vider systématiquement le champ même si la valeur actuelle n'est pas le texte initial. Et c'est ce qui est fait sur le site BD Gest' qui comporte l'insanité suivante :

$('#cse-search-text').click(function() {
  $(this).attr('value','');
});
$('#cse-search-text').focusout(function() {
  if($(this).val()=='') {
    $(this).attr('value','Une chronique, une preview, un article ...');
  }
});

Donc moi quand je cherche une BD en copie/collant le titre depuis une boutique et qu'ensuite, je dois retoucher ce même titre parce que la ponctuation n'est pas la même et qu'aucun résultat ne remonte, immanquablement, je clique là où je veux faire la retouche... et ça me vide le champ :blase:

Bon, râler c'est bien, mais au bout d'un moment, c'est plus constructif de trouver une solution.

Voilà donc un petit script pour Greasemonkey (j'imagine qu'elle doit exister sur d'autres navigateurs aussi) qui résout le problème :

// ==UserScript==
// @name        BDGest Pas vider le champ de recherche
// @namespace   http://darathor.com/vrac/UserScripts
// @description Désactive le vidage automatique du champ de recherche, ce qui permet de coller un texte puis de l'éditer.
// @include     http://www.bdgest.com/*
// @version     1
// ==/UserScript==
jQuery('#cse-search-text').click(function() {
	jQuery(this).unbind();
});

Avec ça, le champ se vide au premier clic (ce qui vire la phrase inutile qu'il contient) puis tous les listeners sont supprimés, du coup plus rien ne se passe aux clics suivants. Simple et efficace \o/

Bon, dans l'idéal, il faudrait que la valeur saisie reste après la recherche pour qu'on n'ait pas besoin de la recoller dedans avant de la retoucher en cas d'absence de résultats... mais bon, on peut pas remédier de l'extérieur à tous les vices de conception non plus...


Quelques extensions pour Firefox #5

Cet article est marqué comme contenant des informations dépassées depuis le 21/10/2018.
Status-4-Evar n'a bien entendu pas survécu à Firefox Quantum et à l'abandon du système historique d'extensions.

Status-4-Evar

Depuis Firefox 4, la barre d'état ou statusbar a disparu de Firefox, remplacée par une "barre de modules" et une infobulle au survol des liens donnant leur URL.

À mon sens cette infobulle remplaçant une barre statique est une mauvaise chose. Personnellement, je ne suis pas fan des éléments qui apparaissent et disparaissent de mon interface, surtout quand ils apparaissent très souvent et ne prennent pas particulièrement de place. D'autant que comme j'ai des modules ajoutant leurs boutons dans la barre des modules, il n'y a même pas de gain de place. Puis pour couronner le tout, par moment quand le lien est en bas de page, on se retrouve avec une infobulle qui clignote en continu et devient illisible.

Contrairement à l'habitude de Mozilla, il ne semble pas y avoir de manière simple de remettre cette barre par configuration. Par contre, cette extension le permet.

Ghostery

Cette excellente extension propose de bloquer un grand nombre de scripts tiers qui pullulent sur les sites web pour recueillir une foule d'informations sur nous, ralentir les chargements et rendus de pages et accessoirement de temps à autre proposer des fonctionnalités un peu utiles (ou pas).

L'extension dresse une liste catégorisée des scripts et cookies bloqués et permet de choisir ce que l'on veut laisser passer ou non. De plus, pour les boutons de partages sur les réseaux sociaux, elle permet de remplacer les boutons par des icônes permettant au besoin de les réactiver ponctuellement sur la page en cours, ce qui permet de continuer à les utiliser si on le souhaite sans pour autant les subir continuellement (avec le lot de ralentissements qu'ils impliquent).

Awesome Screenshot Plus

Enfin, terminons cette série sur cette extension qui permet de faire des captures de pages ou d'extraits de pages et qui depuis un certain temps a remplacé chez moi l'extension "Abduction" dont j'avais parlé il y a quelques années. Cette extension est simple et efficace et a en plus l'avantage de s'installer sans redémarrage.