I Haz A Bug

le blog de jye.

Archive pour janvier 2009

Muse: An 8 Bit Tribute

Mardi 27 janvier 2009

Please enable Javascript and Flash to view this Flash video.

Découvert via Friendfeed et le micropodcast de Musique Approximativeune compilation 8 bits de 7 titres de Muse. Bon, j’ai tendance à ne plus supporter Muse, ayant trop écouter ce groupe dans le passé, mais là, c’est un réél plaisir de découvrir ces reprises en 8 Bit !

Je vous conseille donc de télécharger cet album, pour peu que le titre en écoute sur ce blog vous ait plu !

Images et CSS Sprites

Mardi 20 janvier 2009

Introduction

Tout est parti d’un article de Christian Fauré : Le cloud computing est nécessairement du green computing en réaction à un article du NY Times à propos de la consommation d’énergie produit par les sites Internet. Je ne m’attarderai pas là dessus, je vais surtout parler d’un système utilisé par des sites comme Google et Facebook pour, à mon avis et d’une manière générale, gagner en performance.

Cette technique s’appelle l’Images Sprites ou le CSS Sprites, au choix. Cette technique consiste à réduire le nombre d’images d’un site en incorporant celles-ci au sein d’une seule image. On utilise ensuite la feuille de style CSS pour afficher ce que l’on souhaite en fonction de la class de l’élément HTML. 

Démonstration

Imaginons que je souhaite afficher à un endroit un picto correspondant à un lien “Ajouter” sur mon site, et à un autre endroit un picto correspondant à un lien “Supprimer“. La première chose à faire est d’ouvrir votre éditeur d’images préféré et de réunir vos images en une seule, ce qui donne :

Les deux pictos réunis en une seule image

Dans mon exemple chaque picto fait 16 pixels par 16 pixels. Pour afficher la deuxième image, je devrai donc décaler mon offset de 16 pixels. Ce qui donne comme code CSS ceci :

a.ajouter, a.ajouter:hover{
    background:#fff url(path/to/icons.png) 0px 0px no-repeat;
    display:block;
    height:16px;
    width:16px;
    text-indent:-9999px;
    overflow:hidden;
} 

a.supprimer, a.supprimer:hover{
    background:#fff url(path/to/icons.png) -16px 0px no-repeat;
    display:block;
    height:16px;
    width:16px;
    text-indent:-9999px;
    overflow:hidden;
}

Je force la hauteur et la largeur à 16 pixels, et je décale de 16 pixels le background pour l’image delete. L’attribut overflow:hidden permet de ne pas avoir un mauvais affichage du surlignage et text-indent permet de déplacer le texte du lien hors de l’écran. Il faut ensuite dans votre code html, spécifier la class des éléments HTML auxquels vous voulez voir attribuer chaque picto :

<a class="ajouter" href="#ajouter">Ajouter</a>
<a class="supprimer" href="#supprimer">Supprimer</a>

Voilà le résultat (j’ai mis display:inline-table pour mon exemple) :

Ajouter | Supprimer

Heureusement pour vous, il existe un outil en ligne qui vous permet de ne pas avoir à produire tout ça à la main : CSS Sprite Generator. Pour l’utiliser, vous devez zipper toutes vos images et les lui fournir. Une fois que vous avez remplit correctement les informations d’offset, tailles et autres options CSS pour vos images, l’application web se chargera de produire votre image finale ainsi que la CSS qui correspond.

Explication

Exemple sur la page de résultats dun recherche Google

Unique image de la page de résultats d'une recherche.

Alors pourquoi faire ça ? Et bien, pour gagner en rapidité ! Lorsque vous affichez une page web, un nombre plus ou moins important de requêtes HTTP (demandes au serveur) sont effectuées afin de récupérer tout ce qui est nécessaire à l’affichage de la page. Une image représente une requête HTTP. Plus il y a de requêtes, plus le chargement de la page s’alourdit. Pour savoir comment réduire le nombre de requêtes HTTP, je vous conseille de lire (en anglais) cet article de Tenni Theurer publié sur le blog Yahoo! User Interface : “Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests”. Voici un extrait :

Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the users browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

table1.gif

Et quand on voit que Google ou Facebook, pour ne prendre que les deux sites probablement les plus visités sur Internet, utilisent cette technique, on se doute que cela leur permet d’économiser de précieux kilo octets de transfert (que ça soit en taille de requête, mais aussi en temps de latence ou en nombres de requêtes comme cité dans le paragraphe au-dessus). Et si vous souhaitez tester votre site et voir ce que vous pouvez optimiser, je vous conseille ce site, parmi d’autres : Web Page Analyzer.

Google Chrome 2.0

Vendredi 9 janvier 2009

L’équipe de Chromium vient de mettre à disposition une nouvelle version de Google Chrome. La version 2.0.156.1, et oui, version 2, déjà. L’une des choses incroyable avec le développement de Chrome, c’est qu’à partir du moment où on s’abonne au dev channel, une nouvelle release du navigateur arrive chaque semaine, avec son lot de bug fixes et features. C’est la première fois que je me sens aussi proche du développement d’un logiciel. Au point d’aller remplir mon lot de bug reports.

Google Chrome 2.0.156.1

Avec cette nouvelle version, Chromium ajoute quelques features qu’on attendait désespérément quand d’autres manquent encore. Voici une liste des nouveautées les plus intéressantes : 

Historique des formulaires

Historique des formulaires

  • Historique des formulaires : Le navigateur se souvient enfin de ce que vous avez tapé dans les champs d’un formulaire. Fonction présente depuis bien longtemps dans Firefox ou Internet Explorer.
  • Nouvelle version du WebKit (qui passe l’acid test à 100/100 même si au final l’animation n’est pas fluide et que des erreurs subsistent encore).
  • Zoom global : Un Ctrl+molette ne zoom plus uniquement le texte, mais la page dans sa globalité, images, animations Flash comprises.
  • Scroll automatique : Un clic molette vers le bas ou le haut permet de scroller. Un manque qui avait été énormément remonté par les users.
  • User Scripts : Comme Greasemonkey ou les Userscripts d’Opera, Google Chrome permet, de manière sale pour le moment, d’activer les User Scripts.
  • HTTPS-only : Feature intéressante, pour tous les parano du web (et il y en a), –force-https vous permettra de forcer le navigateur à ne charger que les pages en HTTPS qui n’ont pas d’erreurs avec les certificats.

Acid Test 3 - Google Chrome 2.0.156.1 - 100/100

Acid Test 3 - Google Chrome 2.0.156.1 - 100/100

Plus le développement avance, plus Google Chrome devient indispensable pour moi. Certes, le navigateur a encore beaucoup de retard sur ces concurrents :
  • Pas de détection automatique des flux RSS - En cours de spécifications
  • Pas de plugins - En cours de spécifications
  • Un inspector un peu mieux foutu
Mais ça vitesse d’exécution étant, chez moi, tellement supérieure aux autres, je ne peux pas imaginer retourner pour le moment sous un autre navigateur. 
Pour essayer cette nouvelle version, vous devez vous (re) abonner au dev channel de Chromium :
  1. Télécharger Google Chrome Channel Changer (http://chromium.googlecode.com/files/chromechannel-2.0.exe).
  2. Choississez quel update vous souhaitez recevoir (release, beta ou dev). Pour obtenir la version 2.0, vous devez choisir dev.
  3. Cliquer sur Update pour enregistrer votre choix
  4. Fermer l’application et re démarrer Google Chrome.
  5. Faites un tour dans le menu clef à molette -> A propos de Google Chrome et vérifiez que vous êtes bien en version 2.
  6. Si ce n’est pas le cas, cliquez sur “Mettre à jour maintenant”.
  7. Redémarrer Google Chrome.
Et vous, vous en pensez quoi de Google Chrome ?