Addon Firefox: Content Encoding Detector 0.4b

Dans le but de promouvoir un web plus rapide et donc plus respectueux de ses utilisateurs, je viens de créer un petit Addon Firefox qui promeut l’encodage des pages en GZIP.

Cet encodage permet de réduire drastiquement le poid des fichiers transférés entre le serveur web et votre navigateur.

Point de vue technique :

L’addon Content Encoding Detector soumet l’url de la page que vous visitez au service JSON-HEAD de Simon Willison.

Si le serveur retourne l’http_header “Content-Encoding”, l’icône de status Firefox est mise à jour pour refléter l’encodage.

L’addon est en cours de validation mais vous pouvez déjà le télécharger à sa page Mozilla Addons.

tag: ContentEncoding

Taxonweb sur Firefox et MacOSX

J’étais occupé à préparer ma déclaration d’impôts (à rentrer pour le 30 juin 09 au plus tard).

Je me suis dit que faire sa déclaration en ligne serait assez pratique et rapide.

Mais non, sur MacOSX et Firefox 3.0.11, le site taxonweb.be ne marche pas avec le lecteur de carte eID.

Procédure d’installation du lecteur de Carte

1. Installer le lecteur de carte (en choisissant votre OS)
2. Redémarrer votre ordi

Tout ça se fait normalement sans problème.

Par contre une fois qu’on veut se remplir sa déclaration en ligne sur Taxonweb.be, avec Firefox, tout se complique.

Un petit tour sur Twitter, ne me renseigne pas énormément. Une recherche dans les FAQ de taxonweb.be ne m’aide pas vraiment.

Une recherche approfondie dans Google me dirige sur un forum d’expats.

Enfin, j’ai l’info qu’il me faut: un pdf de ~350Kb explicant, pas à pas, la procédure pour activer les modules de sécurité pour Taxonweb sur Firefox.

Donc, un gros mauvais point pour Taxonweb pour:

• Faire un site non compatible avec les différents navigateurs (et platformes)
• Bien cacher les informations nécessaires à l’installation/configuration

Je n’ose même pas imaginer un malvoyant essayant de remplir sa déclaration avec Lynx…

Merci à Google pour les infos

Et là dessus, je retourne à ma déclaration, en espérant que cela puisse servir à d’autres.

Flic.kr Short URI Bookmarklet

Sur Twitter, on voit apparaître un nouveau type de Short URI associées à Flickr.

Ces adresses web abbréviées sont incluses dans le code source de la page d’une photo (récente) mais ne sont pas facile à copier/coller.

Voici donc le bookmarklet permettant de faciliter la copie des short URI flic.kr

Flic.kr

Je rappelle : un bookmarklet est une micro application JavaScript qui s’installe en glissant un lien dans ses bookmarks.

Pour les curieux, voici le code :

void((function(){
	var a=document.getElementsByTagName("link");
	for (var i=0,j=a.length;i<j;i++){
		if(a[i].href.indexOf(('flic.kr'))>-1){
			prompt("copy...",a[i].href);
		}
	}
})())

Retrouver la version d’un Framework JavaScript

Après avoir passé quelques temps à débugger le code d’un collègue, j’ai eu l’heureuse surprise de me rendre compte qu’une ancienne version d’un Framework était employée. Elle ne comprennait pas les dernières méthodes utilisées maintenant.

Je me dis que ça pourrait aider du monde d’avoir une compilation des méthodes pour retrouver les versions des Frameworks JavaScript.

Vous n’avez qu’à entrer les lignes suivantes dans une console firebug ou en faire un alerte JavaScript.

jQuery

jQuery.fn.jquery;
//returns jQuery version number ie: "1.2.6"

Prototype JS

Prototype.Version;
//returns Prototype version number ie: "1.5.2_pre0"

Mootools

MooTools.version;
//returns MooTools version number ie: "1.2.0"

ExtJS

Ext.version;
//returns ExtJS version number ie: "2.2.1"

Yahoo! User Interface Library (YUI)

YUI v2

YAHOO.VERSION;
//returns YUI version number ie: "2.5.2"

YUI v3

YUI().Env.meta.version;
//returns YUI version number ie: "3.0.0pr2"

Dojo Toolkit

dojo.version;
/*
returns an object representing DOJO version number ie: "1.3.0 (16807)" major=1 minor=3 patch=0 revision=16807
with major, minor, patch and revision properties
dojo.version.major, dojo.version.minor, etc
*/

Si vous employez d’autres Frameworks JavaScript, n’hésitez pas à laisser un commentaire, je mettrai cette liste à jour.

CSS: vertical-align:middle pour Internet Explorer 6 et 7

Depuis la fin des mises en pages en tableaux html, centrage vertical d’un élément dans son conteneur a toujours posé des problèmes.

Internet Explorer et le vertical-align

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle même pas des versions antécédantes) ne supportent pas correctement la propriété CSS display:table-cell.

En effet, le seul moyen correct de centrer verticalement un élément est de faire en sorte que l’élément parent se comporte comme une cellule de tableau (d’où des réactions folkloriques).

Le display:table-cell a été introduit dans Internet Explorer 8. Avant ça, toutes les solutions avaient leurs revers : line-height qui ne permet pas d’avoir des espacements de lignes correct, hauteur des éléments impérativement fixe, hacks CSS mystérieux (dont on ne connaîtra pas le comportement dans les futurs navigateurs).

Bref, rien qui ne me satisfait pleinement.

CSS vertical-align:middle;

Dans Firefox 2 (pc), Firefox 3 (pc/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc/mac), Camino, Shira, IE8, le code suivant est bien rendu.

Le code HTML

<div class="v">
	<div>Ce texte devrait être centré verticalement</div>
</div>

Le code CSS

<style type="text/css">
.v {
	display:table-cell;
	vertical-align:middle;
	/*les 3 lignes suivantes ne sont pas nécessaires*/
	background:#900;
	height:250px;
	width:150px;
}
.v div {
	/*non nécessaire, juste de la décoration pour mieux visualiser*/
	background:#090;
}
</style>

Par contre dans IE 6 et 7, l’alignement vertical n’est pas pris en compte et la boîte de texte reste en haut de la boîte bleue.

Expressions CSS à la rescousse

Encore une fois, les expressions CSS d’Internet Explorer – qui, je sais, ne sont pas recommandées pour des raisons de performances et qui ont été supprimées d’IE8 – peuvent nous être bien utiles.

Code

<!--[if lt IE 8]>
<style type="text/css">
.v {
	position:relative;
	width:expression(this.childNodes[0].offsetWidth+"px");
}
.v div {
	position:absolute;
	top:50%;
	margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->

Le contenu sera positionné en absolu, à cinquante pourcent du top, par rapport à son conteneur. Il aura aussi une marge négative de la moitié de sa hauteur.

Comme, le contenu est placé en absolu, il sort du flux de la page. Sa largeur est donc reportée sur le conteneur.

Remarques et limitations :

• voir la démo
• Les commentaires conditionnels sont employés pour cibler les version d’Internet Explorer inférieures à 8.
• Les expressions css ne sont pas exécutées si le navigateur à le JavaScript désactivé.
• Les impacts de preformance sont à tenir en compte : les expressions CSS sont recalculées à chaque changement de propriétés CSS dans la page (redimensionnement du navigateur etc,…)
• Le comportement d’un élément en display:table-cell est différent de celui d’un display:block. S’il doit prendre la largeur d’un conteneur, il faudra spécifier celle-ci.