piouPiouM's dev» Archives de la catégorie Développement Web – piouPiouM's dev

Compass : supprimer le cache buster des sprites

piouPiouM — Wed, 15 Jun 2011 18:22:54 +0000

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

#
# 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

attention : les versions de Compass inférieures à 0.11.3 souffrent de bugs qui empêchent cette astuce de fonctionner. ↩
les fichiers obsolètes étants automatiquement supprimés, à moins que la variable de configuration $-clean-up soit positionnée à false. ↩

Drupal 6 : utiliser une iframe comme contenu de page

piouPiouM — Sun, 29 May 2011 18:17:22 +0000

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 :

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


/**
 * 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 :


/**
 * 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.


/**
 * simple_iframe.tpl.php
 */
?>

   print $url ?>" width=" print $width ?>" height=" print $height ?>" frameborder="0" align="left">

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

où my_hook correspond au nom du thème ou du module qui sert à enregistrer ces définitions. ↩

Instances multiples de Compass avec Ruby Version Manager (rvm)

piouPiouM — Mon, 23 May 2011 19:56:22 +0000

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

vous pouvez activer ponctuellement (le temps de vie du shell) un autre environnement à l’aide de la commande rvm use en omettant l’option --default. Pour revenir à l’environnement par défaut, un petit rvm default suffit. ↩
j’aurai très bien pu directement invoquer la commande gem install compass --version '< 0.11' et me passer de la recherche via gem query. Je laisse en l’état pour donner un exemple d’utilisation de la commande query. ↩
Je fais l’impasse sur l’installation des documentations pour ce gemset, d’où les arguments --no-rdoc et --no-ri. ↩

Photon : guide d’installation sur Mac OS X Snow Leopard

piouPiouM — Sun, 27 Feb 2011 18:58:43 +0000

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

Pour la petite histoire, j’ai donné son petit nom au framework \o/ ↩
Lire ZeroMQ. S’écrit également ZeroMQ, 0MQ ou ZMQ. ↩
le nom de la commande hnu vient de ℎν, la notation des photons en chimie et en optique. ↩

JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles

piouPiouM — Tue, 13 Jul 2010 13:31:38 +0000

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()

/**
 * Compute the intersection of big arrays.
 *
 * @author  Mehdi Kabab 
 * @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

piouPiouM — Thu, 03 Jun 2010 20:07:49 +0000

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 :

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.
Dans le même esprit, j’utilise couramment certaines options — comme browser: true — non présentes dans l’appel à JSLINT.
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

Code source

jslint-console.js (4 Ko)

/*global JSLINT */
/*jslint white: true, rhino: true */
/**
 * @fileOverview Provides a JSLint console for Rhino.
 * Usage: java -jar lib/js.jar lib/jslint-console.js lib/fulljslint.js src/testFile1.js src/testFile2.js
 * @author Mehdi Kabab 
 * @version 0.1.1 (2010-06-24)
 */
/**
 * @license Copyright (c) 2010 Mehdi Kabab .
 *
 * 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 identLen.
     * @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 :

$ 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

Optimiser le chargement des AdSense

piouPiouM — Thu, 11 Mar 2010 16:48:57 +0000

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 :

Des variables globales identifiants l’annonce sont déclarées.
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

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

En sommes, il s’agit d’un simple élément

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.

/* @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).

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

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 :

$(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

Du RGBA dans vos animations avec le plugin jQuery Color

piouPiouM — Sat, 20 Feb 2010 14:13:32 +0000

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 :

jquery.color.js (6 Ko)

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

enfin, je l’espère :] ↩

JavaScript : tester le support des couleurs RGBA

piouPiouM — Sun, 14 Feb 2010 22:09:31 +0000

CSS3 introduit le support des couleurs en mode RGBA. Ce dernier permet de définir une valeur d’alpha à une couleur RGB. Voici comment détecter via JavaScript si un navigteur supporte la fonctionnalité¹.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

Atteindre le premier élément script² du document.
Mémoriser sa couleur de police (ou de fond).
Tester si la couleur n’est pas déjà en RGBA.
Oui ? Sauter à 7. Non ? Modifier la couleur de l’élément script en rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.
Tester la non correspondance de la couleur initiale et de la nouvelle.
Réinitialiser la couleur de l’élément script.
Retourner le résultat du test.

Tester le support de RGBA via le DOM

L’implémentation DOM de l’algorithme n’a rien de complexe. Cependant, pour éviter de réitérer les manipulations DOM en cas de tests multiples, on assigne à la fonction une propriété result à l’aide de arguments.callee.

/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab 
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    if (!('result' in arguments.callee)) {
        var dScript = document.getElementsByTagName('script')[0],
            color   = dScript.style.color;
        if (/^rgba/.test(color)) {
            arguments.callee.result = true;
        } else {
            try {
                dScript.style.color = 'rgba(0, 0, 0, 0.5)';
            } catch (e) {};
 
            arguments.callee.result = (dScript.style.color != color);
            dScript.style.color     =  color;
        }
    }
 
    return arguments.callee.result;
};

Tester le support de RGBA via jQuery

Avec jQuery, il peut être utile d’initialiser une proprité jQuery.support.rgba pour éviter de lancer le test à de multiples reprises.

if (!('rgba' in jQuery.support)) {
    jQuery.extend(jQuery.support, {
        'rgba': isRGBACapable()
    });
}
 
/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab 
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    var $script = jQuery('script:first'),
        color   = $script.css('color'),
        result  = false;
    if (/^rgba/.test(color)) {
            result = true;
    } else {
        try {
            result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
            $script.css('color', color);
        } catch (e) {};
    }
 
    return result;
};

Continuez votre lecture sur des sujets similaires

toute autre propriété CSS3 peut être testée sur le même modèle, comme HSLA ou encore box-shadow. ↩
nous utilisons JavaScript, il est naturel de trouver au moins un élément script. ↩

Git : des alias pour aller plus vite

piouPiouM — Wed, 30 Dec 2009 09:18:24 +0000

Les alias sont des raccourcis vers des commandes de Git. Fini les répétitions et autres saisies de commandes rébarbatives ! Pour ajouter de nouveaux alias, créez ou éditez la section [alias] de l’un des fichiers qui suivent (voir les exemples du billet pour avoir une information sur la syntaxe) :

~/.gitconfig pour en bénéficier dans tous vos dépôts.
.git/config d’un projet pour restreindre son accès à cet unique projet.

Il est également possible de recourir à la commande git config :

$ git config --global alias.st 'status'

Ici, la commande git st devient un alias de git status.

Note : supprimer le flag --global va ajouter l’alias dans le scope du projet courant.

Table des matières

Mes alias
Des raccourcis pour les utilisateurs de SVN
Annuler le dernier commit
Éditer le dernier commit
Faire le point rapidement
Afficher un historique condensé des commits
Afficher les changements réalisés depuis le dernier pull
Ajouter rapidement des fichiers à commiter
Ouvrir dans TextMate les fichiers non commités

Mes alias

Voici les alias que j’utilise dans le scope global, en provenance donc de mon fichier ~/.gitconfig :

[alias]
    amend = commit --amend
    st = status
    who = shortlog -sne
    oneline = log --pretty=oneline --abbrev-commit --graph
    changes = diff --name-status
    dic = diff --cached
    diffstat = diff --stat
    svnpull = svn rebase
    svnpush = svn dcommit
    lc = !git oneline ORIG_HEAD.. --stat --no-merges
    addm = !git-ls-files -m -z | xargs -0 git-add && git status
    addu = !git-ls-files -o --exclude-standard -z | xargs -0 git-add && git status
    rmm = !git ls-files -d -z | xargs -0 git-rm && git status
    mate = !git-ls-files -m -z | xargs -0 mate
    mateall = !git-ls-files -m -o --exclude-standard -z | xargs -0 mate

Des raccourcis pour les utilisateurs de SVN

[alias]
    st = status
    df = diff
    co = checkout
    ci = commit
    br = branch
    svnpull = svn rebase
    svnpush = svn dcommit

Attention : la commande git checkout n’a pas la même utilité dans Git que dans Subversion !

Annuler le dernier commit

Le flag --soft va conserver les modifications dans le répertoire de travail.

[alias]
    undo = git reset --soft HEAD^

Important : nous travaillons ici en local. Il est malvenu d’annuler un commit sur le dépôt distant (désynchro, arbre cassé, etc). On assume ses erreurs

Éditer le dernier commit

[alias]
    amend = commit --amend

Faire le point rapidement

[alias]
    changes = diff --name-status
    dic = diff --cached
    diffstat = diff --stat

Afficher un historique condensé des commits

[alias]
    oneline = log --pretty=oneline --abbrev-commit --graph --decorate

Afficher les changements réalisés depuis le dernier pull

[alias]
    lc = !git oneline ORIG_HEAD.. --stat --no-merges

Ajouter rapidement des fichiers à commiter

Les alias qui suivent vont lister les fichiers d’un certain type pour les ajouter à l’index avant commit. J’affiche ensuite l’état du projet pour valider qu’aucune erreur ne s’est produite.

On peut donc chaîner les commandes à condition de préfixer l’alias par un point d’exclamation !.

[alias]
    addm = !git-ls-files -m -z | xargs -0 git-add && git status                     # ajouter les fichiers modifiés.
    addu = !git-ls-files -o --exclude-standard -z | xargs -0 git-add && git status  # ajouter les fichiers inconnus.
    rmm  = !git ls-files -d -z | xargs -0 git-rm && git status                      # supprimer les fichiers marqués
                                                                                    # comme effacés.

Ouvrir dans TextMate les fichiers non commités

Pratique pour reprendre son travail là où l’avait arrêté (poke Jérémy Lecour), git mate permet d’ouvrir dans mon éditeur de code préféré les fichiers modifiés depuis le dernier commit.
L’alias git mateall tiendra compte des fichiers inconnus de l’index du projet.

[alias]
    mate = !git-ls-files -m -z | xargs -0 mate
    mateall = !git-ls-files -m -o --exclude-standard -z | xargs -0 mate

Mises à jour

2 juin 2010
Mise à jour des alias d’ajout rapide de fichiers à commiter et d’édition dans TextMate. Les chemins contenant des espaces provoquaient une erreur fatale.
29 novembre 2010
Ajout de l’argument --decorate à l’alias oneline soufflé par n1k0 via git lola.