Sass et Compass éveillent de plus en plus la curiosité des intégrateurs Web et développeurs front-end français. Malheureusement je ne peux que constater une certaine réticence de leur part à sauter le pas.
La faute en incombe généralement à une frayeur démesurée de la ligne de commande et, il est vrai, à un manque de ressources francophones qui expliquent comment intégrer l’outil dans son processus métier.

Je vous propose ici la méthode de travail générique que j’utilise depuis maintenant 2 ans dans mon environnement professionnel. Je précise bien générique parce que certains projetss peuvent imposer une organisation différente.

Crédits : Post-it Marilyn par Peter Hellberg sous licence CC BY-SA 2.0

Initialiser un nouveau projet Compass

Mon projet est généralement contenu dans un projet plus conséquent, comme par exemple un thème Drupal pour lequel j’ai déjà créé son répertoire. Il me suffit ainsi d’initialiser un nouveau projet Compass, chose aisée grâce à sa commande init :

$ compass init --prepare --sass-dir sass --css-dir css --images-dir img --relative-assets
directory css/ 
directory sass/ 
   create config.rb

Puisque je ne souhaite pas que Compass me génère de feuilles de styles par défaut, j’utilise ici l’option --prepare qui limitera son action à créer :

• le fichier de configuration du projet config.rb ;
• le répertoires accueillant les sources SCSS nommé ici sass ;
• le dossier de destination des feuilles de styles générées css.

Cela fait, j’édite le fichier de configuration pour paramétrer les 2 environnements de déployement (development et production, sachant que development est celui par défaut) et pour empêcher Compass d’ajouter un éventuel cache buster :

if environment == :production
  output_style = :compressed
else
  output_style = :expanded
  sass_options = { :debug_info => true }
end

# Désactiver l'ajout du cache buster sur les images appelées via la fonction image-url().
asset_cache_buster :none

Note :
La ligne qui contient :debug_info me permet d’utiliser le plugin pour Firefox FireSass.

Ok, mon projet Compass est presque prêt. Il ne me manque plus qu’à créer quelques répertoires et fichiers que j’utilise habituellement :

$ mkdir -p sass/partials/{reset,ui}
$ touch sass/{style,reset,partials/_{base,reset,ui}}.scss

Mon arborescence finale :

$ tree -F
.
├── config.rb
├── css/
└── sass/
    ├── partials/
    │   ├── _base.scss
    │   ├── _reset.scss
    │   ├── _ui.scss
    │   ├── reset/
    │   └── ui/
    ├── reset.scss
    └── style.scss

Méthodologie de travail avec Compass

Après toute modification qui nécessite une vérification du résultat de ma part¹, je lance une compilation des sources Sass par une simple commande :

$ compass compile

Comme aucun fichier de configuration n’est précisé, la commande compile lit le fichier de configuration config.rb (ou compass.rb).

Lorsque mon fichier de configuration n’est pas standard, je précise son emplacement avec l’argument -c : $ compass compile -c sass/theme.rb

Il est aussi possible de ne compiler qu’une seule feuille de styles, en précisant simplement son équivalent Sass :

$ compass compile sass/styles.scss

Cette opération pouvant être répétitive, Compass offre une commande watch qui possède les même options que sa sœur compile mais qui se charge de surveiller mon projet et lancer la compilation dès que cela est nécessaire :

$ compass watch

Un petit Ctrl+C stoppera la surveillance.

Partager son projet Compass

Jusqu’ici je ne travaillai qu’en local. Il me faut maintenant pousser mon travail sur le dépôt centralisé pour permettre à mes collègues d’en bénéficier.
Oui, je pourrai pousser le travail en l’état, mais non je ne le fait pas. Puisque ces mêmes ressources sont destinée à être déployées sur le serveur de production je relance une compilation en précisant l’environnement production :

$ compass compile -e production --force

L’argument --force m’assure que toutes les ressources seront bien compilées.

J’obtiens ainsi des feuilles de styles compressées, idéales pour les webperf et décourageantes pour la personne qui souhaiterait directement les éditer en se cognant du projet Compass parce que ça l’emmerde de s’y mettre²

Webperf un jour, webperf toujours !

Dernière opération avant de pousser mon travail : j’optimise les sprites modifiés depuis la dernière fois. Évoluant sous MacOSX, j’utilise l’excellent ImageOptim. Sous Linux vous pouvez vous tourner vers son équivalent Trimage et PNGGauntlet sous Windows.

Au secours, j’ai un conflit !

Après un svn up ou git pull il peut arriver un conflit . Il y a 98% de chances pour qu’il porte sur un fichier généré par Compass, à savoir une feuille de styles ou une image de sprite.
Pas de problème, j’accepte la version entrante ou supprime ma version locale. Je peux ainsi visualiser dans un navigateur la dernière version récupérée et dans tous les cas il me suffit de lancer une compilation pour que mon travail soit à nouveau pris en compte (puisque les modifications entrantes des sources Sass ont été correctement fusionnées).

En résumé

Finalement, une fois le projet initialisé, travailler avec Compass revient à exécuter un ridicule jeux de commandes :

$ compass watch
CTRL+C
$ compass compile -e production --force
$ open -a "ImageOptim" img/*.png

Rien de sorcier, n’est-ce pas ?

Bonus de Compass

Il peut arriver que je souhaite supprimer tout fichier généré par Compass : fichiers de cache, sprites et feuilles de styles. Rien de plus simple à l’aide de la commande clean :

$ compass clean

Parce que les statistiques sont toujours révélatrices de points forts ou faiblesses d’un projet :

$ compass stats

Notes :
N’oubliez pas de préciser le fichier de configuration s’il n’est pas standard.

Continuez votre lecture sur des sujets similaires

• Compass : supprimer le cache buster des sprites
• Instances multiples de Compass avec Ruby Version Manager (rvm)
• Git : des alias pour aller plus vite
• Drupal 6 : utiliser une iframe comme contenu de page
• Optimiser le chargement des AdSense

Le système de theming de Drupal 7 est un gâchis. Jacine Luisi, co-auteure du livre The Definitive Guide to Drupal 7, résume dans son article Let’s Do Something About Drupal’s Theme System le fond de ma pensée. Au lieu de retranscrire son article ici même, je vais plutôt vous présenter de quoi il retourne.

Crédits : Kaos - Chaos paiting (ii) par Kristina Alexanderson sous licence CC BY-NC-SA 2.0

Pourquoi le theming Drupal est-il si compliqué ?

Depuis que je travaille sur Drupal 7, il ne se passe pas une semaine sans que j’ai à pester contre son système de thème. Comme le souligne Jacine, les nombreux points d’entrées et la multiplicité de niveaux d’interactions font qu’il est souvent difficile de trouver où intervenir.

Quel preprocess appeler ? Celui-ci ?
Perdu. Testons dans un autre ou dans un hook_alter.
Toujours rien. Peut-être dans un hook_process ?
Finalement, il me faut surcharger un hook_theme parce que je ne peux agir sur ce pre-render…

J’exagère un peu, quoique, pas tant que ça finalement.
Vous allez me dire qu’avec Drupal 6 nous étions habitué à cette gymnastique mentale, ce à quoi je réponds oui, mais. Mais, c’était moins anarchique. Exemple.

Un exemple tout bête

Pour un type de contenu spécifique, un client demande à pouvoir insérer librement du code JavaScript et des styles CSS depuis l’espace de contribution. Pas de problème, il me suffit de récupérer le contenu des champs et de les attacher à la page à l’aide des fonctions drupal_add_js et drupal_add_css en précisant un type inline et les scopes appropriés. Ni une ni deux, je m’exécute et fais le nécessaire dans une implémentation de hook_preprocess_node() et, sans surprise, cela fonctionne.

Note : les extraits de codes qui suivent sont simplifiés pour se focaliser sur le sujet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
/**
 * @file template.php
 */
/**
 * Implements hook_preprocess_node().
 */
function MYTHEME_preprocess_node(&$vars) {
  // Nous utilisons la propriété `value` au lieu de `safe_value` qui encode les quotes.
  if (!empty($vars['field_inline_css'][0]['value'])) {
    drupal_add_css($vars['field_inline_css'][0]['value'], array(
      'type'       => 'inline',
      'group'      => CSS_THEME,
      'every_page' => false,
      'media'      => 'all',
      'preprocess' => false, // ne pas aggréger avec les autres styles
    ));
  }
  // -- snip --
}

Malheureusement le markup HTML des champs est malgré tout généré dans le flux du contenu. Ok, il me suffit de les masquer (au sens Drupal 7 du terme). Je regarde pour appliquer un coup de hide() sur mes champs depuis mon implémentation du preprocess_node. Mince, ces derniers sont déjà marqués comme rendus, leurs contenu calculé, etc. Pas mieux depuis un hook_page_alter(), ni depuis le fichier de template dédié. Pourtant la documentation officielle ne cesse de montrer comme il est facile de gérer la visibilité des champs.

Que faire ? Dois-je perdre du temps pour rendre un à un tous les champs à afficher pour ce type de contenu, ou est-ce que je pousse un peu l’investigation ? J’opte pour la seconde option tellement cette situation me paraît ridicule.

Rapidement, je trouve que je peux masquer mes champs en implémentant le hook_node_view_alter(). Tout fonctionne.

1
2
3
4
5
6
7
8
9
10
11

<?php
/**
 * @file template.php
 */
/**
 * Implements hook_node_view_alter().
 */
function MYTHEME_node_view_alter(&$build) {
  hide($build['field_inline_css']);
  hide($build['field_inline_js']);
}

Cependant, gérer ces champs à deux endroits n’est pas des plus lisible. Je rapatrie donc le code ajouté dans l’implémentation du hook_preprocess_node() dans mon hook_node_view_alter.
Déconfiture : seule l’injection du JavaScript est prise en compte. Celle des styles CSS est tout bonnement ignorée ;!

WTF Drupal (╯°□°）╯︵ ┻━┻

Et c’est ainsi que je me suis résigné à scinder cette étape de theming en 2 emplacements distincts. Le tout agrémenté d’explications en commentaires pour ne pas m’y perdre dans quelques mois ou tout simplement pour aider mes collègues à s’y retrouver.

Comment en est-on arrivé là ?

La faute en incombe en partie à une structure de données non normalisée couplée à un système de render array alléchant mais qui ne tient pas ses promesses. Tout module gère ses données à transmettre à l’API render comme bon lui chante. De ce fait il existe presque autant de cas de figure qu’il y a de modules :-/ Au niveau des fichiers de template, nous avons le droit à une soupe de variables au type simple et de render array.

Également, les modules peuvent transformer la structure des render array et nous mettre des bâtons dans les roues pour le theming (les modules Field Group et Display Suite en sont de bons exemples).

Pour finir, bien des situations complexes pourraient être évités si le core de Drupal exploitait systématiquement les render array. Il arrive toujours un moment où, alors que nous cherchons à modifier le #prefix d’un élément, l’on tombe sur du pur HTML. Tout ça parce qu’une implémentation du hook_theme() ne retourne pas de render array, comme theme_links() par exemple…

L’avenir du theming avec Drupal 8

FIXME. C’est l’idée
Jacine propose une standardisation de composant qui aura le bénéfice de simplifier le templating en rationnalisant la construction d’une page et, surtout, chaque module pourra arrêter de nous noyer sous des kilomètres de classes CSS “au cas où…”.

Continuez votre lecture sur des sujets similaires

• Drupal 6 : utiliser une iframe comme contenu de page

Le générateur de sprites de Compass 0.11.3¹ crée des images dont le nom a pour format <map>-<hash>.png où <map> correspond au nom du répertoire qui contient les images du sprite et -<hash> à un hash qui :

• assure l’unicité du fichier généré ;
• fait office de cache buster.

Seulement voilà, chaque modification de sprite (par un ajout ou décalage d’image par exemple) va générer une image avec un hash différent², ce qui rend la gestion du dépôt d’un projet versionné assez prise de tête.
Heureusement, il est possible de ruser.

Pour ce faire, il suffit d’implémenter les callbacks on_sprite_saved et on_stylesheet_saved dans le fichier de configuration du projet, comme suit :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#
# config.rb
#
 
# Réaliser une copie des sprites avec un nom dépourvu du hash d'unicité.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end
 
# Remplacer dans les feuilles de styles générés les références aux sprites par
# leurs équivalents dépourvus du hash d'unicité.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

Ainsi, après chaque génération de sprite par Compass, une copie de l’image dépourvue du hash d’unicité est réalisée. Cela s’accompagne bien évidemment par un remplacement de leurs appels dans les feuilles de styles.
Il ne reste plus qu’à ignorer les images ayant un hash au niveau de votre repository pour ne pas polluer ce dernier.

Je suis conscient qu’il y aurait plus secure (je pense notamment aux substitutions dans les feuilles de style), mais disons que cela me convient dans l’immédiat, et qu’accessoirement je ne fais pas de ruby

Continuez votre lecture sur des sujets similaires

• Compass au quotidien
• Instances multiples de Compass avec Ruby Version Manager (rvm)
• Drupal 6 : utiliser une iframe comme contenu de page
• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté

Vous devez intégrer sous Drupal 6 des pages en provenance d’un site externe. Le web scraping est à exclure et de ce fait le chargement en iframe des pages externes a été retenu.
Marche à suivre.

Déclarer un menu de type callback

En premier lieu, il vous faut créer la page virtuelle qui aura la charge de faire appel au service externe via une iframe. Cela se fait en implémentant le hook_menu pour y déclarer une entrée de type MENU_CALLBACK. La fonction callback associée, _mytheme_load_iframe() ici¹, prendra 3 arguments :

1. url : l’URL de la ressource externe à charger dans l’iframe ;
2. width : la largeur en pixels de l’iframe, de type String obligatoirement ;
3. height : la hauteur en pixels de l’iframe, obligatoirement de type String.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php
/**
 * template.php
 */
/**
 * @implements hook_menu()
 */
function mytheme_menu() {
    return array(
        'drupal/page/path' => array(
            'title'            => 'Mon contenu externe',
            'page callback'    => '_mytheme_load_iframe',
            'page arguments'   => array(
              'url'    => 'http://example.com/service',
              'width'  => '700',
              'height' => '1000',
            ),
            'access arguments' => array('access content'),
            'type'             => MENU_CALLBACK,
        )
    );
}
 
/**
 * Loads an external resource into an iframe.
 *
 * @param string $url   URL to load in the iframe.
 * @param string $width The width of the iframe.
 * @param string $height The height of the iframe.
 */
function _mytheme_load_iframe($url, $width, $height) {
    return theme('mytheme_simple_iframe', $iframe_url, $width, $height);
}
 
?>

Comme vous pouvez le lire, la méthode de callback fait appel à la fonction theme() sur un hook mytheme_simple_iframe qui n’existe pas.

Création d’un hook de thème

La création d’un hook permettant de faire appel à un fichier template est des plus simple, grâce au hook_theme. Définissez dans votre fichier template.php (ou dans un fichier de module) le hook mytheme_simple_iframe :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
/**
 * template.php
 */
/**
 * @implements hook_theme()
 */
function mytheme_theme() {
    return array(
      'mytheme_simple_iframe' => array(
        'template'  => 'simple_iframe',
        'arguments' => array(
            'url'    => null,
            'width'  => '700',
            'height' => '500',
        ),
      ),
    );
}
?>

Simple de compréhension, on déclare un fichier de template simple_iframe auquel 3 variables seront passées. Les arguments width et height ont une valeur par défaut de précisée, ce qui permet de les omettre dans la définition de la ressource externe dans le hook_menu.

Enfin, créez le fichier de template qui affichera une iframe.

1
2
3
4
5
6
7
8

<?php
/**
 * simple_iframe.tpl.php
 */
?>
<div class="iframe">
  <iframe src="<?php print $url ?>" width="<?php print $width ?>" height="<?php print $height ?>" frameborder="0" align="left"></iframe>
</div>

Désormais, tout accès à l’URL /drupal/page/path chargera le template simple_iframe.tpl.php lorsque Drupal effectuera le rendu de la variable $content du fichier page.tpl.php.

Continuez votre lecture sur des sujets similaires

• Compass au quotidien
• Les angoisses du theming sous Drupal 7
• Compass : supprimer le cache buster des sprites
• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté

Dans le cadre de mon travail à Clever Age j’utilise dans plusieurs projets Compass, le framework Sass, dans sa version 0.10.6. Mais voilà, cette version a laissé place à la branche 0.11 qui, malheureusement, s’accompagne de son lot de mixins obsolètes voire de bugs avec certaines extensions.

Mes nouveaux projets feront appels à la dernière version en date de Compass mais il me faut conserver une branche 0.10 sur mon poste pour assurer le support des anciens projets. Il est actuellement inconcevable de proposer aux clients une mise à jour des fichiers SCSS vers la branche 0.11.

Comment faire cohabiter les deux versions de Compass et leurs dépendances ? C’est là qu’intervient Ruby Version Manager, un gestionnaire d’environnements pour Ruby.

Installer RVM

L’installation de RVM est des plus simples : il suffit de suivre la documentation.
Je préfère installer RVM pour l’utilisateur courant (moi) et non pour tous les utilisateurs du poste, qui n’auront pas les mêmes besoins. Accessoirement, cela me permet de manipuler les gem sans invoquer sudo.

$ cd
$ bash < <(curl -sk https://rvm.beginrescueend.com/install/rvm)
$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
$ source .bash_profile
$ type rvm | head -1
rvm is a function

J’en profite pour installer la dernière version stable de Ruby :

$ rvm install 1.9.2
Installing Ruby from source to: /Users/mehdi/.rvm/rubies/ruby-1.9.2-p180, this may take a while depending on your cpu(s)...

ruby-1.9.2-p180 - #fetching 
ruby-1.9.2-p180 - #downloading ruby-1.9.2-p180, this may take a while depending on your connection...
…
Installing rubygems dedicated to ruby-1.9.2-p180...
…
Installation of rubygems completed successfully.
ruby-1.9.2-p180 - adjusting #shebangs for (gem irb erb ri rdoc testrb rake).
ruby-1.9.2-p180 - #importing default gemsets (/Users/mehdi/.rvm/gemsets/)
Install of ruby-1.9.2-p180 - #complete 

À ce point, la version de Ruby active sur le système est pourtant celle fournie par Apple (je suis toujours sous OSX :p) :

$ ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [universal-darwin10.0]

En effet, RVM a bien réalisé l’installation de Ruby 1.9.2 mais il faut déclarer explicitement notre souhait de l’utiliser en remplacement de la version système¹ :

$ rvm use 1.9.2 --default
Using /Users/mehdi/.rvm/gems/ruby-1.9.2-p180
$ ruby -v
ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-darwin10.7.0]

Installation de la dernière version en date de Compass

Classique, l’installation de Compass se fait via gem :

$ gem install compass
Fetching: sass-3.1.1.gem (100%)
Fetching: chunky_png-1.2.0.gem (100%)
Fetching: fssm-0.2.7.gem (100%)
Fetching: compass-0.11.1.gem (100%)
Successfully installed sass-3.1.1
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
4 gems installed
Installing ri documentation for sass-3.1.1...
Installing ri documentation for chunky_png-1.2.0...
Installing ri documentation for fssm-0.2.7...
Installing ri documentation for compass-0.11.1...
Installing RDoc documentation for sass-3.1.1...
Installing RDoc documentation for chunky_png-1.2.0...
Installing RDoc documentation for fssm-0.2.7...
Installing RDoc documentation for compass-0.11.1...
$ gem list

*** LOCAL GEMS ***

chunky_png (1.2.0)
compass (0.11.1)
fssm (0.2.7)
rake (0.9.0)
sass (3.1.1)

Une petite vérification d’usage :

$ compass version 
Compass 0.11.1 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Ok, mon environnement par défaut est prêt. Voyons comment faire cohabiter une ancienne version de Compass.

Création d’un Gemset dédié à l’ancienne version de Compass

En premier lieu, je me positionne sur l’environnement ruby voulu. Ici, il s’agit du Ruby que j’ai défini par défaut.

$ rvm default
$ rvm gemset name
/Users/mehdi/.rvm/gems/ruby-1.9.2-p180

Recherchons la dernière version de la branche qui m’intéresse² (0.10 pour rappel) :

$ gem query -ran ^compass$

*** REMOTE GEMS ***

compass (0.11.1, 0.11.0, 0.10.6, 0.10.5, 0.10.4, 0.10.3, 0.10.2, 0.10.1, 0.10.0, 0.8.17, 0.8.16)

Ok, il me faut la 0.10.6.
RVM donne accès à des gemsets qui sont des espaces cloisonnés de gems pour une version de Ruby donnée. Pratique, j’ai justement besoin d’isoler les gems de la version 0.10.6 de Compass à celles de la dernière version en date.

Je crée un gemset au nom assez explicite et l’utilise :

$ rvm gemset create compass0.10.6
$ rvm gemset use !$
$ rvm gemset name
compass0.10.6

La création d’un gemset fourni un nouvel environnement vierge de gems (ou presque, rake restant disponible) :

$ gem list

*** LOCAL GEMS ***

rake (0.9.0)

Je peux maintenant installer Compass 0.10.6³, ses dépendances et autres extensions en toute tranquillité.

$ gem install compass --version 0.10.6 --no-rdoc --no-ri
Fetching: haml-3.1.1.gem (100%)
Fetching: compass-0.10.6.gem (100%)
Successfully installed haml-3.1.1
Successfully installed compass-0.10.6
2 gems installed
$ gem list

*** LOCAL GEMS ***

compass (0.10.6)
haml (3.1.1)
rake (0.9.0)

La petite vérification d’usage :

$ compass version
Compass 0.10.6
Copyright (c) 2008-2009 Chris Eppstein
Released under the MIT License.

Installer l’extension Lemonade pour Compass 0.10.6

Il ne me reste plus qu’à installer l’extension lemonade que j’utilise dans mes projets :

$ gem install lemonade --version '< 0.3.5' --no-rdoc --no-ri
…
4 gems installed

J’installe ici la version strictement inférieur à 0.3.5 de lemonade car cette dernière lève directement une erreur pour indiquer que la gem lemonade est désormais dépréciée au profit de Compass Sprites. Le hic étant que ce dernier n’existe pas dans Compass 0.10.6.

Malheureusement, la gem de lemonade ne précise pas les bonnes versions de ses dépendances, et, de ce fait, on se retrouve avec un environnement incapable de générer les images des sprites. Pour corriger cela, on commence par downgrader la version de chunky_png :

$ gem uninstall chunky_png --version 1.2.0
$ gem install chunky_png --version '< 1.0.0' --no-rdoc --no-ri
…
1 gem installed  

La gem haml installée avec l’extension lemonade est incompatible avec Compass 0.10.6 et risque de générer une erreur du genre :

compile scss/screen.scss
  error scss/screen.scss (Line 2087: Not a valid color stop: #bcd712 74%)

Il suffit donc d’installer la dernière version de la branche 3.0 :

$ gem install haml --version '< 3.1' --no-rdoc --no-ri
$ gem uninstall haml --version 3.1.1
$ gem list

*** LOCAL GEMS ***

chunky_png (0.12.0)
compass (0.10.6)
fssm (0.2.7)
haml (3.0.25)
lemonade (0.3.4)
rake (0.9.0)
sass (3.1.1)

Utilisation

Par défaut, en ouvrant un shell, Compass sera disponible en version 0.11. Si j’ai à travailler sur un projet en 0.10 il me suffit d’ouvrir un nouveau shell et d’activer temporairement le gemset compass0.10.6 :

$ rvm gemset use compass0.10.6

À l’avenir, je maintiendrai à jour la version de Compass dans l’environnement par défaut et, si besoin est, je figerai dans un nouveau gemset la version de Compass devenu obsolète.

Continuez votre lecture sur des sujets similaires

• Compass : supprimer le cache buster des sprites
• Compass au quotidien
• PHP : installer APC sous Mac OS X Leopard
• Rotation des logs Apache
• TextMate : bundle CSS, commande "Convertir la sélection en Unicode"

Créé par Loïc d’Anterroches, Photon¹ est un micro framework PHP distribué sous licence LGPL qui fonctionne au-dessus du serveur web Mongrel2 et du service de messagerie asynchrone ØMQ².
Voici un petit guide d’installation pour ce framework PHP pas comme les autres.

Pré-requis

Je considère que vous disposez sur votre système d’une version de PHP 5.3 installée via macports, à l’aide du port php5.

Photon effectue des contrôles de processus. Pour ce faire, la présence de l’extension PHP PCNTL est obligatoire.
Vérifiez que vous la possédez :

$ php -i | grep pcntl
/opt/local/var/db/php5/pcntl.ini,
pcntl
pcntl support => enabled

Si ce n’est pas le cas, lancez une installation macports :

$ sudo port install php5-pcntl

Mongrel2 requiert SQLite et ZeroMQ. Aussi, s’il n’est pas encore présent dans votre environnement de développement, il sera bon d’installer XDebug.
Vérifiez la présence de ces pré-requis sur votre poste :

$ port installed sqlite3 zmq php5-xdebug
The following ports are currently installed:
  php5-xdebug @2.1.0_0 (active)
  sqlite3 @3.7.5_0 (active)
  zmq @2.0.10_0 (active)

S’il vient à manquer des ports dans la liste ainsi générée, installez-les avec la commande port install :

sudo port install zmq

Dans le cas où vous ne possédez aucune de ces libraires, vous pouvez les installer en une unique commande

sudo port install sqlite3 zmq php5-xdebug php5-pcnt

Installer Mongrel2 sous Mac OS X Snow Leopard

Contre toute attente, au moment où cet article est rédigé, Mongrel2 n’est pas disponible dans macports. Qu’à cela ne tienne, procédez à son installation depuis les sources :

sudo port install wget
wget http://mongrel2.org/static/downloads/mongrel2-1.5.tar.bz2
tar xjvf mongrel2-1.5.tar.bz2
cd mongrel2-1.5/
sudo make clean macports install

L’option macports du Makefile ne signifie par que Mongrel2 s’installera dans l’environnement de macports, mais qu’il va utiliser les libraires disponibles depuis cet environnement (soit généralement /opt/local/). Le binaire est généré dans le répertoire /usr/local/bin/ :

which m2sh
/usr/local/bin/m2sh

Installer Photon

L’installation de Photon est des plus simple. En effet, tout passe par PEAR.

Commencez par déclarer les canaux du projet Photon, de l’extension PHP pour ØMQ puis ceux de PHPUnit et ses dépendances :

sudo pear channel-discover dist.photon-project.com
sudo pear channel-discover pear.zero.mq
sudo pear channel-discover pear.phpunit.de
sudo pear channel-discover pear.symfony-project.com
sudo pear channel-discover components.ez.no

N’ayez aucune inquiétude quant à la présence des dépendances Symfony et eZ Publish. Ces dernières sont requises par PHPUnit qui n’y récupérera qu’un nombre limité de composants (comme le parser YAML de Symfony) et n’ira pas vous installer les 2 solutions dans leur intégralité.

Il ne vous reste plus qu’à lancer l’installation proprement dite de Photon :

sudo pear install --alldeps photon/photon-alpha
sudo sh -c 'echo "extension=http.so" > /opt/local/var/db/php5/http.ini'
sudo sh -c 'echo "extension=zmq.so" > /opt/local/var/db/php5/zmq.ini'    

Tester votre installation de Photon

L’installation terminée, Photon est accessible par la commande hnu³. Afin de vous en assurer, lancez simplement sa propre batterie de tests unitaires, comme suit :

hnu selftest

Could not open input file: /usr/share/php/photon.php

Si vous rencontrez l’erreur Could not open input file: /usr/share/php/photon.php c’est que vous utilisez une version de Photon inférieure ou égale à 0.0.5. Si à l’heure où je rédige ces lignes la version 0.0.6 de Photon n’est pas disponible, exécutez l’ensemble des commandes ci-dessous pour fixer le problème :

cd ~/Downloads/
wget -O hnu.diff http://projects.ceondo.com/p/photon/source/ddiff/9acba649ae355aaf4b365a1f639961336ae6a323/
sudo patch --no-backup-if-mismatch -i hnu.diff `pear config-get bin_dir`/hnu
rm hnu.diff
cd -

Mettre à jour Photon

Encore une fois, la procédure est des plus simple grâce à PEAR :

$ sudo pear update-channels
Update of Channel "dist.photon-project.com" succeeded
$ sudo pear upgrade photon/photon-alpha
downloading photon-0.0.5.tgz ...
Starting to download photon-0.0.5.tgz (3,937,334 bytes)
...........................................................................done: 3,937,334 bytes
upgrade ok: channel://dist.photon-project.com/photon-0.0.5

Accéder aux sources de Photon

Vous pouvez accéder en local aux sources de Photon dans le répertoire /opt/local/lib/php. Avec TextMate par exemple :

mate -a `pear config-get php_dir`/photon*

Autrement, vous pouvez directement accéder aux sources du projet par la forge Indefero du projet.

Continuez votre lecture sur des sujets similaires

• PHP : installer APC sous Mac OS X Leopard
• WordPress : une classe abstraite pour aider la création de shortcodes
• TextMate : commande « Export words »
• PHP : convertir un DATETIME en un timestamp UNIX
• PHP : fonction uncamel() pour inverser une notation en CamelCase

Trouver sur la toile une fonction JavaScript de calcul d’intersection de tableaux qui soit efficace sur des tableaux dépassant les 50 entrées relève de l’impossible. C’est bien simple, les différentes solutions que j’ai pu rencontrer réalisent des calculs linéaires donc autant dire qu’à partir d’un certain seuil leurs performances deviennent catastrophiques.

C’est pourquoi je vous propose ici une fonction de recherche des intersections pour un nombre arbitraire de grands tableaux plus efficace que ce que j’ai pu tester, benchmarks à l’appui. Est également disponible la suite des tests unitaires.

Benchmark réalisé sous Google Chrome 5.0.375.99 / Mac Pro 2 x 3 Ghz Quad-Core Intel Xeon sous Mac OS X 10.5.8

La fonction array_big_intersect()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

/**
 * Compute the intersection of big arrays.
 *
 * @author  Mehdi Kabab <http://pioupioum.fr/>
 * @license http://www.opensource.org/licenses/mit-license.php MIT License.
 * @see     http://pioupioum.fr/developpement/javascript-array-intersection.html
 * @version 1.0.1
 *
 * @param  {Array} arr1 First array.
 * @param  {Array} arr2 Second array.
 * @param  {Array} [arr3[, arr4[, ...]]] Optional arrays.
 * @return {Array} A new array containing elements common to the arrays passed
 *                 in arguments, with no duplicates.
 */
function array_big_intersect () {
  var args = Array.prototype.slice.call(arguments),
      aLower = [],
      aStack = [],
      count,
      i,
      nArgs,
      nLower,
      oRest = {},
      oTmp = {},
      value,
      compareArrayLength = function (a, b) {
        return (a.length - b.length);
      },
      indexes = function (array, oStack) {
        var i = 0,
            value,
            nArr = array.length,
            oTmp = {};
 
        for (; nArr > i; ++i) {
          value = array[i];
          if (!oTmp[value]) {
            oStack[value] = 1 + (oStack[value] || 0); // counter
            oTmp[value] = true;
          }
        }
 
        return oStack;
      };
 
  args.sort(compareArrayLength);
  aLower = args.shift();
  nLower = aLower.length;
 
  if (0 === nLower) {
    return aStack;
  }
 
  nArgs = args.length;
  i = nArgs;
  while (i--) {
    oRest = indexes(args.shift(), oRest);
  }
 
  for (i = 0; nLower > i; ++i) {
    value = aLower[i];
    count = oRest[value];
    if (!oTmp[value]) {
      if (nArgs === count) {
        aStack.push(value);
        oTmp[value] = true;
      }
    }
  }
 
  return aStack;
}

Un gain de performances

Le gain de performances tient à peu de choses. En premier lieu, l’ordre d’analyse des tableaux est un point à ne pas négliger. Par définition, l’ensemble des valeurs constituant l’intersection se retrouve dans le plus petit des tableaux. De ce fait, je me base sur le plus petit d’entre-eux pour effectuer les comparaisons de présence d’une valeur dans les ensembles restants.

Aussi, la fonction crée un Hash de toutes les valeurs uniques et stocke leur fréquence d’apparition. Si une valeur apparaît autant de fois qu’il y a de tableaux, c’est qu’une intersection est trouvée.

Et c’est tout

Petit avertissement, si vous avez à travailler sur des tableaux de petites tailles, je vous conseille plutôt d’utiliser la fonction Array#intersect() de la librairie JSLab qui s’avère être des plus performantes.

Anecdote

Anecdote (ou pas), mon benchmark met en évidence des erreurs de calcul de la part des librairies Prototype et Extensions. La seconde ayant moins d’impact car peu propagée, il en est tout autre pour Prototype. En effet, cette dernière exclue systématiquement la valeur 0 (zéro) du tableau résultant. Ce qui est plus qu’embarrassant, pourtant le bug est connu depuis fin 2009.

Continuez votre lecture sur des sujets similaires

• Une console JSLint pour aider vos validations JavaScript
• Optimiser le chargement des AdSense
• Page Fan : ajout simplifié d’application onglet à vos pages fan Facebook
• WordPress : forcer le chargement de jQuery en bas de page
• Bundle License Helper pour TextMate

J’ai pris l’habitude de valider mon code JavaScript à l’aide de JSLint. Outil d’analyse statique de code, JSLint permet de m’assurer du niveau de qualité de mon code avant toute déploiement en production.

Cependant la console accompagnant l’outil ne me convenait pas, et ce pour plusieurs raisons :

1. L’élément window n’est pas défini via les options passées à JSLINT ce qui m’oblige à le déclarer, à l’aide de l’instruction /*@global, dans une majorité de mes scripts.
2. Dans le même esprit, j’utilise couramment certaines options — comme browser: true — non présentes dans l’appel à JSLINT.
3. La présentation du résultat ne me convient guère.

Vous trouverez dans les lignes qui suivent la console que j’utilise en remplacement.

Table des matières

1. Code source
2. Prérequis
3. Usage
4. Historique des versions et changelog

Code source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

/*global JSLINT */
/*jslint white: true, rhino: true */
/**
 * @fileOverview Provides a JSLint console for Rhino.
 * <p>Usage: <code>java -jar lib/js.jar lib/jslint-console.js lib/fulljslint.js src/testFile1.js src/testFile2.js</code></p>
 * @author Mehdi Kabab <http://pioupioum.fr/>
 * @version 0.1.1 (2010-06-24)
 */
/**
 * @license Copyright (c) 2010 Mehdi Kabab <http://pioupioum.fr/>.
 *
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */
 
// Loads the JSLint script given as first argument.
load(arguments.splice(0, 1));
 
(function (scripts) {
    var i,
        indentLen = 0;
 
    /**
     * Returns the string repeated multiplier times.
     * @param {Number} multiplier Number of time the string should be repeated.
     * @this {String}
     * @return Returns the repeated string.
     * @type String
     * @addon
     */
    String.prototype.repeat = function (multiplier) {
        if (0 > multiplier) {
            multiplier = 0;
        }
        return new Array(1 + multiplier).join(this);
    };
 
    /**
     * Cleans evidence message and assign <code>identLen</code>.
     * @private
     * @param {String} str The full message.
     * @param {String} p1 Possible identation.
     * @param {String} p2 The message content.
     * @returns The message content
     * @type String
     */
    function cleanEvidence(str, p1, p2) {
        indentLen = p1.length;
        return p2;
    } // cleanEvidence
 
    /**
     * Check quality code of the given script.
     * @private
     * @param {String} jsfile File to check.
     * @requires JSLINT
     * @requires String#repeat()
     */
    function lint(jsfile) {
        var i,
            input,
            e,
            errLen,
            errTag = "[ERROR] ",
            found = 0;
 
        print("Running JSLint on: " + jsfile);
        input = readFile(jsfile);
        if (!input) {
            print(errTag + "Couldn't open file.");
            quit(1);
        }
 
        if (!JSLINT(input, { browser: true, rhino: true, laxbreak: true,
            onevar: true, undef: true, nomen: true, eqeqeq: true, bitwise: true,
            regexp: false, newcap: true,
            predef: ['window', 'escape', 'unescape']
        })) {
            for (i = 0, errLen = JSLINT.errors.length; i < errLen; ++i) {
                e = JSLINT.errors[i];
                if (e) {
                    found += 1;
                    if ("% scanned)." !== e.reason.substr(-11)) {
                        print(errTag + e.reason.replace(/\.$/, '') +
                            " on line " + e.line + " character " + e.character + ".");
                        if ("" !== e.evidence) {
                            print(" ".repeat(errTag.length) +
                                (e.evidence || '').replace(/^(\s*)(\S*(\s+\S+)*)\s*$/, cleanEvidence));
                            print(" ".repeat(errTag.length) +
                                ".".repeat(e.character - indentLen - 1) + "^");
                        }
                    } else {
                        print(errTag + e.reason);
                    }
                }
            }
            print("=> " + found + " error(s) found.\n");
            quit(2);
        } else {
            print("OK\n");
        }
    } // lint
 
    if (!scripts[0]) {
        print("Usage: jslint-console.js fulljslint.js file1.js[ file2.js]");
        quit(1);
    }
 
    for (i = 0; i < scripts.length; ++i) {
        lint(scripts[i]);
    }
}(arguments));

Prérequis

Les prérequis sont simples :

• Télécharger Rhino et récupérer le fichier js.jar.
• Récupérer la version complète ou minifiée de JSLint. Attention cependant, il vous faudra supprimer la fonction anonyme embarquée rhino.js (en fin de script).

Usage

Dans un shell, exécutez jslint-console.js à l’aide de Rhino, comme suis :

$ java -jar lib/rhino/js.jar lib/jslint/jslint-console.js lib/jslint/fulljslint.js src/*.js

Ici, deux arguments sont passés à la console jslint :

• Le script JSLint, lib/jslint/fulljslint.js, à fournir en premier argument. Je ne le charge pas en dur dans jslint-console.js afin de conserver une souplesse d’implémentation (via une tâche Ant par exemple).
• La liste des fichiers sources JavaScript à analyser.

Voici un exemple de sortie de la console :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$ java -jar lib/rhino/js-1.7R2.jar lib/jslint/jslint-console.js lib/jslint/fulljslint.js src/*.js
Running JSLint on: src/jsfile1.js
OK
 
Running JSLint on: src/jsfile2.js
[ERROR] Expected '===' and instead saw '==' on line 52 character 23.
        if (false == test) {
        ..........^
[ERROR] Unexpected dangling '_' in '_ob' on line 74 character 17.
        var _ob = window.ob;
        ....^
[ERROR] 'ob' is not defined on line 80 character 39.
        if ('function' !== typeof ob.getVariables) {
        ..........................^
[ERROR] 'ob' is not defined on line 83 character 26.
        params = ob.getVariables().sequence;
        .........^
=> 4 error(s) found.

Historique des versions et changelog

0.1.1 (2010-06-24)

• Forcer un multiplieur positif dans String.prototype.repeat

0.1 (2010-06-03)

• Version initiale.

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Page Fan : ajout simplifié d’application onglet à vos pages fan Facebook
• Bundle License Helper pour TextMate
• TextMate : commande « Export words »
• TextMate : convertir une couleur hexadécimale en notation RGBA

Il n’y a rien de plus horripilant que d’attendre que des publicités chargent pour accéder au contenu d’un article. C’est malheureusement une situation que l’on rencontre fréquemment. La faute en incombe au fonctionnement des blocs AdSense des publicitaires.

En effet, ils nécessitent que nous insérerions le code correspondant à un bloc à l’endroit où il sera affiché. Cela pour deux raisons notamment :

1. Des variables globales identifiants l’annonce sont déclarées.
2. Le script qui va charger l’annonce est immédiatement exécuté et fait appel à des actions d’écriture dans le flux via write.

Le deuxième point oblige le navigateur à traiter le code de l’adsense dès qu’il le rencontre puisque ce dernier n’utilise pas de gestionnaire de chargement. En plus d’écrire dans le flux courant, le système du publicitaire va charger des éléments extérieurs. Pour peu que la latence des réponses soit élevée, l’impression de ralentissement du chargement de la page augmente.

S’est ainsi que si un article est précédé d’un encart publicitaire, l’utilisateur devra patiemment attendre le chargement de ce dernier avant de pouvoir accéder au contenu désiré.
L’expérience utilisateur s’en trouve dégradée.

En finir avec les ralentissements de chargement des pages

Vous l’aurez peut-être remarqué, mais sur piouPiouM’s dev, le chargement des blocs publicitaires est comme temporisé, ne gênant ainsi en rien la navigation sur le site.
Voyons dans la suite du billet comment y parvenir, en prenant pour exemple le service Google Adsense.

Intégration dans une maquette

On commence par définir les emplacements des encarts publicitaires. Cela vous permet ainsi d’intégrer les annonces dans vos maquettes HTML, tout en vous assurant que cette apparence sera conservée pour les utilisateurs n’ayant pas JavaScript d’activé, ou qui bloquent les annonces publicitaires.
Je prend ici le parti d’annoncer la couleur, en précisant la mention Publicité.

1
2
3

<div id="ads-[ads_id]" class="ads [ads_format]">
    Publicité
</div>

En sommes, il s’agit d’un simple élément <div> ayant pour attributs :

• un identifiant [ads_id] : un identifiant unique qui va servir de point d’ancrage au contenu de l’adsense. Vous pouvez par exemple, dans le cas de Google Adsense, utiliser le nom du critère personnalisé en notation CamelCase.
• une classe ads : le style des encarts de pub lorsque celles-ci sont en attente de chargement.
• une classe [ads_format] : le format de l’encart publicitaire. Par exemple, square250 pour une annonce de 250px de côtés ou encore banner468 pour une bannière au format 468 x 60.

Appliquez les styles CSS qui suivent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* @group Tools */
 
.hide {
  display: none;
}
 
/* @end   Tools */
/* @group Adsense */
 
.ads {
  background-color: #F4F4F4;
  color: #666666;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}
.square250 {
  height: 250px;
  line-height: 250px;
  width: 250px;
}
.banner468 {
  height: 60px;
  line-height: 60px;
  width: 468px;
}
 
/* @end   Adsense */

Insertion du code de l’annonceur

Insérez en fin de page les différents codes donnés par votre annonceur (ici, Google Adsense).

1
2
3
4
5
6
7
8
9
10
11
12

<div class="hide">
    <!-- Ads -->
    <div id="adsref-[ads_id]">
        <script type="text/javascript">
google_ad_client = "pub-[client_id]";
google_ad_slot   = "[slot_id]";
google_ad_width  = 250;
google_ad_height = 250;
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>

Chaque annonce est incluse dans un élément ayant pour identifiant adsref-[ads_id] (voir Intégration de la maquette) qui fait le lien avec l’emplacement final de la publicité.

Le tout étant masqué à l’aide d’un div.hide. Il serait en effet désagréable d’afficher les annonces publicitaires en bas de page, même si ce n’est que pour une poignée de [micro]secondes.

Un Adsense Loader avec jQuery

Il ne reste plus qu’à déplacer à l’aide de JavaScript les blocs AdSense aux endroits souhaités. Avec jQuery cela donne :

1
2
3
4
5
6
7

$(function() {
    var $ads;
    $('div[id^="adsref-"]').each(function() {          // pour chaque bloc d'annonce #adsref-[ads_id]
        $ads = $('#ads-' + this.id.substr(7)).empty(); // supprimer de #ads-[ads_id] tout éventuel contenu
        $('ins:first', this).appendTo($ads);           // déplacer l'annonce dans #ads-[ads_id]
    });
});

Bien évidemment, et comme vous êtes sensible aux bonnes pratiques liées à la performance web, vous insérerez naturellement ce code en fin de page

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Compass au quotidien
• Page Fan : ajout simplifié d’application onglet à vos pages fan Facebook
• Compass : supprimer le cache buster des sprites
• Drupal 6 : utiliser une iframe comme contenu de page

J’ai récemment eu à (ré)utiliser le plugin jQuery Color mais je me suis heurté à une limitation. Je travaillais sur un jeu de couleurs RGBA et malheureusement le plugin ne supportait pas ce mode colorimétrique (il se contente de travailler sur des couleurs RGB).

Qu’à cela ne tienne, en attendant que ma modification soit intégrée¹ au plugin, voici une version de jQuery Color pourvu du support des couleurs RGBA :

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

• JavaScript : tester le support des couleurs RGBA
• TextMate : convertir une couleur hexadécimale en notation RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• Page Fan : ajout simplifié d’application onglet à vos pages fan Facebook