J’ai contacté le support à plusieurs reprises pour prendre connaissance de la mise en place de noms de domaine personnalisés et de la mise en place de nouvelles fonctionnalités. Bénéficier d’une adresse en monblog.fr au lieu de monblog.canalblog.fr est intéressant, en terme d’image mais aussi d’indépendance.

Le gros problème est que Canalblog ne m’a jamais répondu. Ni à moi ni à plusieurs utilisateurs.
En 2010, ce sont donc plus de 700 000 blogs qui se retrouvent captifs d’une plateforme avec une seule porte de sortie : le copié/collé de leurs articles. Difficilement acceptable.

Canalblog Importer : plugin d’import de Canalblog vers WordPress

Las de ce mutisme de la part de Canablog, j’ai donc décide de me mettre à l’ouvrage pour offrir une extension WordPress répondant à ces 2 critères :

• importer un maximum d’éléments
• en demander le moins possible à l’utilisateur

Une fois le plugin activé, une nouvelle entrée fait son apparition dans la rubrique d’administration Outils > Importer : Canalblog Importer.

L’import Canalblog en 5 étapes

L’import de son blog Canalblog se déroule par la suite en 5 étapes :

1. Configuration
2. Import des mots-clefs
3. Import des catégories
4. Import des articles
   • Import des articles
   • Import des commentaires
   • Import des médias
5. Nettoyage

La configuration de l’import est le moment requérant toutes vos capacités pour taper l’adresse de votre blog. Oui c’est tout. S’ensuit alors une suite de recommandations, entre autre pour s’assurer du bon déroulement de l’import. Ça concerne la configuration des permaliens et le format de dates sur Canalblog.

Une fois le bouton d’import cliqué, il faudra réitérer le clic au début de chaque étape clé, la plus longue étant l’import des articles.
Techniquement, sur un blog possédant plusieurs milliers d’articles sur 5 ans, il m’aura fallu à peine 20 minutes de patience et 5 clics.
Difficile d’en demander plus à quelqu’un n’ayant aucune notion technique.

Écran de configuration de Canalblog Importer

Canalblog Importer : les fonctionnalités

Les différentes étapes de l’import résument à elles seules les fonctionnalités de cet outil d’import :

• import des mots-clefs
• import des catégories
• import des articles
• import des commentaires
• import des médias
• import des auteurs
• correction des liens inter-articles
• intégration des médias dans le gestionnaire de médias de WordPress − avec génération de vignettes à la clé et utilisation de celles-ci au sein des articles
• reprise de l’intégration et tolérance à l’erreur : l’import peut être relancé indéfiniment, les contenus ne seront pas réimportés en double

En gros, ce que cette extension ne fait pas, c’est le café, la récupération de la blogroll et la migration du référencement vers votre nouveau blog − faute au manque de nom de domaine et à l’impossibilité de dire aux moteurs de recherche les nouvelles adresses des articles hébergés sur Canalblog.

J’ai essayé de rendre toutes les étapes conviviales, explicatives et rassurantes sur le processus en cours et restant. C’est encore plus simple que de rédiger un article de blog. Enfin, je trouve

Écran d'aide à la fin d'import

La clé de la réussite : cURL et XPath

Sous le capot, la dépendance à PHP 5.1+ s’explique par 3 choses :

• l’autoloading PHP
  J’en ai un peu marre de faire des require à tour de bras donc je fais fi des recommandations de WordPress : PHP4 est mort, faut arrêter avec ce délire de compatibilité, pas en 2010 (ni même en 2008 ou 2009).
• cURL
  C’est vraiment la boîte à outil de la manipulation HTTP. Elle est abstraite dans la classe WP_Http. Son utilité ? Récupérer du contenu distant. Pratique pour rapatrier le contenu de pages HTML, entre autre.
• DOMXPath
  Associé au DOM PHP5, c’est un outil formidable pour requêter au sein d’un document HTML … disons, récupéré à distance ? La structure des thèmes Canalblog étant identique (pour peu qu’ils n’aient pas été retouchés en mode avancé), le travail de constitution des sélecteurs XPath n’en était que plus facilitée.

Donc clairement, cette extension effectue un travail bête et méchant de crawl des pages d’un blog, de manière structurée afin de peupler tranquillement un blog WordPress de ce même contenu.
Je me suis basé au maximum par les outils déjà existants … y compris la classe d’import WordPress.com ! Je l’ai réutilisé pour l’import des médias vu qu’elle correspondait parfaitement au besoin.

Le pouvoir aux utilisateurs

Au-delà du simple aspect technique de la réalisation de l’extension (qui a demandé quelques heures de travail tout de même), il faut comprendre une chose : capturer ses utilisateurs pour éviter leur fuite en cas de déclin d’un produit n’empêchera pas les utilisateurs de trouver une solution à leur problème.

La réponse au problème de la communauté est venue de la communauté elle-même : elle veut partir ? Elle part et s’en donne les moyens.

Le seul moyen pour Canalblog de conserver ses utilisateurs, après cette porte de sortie offerte à tous les usagers, c’est d’innover et de les reconsidérer comme le moteur de leur croissance. Tout effort pour entraver cette démarche serait une pure perte de temps, n’ajoutant que trop de douleurs à une agonie certaine.

Canalblog Importer est une extension gratuite pour WordPress, libre de téléchargement, d’utilisation et de modification (sous réserve que le code modifié soit republié sous la même licence). L’extension constitue ainsi une bonne base pour constituer de nouveaux imports d’autres plateformes, fermées elles aussi.

Firebug fait partie de mes extensions préférées depuis un bon moment. Je l’estime aujourd’hui même plus importante que l’extension Web Developer, c’est dire.

J’ai pourtant constaté que la plupart de ses utilisateurs la sous-exploitait en se limitant à la console pour consulter les erreurs et éventuellement à l’inspecteur HTML pour remonter rapidement dans l’arborescence des balises en 1 clic. C’est bien mais pas assez.
Firebug est tout simplement énorme ! Suffisamment énorme pour gagner un temps incroyable dans le développement d’applications JavaScript et pour mieux comprendre les incohérences des CSS dans une page, entre autre.

Je vous offre aujourd’hui mon cadeau de Noël pour gagner en productivité et maîtriser cet outil ô combien indispensable.

Le plus amusant dans l’histoire c’est que le site officiel de Firebug dévoile (succinctement certes) tous les petits plus qui simplifient la vie. Je vais m’atteler à les éplucher en fonction des domaines d’utilisation :

1. pour le HTML et les CSS
2. pour le JavaScript
3. pour gagner en performances

Firebug pour le HTML

L’inspection HTML

J’apprécie l’inspection HTML car elle me permet de retrouver simplement le code lié au visuel. Après avoir activé l’inspecteur, je survole l’élément sur lequel je veux travailler, je clique dessus et le volet Firebug se fige dessus en m’indiquant toutes ses propriétés CSS, le modèle de boîte et ses propriétés DOM. On en reparle tout de suite après.
L’inverse est également possible. C’est à dire qu’en survolant le code, la correspondance visuelle dans la page est établie. C’est rudement pratique pour repérer des éléments qui sortent du flux. Ça l’est d’autant plus que les différentes marges (internes, externes, bordures) sont elles aussi mises en surbrillance.

Le gros atout de cet inspecteur c’est également l’édition à la volée de toutes les balises ! Idéal pour tester diverses classes d’un objet ayant un impact visuel fort sur son affichage. Cet outil présente un gain de temps énorme par rapport à la modification du code dans son éditeur et un petit coup de touche F5 dans la foulée.

Il faut également retenir que toute balise est sélectionnable en cliquant sur son nom (div, h3 etc.). Cela a a pour effet de mettre à jour le panneau latéral de Firebug. Panneau latéral qui est également fort utile.

L’inspection CSS, Layout et DOM

Le panneau latéral de l’inspecteur HTML se compose de 3 onglets, tous très utiles.

Inspecteur CSS

Les propriétés CSS affichées concernent uniquement l’objet actif et c’est ce qui en fait sa force. Ce panneau indique en effet la cascade CSS en cours ce qui permet de comprendre rapidement pourquoi sa feuille de style n’est pas appliquée comme il faudrait. Elle a la bonne idée de mentionner quelle feuille de style est utilisée et quelle ligne. De quoi corriger ça dans son éditeur favori rapidement.

Ou pas. En effet l’inspecteur CSS permet, tout comme l’inspecteur HTML, de modifier les propriétés à la volée et sans fioriture. Si je précise sans fioriture c’est parce que l’éditeur à la volée de Web Developer rend parfois l’affichage de la page bancale en décalant des éléments. Là vous pouvez totalement compter sur l’éditeur intégré et ce n’est pas un luxe !
Désactiver, supprimer, modifier ou ajouter des propriétés sont quelques-unes des actions que vous pourrez effectuer à même la page.

Là encore c’est une des parties où les gains de temps sont énormes. On peut en effet modifier ses CSS et les tester tout en observant l’impact immédiat de ses modifications.

Inspecteur du modèle de boîte (Layout)

Le modèle de boîte CSS peut vite devenir pénible à gérer et plus particulièrement quand on visualise mal le cumul des différentes marges.
Dans tous les cas c’est appréciable de pouvoir constater les marges en présence et encore, de pouvoir modifier leurs dimensions à la volée. Firebug a la bonne idée de colorer les marges intérieures (padding), extérieures (margin) et les bordures (border) d’une couleur différente.

Il a également la bonne idée d’afficher une double règle millimétrée au survol du panneau layout. Très pratique dans le cas de design en grilles ou nécessitant un certain rythme de visualisation.

Inspecteur DOM

Ah l’inspecteur DOM ! S’il n’existait pas il faudrait l’inventer. Firefox proposait déjà un tel outil à la différence près qu’il était moins pratique d’utilisation.
L’inspecteur DOM m’est moyennement utile dans le cas d’une simple inspection du code HTML bien que ce soit toujours pratique de visualiser la présence ou pas d’objets JavaScript dans tel ou tel élément. C’est fortement appréciable pour la librairie Prototype étant donné les dégâts causés par son extension du DOM à gogo.

Firebug pour le JavaScript

L’inspecteur JavaScript

C’est l’autre outil indispensable de Firebug. Avec lui, c’en est fini des alert(mavariable);. L’inspecteur DOM prend avec lui toute son utilité.

J’illustre sur l’image ci-dessus l’utilisation des points d’arrêt (breakpoints). Il suffit d’un clic à gauche d’un numéro de ligne pour en placer/retirer un. Concrètement quand l’exécution du JavaScript arrivera au premier point d’arrêt, elle va se stopper.
Quel intérêt ? Observer. En agissant ainsi, vous avez la main sur toutes les variables connues au sein de votre code/fonction. Très utile pour connaître les paramètres passées à la fonction et détecter les erreurs. C’est pour cette raison que les alert() deviennent inutiles : tout est à portée de main. Vous ne pesterez plus contre un undefined mal placé

En parallèle de ça, l’inspecteur DOM est à utiliser pour visualiser d’un coup d’œil les différentes variables actives ainsi que leur arborescence. Comme tout est cliquable, l’inspecteur vous transporte sur n’importe quel objet pour en étudier le contenu.

La console Firebug alias console.*

La console Firebug est l’autre tueuse d’alert() et s’utilise de deux manières.

La plus accessible est d’interagir avec. Vous saisissez votre code, la console l’exécute et retourne le ou les résultats. Encore une fois les objets sont cliquables et navigable au travers de l’inspecteur DOM.
La console est utile pour utiliser des fonctions sorties du contexte de l’initialisation : il devient tout à fait possible de piloter des éléments après le chargement de la page. Ça évite encore une fois des F5 inutiles et consommateurs de temps.

L’autre manière d’utiliser la console c’est de ne pas l’utiliser. Ou pas de manière active tout du moins puisqu’elle est également un objet JavaScript (console) utilisable dans votre code auquel sont rattachées plusieurs fonctions au nom explicite :

• console.log() : affiche une information standard
• console.info() : affiche une information de type « information »
• console.warn() : affiche une information de type « avertissement »
• console.error() : affiche une information de type « erreur »
• console.debug() : débogue le contenu d’un objet directement dans la console

Autrement dit, si l’inspecteur ne suffisait pas, au lieu de lancer un alert(mavariable) (potentiellement dangereux dans une grande boucle qui n’a jamais cliqué 50 fois sur « OK » à cause de ça ?), il vaudra mieux utiliser console.log(mavariable). Il y a de quoi faire, surtout avec la possibilité de créer des groupes de messages et l’utilisation de la syntaxe printf.

Et top du top, en cas d’erreur JavaScript, la console affiche un petit cercle rouge qui rappelle fortement le point d’arrêt. Normal puisque c’en est un. Un clic et on évite de rechercher la ligne problématique dans le code. Encore une fois, du temps de gagné.

Firebug pour les performances

Après avoir bien développé, Firebug propose de mieux développer. L’extension magique propose quelques outils sympathiques pour rapidement déceler les problèmes, notamment de scripts trop gourmands ou à optimiser.

Le traceur réseau

Avec le traceur réseau c’est simple, tout ce qui est chargé sur la page est chronométré. Si un élément est systématiquement long à charger en tête de liste, pourquoi ne pas essayer de le déplacer dans le bas de la pile ? Je pense notamment aux appels vers des fichiers JavaScripts externes. Les appeler en bas de page permet d’éviter des gels de page. C’est ce que YSlow nous recommandera

Outre une petite prévisualisation des contenus, le traceur affiche aussi les statuts des contenus s’ils sont différent du statut 200 (found). Et de surligner ça en rouge en cas de fichier introuvable.

J’aime beaucoup le traceur pour le suivi des requêtes XHR (appels AJAX). Un clic sur un appel affiche à la fois les entêtes, les données transmises au serveur et sa réponse. Fini les requêtes AJAX qui ne produisent rien sans qu’on puisse savoir pourquoi. Le clic droit sera également un fidèle allié, notamment pour ouvrir l’appel AJAX dans un nouvel onglet. C’est plus lisible pour déboguer quand même

Le profileur JavaScript

Le profileur (profiler) JavaScript s’utilise un peu à la manière de la console : de manière active ou au travers de l’objet console.

Le profileur enregistre tout ce qui se passe entre le moment où il est enclenché et le moment où il est stoppé. Il va ainsi dénombrer toutes les appels (calls), leur durée d’exécution et leur fichier d’origine, entre autre. L’idée est bien entendu de voir ce qui consomme le plus d’appels et de temps pour savoir si ce comportement est normal ou pas. À ce stade là, difficile de pousser la granularité du profileur plus loins.

Sauf en utilisant le profileur directement dans le code comme on a déjà pu le faire pour les logs. console.profile() et console.profileEnd() seront vos amis. C’est vraiment l’idéal pour profiler l’exécution d’une fonction, voire même les portions de code exécutée en son sein.

L’extension YSlow

L’extension YSlow est une extension pour Firefox mais elle nécessite toutefois la présence de Firebug. Elle s’articule autour de trois critères.

Il y’ a d’une part la surveillance des performances. YSlow se base sur la liste des bonnes pratiques établies par Yahoo! (14 à l’heure actuelle). YSlow passe ces critères en revue et accorde une note en conséquence. Si certaines sont difficiles à tenir, c’est un bon moyen de s’intéresser à de nouvelles pratiques d’optimisation et de performances.

Le second critère est affiché dans le panneau stats. Il s’agit de la capture d’écran ci-dessus. Certes il s’agit d’un simple tableau mais dont les chiffres sont intéressants à étudier. YSlow analyse la page pour un premier et un second chargement. La différence entre les deux ? C’est que le cache est passé par là et normalement, je dis bien normalement, le second chargement se doit d’être beaucoup plus rapide.
Si ce n’est pas le cas, il y a de l’optimisation à faire et cela peut aussi signifier du côté serveur Web. Pas forcément du développement donc.

Enfin on termine sur une partie complémentaire aux stats : les composants (components). Elle distille des informations plus verbeuses que le traceur réseau de Firebug en se focalisant sur les E-Tag, la présence ou pas de compression, la date de validité du cache ainsi que la taille des objets.

Conclusion

J’espère avoir éclairé quelques lanternes sur l’utilisation de Firebug. Cette extension est suffisamment puissante pour gagner en confort de développement ; il serait dommage de s’en priver. On gagne du temps, du confort et surtout, de la qualité de développement.
À noter qu’il existe aussi Firebug Lite. Il s’agit d’un script JavaScript compatible avec les principaux navigateurs du marché mais comme le Lite l’indique, les fonctionnalités sont plutôt limitées. Seule la console JavaScript persiste.

Lors de la refonte de ce blog, j’ai concocté un petit script JavaScript (non intrusif bien entendu) affichant et modifiant le contenu d’un bandeau sous la forme d’une classe statique reponsant sur jQuery. J’explique aujourd’hui comment ces 48 petits lignes de code (en comptant commentaires, sauts de lignes et accolades) fonctionnent, comment il est aisé de mettre en place de telles routines de manière intelligente, souple et non intrusive.

Et comme l’indique le slogan de jQuery : Write less, do more.

Le besoin

Avant de se lancer tête baissée dans le code, prenons le temps d’exprimer avec des mots ce que l’on aimerait faire.

On souhaite disposer d’une liste de liens. Lors d’un clic sur un lien de cette liste, l’encart correspondant doit s’afficher pour illustrer davantage son sens. Eventuellement, lorsque l’on reclique sur ce même lien, le visiteur est transporté sur la page en question.

J’ai grassé les mots importants de ce besoin. Vous le verrez par la suite, ils vont régir le comportement du script.

La structure HTML

Nous allons donc nous retrouver avec trois grosses parties dans le code :

• la liste de liens, une balise ul semble toute indiquée)
• une liste de textes correspondants, il n’a pas lieu d’être visible pour l’utilisateur final concerné par le code
• un bloc conteneur neutre destiné à recevoir les textes d’enrichissement de manière visuelle

Des mots au code, voici ce que donnerait la structure balisée :

<body>
<!-- (...) -->
	<div id="conteneur_cible"></div>
	<!-- (...) -->
	<ul id="liens_etendus">
		<li><a href="page1.html" class="page1">Page 1</a></li>
		<li><a href="page2.html" class="page2">Page 2</a></li>
		<li><a href="page3.html" class="page3">Page 3</a></li>
	</ul>
	<!-- (...) -->
	<div id="conteneur_source">
		<h2>Titre</h2>
		<p>Texte explicatif apportant de la cohérence aux utilisateurs dépourvus de JavaScript et d'interprétation des feuilles de style.</p>
		<ul>
			<li class="page1">Texte page 1</li>
			<li class="page2">Texte page 2</li>
			<li class="page3">Texte page 3</li>
		</ul>
	</div>
<!-- (...) -->
</body>

L’ordre de la structure importe peu mais dans tous les cas, leur position dans le flux HTML dépend avant tout de leur importance au sein de celui-ci. De manière générale, il vaut mieux disposer le contenu principal tout en haut du flux et le faire suivre par le contenu secondaire tels que les menus de navigation et les textes supplémentaires.
Je pense que le code parle de lui-même, posez vos questions en commentaires si jamais il y a besoin d’explications plus poussées.

Côté HTML tout est réglé avec ceci. Il ne restera éventuellement que du travail de stylage pour lui donner une apparence plus conviviale.
Vous remarquerez qu’il n’y a aucune mention à du JavaScript à l’intérieur de ce code et ce sera le cas jusqu’au bout. C’est tout l’intérêt de séparer fond et forme et donc, du JavaScript non intrusif.

Le code Javascript

J’ai pris la décision d’écrire ce code pour jQuery car cette bibliothèque (ou framework) est embarquée dans WordPress et réduit drastiquement la quantité de code à écrire pour produire des résultats.

Dans la pratique, le code va se charger dès que possible (c’est à dire dès que le DOM est prêt) et exécutera une méthode en se servant des paramètres prédéfinis ou passés manuellement à la classe. Le code suivant est structuré et suffisamment commenté pour le comprendre sans trop de difficulté. J’expliquerai en-dessous sa logique :

/*////////////////////////////////////////
// Classe statique 'oncletom_text_grabber'
// # Permet d'afficher un slide d'informations en cliquant sur un lien
// # C'est rigolo et en plus ça sert à quelque chose
// @ parametres (objet, optionnel) : objet de clé:valeur paramétrant le comportement
////////////////////////////////////////*/
function oncletom_text_grabber()
{
	var parametres = arguments.length == 1 && typeof arguments[0] == 'object' ? arguments[0] : {};
	//Paramétrage de la fonction
	//# permet un lancement de la classe avec un paramétrage par défaut
	parametres.source = typeof parametres.source == 'undefined' ? '#conteneur_source > ul > li' : parametres.source;
	parametres.bindto = typeof parametres.bindto == 'undefined' ? '#liens_etendus a' : parametres.bindto;
	parametres.target = typeof parametres.target == 'undefined' ? '#conteneur_cible' : parametres.target;
	/*////////////////////////////////////////
	// Méthode publique 'ot_text_caller'
	// # Récupère le contenu associé à l'attribut 'rel'
	// # Méthode à appeler sur un évènement
	////////////////////////////////////////*/
	function ot_text_caller()
	{
		//sélection de l'élément à récupérer
		var id = $(this).attr('class');
		//hop ! on vérifie c'est déjà ouvert. Auquel cas le lien redevient cliquable
		if( $( parametres.target ).attr('class') == id )
		{
			return true;
		}
		//on nettoie le contenu de la destination
		$( parametres.target ).empty();
		$( parametres.target ).attr({ 'class' : '' });
		//on remplit la destination avec le bon contenu
		//on le fait en utilisant une expression régulières pour récupérer l'élément voulu
		$( parametres.target ).fadeIn( 'slow' ).append(  $( parametres.source+"."+id ).html() ).toggleClass( id );
		//évite que le lien soit cliqué
		return false;
	}
	//On greffe les différentes méthodes
	$( parametres.bindto ).click( ot_text_caller );
}
//exécution automatique de fonctions au lancement du document
$( oncletom_text_grabber );
//FACULTATIF
//pour assigner une deuxième liste de liens, il suffirait d'écrire le code ci-contre, par exemple :
//tous les paramètres non renseignés prennent la valeur par défaut de la classe
$( function(){ oncletom_text_grabber({ 'target' : '#nouveau_conteneur_cible', 'bindto' : '#exemple_entete ol a[@rel]', 'source' : '#liste_source2' }); } );

1. Dans un premier temps, je m’applique toujours à pouvoir proposer une utilisation de la classe sans avoir à fournir de paramètre lors de son appel. C’est un côté pratique qui permet en plus de documenter les différentes options possibles. Ces options correspondent aux différents sélecteurs jQuery dont on aura besoin par la suite ;
2. Dans un deuxième temps, je déclare une méthode interne à la classe. La cascade des accolades fait qu’elle n’est accessible que depuis la classe. Cette méthode sera assignée à l’évènement onclick de tous les éléments concernés par parametre.bindto. En clair, des liens hypertextes. Le this y fait référence.
   1. On stocke dans la variable interne id le nom de la classe. En effet, la classe du lien permet de récupérer le bon texte dans el conteneur source (parametre.source),
   2. On vérifie que le conteneur cible ne porte pas le même nom de classe : si oui, on suit le lien, si non, on affiche d’abord le texte complémentaire (la suite),
   3. Le passage le plus délicat consiste à extraire ce qu’il faut et le placer où il faut. Heureusement jQuery dispose de deux fonctions magiques : append() et html(). La première rajoute du HTML à la suite du sélecteur tandis que la deuxième extrait le HTML par sélection. Le fonctionnement en chaîne de jQuery permet de réaliser tout ceci en une ligne,
   4. Pourquoi un return false; pour terminer ? Tout simplement pour éviter que le lien hypertexte contenu dans l’attribut href du lien soit suivi.
3. Dans un troisième temps, on assigne la méthode déclarée juste avant. A chaque clic de chaque élément, elle sera appelée et surtout, aura accès à tous les paramètres de la classe ;
4. Enfin, après avoir clôturé la classe, on l’exécute dès que le DOM est chargé.

Conclusion et résultat

Pour que ce code soit effectif, il faut bien évidemment l’insérer à même la page ou bien en appelant un script externe (cette méthode est recommandée justement pour dissocier fond et forme). Il faut aussi penser à inclure jQuery dans votre page sans quoi le compilateur JavaScript va tirer la tête.

Pour résumer, je résume la pensée des bonnes pratiques du JavaScript non intrusif, prouvant si besoin en était que JavaScript est loin d’être le Diable :

1. définir sa structure HTML
2. styler le HTML
3. ajouter le JavaScript en surcouche

Ainsi, on ne pénalise personne (y compris en cas d’erreur de programmation), on conserve un code lisible tout en facilitant sa réutilisation dans un autre document.

Read/WriteWeb fait partie de mes sources d’informations quotidiennes. Je suis tombé aujourd’hui sur un article concernant le lancement d’une nouvelle application Facebook permettant de recommander ses extensions favorites : Rock your Firefox.

Ca tombe bien puisque je songeais depuis quelques jours à parler des extensions que j’utilise quotidiennement dans Firefox. Certaines n’intéresseront que les développeurs, d’autres les amateurs de praticité.

Extensions Firefox

Avant toute chose, si jamais vous vous posiez la question où trouver de nouvelles extensions pour Firefox (ou Thunderbird ou d’autres produits Mozilla), rendez-vous sur Mozilla Add-ons.
L’application Facebook Rock your Firefox reprend la liste des extensions et des thèmes en vous proposant de choisir vos préférées et de les partager sur votre profil. C’est un bon moyen pour afficher votre qualité d’utilisation de ce navigateur libre et gratuit.

Extensions « Pratiques »

Adblock

Certains sites sont envahis de publicités qui gênent affreusement la navigation. Plutôt que de se passer d’un contenu intéressant, autant supprimer les nuisances. Adblock est là pour ça. Que ça soit des images,des animations Flash ou bien encore des scripts JavaScript, Adblock liste le contenu des ressources bloquables et permet même de créer des filtres génériques à l’aide du caractère * (wildcard, remplace un à plusieurs caractères, peu importe lesquels).
Attention toutefois, la publicité est vitale pour de nombreux sites donc bloquez avec intelligence.

Google Browser Sync

C’est certainement l’extension que j’installe en premier et pour cause : Google Browser Sync sauvegarde tous mos favoris, cookies et historique de navigation de manière sécurisée.
Je l’utilise sur plusieurs ordinateurs et plusieurs installations de Firefox ce qui me permet de retrouver tous mes favoris peu importe où je me trouve, à partir du moment où il y a une connexion Internet. A utiliser pour vos sauvegardes ou vos besoins de mobilité.

PDF Download

Je n’aime pas que les documents PDF s’ouvrent directement dans un onglet ou une fenêtre de mon navigateur Web. Surtout quand les plus lourds le font planter. PDF Download affiche systématiquement plusieurs choix tels que Afficher dans la page, Ouvrir en tant que PDF ou encore Télécharger directement.

Screengrab!

Screengrab est une solution propre pour effectuer une capture d’écran de sa portion visible, d’une page Web complète ou bien d’une portion d’écran bien définie. Vous l’aurez compris, pas besoin de faire 10 000 captures pour une page étalée en hauteur et pas besoin d’avoir Photoshop ou The Gimp d’installé pour s’en sortir.

Tab Mix Plus

Tab Mix Plus apporte un lot considérable d’options pour mieux régler le comportement de vos onglets. Personnellement je l’utilise pour que toute nouvelle fenêtre se charge obligatoirement dans un nouvel onglet sans me déranger (chargement en arrière-plan). Je profite aussi de son indicateur de chargement allant de 0 à 100%.
En revanche j’évite son système de récupération en cas de plantage, il fonctionne moins bien que celui intégré à Firefox (pour les rares cas où cela s’est produit chez moi).

Extensions « Développeur Web »

ColorZilla

ColorZilla est une simple pipette colorimétrique mais ô combien efficace. Un clic sur un endroit de la page mémorise automatiquement le code couleur associé et permet de l’utiliser sous plusieurs formats dans n’importe quel autre programme dont Photoshop ou votre éditeur CSS favori.

DOM Inspector

C’est la seule extension qui ne se télécharge pas/plus (jusqu’à la version 1.5 c’était encore possible). L’inspecteur DOM s’installe en même temps que Firefox (si vous cochez la case adéquate) et permet comme son nom l’indique, d’inspecter les noeuds de votre document (HTML ou XML), d’en voir leurs attributs, fonctions et ce de manière récursive.
L’analyse en temps réel permet même de voir les modifications apportées à l’arbre DOM par le biais du JavaScript.

Firebug

Firebug est obligatoire lorsqu’on souhaite explorer avec aisance la structure HTML d’un document, exécuter du JavaScript à même la page ou déboguer efficacement son code, ne serait-ce qu’en se rendant compte des temps de chargement des différents fichiers (CSS, JavaScript, Flash etc.).
Ca incite notamment à taper son code directement dans sa console plutôt qu’à le modifier et recharger la page pour déceler des erreurs ou étudier le comportement de la page. On gagne du temps et votre employeur de l’argent.

Firebug : YSlow

YSlow est une extension Firefox mais dédiée à Firebug. Une petite première made in Yahoo! très utile. Cette extension permet de calculer les performances de la page, suggère des optimisations et analyse les différents composants ainsi que leurs caractéristiques (URL, poids, temps de réponse et ETag).
Indispensable pour les phases d’optimisation et de fine tuning comme dirait l’autre.

Operator

Je vous ai déjà parlé de l’intérêt des microformats ? Operator est un outil notifiant des microformats actifs sur les pages que vous visitez. Outre la navigation interactive procurée, Operator signale dans la console de débogage d’éventuelles erreurs (élément absent, malformé ou invalidant un microformat).

TimeStamp Converter

Le nombre 1198533599 vous dit quelque chose ? Avec TimeStamp Converter ça sera le cas. Cette extension convertit les temps Unix en heure humainement compréhensible et vice-versa. Elle le fait également à partir de sélections de texte, évitant ainsi toute saisie pénible.

Web Developer

Le Saint-Graal du développeur Web. Triturer la page, modifier ses mécanismes, débloquer des champs en lecture seule, afficher les champs masqués, topographie de la page, modifier la résolution et afficher l’arborescence en cascade de la page jusqu’à un élément pointé de la souris sont le genre d’outils fournis par Web Developer. Couplée avec Firebug, vous transformez un « simple » navigateur Web en machine de guerre du développement Web propre et efficace.

Voici donc mon constat de départ :

• un client doit pouvoir saisir un seul article s’il le veut
• un client doit pouvoir saisir 10 articles s’il le veut
• un client doit pouvoir saisir 100 articles s’il le veut
• mais celui qui n’en saisit que 10 ne doit pas être gêné par 100 lignes de formulaire à remplir
• un débutant doit pouvoir saisir 100 lignes sans avoir de mode d’emploi sous la main

Donc ma solution a été très simple : je ne mettrai qu’une ligne.

L’idée

Comment faire pour satisfaire tout le monde, les gros donneurs d’ordre comme les petits ?
En faisant en sorte que le formulaire s’adapte à leur besoin. Je voulais donc qu’à chaque ligne complétée s’en ajoute une autre avant de passer à la validation finale. Place au combo JavaScript + DOM = Ajax.

La version dégradée

Une bonne pratique de l’Ajax est de partir du cas particulier : celui où les conditions ne sont pas requises. En clair, une personne qui n’a pas JavaScript d’activé ou pas de JavaScript tout court.
Conclusion, j’ai décidé de générer un tableau en HTML de 10 lignes. 10 est un choix arbitraire, modifiable à tout moment et qui ne doit donc pas gêner la version dynamique en cas de changement (ajout de colonne, ajout de lignes).

La version Ajax

On peut manipuler le document à loisir grâce à JavaScript. Avec un code propre et ordonné c’est d’autant plus simple. Alors voici la logique à mettre en oeuvre :

1. éliminer toutes les lignes dont on ne veut pas et n’en garder qu’une
2. assigner à chaque champ de formulaire de la ligne (input, select, textarea) une fonction de vérification : si tous les éléments de la ligne sont remplis / cochés et qu’il n’y a pas de ligne après, on clonera la ligne
3. cloner la ligne en la vidant de ses valeurs, en modifiant les noms de champ pour les rendre exploitable après coup

Ce qu’on l’on veut étant relativement simple, le code doit l’être également ! Le résultat aussi, la preuve en mouvement.

Au final, 50 lignes de JavaScript ont suffit à transformer un tableau complètement statique en tableau dynamique, s’adaptant à la demande de n’importe quel client. Client qui pourra également utiliser le clavier pour davantage d’efficacité de saisie.

C’est à dire exactement ce que l’on souhaitait au départ.

Le code

Le tableau HTML

<table cellspacing="0" id="ajout_multi_articles">
  <thead>
    <tr>
      <th>Code article</th>
      <th>Quantité</th>
    </tr>
  </thead>
  <tbody>
    <tr class="article">
      <th><input type="text" name="article[1][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[1][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[2][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[2][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[3][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[3][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[4][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[4][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[5][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[5][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[6][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[6][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[7][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[7][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[8][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[8][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[9][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[9][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[10][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[10][qte]" maxlength="5" size="5" /></td>
    </tr>
  </tbody>
</table>

La fonction JavaScript

/**
 * Transforme un tableau multi-lignes en un tableau mono-ligne mais auto-extensible
 * Renomme également les noms de champ en suivant un masque paramétrable ; par défaut article[]
 *
 * @usage articlesMultiRows([{'css_id': ?, 'css_row_class': ?, 'check_inputs': ?}])
 * @param {Object} params Objet contenant (ou pas) les paramètres de contrôle de la classe
 */
function articlesMultiRows(params)
{
  this.row_number = 0;
  /*
   * Extension des paramètres par défaut
   */
  var params = params || {};
  params.css_id = params.css_id || 'ajout_multi_articles';
  params.css_row_class = params.css_row_class || 'article';
  params.check_inputs = params.check_inputs || 'input,select,textarea';
  /**
   * Initialise le tableau de données et accroche les méthodes dynamiques
   */
  this.init = function(){
    //aucun ID détecté, pas la peine de continuer plus loin
    if (!$(params.css_id))
    {
      return false;
    }
    //on récupère les lignes, on enlève la première du tableau et on supprime les autres
    var rows = $(params.css_id).getElements('tr.'+params.css_row_class);
    var row_first = rows.shift();
    rows.removeElements();
    rows = null;
    /*
     * On assigne l'évènement aux champs paramétrés de la ligne
     * On place le focus sur le premier champ
     */
    $ES(params.check_inputs, row_first).addEvent('blur', rowCheck);
    $(row_first).getElement('input').focus();
    row_number = 1;
    /*
     * On écrit un petit message sympathique indiquant le fonctionnement du bazar
     * On le fait via JavaScript car un utilisateur sans JS ne pourrait justement pas suivre les infos
     * Il est placé juste avant le tableau
     */
    new Element('p',{
          'class' : 'message'
          }).setHTML("Dès qu'un code article et une quantité sont saisis ci-dessous, <strong>une nouvelle ligne s'ajoute automatiquement</strong>.<br />Afin d'accélérer votre saisie, <em>utilisez la touche de tabulation de votre clavier</em> pour passer d'un champ à l'autre. Vous verrez, c'est facile et surtout efficace !").injectBefore(params.css_id);
  };
  /**
   * Vérifie si la ligne a entièrement été complétée et le cas échéant, déclenche l'ajout de ligne
   */
  this.rowCheck = function(){
    var row = { 'inputs' : 0, 'completed' : 0, 'dom' : $(this).getParent().getParent() };
    $ES(params.check_inputs, row.dom).each(function(input){
      //Un élément de plus ...
      ++row.inputs;
      //... dont on vérifie s'il est bien complété
      switch (input.getTag())
      {
        case 'input':
        case 'textarea':
          if (input.value.clean())
          {
            ++row.completed;
          }
        break;
        case 'select':
          if (input.selectedIndex >= 0 && input.selectedIndex < input.length)
          {
            ++row.completed;
          }
        break;
      }
    });
    /*
     * Pour insérer une nouvelle ligne, on doit avoir :
     * - autant de champs complétés que de champs existants
     * - aucun élément suivant
     */
    if (row.inputs === row.completed && !row.dom.getNext())
    {
      rowInsert(row.dom);
    }
  };
  /**
   * Insère une nouvelle ligne en clonant la dernière du tableau et la purgeant de ses valeurs
   *
   * @param {Object} row Noeud DOM correspondant à la ligne à cloner
   */
  this.rowInsert = function( row ){
    //On incrémente le nombre de lignes dispo
    //Ce numéro sert à changer les masques de nom de champ
    ++row_number;
    var row_clone = row.clone();
    //Clonage de la ligne
    $ES('input[type=text],input[type=password],input[type=hidden],textarea', row_clone).setProperty('value', '');
    $ES(params.check_inputs, row_clone).removeEvents('blur'); /* obligé car IE5+ clone aussi les évènements ... alors qu'il ne le devrait pas */
    $ES(params.check_inputs, row_clone).addEvent('blur', rowCheck); /* oui oui, IE5+ ne rassignait pas cet évènement comme il fallait malgré ça */
    //On remplace les noms des champs pour que permettre une utilisation des résultats $_POST
    $ES(params.check_inputs, row_clone).each(function(input){
      input.name = input.name.replace(new RegExp('^'+params.css_row_class+'\[[0-9]+\]'), params.css_row_class+'['+row_number+']');
    });
    //Injection de la ligne, une fois tout le travail terminé
    row_clone.injectAfter(row);
    //Nettoyage, le clonage, ça salit
    row_clone = null;
    row = null;
  };
  /*
   * Initialisation de la classe
   */
  this.init();
}
/*
 * Initialisation du tableau multi-lignes avec les options par défaut
 */
window.addEvent('domready', articlesMultiRows);