IE6 No more – Une bannière simulant une mise à jour d’IE

Un petit mot aujourd’hui pour parler de l’ami des développeurs et designers web : Internet Explorer. Vous n’êtes pas sans savoir que par son comportement souvent catastrophique, IE est une véritable plaie. En général, quand on développe un site web, on fait le site comme il faut, avec les technos qu’il faut, et une fois qu’il est fini, on passe une semaine à regarder tout ce qui ne marche pas avec IE et on met des hacks un peu partout pour avoir des rendus corrects.

Mais le web avance, et s’il était indispensable il y a encore quelques années de supporter IE6, ce temps est de plus en plus en révolu. Personnellement, selon les exigences des clients, je supporte IE8 (IE9 n’étant pas disponible sous XP), mais jamais en dessous. Pas de temps à perdre avec ces vieux navigateurs. Et lors des projets HTML5 / CSS3, tant pis pour le 8. Car l’avenir est là. Il faut aller de l’avant.

Seulement, les visiteurs ne comprennent pas lorsqu’ils arrivent sur un site web qui ne fonctionnent pas, et dans la majorité des cas, râlent contre le développeur, sans savoir qu’ils sont eux même à l’origine du problème. La solution : les en avertir. Plusieurs sites se sont lancés dans la promotion de bannière / ruban à mettre sur son site web pour inviter les visiteurs à télécharger un navigateur récent, comme ie6 no more.

Bandeau disponible sur le site « IE6 no more »

Personnellement, je trouve ce bandeau trop intrusif. Le visiteur se demande un peu « de quoi je me mêle ». Il n’est de plus pas à jour. J’ai donc pensé à une imitation du bandeau utilisé par Internet Explorer pour afficher des messages à l’utilisateur. On va tromper le visiteur pour lui faire croire que c’est le navigateur lui même qui lui dit qu’il n’est pas à jour. Le visiteur sera ainsi plus à même de faire la mise à jour, d’autant plus qu’il n’y a pas de choix à faire, seulement un « mettre à jour ». Bon, d’accord, tromper le visiteur, c’est mal, mais bon, là, c’est pour son bien.

Voici donc la bannière que j’ai créé :

Bannière pour mettre à jour IE
Bannière pour mettre à jour IE en se faisant passer pour le navigateur

Et le code qui va avec :

<!-- Code par Flaburgan http://geexxx.fr sous licence CC-BY-NC-SA-->
<!--[if lt IE 9]>
<div style='position: absolute; top: 0px; left: 0px;
		width: 100%; padding: 2px 12px;
		background: #ffffe5; border-bottom: solid #6f6f63 1px;
		color: black; font: small "Sans Serif";'>
	<img src="http://geexxx.fr/wp-content/uploads/2012/03/warning.png" alt="warning" style="float: left; margin: 0px 5px 0px 0px; border: 0px;" />
	<a href='#' onclick='javascript:this.parentNode.style.display="none"; return false;' style="float:right;" >
		<img src="http://geexxx.fr/wp-content/uploads/2012/03/cross.png" alt="close" style="margin: 0px 20px 0px 0px; border: 0px;" />
	</a>
	Attention ! Votre version d'Internet Explorer est p&eacute;rim&eacute;e. Cliquez <a href="https://www.mozilla.org/fr/firefox/new/" style="color:black">ici</a> pour mettre &agrave; jour votre navigateur.
</div>
<![endif]-->

Les images (le warning et la croix pour fermer) peuvent être téléchargées ci-dessous si vous ne voulez pas faire un lien vers ce site :
warning cross

Vous pouvez bien sûr changer le texte du bandeau s’il ne vous convient pas, et le traduire si vos visiteurs parlent globalement une autre langue.

Et maintenant, le dernier mot qui va forcément partir en troll : le lien pour mettre à jour permet de télécharger Firefox. Avant que tout le monde ne hurle, quelques explications : Le but ici n’est pas simplement de se débarrasser d’IE6 mais bien d’avoir un navigateur récent qui permet donc d’avoir un support du HTML5 et CSS3. Microsoft a fait de nombreux efforts en ce sens avec IE9 et je les en félicite. Le problème, c’est qu’IE9 n’est disponible qu’à partir de Vista. Hors la majorité des personnes dont le navigateur n’est pas à jour sont sous XP. Il n’est donc pas possible que le lien de la bannière permette la mise à jour vers IE9, il fallait donc un autre navigateur que celui de Microsoft (encore une fois, je le répète, j’aurais mis IE9 avec plaisir s’il avait été disponible sous XP). IE écarté, le choix de Firefox est tout naturel, c’est le seul navigateur qui n’est pas possédé par une entreprise. De plus, il ne nécessite pas d’être administrateur de la machine pour être installé.

Je répète que ce bout de code est complètement libre, vous pouvez donc le modifier et linker vers la page de téléchargement d’IE8 si vous le souhaitez (je vous conseille alors de modifier le if lt IE9 (lt signifiant less than) pour mettre 8 à la place).

Allez, mettez ça sur tous vos sites web, qu’on puisse enfin profiter des jolies technologies aujourd’hui disponibles sans se prendre la tête pour des ancêtres !

Faire persister une connexion SSH

Je travaille en ce moment à distance en uilisant SSH. Cependant j’avais un problème : lors d’un temps d’inactivité trop long, la connexion était perdue. Le temps de connexion étant important dans mon cas, c’était assez ennuyeux. Nous arrivons alors au sujet de cet article : le maintient de la connexion SSH pour éviter une déconnexion par Timeout.

La solution est toute simple : envoyer des paquets régulièrement pour que la connexion reste active et donc éviter le Timeout. Par contre inutile d’envoyer 15 paquets par seconde, le Timeout est de l’odre de 5 minutes.

Deux méthodes :

Du côté serveur, modifier le fichier de configuration /etc/ssh/sshd_config pour rajouter la ligne suivante, si elle n’y est pas déjà présente :

ClientAliveInterval 60

Vous me direz : c’est bien gentil mais je ne suis pas admin et je n’ai donc pas accès à la config du serveur. Soit. Il vous suffit alors de demander à votre démon SSH de faire le travail.

Du côté client, rajoutez dans le fichier de config /etc/ssh/ssh_config, la ligne suivante si elle n’existe pas encore :

ServerAliveInterval 60

Et voila, simple mais efficace :-)

De la subtilité de générer du JSON en PHP

J’ai récemment été confronté à un bug dans une application JavaScript au boulot. J’ai mis un certain temps à comprendre car je ne connaissais pas la subtilité dont je vais vous parler. Ne vous attendez pas à des révélations fracassantes ni à des démissions en chaînes, il s’agit d’un tout petit point qui mérite l’attention des développeurs et qui relève autant de la logique et du bon sens que de la connaissance des langages incriminés !

J’utilise un script PHP pour récupérer des données en base de données qui sont ensuite formatées en JSON avant d’être transmises à l’application JavaScript (JS). Il s’agissait d’une collection de couleurs (avec des infos du genre identifiant, code de la couleur et nom de public de la couleur).

Tout fonctionnait bien jusqu’à très récemment (l’application JS permet de dessiner en pixel art) et j’ai donc cherché pourquoi une des fonctionnalités (l’importation d’une image et sa transformation en pixel) ne marchait plus. Après un bon moment de debugging dans le JS, j’ai fini par découvrir que c’était lorsque l’application bouclait sur la collection de couleurs que les problèmes survenaient:

for(var i = 0, acl = availableColors.length; i < acl; i++)

L’instruction « availableColors.length » renvoie  » undefined  » alors que availableColors me montre une collection d’objets JSON. Oui mais non, pas tout à fait. Comme me le fait remarquer un collègue, firebug indique un objet contenant les objets couleurs et non pas un tableau. Or, l’appel à « .length » ne fonctionne que sur les tableaux. C’est l’une des choses sur lesquelles il faut être attentif lorsqu’on travaille sur du JSON généré par PHP. Mais pourquoi diable ?

La réponse se trouvait dans la méthode PHP qui récupère les données dans une BDD : j’ai récemment modifié l’array PHP de sortie en le transformant en array associatif (ironiquement, pour corriger un bug. Merci l’absence de tests ahah). Ce même tableau transformé en JSON par « json_encode » lors de la transmission à la vue. Un petit tour sur la page de la documentation de json_encode m’a permis de réaliser que les array associatifs sont toujours transformés en objet JSON.

Il m’a suffit d’écrire une méthode qui se charge de générer le JSON qui sera envoyé au client.

     /**
      * Returns a JSON string ready to be used by the client
      *
      */
     public static function formatAvailableColorsForClient(array $availableColors)
     {
         return json_encode(array_values($availableColors));
     }

Pour info, la fonction array_values permet de réindexer un tableau.

Et voilà !