piouPiouM's dev

Bundle License Helper pour TextMate

piouPiouM — Thu, 29 Jul 2010 16:29:29 +0000

Parce que j’en avais ma claque de chercher le texte des licences à ajouter en en-tête de mes sources¹, voici un bundle TextMate pour palier à cette répétitive perte de temps.

Table des matières

Installation
Utilisation du bundle
Personnaliser le sélecteur des licences
Corriger le formatage de la licence
Licences supportées
Développement

Installation

Depuis les sources, avec Git

cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/piouPiouM/license-helper.tmbundle.git "License Helper.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Depuis les sources, sans Git

cd ~/Library/Application\ Support/TextMate/Bundles
wget http://github.com/piouPiouM/license-helper.tmbundle/tarball/master
tar zxf license-helper.tmbundle.tar.gz
rm license-helper.tmbundle.tar.gz
mv license-helper.tmbundle "License Helper.tmbundle"
osascript -e 'tell app "TextMate" to reload bundles'

Téléchargement direct

Télécharger la dernière version du bundle License Helper pour TextMate

Après récupération, décompressez l’archive, renommez le dossier en License Helper.tmbundle. Acceptez le changement d’extension. Il ne reste plus qu’à installer le bundle d’un double-clic sur le fichier.

Utilisation du bundle

Utilisez le lanceur license⇥ pour sélectionner une licence via la boîte de dialogue qui s’affiche.

Choix d’une licence – License Helper Textmate Bundle

Un bloc de licence est inséré en tant que Snippet. Utilisez la touche de tabulation pour vous déplacez sur les différents placeholders.

Liste des variables d’environnement utilisées

Déclarez dans votre projet les variables d’environnement qui suivent pour auto-compléter les blocs de licence à insérer :

TM_PROJECT_YEAR. L’année de production. Par défaut : l’année courante.
TM_PROJECT_COPYRIGHT_HOLDERS ou TM_AUTHOR ou TM_ORGANIZATION_NAME. Les détenteurs du copyright.
TM_ORGANIZATION_EMAIL. Adresse mail de l’organisation détentrice du copyright.
TM_PROJECT_DESCRIPTION. Description brève du projet.

Notez que les variables sont utilisées en fonction de la licence choisie et qu’il n’est pas nécessaire de toutes les renseigner si vous n’en avez pas l’usage.

Vous pouvez fixer la licence de votre projet en ajoutant la variable d’environnement de projet TM_PROJECT_LICENSE. Ainsi, vous n’aurez plus à la sélectionner.

Personnaliser le sélecteur des licences

La commande accessible depuis le menu License Helper → Edit licenses order lance l’édition du fichier de configuration du bundle.
Modifiez l’ordre des licences déclarées selon vos préférences d’apparition dans le sélecteur de licences.

Corriger le formatage de la licence

Il est possible qu’avec certains langages, le rendu des blocs de licences ne corresponde pas à vos attentes. Si tel est le cas, définissez votre propre format :

Bundles → Bundle Editor
Dans l’entrée License Helper, créez une nouvelle Preference et donnez-lui le nom du langage.
Remplissez le champ Scope Selector avec le scope approprié – i.e. source.java pour les sources java.
Définissez les shellVariables TM_LICENSE_HELPER_HEADER (début du bloc de commentaire) et TM_LICENSE_HELPER_FOOTER (fin du bloc de commentaire), comme suit :

{  shellVariables = (
        {   name = 'TM_LICENSE_HELPER_HEADER';
            value = '/*';
        },
        {   name = 'TM_LICENSE_HELPER_FOOTER';
            value = '*/';
        },
    );
}

Note : chacune des lignes de la licence peut être préfixée de la variable TM_LICENSE_HELPER_LINE.

Licences supportées

La liste des licences prises en charge par le plugin n’est pas figée. N’hésitez pas à me soumettre celles qui vous font défaut.

Développement

Distribué sous license MIT, le code source du bundle est accessible sur GitHub.

Une suggestion, une amélioration, une critique ou un bug à me soumettre ? Ça se passe du côté du bugtracker associé.

Continuez votre lecture sur des sujets similaires

Notes

exception faite des projets pour lesquels j’utilise un builder qui l’ajoute comme un grand à ma place. ↩

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

TextMate : commande “Export words”

piouPiouM — Sun, 16 May 2010 14:30:47 +0000

À l’intérieur du code source d’une classe PHP, je souhaite stocker dans un tableau la liste des mots de la version populaire de l’incontournable texte Lorem ipsum. Jusque là rien de bien sorcier. Mais pour des raisons de lisibilité et de conventions de codage je veux obtenir des lignes formées par un maximum de 72 caractères.

Certes je peux m’amuser à le faire à la main, mais pourquoi me fatiguer quand un langage de script tel que PHP me tend la main pour automatiser la procédure ? Et, cerise sur le gâteau, si en plus je peux l’intégrer à mon éditeur préféré, TextMate.

Exemple d’action de la commande TextMate Export words

Intégration dans Textmate

Allez dans le menu Bundles > Bundle Editor > Show Bundle Editor puis créez une nouvelle commande à l’aide de l’action New Command.
Donnez à la commande le nom Export words.
Veillez à ce que Save soit défini à Nothing.
Sélectionnez pour Input les options Selected Text or Nothing.
Placez Output à Replace Selected Text.
Choisissez une Activation de type Key Equivalent et définnez un raccourci. J’ai opté pour la séquence ⌥⇧W.
Laissez vide le champ Scope Selector afin de pouvoir jouir de la commande depuis n’importe quel type de fichier et scope.
Enfin, copiez-collez le code ci-dessous dans le champ Command(s).

#!/usr/bin/env php -n

/**
 * Export a wrapped representation of the words of a text.
 *
 * Optional parameters in a line that follows the text:
 *      l. The column width. Default: 72.
 *      s. Characters to remove. Default: punctuation.
 *      o. Sort order. Default: none.
 */
/*
# ***** BEGIN LICENSE BLOCK *****
#
# 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.
#
# ***** END LICENSE BLOCK ***** */
 
if (version_compare(PHP_VERSION, '5.0.0', '<')) {
    throw new Exception('You must have PHP >= 5.0.0!');
}
 
$lenght = 72;      // the default column width.
$strip  = '\p{P}'; // removes the ponctuation
$sort   = false;   // no sorting
 
$raw = file('php://filter/read=string.tolower/resource=php://stdin',
            FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if (isset($raw[1])) {
    $args = array_pop($raw);
    if (preg_match('#^(?:\s{0,}(?:l(?\d+)|s(?.*)|o(?asc|desc))\s{0,})+$#u', trim($args), $matches)) {
        if (isset($matches['lenght']) && $matches['lenght'])
            $lenght = (int) $matches['lenght'];
        if (isset($matches['strip']) && $matches['strip'])
            $strip .= '|' . $matches['strip'];
        if (isset($matches['sort']) && $matches['sort'])
            $sort = $matches['sort'];
    } else {
        array_push($raw, $args);
    }
}
$raw = implode(' ', $raw);
 
// Removes punctuation and user characters
if ($strip) {
    $strip = str_replace('#', '\#', $strip);
    $raw   = preg_replace('#(' . $strip . ')#u', '', $raw);
}
 
// Estimating indent
$start_index = 0;
if (isset($_SERVER['TM_INPUT_START_LINE_INDEX'])) {
    $start_index = $_SERVER['TM_INPUT_START_LINE_INDEX'];
}
if ('YES' === $_SERVER['TM_SOFT_TABS']) {
    $tab = str_repeat(' ', $_SERVER['TM_TAB_SIZE']);
} else {
    $tab = "\t";
}
$tab_count    = floor($start_index / $_SERVER['TM_TAB_SIZE']);
$extra_spaces = $start_index % $_SERVER['TM_TAB_SIZE'];
$tabs         = str_repeat($tab, $tab_count) . str_repeat(' ', $extra_spaces);
$tabs_len     = $tab_count * $_SERVER['TM_TAB_SIZE'] + $extra_spaces;
 
// Extracting words now!
$words = preg_split('#\s+#', $raw);
$words = array_map('trim', $words);
$words = array_filter(array_unique($words)); // removes empty fields
if ($sort) {
    natsort($words);
    if ('desc' === $sort) {
        $words = array_reverse($words);
    }
}
$words = sprintf('%s\'%s\'',
                 $tabs,
                 wordwrap(implode("', '", $words), $lenght - $tabs_len, "\n$tabs"));
if (0 !== $start_index) {
    $words = ltrim($words);
}
 
if ("''" === $words) {
    return;
}
echo $words;

Utilisation de la commande TextMate Export words

Sélectionnez le texte à transformer. La transformation du texte se contrôle en ajoutant à la suite une ligne d’arguments optionnels :

l. Ajuster la longueur de ligne. Exemple : l80 pour effectuer une coupure à la colonne 80. Défaut : 72.
s. Exemple : slorem|ipsum pour exclure les mots lorem et ipsum. Défaut : toute ponctuation.
o. Trier la sortie selon les ordres ascendant et descendant. Défaut : aucun tri n’est réalisé.

Notez que si votre sélection est précédée par une indentation, alors le script va appliquer cette dernière à chacune des lignes générées en se conformant aux options courantes de TextMate : il générera des espaces si le mode Soft Tabs est activé. Sinon des tabulations complétées d’éventuels espaces.

Continuez votre lecture sur des sujets similaires

PHP : installer APC sous Mac OS X Leopard

piouPiouM — Thu, 06 May 2010 18:47:30 +0000

Sous Mac OS X Leopard, l’installation du système de cache APC via PECL est en carton. Pour faire simple, l’extension n’est disponible que pour la version CLI de PHP.

Il est cependant possible d’y remédier¹ et ainsi disposer d’APC avec la configuration de base fourni par Apple.

Récupérer la dernière version d’APC

$ curl http://pecl.php.net/get/APC -o ~/Downloads/APC-latest.tgz
$ tar -zxf !$ -C ~/Downloads/
$ cd ~/Downloads/APC-3.1.3p1/

La version utilisée ici est la 3.1.3p1.

Préparer l’environnement de compilation

$ /usr/bin/phpize
Configuring for:
PHP Api Version:         20041225
Zend Module Api No:      20060613
Zend Extension Api No:   220060519

Lancer la compilation

Copier-coller dans la commande qui suit dans son intégralité. Attention à ne pas inclure de retours à la ligne.

MACOSX_DEPLOYMENT_TARGET=10.5 CFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe -no-cpp-precomp" CCFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe" CXXFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe" LDFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -bind_at_load" ./configure

Puis un coup de make :

$ make
...
----------------------------------------------------------------------
Libraries have been installed in:
   /Users/mehdi/Downloads/APC-3.1.3p1/modules

If you ever happen to want to link against installed libraries
in a given directory, LIBDIR, you must either use libtool, and
specify the full pathname of the library, or use the `-LLIBDIR'
flag during linking and do at least one of the following:
   - add LIBDIR to the `DYLD_LIBRARY_PATH' environment variable
     during execution

See any operating system documentation about shared libraries for
more information, such as the ld(1) and ld.so(8) manual pages.
----------------------------------------------------------------------

Build complete.
Don't forget to run 'make test'.

Et pour finir, on installe l’extension APC.

$ sudo make install
Installing shared extensions:     /usr/lib/php/extensions/no-debug-non-zts-20060613/

Activer l’extension APC pour PHP

Éditer le fichier php.ini pour ajouter la configuration qui suit :

extension = apc.so
apc.enabled = 1
apc.enable_cli = 1
apc.mmap_file_mask = /tmp/apc.XXXXXX
apc.num_files_hint = 1024
apc.shm_segments = 1
apc.shm_size = 128
apc.ttl = 7200
apc.user_ttl = 7200

Relancer Apache pour qu’il prenne en compte la nouvelle extension.

Continuez votre lecture sur des sujets similaires

Notes

Source : Forum du support Apple. ↩

TextMate : convertir une couleur hexadécimale en notation RGBA

piouPiouM — Thu, 15 Apr 2010 10:19:56 +0000

CSS supporte divers formats de description des couleurs, le plus utilisé étant la notation héxadécimale #RRGGBB. L’introduction du support des couleurs RGBA par CSS 3 a été l’occasion pour certains de découvrir les notations rgba(255, 255, 255, 1) et sa version sans gestion de l’opacité rgb(255, 255, 255).

Il faut avouer que si nous disposons d’une palette d’outils d’aide à la saisie de couleurs en notation hexadécimale, il en est rien pour insérer une couleur au format rgb[a], et cela peut agacer. Mais c’était sans compter sur TextMate !

Convertir une couleur héxadécimale en notation RGBA

La commande TextMate Convert Hex to RGB(A) color va vous permettre de convertir via le raccourci clavier ⌘⇧X une couleur héxadécimale en son équivalent RGB(A).

Installation

Après avoir téléchargé le fichier qui suit, installez la commande d’un simple double-clique.

Convert Hex to RGB(A) color.tmCommand (4 Ko)

La nouvelle commande est maintenant disponible dans le bundle Source.

Pourquoi l’installer dans le bundle Source au lieu du bundle CSS ? Parce qu’elle peut être utile dans d’autre languages, comme JavaScript et sera ainsi disponible à tout moment, qu’importe le bundle actif.

Usage

Simple d’utilisation, positionnez-vous sur une couleur et activez la commande pour obtenir son équivalent en notation RGB :

#6633ff => rgb(102, 51, 255)
#63F    => rgb(102, 51, 255)

Ajoutez à une couleur héxadécimale la composante d’opacité pour remplacer la couleur par sa forme RGBA :

#6633FF80 => rgba(102, 51, 255, .50)
#63FA     => rgba(102, 51, 255, .67)
#63F0     => rgba(102, 51, 255, 0)

Vous pouvez également sélectionner une couleur (avec le sharp # initial) et lancer la convertion. Cela se révèle être particulièrement utile avec une sélection en colonne.

Code source

Voici le code ruby¹ utilisé au sein de la commande.

Continuez votre lecture sur des sujets similaires

Notes

Toute remarque ou conseil est le bienvenu. Il s’agit de mon premier script ruby… ↩

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

PHP : convertir un DATETIME en un timestamp UNIX

piouPiouM — Tue, 09 Mar 2010 23:28:01 +0000

Mise à jour à 10:57
Plus simple, rapide, intégré, toussa : utiliser strtotime tout simplement.
Merci à Éric Daspet et à Oncle Tom pour le rappel.

Une fonction utilitaire¹ pour convertir une chaîne de type DATETIME ou DATE en un timestamp UNIX.
Les formats pris en charges en entrée sont AAAA-MM-JJ HH:MM:SS et AA-MM-JJ HH:MM:SS. L’heure étant optionnelle dans le cas de la conversion d’une date.


/**
 * Get UNIX timestamp for a date or date time.
 *
 * Example:
 * 
 * 
 * 
 *
 * @author    Mehdi Kabab 
 * @copyright 2010 Mehdi Kabab
 * @license   http://www.opensource.org/licenses/mit-license.html MIT License
 * @link      http://pioupioum.fr/snippets/php-convertir-datetime-unix-timestamp.html
 *
 * @param string The date or datetime to convert.
 * @return int The UNIX timestamp corresponding to the datetime.
 */
function unix_timestamp($date)
{
	$date = str_replace(array(' ', ':'), '-', $date);
	$c    = explode('-', $date);
	$c    = array_pad($c, 6, 0);
	array_walk($c, 'intval');
 
	return mktime($c[3], $c[4], $c[5], $c[1], $c[2], $c[0]);
}

Continuez votre lecture sur des sujets similaires

Notes

vous allez dire qu’il en existe pléthore, mais je les trouve toutes trop lourdes (conditions, strlen, multiples explode, etc) pour le peu à faire. Sans parler du fait qu’elles ne supportent uniquement que le format DATETIME. ↩

Bash : convertir un string en entier

piouPiouM — Sat, 06 Mar 2010 19:06:25 +0000

Bash n’offre pas de fonction pour convertir une chaîne de caractères ou un nombre flottant en un entier.
Cela n’est toute fois pas impossible, il suffit de faire appel à printf¹ et le tour est joué !

#!/usr/bin/env bash
# string_to_int.sh - Shell script to convert a string or float number
# to an integer.
 
function string_to_int ()
{
    LANG=C
    d=${1##*.}
    if [[ ${#1} -eq ${#d} ]]; then
        d=0
    fi
    e=${1%.*}
    e=${e//,/}
    printf %.0f "$e.$d" 2>/dev/null
}
 
not_int=("12.652" "-12.652" 12.652 14 "12,652" foo "1,254.8" 1,254.8 "125,160,254.8" "125,160,254")
 
for value in ${not_int[@]}; do
    echo "Convert $value to int: $(string_to_int $value)"
done

Ce qui nous donne :

$ ./string_to_int.sh 
Convert 12.652 to int: 13
Convert -12.652 to int: -13
Convert 12.652 to int: 13
Convert 14 to int: 14
Convert 12,652 to int: 12652
Convert foo to int: 0
Convert 1,254.8 to int: 1255
Convert 1,254.8 to int: 1255
Convert 125,160,254.8 to int: 125160255
Convert 125,160,254 to int: 125160254

Voir sur Github.

Mis à jour le 7 mars 2010
Prise en charge de la notation US. Merci à patpro.

Continuez votre lecture sur des sujets similaires

Notes

une substitution du séparateur des décimals . en , est nécessaire avant de faire appel à printf. ↩

PHP : fonction uncamel() pour inverser une notation en CamelCase

piouPiouM — Sun, 28 Feb 2010 18:17:12 +0000

Une fonction PHP utilitaire pour convertir une chaîne en notation CamelCase en mots réunis par un séparateur (par défaut, le caractère underscore _).

La fonction uncamel() supporte indifféremment, en entrée, les notations lowerCamelCase et UpperCamelCase.


/**
 * Reverse a CamelCase string.
 *
 * Examples:
 *     uncamel('lowerCamelCase') === 'lower_camel_case'
 *     uncamel('UpperCamelCase') === 'upper_camel_case'
 *     uncamel('ThisIsAString') === 'this_is_a_string'
 *     uncamel('notcamelcase') === 'notcamelcase'
 *     uncamel('lowerCamelCase', ' | ') === 'lower | camel | case'
 *
 * @author    Mehdi Kabab 
 * @copyright 2010 Mehdi Kabab
 * @license   http://www.opensource.org/licenses/mit-license.html MIT License
 * @link      http://pioupioum.fr/snippets/php-uncamel-fonction-convertir-camel-case.html
 *
 * @param  string $content The CamelCase string.
 * @param  string $separator The glue for the compound words. Defaults to '_'.
 * @return string
 */
function uncamel($content, $separator = '_')
{
	$content = preg_replace('#(?<=[a-zA-Z])([A-Z])(?=[a-zA-Z])#e', "'$separator' . strtolower('$1')", $content);
	$content{0} = strtolower($content{0});
 
	return $content;
}
?>

Le forker (gist).