Alt-I, des informations alternatives - Développement

Adieu Wikio Experts…

Hadrien — Sat, 03 Sep 2011 14:58:00 +0200

Comme vous l'avez peut être lu, Wikio Group a subit quelques changements. Après avoir levé quelques 17 millions d'euros, le groupe a été restructuré et renommé. Nous parlerons désormais du groupe EBuzzing, du nom de la société la plus rentable. OverBlog reste aussi la tête de proue du social media. Et Nomao continue sa route tranquille. Ainsi, Wikio et Wikio Experts disparaissent.

Wikio Experts, c'est le projet sur lequel je travaillais depuis un an et dont j'étais en train de développer la v2 pour Septembre. Évidemment, tout ce travail ne verra jamais le jour puisque le projet a été définitivement abandonné, mais rien ne se perd : j'ai gagné énormément d'expérience et de savoir faire qui sera fort utile pour OverBlog dont je re-rejoins l'équipe dès Lundi.
Le projet Wikio Experts aura été une aventure très enrichissante pendant un an en terme de techniques et de relations humaines. Nous avons écrit le projet from scratch avec des nouvelles technos : Jelix 1.2, YUI 3, Node.js… et nous avons collaboré avec une équipe produit et une armada de community manager. Nous, c'est Yannick, core développeur, et moi, front développeur.

Avant de tourner définitivement la page, j'aimerais vous montrer ce qui aurait du être la version 2.0 de Wikio Experts. Une interface écrite en javascript MVC client side avec YUI3. Comme je l'ai dit plus haut, rien ne se perd, tout cela servira à d'autres projets

Choix du sujet

L'interface de choix de sujets devait afficher deux listes différentes à partir d'un mot clé choisi par l'utilisateur. Pour optimiser les requêtes, je récupérais 100 sujets correspondant au mot clé, et les faisait trier et afficher par le client. Ainsi, pas de requête inutile lors d'un tri par titre, par prix ou un filtre par catégorie. Grâce à l'historique HTML5, le mot clé tapé dans le champ prenait sa place dans le pathname et changeait l'url par /write/search/motclé et permettait de revenir à la précédente recherche grâce au bouton back du browser sans recharger la page.

Édition de sujet

L'interface de rédaction se voulait plus libre dans la structuration des articles tout en imposant un cadre sémantique. Nous avions donc remplacé l'unique éditeur Wysiwyg par un système de sections de plusieurs types que vous auriez pu librement insérer où bon vous semble et ainsi commencer par une section liste pour afficher la liste des ingrédients d'une recette, puis 3 sections texte pour rédiger les différentes parties de la recette pour conclure sur une section images pour afficher un diaporama de photos du dessert en question. Chaque modification de l'article était sauvegardée en localStorage pour permettre une fonction "annuler/rétablir" pour chaque état de l'article (caractère tapé, section supprimée, déplacée, etc).

TwitterTrackback n'est plus

Hadrien — Wed, 06 Jul 2011 10:17:00 +0200

TwitterTrackback était une extension pour Dotclear de ma confection qui permettait de trouver les tweets ayant lié les articles de votre blog et de les ajouter en tant que rétrolien. Cette extension était basée sur le service offert par Backtype.com.

Malheureusement, Backtype a été racheté par Twitter et a coupé ses services sans préavis. L'API est donc dorénavant inaccessible, et mon plugin ne peut donc plus récupérer de nouvelles données. Il est donc totalement inutile. Vous pouvez le désactiver, ou même le supprimer.

On peut quand même espérer que cet arret de soit que temporaire et que Twitter nous propose dans quelques temps, sous sa marque, les mêmes services que nous offrait Backtype.

Cherokee et PHP

Hadrien — Thu, 09 Jun 2011 14:22:00 +0200

Un petit article en guise de note de rappel si j'oublie et qui pourra servir à d'autres, j'en suis sur, pour configurer son serveur Cherokee et PHP afin d'avoir des VHost avec une config PHP différente.

En l'occurence, mon serveur sert à la fois des sites en production et des sites en développement et je voulais simplement que PHP affiche les erreurs et autres notices plutôt que de les logguer, comme il était spécifié dans le php.ini. PHP étant exécuté en tant que CGI avec Cherokee, la solution est de créer une nouvelle source de donnée via une autre instance de PHP qui chargera un autre fichier ini.

Nous allons commencer par créer le nouveau fichier php.ini. Je l'ai mis dans /etc/php/cgi/php.dev.ini, à coté de celui par défaut.

Rendons nous maintenant dans l'admin de Cherokee. Dans la partie Sources, nous allons dupliquer la source "PHP Interpreter" et la renommer "PHP Interpreter DEV". Nous allons changer le port d'écoute par celui que vous voulez. J'ai mis 47991 car celui par défaut était 47990. Puis nous allons modifier la commande de l'interpréteur pour qu'elle appelle php-cgi en chargeant notre php.dev.ini en renseignant le champs par la suivante : /usr/bin/php-cgi -b 127.0.0.1:47991 -c /etc/php/cgi/php.dev.ini.

Nous pouvons maintenant nous rendre dans la partie VServer, choisir le serveur virtuel concerné, allez dans la partie "Behavior", et choisir "Extensions php". Dans l'onglet "Gestionnaires", tout en bas dans la section "Affectation des Sources d'Information", vous allez choisir le serveur d'application "PHP Interpreter DEV". Il va apparaitre au dessus dans le tableau intitulé "Sources d'Information" et dans lequel vous supprimerez la précédente source "PHP Interpreter".

Ne reste plus qu'à sauvegarder et à demander un redémarrage gracieux. Et voilà : Parse error: syntax error, unexpected ';' in /…/script.php on line 27 \o/

Background multiples en CSS 3

Hadrien — Wed, 08 Jun 2011 14:23:00 +0200

L'une des avancées de CSS 3 est la possibilité d'appliquer plusieurs background différents à un même élément. Jusqu'ici, si on voulait avoir par exemple plusieurs lien avec le même background plus une icone propre à chaque lien, il fallait se taper une image différente pour chaque lien ou ajouter un élément vide de type span à qui on appliquerait le background de l'icone. Maintenant, il suffit d'appliquer la texture unique et l'icone. Mais là où ça devient particulièrement intéressant, c'est quand on veut jouer avec des textures colorées.

Prenons une image de texture en png transparent et en niveau de gris :

Cette texture servira de masque à notre élément, puis on appliquera par dessus une couleur qui permettra de colorer l'élément. J'expliquerais éventuellement dans un autre article comment créer la texture avec Photoshop, c'est assez simple en fait.

Grâce aux propriétés suivantes :

.textured {
	background: url('/images/texture_brique.png');
}
.textured.blue {
	background:
		url('/images/texture_brique.png'),
		blue;
}
.textured.red {
	background:
		url('/images/texture_brique.png'),
		red;
}
.textured.green {
	background-image:
		url('/images/texture_brique.png'),
		-webkit-gradient(
			linear,
			left bottom,
			right top,
			color-stop(0, rgb(195,255,173)),
			color-stop(1, rgb(29,143,0))
	);
	background-image:
		url('/images/texture_brique.png'),
		-moz-linear-gradient(
			left bottom,
			rgb(195,255,173) 0%,
			rgb(29,143,0) 100%
	);
}
.textured.yellow {
	background-image:
		url('/images/texture_brique.png'),
		-webkit-gradient(
			linear,
			left bottom,
			right top,
			color-stop(0, rgb(255,248,173)),
			color-stop(1, rgb(143,79,0))
	);
	background-image:
		url('/images/texture_brique.png'),
		-moz-linear-gradient(
			left bottom,
			rgb(255,248,173) 0%,
			rgb(143,79,0) 100%
	);
}
.textured.lsd {
	background-image:
		url('/images/texture_brique.png'),
		-webkit-gradient(
			linear,
			left bottom,
			right top,
			color-stop(0, rgb(255,0,0)),
			color-stop(0.1, rgb(255,153,0)),
			color-stop(0.2, rgb(255,242,0)),
			color-stop(0.3, rgb(68,255,0)),
			color-stop(0.4, rgb(0,255,183)),
			color-stop(0.5, rgb(0,98,255)),
			color-stop(0.6, rgb(60,0,255)),
			color-stop(0.7, rgb(213,0,255)),
			color-stop(0.8, rgb(255,0,102)),
			color-stop(0.9, rgb(0,0,0)),
			color-stop(1, rgb(255,255,255))
	);
	background-image:
		url('/images/texture_brique.png'),
		-moz-linear-gradient(
			left bottom,
			rgb(255,0,0) 0%,
			rgb(255,153,0) 10%,
			rgb(255,242,0) 20%,
			rgb(68,255,0) 30%,
			rgb(0,255,183) 40%,
			rgb(0,98,255) 50%,
			rgb(60,0,255) 60%,
			rgb(213,0,255) 70%,
			rgb(255,0,102) 80%,
			rgb(0,0,0) 90%,
			rgb(255,255,255) 100%
	);
}

…appliquées aux élements suivants :

<ul>
	<li class="textured">Texturé</li>
	<li class="textured blue">Texturé et bleu</li>
	<li class="textured red">Texturé et rouge</li>
	<li class="textured green">Texturé et dégradé vert</li>
	<li class="textured yellow">Texturé et jaune dégradé vert</li>
	<li class="textured lsd">Texturé et LSD</li>
</ul>

Texturé
Texturé et bleu
Texturé et rouge
Texturé et dégradé vert
Texturé et jaune devant, marron derrière
Texturé et LSD

Pour les visiteurs avec de vieux browsers tels que IE ~~cassez vous !~~, voici un aperçu de ce que vous verriez avec un navigateur à jour :

Voilà, avec une texture plus jolie et mieux travaillée, on peut faire des trucs vraiment très intéressants et surtout, gagner du temps quand le client a finalement changé d'avis sur la couleur du bouton

Wikio Experts recrute… un expert !

Hadrien — Mon, 18 Apr 2011 14:37:00 +0200

Développeur front-end expert Javascript recherché !

Le groupe Wikio recrute un développeur web front-end pour travailler sur le projet Wikio Experts. Wikio Experts est une plateforme de rédaction de contenu à la demande proposant une interface avancée permettant à des rédacteurs indépendants de produire, contre rémunération, du contenu publié sur tous les sites du groupe Wikio (Les experts, Overblog, Wikio Shopping, Plurielles…).

Votre mission sera de maintenir et faire évoluer l'outil en intégrant les nouvelles fonctionnalités de l'équipe produit. Vous serez capable de construire des interfaces cohérentes, ergonomiques, accessibles à partir de spécifications produit. Vous saurez apporter un regard critique et constructif à l'application de façon générale. Vous aurez une sensibilité particulière par rapport à la qualité du code et au debuggage.

Techniquement, en tant que développeur expérimenté, vous serez à l'aise avec les langages PHP5, Javascript, HTML5 et CSS3. Nous vous demanderons de maitriser particulièrement Javascript : l'application utilise intensivement le framework Yahoo User Interface v3 (YUI 3). La connaissance du framework PHP Jelix ou d'un autre framework MVC serait un plus.

Le poste sera à pourvoir au sein de l'équipe technologique Toulousaine du groupe Wikio (30 personnes) aux cotés des développeurs et administrateurs systèmes d'OverBlog et Nomao, sous le soleil du sud où le barbecue s'allume dès que les nuages disparaissent.

Je rajoute que vous travailleriez en binôme avec moi. Vous pouvez répondre à cette annonce directement auprès de moi, via RemixJobs ou Alsacreations.

Étrange erreur dans Git

Hadrien — Tue, 22 Feb 2011 09:47:00 +0100

Un petit article sous forme de mémo qui j'espère sera bien indexé afin d'aider ceux qui tombent sur cette erreur étrange dont la solution est introuvable via Google.

De temps en temps, il nous est arrivé à chacun de tomber sur l'erreur suivante lors d'un git push :

$ git push CENTRAL trunk
Pushing to git://*****/home/git/wikioexperts/
Looking up ***** ... done.
Connecting to ***** (port ***) ... **.**.**.** done.
fatal: bad object 827cab5ad47f48c83588b8ff76cf928dae1b18b7
error: pack-objects died with strange error
error: failed to push some refs to 'git://*****/home/git/wikioexperts/'

Sans aucune solution pour s'en sortir. Des recherches sur Google parlent de mettre à jour GIT, de faire des git fsck ou je ne sais quelle autre manipulation inutile. On en vient assez rapidement à recloner le dépot from scratch et à repartir sur des bases saines… quand on a pas de branche locale ou de commit en cours ! Car dans ce cas, c'est le flip assuré.

Et voici donc la commande magique qui sauvera vos longues heures de développement ! Dès l'apparition d'une strange error, il vous suffira de taper la commande suivante :

$ git gc --prune

Lire la doc pour plus d'infos sur git-gc

Sélecteur de média et crop

Hadrien — Sat, 19 Feb 2011 16:20:00 +0100

Nouvelle fonctionnalité pour les rédacteurs de Wikio Experts qui sera disponible dans les prochains jours. Ce nouveau sélecteur de média est bien plus pratique que le précédent, mais surtout, permet dorénavant de recadrer une image afin de mettre le focus sur la partie la plus importante de l'image et ne plus avoir de bandes blanches latérales, le tout afin de donner encore plus de qualité aux articles.

L'onglet de recherche d'image, qui était jusqu'ici limité à FlickR sait rechercher sur plusieurs sources en même temps. Les banques d'images de Fotolia et Wikimedia viennent donc se mélanger aux résultats de FlickR. Il serait possible de rajouter d'autres sources en toute simplicité. Toutes les sources sont interrogées en même temps et leurs résultats sont affichés dès qu'ils arrivent, sans ordre de priorité : le premier arrivé est le premier affiché. Autre amélioration : la pagination est transparente et les résultats suivants sont chargés une fois que l'utilisateur a scrollé jusqu'en bas de la liste.

Coté upload manuel, la progression du transfert est maintenant affiché. On ne le voit pas sur la vidéo, car c'est pas encore au point, mais ça marche en général :p

Et on arrive à la vraie nouveauté : l'interface de crop. Une fois l'image choisie, par la recherche ou après un upload, celle-ci s'affiche dans un cadre correspondant aux dimensions que le site de publication désire. Le rédacteur peut ainsi recadrer sa photo en zoomant et en la déplaçant. L'image est ensuite sauvegardée avec les coordonnées du recadrage et peut être affichée sur le site public en taille réduite ou en taille réelle.

Mais le mieux est de regarder tout ça :

Tout ça a été développé en javascript avec YUI3 sous formes de plusieurs modules chacun autonomes qui pourront être réutilisé ultérieurement dans le reste du projet. Ou d'autres projets… peut être un jour sur OverBlog

Pwned chez Yahoo

Hadrien — Mon, 31 Jan 2011 16:33:00 +0100

Me suis fait pwned par le yuibot :p

16:17:07 Hadrien (hadrien): so, i give Y.bind() in place of function as second param of Y.YSQL ?
16:17:34 brian_endpoint: sounds right
16:18:15 brian_endpoint: Y.bind wraps any function setting 'this' inside of that function, so anywhere that takes a function as an argument will take the return value of Y.bind (since it is a function)
16:18:44 Hadrien (hadrien): doesn't works
16:18:45 yuibot: doesn't work: What do you mean it doesn't work? What happens when you try to run it? What's the output? What's the error message? Saying "it doesn't work" is pointless.
16:18:57 apipkin: lol!
16:19:45 brian_endpoint: you get'em yuibot
16:20:20 apipkin: i think that's the first time i've seen yuibot say that
16:20:32 apipkin: i mean i saw it in the source, but never in the channel
16:21:33 Tew (tew): it got recently triggered on "doesn't w..k in YUI 3.2"
16:21:53 apipkin: hahaha

Une loupe en JS/CSS3

Hadrien — Sun, 19 Dec 2010 17:04:00 +0100

Petit TP du week end : un effet de loupe en Javascript et CSS3 que vous pouvez essayer ici. Vous pouvez changer le style de la loupe grâce au menu à gauche.

J'ai codé ça à l'aide de YUI3. C'est l'occasion de découvrir ensemble les qualités de ce framework magique de Yahoo. Regardons ça d'un peu plus près.

Head

Dans le header de ma page html, je charge deux scripts : http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js et js/magnifier.js.
Le premier est la base de YUI. Cette classe s'occupera de charger toutes les dépendances des scripts utilisés dans la page.
Le second est mon script dans lequel est déclarée une classe qui hérite de Y.Plugin.Base.

Body

Dans le body, le script suivant :

<script type="text/javascript" charset="utf-8">
//<![CDATA[
	YUI().use('magnifier', function(Y) {
		Y.all('img[longdesc]').each(
			function(img)
			{
				img.plug(Y.Magnifier);
			}
		);
	});
//]]>
</script>

On récupère tous les éléments <img /> de la page qui possèdent un attribut longdesc, et pour chacun d'eux, on leur plugue la classe Y.Magnifier, justement décrite dans le fichier js/magnifier.js. Observons la magie de YUI3.
Dans ce bout de script, img n'est pas qu'un simple element. C'est un objet de classe Y.Node construit autour de l'élément <img />. C'est ainsi qu'on peut lui faire exécuter des méthodes, telles que img.one('.selecteur .css p') qui récupère un élément enfant en suivant un sélecteur CSS par exemple, ou lui attacher des plugins, qui sont des classes héritant de Y.Plugin.Base.

C'est donc ce que fait ma classe Y.Magnifier. C'est un plugin qui va rajouter des fonctionnalités à cette pauvre image sans défense. Regardons de quoi elle est faite.

YUI().add('magnifier', function(Y) {
	…
}, '1.0', {
    requires: ['plugin', 'node', 'overlay']
});

Tout va se passer dans la méthode add() de l'objet global YUI(). Le premier paramètre est le nom du module que nous ajoutons à YUI (différent du nom de la classe). Le second paramètre est la code qui sera éxécuté quand ce module sera chargé. Le troisième indique le numéro de version et ne sert pas à grand chose. Le quatrième est nettement plus intéressant car il permet de spécifier les dépendances. Ma classe aura besoin des modules de YUI : plugin, node et overlay et seront chargés automatiquement sans avoir à les inclure dans mon head : la magie du YUI3 Loader.

Regardons maintenant le code éxécuté par notre module magnifier :

Y.Magnifier = function(config)
{
	Y.Magnifier.superclass.constructor.apply(this, arguments);
}
Y.Magnifier.NAME = 'Magnifier';
Y.Magnifier.NS = 'magnifier';
Y.Magnifier.ATTRS = {
	/**
	 * Original picture's url
	 */
	original: {
		valueFn: function()
		{
			…
		}
	},
	/**
	 * Container where is displayed the magnifier
	 */
	container: {
		valueFn: function()
		{
			…
		}
	}
};
Y.extend(Y.Magnifier, Y.Plugin.Base, {
	…
});

La première fonction permet de déclarer le nom de ma classe et de lui faire adopter le même comportement que l'ensemble des classes de YUI : un unique argument sous forme d'objet de paramètres nommés, qui servira pour la gestion des attributs. Je l'ai appellée Y.Magnifier, mais j'aurais aussi pu l'appeler Y.eu.hadrien.Magnifier ou encore Loupe. Cette variable ne sera de toute façon présente que dans la sandbox qui aura demandé à faire usage de ce module (YUI().use('magnifier', function(Y) {})).

Les attributs NAME et NS permettent de nommer notre classe de façon générique. Le plus important pour un plugin est NS car c'est par ce nom que la factory deviendra accessible depuis l'objet hote. Ainsi, dans notre exemple, je pourrais accéder à l'objet Magnifier depuis img.magnifier.
ATTRS est une fonctionnalité particulièrement pratique de YUI. Dans cet objet, nous allons déclarer tous les paramètres que notre classe peut avoir. Nous pouvons pour chacun d'eux spécifier une valeur par défaut, une valeur par défaut calculée par une fonction (c'est le cas ici grâce à valueFn), des méthode de getter, de setter, ou de controle de typage. Tout ces attributs feront partie des arguments que l'ont pourra passer lors de l'instanciation de la classe. Petit exemple :

…
MaClasse.ATTRS = {
	truc: {
		value: 1,
		setter: function(v)
		{
			return v * 10;
		}
	},
	machin: {
		valueFn: function()
		{
			return this.get('truc') + 1;
		}
	},
	bidule: {
		value: null,
		getter: function()
		{
			if (this.get('truc') > 10)
			{
				return true;
			}
			return false;
		}
	},
	unEntier: {
		value: 0,
		setter: function(v)
		{
			if (!Y.Lang.isNumber(v))
			{
				throw 'unEntier must be a Number';
			}
			return v;
		}
	}
}
…
var monObj1 = new MaClasse();
// monObj1.get('truc') === 1;
// monObj1.get('machin') === 2;
// monObj1.get('bidule') === false;
monObj1.set('truc', 20);
// monObj1.get('truc') === 200;
 
var monObj2 = new MaClasse({
	truc: 2,
	machin: 10,
	graaaa: 'test'
});
// monObj2.get('truc') === 20
// monObj2.get('machin') === 10
// monObj2.get('bidule') === true
// monObj2.get('graaaa') === undefined
// monObj2.set('unEntier', 'yo') => Exception

Cette façon de déclarer les propriétés d'une classe est particulièrement puissant et permet de ranger plus clairement son code en séparant les méthodes de formatage des variables du code propre à la classe elle même.

La dernière partie concerne la définitions des méthodes de la classe. Cela se passe à travers la méthode Y.extend qui va se charger de faire hériter notre classe d'une précédente, et d'y ajouter ses propres méthodes. Le premier argument est notre classe. Le second est la classe dont elle hérite. Le troisième est le prototype de notre classe : un objet contenant ses méthodes.
Des méthodes spéciales sont proposées : initializer et destructor. initializer est le constructeur et sera appelée automatiquement lors de l'instanciation de la classe. desctructor sera appelé lors la destruction de l'objet grâce à la méthode destroy() dont notre classe a hérité de Y.Base (dont hérite Y.Plugin.Base).

Il ne nous reste plus qu'à coder les méthodes de notre classe, en sachant que nous accédons toujours aux attributs renseignés dans ATTRS grâce à la méthode get() (monObj.get('maPropery'), que nous les modifions grâce à set() (monObj.set('maProperty', 'maValue')). Et spécifiquement aux classes qui héritent de plugin, l'objet auquel nous avons pluggé notre classe est implicitement mis dans la propriété host. Nous accédons dans notre classe Magnifier à notre Node <img /> grâce à this.get('host') à l'intérieur de la classe, ou maLoupe.get('host') depuis l'instance.

Y.extend(Y.Magnifier, Y.Plugin.Base, {
	initializer: function()
	{
		…
	},
	/**
	 * destruct
	 */
	destructor: function()
	{
		…
	},
	/**
	 * Show and positionate glasse and its background image
	 */
	move: function(x, y)
	{
		…
	},
	/**
	 * hide glasses
	 */
	hide: function(x, y)
	{
		…
	}
});

Concernant la css et la loupe ronde, il s'agit d'une bidouille à l'aide de border-radius qui consiste à spécifier un radius de la même taille que les dimensions du container :

.magnifier {
	width: 200px;
	height: 200px;
	-moz-border-radius: 200px; /* FF1+ */
	-webkit-border-radius: 200px; /* Saf3+, Chrome */
	-khtml-border-radius: 200px; /* Konqueror */
	border-radius: 200px; /* Standard. IE9 */
}

Évidemment, ça marche pas sous IE < 9, mais osef :D

Spotilike

Hadrien — Sat, 18 Dec 2010 12:19:00 +0100

Ça fait maintenant longtemps que j'utilise Spotify pour écouter de la musique. Couplé avec LastFM, Spotify me permet de découvrir plein de nouveaux artistes. En effet, Spotify scrobble la musique que j'écoute et mets ainsi à jour mon profil LastFM qui est toujours capable de me recommander des titres par rapport à mes goûts.

J'utilise l'excellent site Spotibot pour me concocter des playlists automatiquement générées grâce aux recommandations de LastFM. Quand un titre me plait, je l'ajoute à mes favoris en le "starrant" dans Spotify. Mais LastFm n'est pas informé de ce "like" et ne peux pas affiner ses recommandation… quel dommage !

Ben du coup, j'ai codé un outil pour faire ça rapidement. Je vous présente Spotilike ! Ce site web qui reprends rapidement l'interface de Spotify attends que vous lui glissiez une sélection de morceaux et celui-ci se chargera de les liker pour vous sur votre profil LastFM. Ça marche aussi en copiant collant pour ceux qui n'aiment pas le drag'n'drop, mais c'est moins fun.

Si vous êtes utilisateur de Spotify et LastFM, je vous invite à l'essayer !

Un bug fourbe bis

Hadrien — Tue, 16 Nov 2010 12:05:00 +0100

Cette fois, c'est Chrome qui m'a embeté. Un bug assez étrange que je n'arrivais pas à reproduire malgré l'insistance de mes collègues. En effet, j'utilisais la version de dev (v9) alors qu'ils utilisaient la version stable (v7). Une fois ce détail pris en compte, j'ai pu reproduire le bug, mais impossible de comprendre dans quelles circonstance il se produisait. Dans ma page web, un formulaire, des <select /> (menus). Quand on choisit un item d'un des menu, c'est l'item suivant qui se sélectionne comme on peut le voir sur ce screencast :

Le plus étrange, c'est que ça ne se produit que dans cette page et même en ayant désactivé javascript. Et si je copie le code source dans un fichier en local que je charge dans Chrome, plus de problème. Au bord du désespoir, je vais tenter un truc con… virer les CSS de cette page qui buggue. N'importe quoi…

Et bien, si. Ça a corrigé le bug. En ciblant, j'ai fini par trouver la ligne coupable :

.adminform select {
	font-family: 'helvetica neue', helvetica, arial;
}

Si j'enlève cette ligne, plus de problème. C'est la fonte Helvetica Neue qui fait merder le select sous Chrome 7 ! Incroyable !

J'ai donc corrigé ce bug avec une pustule :

CSS :

.adminform select.chromefix {
	font-family: helvetica, arial;
}

JS :

if (parseInt(Y.UA.chrome) === 7)
{
	Y.all('.adminform select').addClass('chromefix');
}

On se rassurera tout de même en constatant que le bug a été corrigé par Google puisqu'il n'était pas présent sur la version 9. Par contre, j'aurais aimé trouvé un ticket correspondant dans le bug tracker, mais je n'ai rien trouvé

Un bug fourbe

Hadrien — Thu, 28 Oct 2010 12:21:00 +0200

Je suis tombé avant-hier sur un bug d'une fourberie incroyable qui m'aura couté une demi journée de fouille et de confusion totale. J'ai fini par y venir à bout, mais quand vous appendrez par quelle façon, vous tomberez des nues autant que moi. Ou alors, c'est que vous n'êtes pas développeurs et vous êtes alors dispensé de la lecture de cet article

Contexte

Wikio-experts, nouveau site de Wikio Group, dont je développe la partie front-end. Le formulaire d'inscription fonctionne évidemment très bien… mais pas sur Chrome. Et uniquement Chrome. Après avoir rempli et validé le formulaire, on revient sur le formulaire, désespérément vierge.

Fouille

Wikio-experts, comme OverBlog, utilise l'excellent framework Jelix qui propose, entre autre chose, une façon sécurisée de traiter les formulaires : jForms. Sans entrer dans les détails, le formulaire et toute ses données : champs, vérification des champs, gestion des erreurs, etc, sont stockés dans un objet PHP en session afin de faciliter les multiples aller retours entre clients et serveurs jusqu'à sa validation finale.

J'ai donc loggué le contenu de ma session juste avant d'envoyer le formulaire au client, et juste avant de traiter sa soumission. Résultat : avant, la session contient bien le jForm "signup", après, le jForm "signup" a disparu mais un jForm "login" est apparu.

Je fais alors le lien avec jAuth, le plugin d'authentification de Jelix sans pour autant comprendre par quel mystère on aurait pu appeler du code lié à jAuth dans ces circonstances. Je commente des parties de code, je désactive des trucs, je log ce qu'il se passe en tout début de script, debug classique quoi…

Et j'en arrive à la conclusion suivante :

Révélations !

Le formulaire ne fonctionne pas car le fichier /favicon.ico n'existe pas.

Ça vous la coupe hein ?

Mais comment qu'c'est possible ???

Chrome a pour habitude, comme nombre de navigateur, de vérifier si un fichier /favicon.ico existe, même si ce n'est pas spécifié dans la page web, au cas où. Sur le serveur, un classique .htaccess pour gérer les réécritures d'url qui, si l'url demandée n'existe pas, renvoit sur index.php?$1. Pour les non dev qui auraient survécu jusqu'ici, si un navigateur demande /favicon.ico et que ce fichier n'existe pas sur le serveur, le serveur renverra la même chose que si le navigateur avait demandé à accéder à /index.php?/favicon.ico.

Or, ce contrôleur n'existe évidemment pas dans mon application qui redirige automatiquement vers un contrôleur affichant une erreur 404. Et c'est là que se situait l'erreur. Mon application n'étant constitué à 99% que de pages nécessitant une authentification, je n'avais jamais remarqué que j'avais oublié de spécifier que ce contrôleur ne nécessitait pas d'auth, qui alors, redirigeait vers le formulaire de login, lequel effectuait évidemment un clean de session et donc la perte de mon jForm d'inscription.

J'ai donc ajouté un joli favicon.ico et les utilisateurs Chrome ont pu enfin s'inscrire -_-"

La question qui reste encore en suspend est : "pourquoi seul Chrome a-t-il été impacté par ce bug ?"
Je suppose que les autres browsers, qui ne s'embêtent pas à tenter eux aussi de chopper le favicon.ico, s'arrêtent immédiatement si la première réponse du serveur n'est pas un 200… Si quelqu'un peut apporter une réponse ?

Cherokee 1 - Apache 0

Hadrien — Fri, 10 Sep 2010 13:40:00 +0200

Comme vous le savez, j'aime bien essayer des trucs nouveaux et un peu différents. Quand j'ai appris qu'un nouveau serveur web aussi complet que Apache était disponible, ça a commencé à me titiller. Quand on m'a dit qu'il était plus rapide et puissant que Apache, j'ai décidé de l'essayer. Et quand j'ai vu la simplicité avec laquelle on l'administre, je l'ai adopté !

Cherokee sera donc celui qui, dorénavant, vous servira les pages de ce blog et de tous mes autres sites. Il fera ça aussi rapidement et avec autant de plaisir, si ce n'est plus, que le précédent serveur à l'unique plume, licencié comme un malpropre à quelques années de la retraite, bien fait pour lui.
Ce que ça change pour vous, visiteurs, rien ! Sauf si vous aimez surfer en ayant toujours un œil sur les headers :

Si j'avais eu dix fois plus de traffic, vous auriez surement ressenti une accélération du transfert des pages. Par contre, de mon coté, ça change tout. Je passe de ceci :

sudo vi /etc/apache2/sites-available/default

à ça :

http://localhost:9090

Une interface web sécurisée qui permet de configurer les moindres parties de votre serveur web en clickodrome. Ça change des multiples fichiers de configuration textes à éditer en lignes de commande et ça permet d'avoir une liste de VHost beaucoup plus claire.

La migration de mes vhost apache a été très facile grâce aux assistants inclus dans cette interface d'admin. Quand on ajoute un nouveau VHost, on peut choisir un modèle parmi une liste déjà bien remplie pour définir un nombre de règles necessaire pour faire fonctionner l'application servie par ce VHost. Par exemple, on pourra choisir un Wordpress qui créera un VHost avec la configuration de PHP en fastCGI et les règles de réécritures necessaires :

Par contre, nul wizard pour un Dotclear. Il a fallu donc que je mette un peu les mains dans le cambouis et que je comprenne le système de behaviors qui remplace les règles de configuration dans Apache. Après quelques tatonnage, j'ai fini par réussir à configurer les règles de réécriture et les redirections que j'avais définies dans le .htaccess de Alt-I.

Et voilà donc une dizaine de sites web migrés en une petite soirée sans aucun accroc. Cherokee, essayez le !

Levenshtein

Hadrien — Mon, 16 Aug 2010 10:28:00 +0200

Je cherchais un algo en javascript pour connaitre le pourcentage de différence entre deux chaines de caractères afin d'alerter l'utilisateur s'il modifie trop un texte de départ. Je ne savais pas trop comment m'y prendre jusqu'à ce que mon Maitre PHP me parle de la fonction php levenshtein dont le but est de "calculer la distance Levenshtein entre deux chaînes". La distance Levenshtein ?…

La distance de Levenshtein mesure la similarité entre deux chaînes de caractères. Elle est égale au nombre minimal de caractères qu'il faut supprimer, insérer ou remplacer pour passer d’une chaîne à l’autre.
Son nom provient de Vladimir Levenshtein qui l'a définie en 1965. Elle est aussi connue sous le nom de « distance d'édition » ou encore de « déformation dynamique temporelle », notamment en reconnaissance vocale.
Cette distance est d'autant plus grande que le nombre de différences entre les deux chaînes est grand. La distance de Levenshtein peut être considérée comme une généralisation de la distance de Hamming. On peut montrer en particulier que la distance de Hamming est un majorant de la distance de Levenshtein.

Wikipédia

Ah ah ! C'est exactement ce dont j'avais besoin ! Et hop, en voici une version javascript !

Technique anti spam

Hadrien — Fri, 16 Jul 2010 08:51:00 +0200

Je viens de mettre en place une nouvelle procédure anti spam que je trouve assez rigolote. De plus en plus de blackhat SEO spamment les commentaires des blogs afin de placer les liens de leurs clients et augmenter leur référencement. La solution de facilité est de simplement rajouter l'attribut "nofollow" sur les liens des commentaires. Cet attribut permet de demander à Google de ne pas suivre et indexer le lien correspondant. Le problème, c'est que j'ai aussi des commentaires pertinents qui méritent d'avoir un lien en récompense de leur contribution. Alors que faire ?

Dotclear dispose d'un moteur anti spam particulièrement bon qui sait détecter quasiment tous les commentaires inutiles. Ils sont en général mis de coté en attente de validation manuelle de ma part. La plupart du temps, je les supprime simplement. Puis m'est venu une idée sadique. Dorénavant, je publie le commentaire de spam, mais après avoir modifié le lien par une de mes urls. Exemple par ici. Ainsi, je fais travailler les spammeurs pour moi. Pratique non ?

Je vais réfléchir à un moyen d'automatiser le processus à travers une extension Dotclear. Si l'idée vous plait, n'hésitez pas à mettre votre site en lien de votre commentaire

Mise à jour TwitterPost 1.5

Hadrien — Fri, 09 Jul 2010 20:42:00 +0200

Chose promie, chose due. Voici la mise à jour de TwitterPost qui permet de choisir sa propre API pour raccourcir ses urls. Alti.pro est toujours l'API par défaut, mais vous pouvez très bien choisir n'importe quelle autre, celle de is.gd par exemple : http://is.gd/api.php?longurl=http://www.example.com

Ça se télécharge ici ou là.

Mise à jour de plugins

Hadrien — Mon, 05 Jul 2010 13:58:00 +0200

Les extensions pour Dotclear Pixearch, TwitterPost et TwitterTrackback ont (enfin) été mises à jour pour être compatibles avec Dotclear 2.2. Elles n'apportent aucune nouvelle fonctionnalité mais sont nécessaire si vous mettez à jour votre blog en 2.2.

TwitterPost apporte un léger changement temporaire : en mettant à jour l'extension, je me suis rendu compte que tr.im avait fermé son service. J'ai donc du le remplacer. Dans l'urgence, j'ai configuré mon raccourcisseur alti.pro en attendant que vous puissiez configurer votre propre raccourcisseur. Je proposerais de configurer uniquement un service basé sur bilbolink avec un service simple par défaut du genre de is.gd.

Et si ça vous va pas, vous pouvez toujours modifier TwitterPost.class.php vous même

Quote sur #yui

Hadrien — Thu, 01 Jul 2010 15:44:00 +0200

Une petite citation que je viens d'intercepter sur le channel IRC #yui où l'on cause de Yahoo User Interface. Ça parlera pas à grand monde, mais moi ça m'a bien fait marrer

JohnnyL ~excellent@xxx a rejoint le salon #yui. (15:34:44)
JohnnyL (johnnyl): what does YUI have that jQuery doesn't?
shabbs: balls
hadrien: \o/

YUI : 1 - Troll : 0

Evénements cross sand box avec YUI3

Hadrien — Tue, 29 Jun 2010 12:35:00 +0200

Petite astuce pour YUI3 que je viens de trouver après maintes recherches et tentatives. Le gros problème des sandbox, c'est qu'il est difficile de communiquer de l'une à l'autre. J'ai été confronté au problème suivant : dans une partie de mon code, je crée un nouvel objet à partir d'une de mes classe. Puis, ailleurs, je désires utiliser cet objet. Mais je suis, forcément, dans une nouvelle sandbox. Comment accéder à cet objet ?

Présentation de la situation

YUI().use('maClasse', function(Y) {
	var objet = new MaClasse({label: 'truc'});
});
//[…]
 
alert(objet.get('label'));

Résultat, l'alerte affiche "undefined" car objet n'existe pas dans cette sandbox.

Première tentative, la variable globale

J'ai d'abord naïvement pensé qu'en mettant mon objet en tant que variable globale, je pourrais y accéder dans ma seconde sandbox :

var objet = null;
YUI().use('maClasse', function(Y) {
	objet = new MaClasse({label: 'truc'});
});
//[…]
 
alert(objet.get('label'));

Erreur, car objet est bien renseigné dans le scope global, mais le code passé à YUI().use n'est exécuté que quand tout les scripts sont chargés de façon asynchrone. De ce fait, quand le parser arrive à la fonction alert(), le code de YUI n'a pas encore été exécuté et window.objet vaut toujours null.

Utilisons les événements personnalisés !!

On se rapproche du but en s'orientant vers les custom events de YUI. YUI3 propose une gestion des évenements perso vraiment très pratique et très simple. On peut faire lacher un évenement de n'importe quel type par tout les objets encapsulés dans YUI. Et on les écoute aussi facilement. La preuve par l'exemple :

YUI().use('event', function(Y) {
	objet = new MaClasse({label: 'truc'});
 
	// Écoute de l'évenement "MonEvent:estLance"
	Y.on(
		"MonEvent:estLance",
		function(arg)
		{
			alert(arg);
		}
	);
 
	// On met un timer pour lancer l'évenement plus tard :
	setTimeout(
		function()
		{
			Y.fire("MonEvent:estLance", 'kikoo');
		},
		5000
	);
});

Ainsi, 5 secondes après le chargement de la page, une alerte m'affichera "kikoo". J'ai donc tenté cette solution par :

YUI().use('event', function(Y) {
	Y.on(
		"MonEvent:estLance",
		function(obj)
		{
			alert(obj);
		}
	);
});
 
YUI().use('event', 'maClasse', function(Y) {
	var objet = new MaClasse({label: 'truc'});
	Y.fire(
		"MonEvent:estLance",
		objet
	);
});

Ça ne fonctionne pas, car les event sont limité au scope de la sandbox… Ah mais ! C'est agaçant !

Évenements globaux

Après pas mal de recherches et de bidouilles, j'ai fini par comprendre le passage de la doc où il est expliqué le fonctionnement des évenements globaux. Et voici donc enfin la solution finale :

YUI().use('event', function(Y) {
	Y.Global.on(
		"MonEvent:estLance",
		function(obj)
		{
			alert(obj);
		}
	);
});
 
YUI().use('event', 'maClasse', function(Y) {
	var objet = new MaClasse({label: 'truc'});
	Y.Global.fire(
		"MonEvent:estLance",
		objet
	);
});

Et voilà comment je peux interférer sur des objets construits dans des sandbox différentes dès leur création : faites leur cracher des événements globaux !

YUI3 est un peu compliqué à cause de ces bac à sables hermétiques, mais c'est réellement très puissant ! Bon courage !

Astuce sélecteurs CSS3

Hadrien — Sat, 22 May 2010 12:44:00 +0200

Une petite astuce en CSS3 qui permet de sélectionner des lien selon le contenu de leur url. Imaginons que nous ayons une liste de liens vers des documents divers auquel on veut associer une icône relative à son type : des PDF, des ODF, des PPT, des MP4, etc avec chacun une icone indiquant le type de fichier. Classiquement, on prévoira, coté serveur, de tester le type de fichier lors de la création de la liste et de rajouter une classe indiquant le type. Mais si le développeur a oublié, et c'est encore possible grâce aux sélecteurs CSS3.

.malistededocs a[href$=".pdf"] {
	background: url('pdf.png');
}
.malistededocs a[href$=".zip"] {
	background: url('zip.png');
}
.malistededocs a[href$=".ppt"] {
	background: url('ppt.png');
}
.malistededocs a[href$=".mp4"],
.malistededocs a[href$=".m4v"],
.malistededocs a[href$=".avi"],
.malistededocs a[href$=".mkv"],
.malistededocs a[href$=".mov"] {
	background: url('video.ppt');
}

Le sélecteur [attribut$=valeur] permet de chercher les éléments dont l'attribut indiqué se termine par la valeur. On se réfèrera à la doc du W3C pour découvrir les autres types de sélecteurs :

[att] : trouve les éléments qui possèdent l'attribut att,
[att=val] : trouve les éléments qui possèdent l'attribut att et qui vaut exactement val,
[att~=val] : val est une liste de mot séparés par des espaces. Ce sélecteur trouve les éléments qui possèdent l'attribut att et dont la valeur est exactement l'une de celles de la liste val,
[att|=val] : trouve les éléments qui possèdent l'attribut att et qui vaut exactement val ou val-. Utile pour les attributs de langue où att retrouvera "en", mais aussi "en-EN" ou "en-US",
[att^=val] : trouve les éléments dont la valeur de att commence par val
[att$=val] : trouve les éléments dont la valeur de att finit par val
[att*=val] : trouve les éléments dont la valeur de att contient val