Sorcellerie Web - Formules

Fichiers de configuration

J.Ducastel — Fri, 07 Dec 2007 16:27:00 +0100

Lorsqu'on développe une application ou un composant de manière à pouvoir le réutiliser, il est nécessaire de pouvoir définir une configuration d'environnement de manière séparée du code. Cela peut être fait par inclusion d'un fichier se contentant de déclarer un suite de variables ou de constantes dans le language de l'application (c'est le cas des fichiers urls.py et settings.py de Django). Mais il est généralement préférable d'utiliser un format qui puisse être lu et modifié par un non-programmeur.

Le format INI

A la fois très simple et très largement utilisé, le format INI permet de définir des paires clefs/valeur, éventuellement organisées par sections. Il est suffisamment intuitif pour être modifié par quelqu'un qui n'en connait pas la syntaxe.

C'est le format de configuration de PHP, et une fonction native permet de lire un tel fichier et de récupérer directement les données stockées dans un tableau associatif, à deux dimensions en activant le support des sections.

Python dispose du module ConfigParser, qui supporte une syntaxe un peu plus évoluée.

Le format XML

Le patriarche des formats de structuration et d'échange de données. Plus qu'un format de fichier, XML est une grammaire dont dérivent des zillions de syntaxes, qu'elles soient standardisées ou propriétaires. Très largement utilisé pour la configuration d'application, ce n'est pourtant pas forcément des plus simples à éditer. De plus, il est généralement assez lourd à manipuler en programmation, ce qui n'est pas terrible en termes de performance. Surtout dans le cadre d'une application web, si celle-ci doit lire le fichier à chaque requete...

Le format YAML

Si vous avez besoin de données de configuration plus élaborées, notamment s'il vous faut plus de deux niveaux de données ou des textes sur plusieurs lignes, il y a le format YAML. Celui-ci se veut une alternative à XML, qui soit à la fois plus concise (donc plus légère à stocker) et plus lisible pour un être humain. Ce qui en fait un candidat idéal pour des fichiers de configuration. Comme en Python, l'indentation y joue un rôle clef.

Contrairement à INI, il n'est pas supporté nativement par PHP, mais la librairie Spyc permet de convertir ces fichiers en tableaux de données et inversement.

Python dispose de la librairie PyYaml.

Détecter les préférences du navigateur

J.Ducastel — Mon, 03 Dec 2007 19:34:00 +0100

Il bien plus agréable pour l'internaute de disposer directement du contenu qui le concerne (langue, navigateur, OS...) plutot que de devoir fouiller le site web pour l'obtenir. Cela améliore son expérience de navigation, et donc l'attrait pour votre site.

Beaucoup d'entre nous se sont habitués à chercher, en arrivant sur un site, s'il n'en existait pas une version dans sa propre langue. On cherche alors où sont les petits drapeaux, les micro-liens avec code de langue sur deux caractères, etc. Et beaucoup d'utilisateurs ne les trouvent pas, et quittent le site immédiatement, faute de pratiquer la langue affichée. Pourtant, quand le contenu d'un site est traduit, le plus gros du travail est fait; pourquoi ne pas l'afficher directement dans la langue spécifiée par l'internaute pour son navigateur ?

Ceci est également valable pour d'autres préférences. La page de téléchargement de Firefox par exemple est non seulement traduite dans la langue de l'internaute, mais la version proposée au téléchargement est celle correspondant à son système d'exploitation. Tout aussi efficace, la page de bookmarklets pour Del.icio.us est automatiquement adaptée au navigateur en cours. Ceci est possible grâce aux données de préférences et d'environnement utilisateur transmises par le navigateur au serveur web via les en-têtes HTTP.

Outre les préférences de langue, et les particularités eventuelles de l'environnement système d'exploitation/navigateur, il peut être souhaitable de détecter le support de javascript, surtout pour les sites utilisant ajax pour certaines de leurs fonctionnalités. Tout comme le support de flash. La liste est longue, car les possibilités d'HTTP sont encore largement sous-utilisées.

Bien evidemment, il faut garder à l'esprit que ces données ne sont pas fiables, et ne doivent être utilisées que pour définir la version du contenu par défaut, et toujours permettre à l'utilisateur de modifier ces réglages si possible via des liens et des contrôles manuels.

Pour ce qui est de PHP, vous pouvez utiliser un de mes bouts de script ( getting browser language settings with php), ou la classe phpsniff qui semble bien plus complete (pas encore utilisée, je viens de tomber dessus).

Optimisation PHP : les chaines de caractères

J.Ducastel — Fri, 30 Nov 2007 12:16:00 +0100

Voici une petite astuce concernant les chaînes de caractères pour optimiser vos scripts PHP, que certains découvriront peut-être. Prenez l'habitude d'utiliser les apostrophes (simple quotes) plutôt que les guillemets (double quotes). Ceci parce que les chaines entre guillemets peuvent contenir des variables qui seront évalués à l'éxécution. Par exemple :

$uper_riche='Picsou';

// ceci affiche : Bonjour, je suis Picsou
echo "Bonjour, je suis $uper_riche";

// alors que ceci affiche : Bonjour, je suis $uper_riche
echo 'Bonjour, je suis $uper_riche';

// on peut utiliser les accolades pour acceder à des noms complexes
$Picsou->neveux=array('Riri','Fifi','Loulou');
// ceci affichera : Le second neveu de Picsou est Fifi, il en a trois
echo "Le second neveu de Picsou est {$Picsou->neveux[1]}, il en a trois";

Ce qui double son travail, car le code est d'abord interprété une première fois à la lecture du script et découpé en blocs sémantiques (chunks) : variables, chaines, instructions etc. Une chaine entre apasotrophes sera alors conservée telle quelle jusqu'à la fin de l'execution du script, alors qu'une chaine entre guillemets devra être interprétée à chaque évaluation. Par conséquent, il vaut mieux les éviter autant que possible. Par exemple :

/**
* on construit une chaine de caracteres dynamiques en separant bien les chunks variables des blocs statiques
*/
$html='<p>Bonjour, je suis '.$uper_riche.'</p>';

/**
* on ne force pas l'evaluation du parametre passe a une fonction
*/
echo 'Qui est le plus riche ? '.strtoupper('picsou !');

/**
* idem pour les clefs d'un tableau associatif
*/
echo $personnages['picsou']['neveux'][1];

C'est le genre de petites choses qui peuvent paraitre évidentes une fois devenues une habitude, mais qui ensuite évitent de plomber vos scripts inutilement.

Afficher son adresse email, mais la protéger du spam

J.Ducastel — Thu, 08 Nov 2007 10:05:00 +0100

Comment donner son adresse de courriel à ses visiteurs, tout en la cachant aux yeux des moteurs cherchant des adresses à spammer ? Un usage courant est d'injecter des blocs parasites dans l'adresse, tels que identifiant[pas-de-spam-svp]@[enlevez-ceci]domaine.net. Ce qui n'est pas très lisible. Ma parade, c'est de masquer ces parasites avec une simple règle CSS. Ce qui donne :

HTML :
<a href="mailto:identifiant@[enlevez-ceci]domaine.net">
    identifiant@<span class="junk">[enlevez-ceci]</span>domaine.net
</a>

CSS :
.junk {
    display: none;
}

Et affichera : identifiant@domaine.net. Il faudra toujours supprimer à la main les blocs parasites en cas de clic sur le lien ou de copier-coller, mais l'adresse sera plus facile à noter :)

Some CSS-related javascript utility functions

J.Ducastel — Fri, 16 Sep 2005 20:04:00 +0200

Hi folks. Nothing very bright or revolutionary, but here is a tiny library to play with CSS and javascript. More elaborate tricks to come. Hope it helps.

bool hasClass(DOM obj, string cName)
bool hasClasses(DOM obj, array classes)
bool addClass(DOM obj, string cName)
bool removeClass(DOM obj, string cName)
bool swapClasses(DOM obj, string class1, string class2)
bool switchClass(DOM obj, string to, string from)
array getElementsByClassName(string className, [DOM container],[string tag])

/* CSS-related javascript functions by Fred Bird http://fredbird.org
License : Public Domain file version 16/09/2005 09:30:45 */ /* has the DOM
object a certain class ? obj = DOM object, cName = a class name */ function
hasClass(obj,cName) { return new RegExp('\\b'+cName+'\\b').test(obj.className);
} /* has the DOM object a set of classes ? obj = DOM object, classes=array of
class names */ function hasClasses(obj,classes) { for (f=0;
f<classes.length; f++) { if (!hasClass(obj,classes[i])) return false; }
return true; } /* add a class to a DOM object if necessary obj = DOM object,
cName = a class name */ function addClass(obj,cName) { if
(!hasClass(obj,cName)) { obj.className+=obj.className?' '+cName:cName; } return
true; } /* removes a class from a DOM object obj = DOM object, cName = a class
name */ function removeClass(obj,cName) { if (!hasClass(obj,cName)) return
false; var rep=obj.className.match(' '+cName)?' '+cName:cName;
obj.className=obj.className.replace(rep,''); return true; } /* swap two classes
for a DOM object, whatever provided order */ function
swapClasses(obj,class1,class2) { if (hasClass(obj,class1)) {
removeClass(obj,class1); addClass(obj,class2); return true; } if
(hasClass(obj,class2)) { removeClass(obj,class2); addClass(obj,class1); return
true; } return false; } /* sets class 'to' to the DOM object obj, removes class
'from' if necessary */ function switchClass(obj,to,from) { if
(hasClass(obj,from)) removeClass(obj,from); addClass(obj,to); return true; } /*
returns an array of DOM objects having the provided class name within object
'container' and with tag name 'tag' some code from
http://www.webmasterworld.com/forum91/1757.htm (unbugged) */ function
getElementsByClassName(className,container,tag) { // default container to
document container=container||document; // default tag to * tag=tag||'*'; //
listing container descendants var all =
container.all||container.getElementsByTagName(tag); var found=new Array(); //
searching for targets for (f=0; f<all.length; f++) { var el=all[f]; if
(hasClass(all[f],className)) { found.push(all[f]); } } return found; }

Getting browser language settings with PHP

J.Ducastel — Tue, 13 Sep 2005 20:02:00 +0200

So, you run a multilingual web site with PHP and you want to serve the reader's choice language if available. No problem, HTTP carries user's browser language settings within Accept-Language instruction, you just have to parse it. Here is a sample function.

function parseHttpAcceptLanguage($str=NULL) {
        // getting http instruction if not provided
        $str=$str?$str:$_SERVER['HTTP_ACCEPT_LANGUAGE'];
        // exploding accepted languages 
        $langs=explode(',',$str);
        // creating output list
        $accepted=array();
        foreach ($langs as $lang) {
                // parsing language preference instructions
                // 2_digit_code[-longer_code][;q=coefficient]
                ereg('([a-z]{1,2})(-([a-z0-9]+))?(;q=([0-9\.]+))?',$lang,$found);
                // 2 digit lang code
                $code=$found[1];
                // lang code complement
                $morecode=$found[3];
                // full lang code
                $fullcode=$morecode?$code.'-'.$morecode:$code;
                // coefficient
                $coef=sprintf('%3.1f',$found[5]?$found[5]:'1');
                // for sorting by coefficient
                $key=$coef.'-'.$code;
                // adding 
                $accepted[$key]=array('code'=>$code,'coef'=>$coef,'morecode'=>$morecode,'fullcode'=>$fullcode);
        }
        // sorting the list by coefficient desc
        krsort($accepted);
        return $accepted;
}

This function will parse a given HTTP Accepted language instruction (or retrieve it from $_SERVER if not provided) and will return a sorted array. For example, it will parse fr;en-us;q=0.8 to :

[1.0-fr]=>([code]=>'fr','morecode'=>'fr',[coef]=>'1.0',[fullcode]=>'fr')
,[0.8-en]=>([code]=>'en','morecode'=>'us',[coef]=>'0.8',[fullcode]=>'en-us')

The next thing will be to find and serve the first available version amongst user's accepted languages. Easy.

Faire planter Internet Explorer avec une feuille de style

J.Ducastel — Wed, 17 Nov 2004 15:48:00 +0100

Au cours d'un développement professionnel, je me suis aperçu qu'il était possible de faire crasher IE 6 avec une simple feuille de style. En l'occurence, il s'agissait de la conjonction suivante :

HTML : <p><a href="...">un lien</a></p>

CSS : p:first-letter { font-size: 200%; float: left; margin-right: 0.3em;
}

Il semblerait que le fait que la première lettre du paragraphe soit contenue dans un lien, voire une balise fille (je n'ai pas essayé), suffise à provoquer une erreur fatale dans le moteur de rendu d'Internet Explorer 6...

Une raison de plus de passer à Firefox !