piouPiouM's dev» Archives de la catégorie Développement Web – piouPiouM's dev http://pioupioum.fr Bloc-note d'un développeur web Thu, 29 Jul 2010 16:47:44 +0000 en hourly 1 JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles http://pioupioum.fr/developpement/javascript-array-intersection.html http://pioupioum.fr/developpement/javascript-array-intersection.html#comments Tue, 13 Jul 2010 13:31:38 +0000 piouPiouM http://pioupioum.fr/?p=408

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 / Mac OS X 10.5.8

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

]]> http://pioupioum.fr/developpement/javascript-array-intersection.html/feed/ 3 Une console JSLint pour aider vos validations JavaScript http://pioupioum.fr/developpement/jslint-console-rhino.html http://pioupioum.fr/developpement/jslint-console-rhino.html#comments Thu, 03 Jun 2010 20:07:49 +0000 piouPiouM http://pioupioum.fr/?p=395

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

jslint-console.js (4 Ko) 
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

]]> http://pioupioum.fr/developpement/jslint-console-rhino.html/feed/ 5 Optimiser le chargement des AdSense http://pioupioum.fr/developpement/optimiser-rapidite-chargement-adsense-jquery.html http://pioupioum.fr/developpement/optimiser-rapidite-chargement-adsense-jquery.html#comments Thu, 11 Mar 2010 16:48:57 +0000 piouPiouM http://pioupioum.fr/?p=357

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

]]> http://pioupioum.fr/developpement/optimiser-rapidite-chargement-adsense-jquery.html/feed/ 15 Du RGBA dans vos animations avec le plugin jQuery Color http://pioupioum.fr/developpement/jquery-color-plugin-animation-rgba-support.html http://pioupioum.fr/developpement/jquery-color-plugin-animation-rgba-support.html#comments Sat, 20 Feb 2010 14:13:32 +0000 piouPiouM http://pioupioum.fr/?p=332

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ée1 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

  1. enfin, je l’espère :] ↩

]]> http://pioupioum.fr/developpement/jquery-color-plugin-animation-rgba-support.html/feed/ 1 JavaScript : tester le support des couleurs RGBA http://pioupioum.fr/developpement/javascript-detecter-support-rgba.html http://pioupioum.fr/developpement/javascript-detecter-support-rgba.html#comments Sun, 14 Feb 2010 22:09:31 +0000 piouPiouM http://pioupioum.fr/?p=322

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é1.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

  1. Atteindre le premier élément script2 du document.
  2. Mémoriser sa couleur de police (ou de fond).
  3. Tester si la couleur n’est pas déjà en RGBA.
  4. 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.
  5. Tester la non correspondance de la couleur initiale et de la nouvelle.
  6. Réinitialiser la couleur de l’élément script.
  7. 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.

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

/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @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.

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

if (!('rgba' in jQuery.support)) {
    jQuery.extend(jQuery.support, {
        'rgba': isRGBACapable()
    });
}
 
/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @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

  1. toute autre propriété CSS3 peut être testée sur le même modèle, comme HSLA ou encore box-shadow. ↩

  2. nous utilisons JavaScript, il est naturel de trouver au moins un élément script. ↩

]]> http://pioupioum.fr/developpement/javascript-detecter-support-rgba.html/feed/ 5 Git : des alias pour aller plus vite http://pioupioum.fr/developpement/git-alias-productivite.html http://pioupioum.fr/developpement/git-alias-productivite.html#comments Wed, 30 Dec 2009 09:18:24 +0000 piouPiouM http://pioupioum.fr/?p=295

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

  1. Mes alias
  2. Des raccourcis pour les utilisateurs de SVN
  3. Annuler le dernier commit
  4. Éditer le dernier commit
  5. Faire le point rapidement
  6. Afficher un historique condensé des commits
  7. Afficher les changements réalisés depuis le dernier pull
  8. Ajouter rapidement des fichiers à commiter
  9. 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

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

Continuez votre lecture sur des sujets similaires

]]> http://pioupioum.fr/developpement/git-alias-productivite.html/feed/ 1 Git : 10 commandes utiles http://pioupioum.fr/developpement/git-10-commandes-utiles.html http://pioupioum.fr/developpement/git-10-commandes-utiles.html#comments Wed, 23 Dec 2009 09:36:46 +0000 piouPiouM http://pioupioum.fr/?p=285

Cela fait plus d’un an et demi que j’utilise Git dans mes environnements de travail personnel et professionnel. Jamais je ne l’échangerai contre SVN ! Oups, je m’égare ;-)

Git c’est bien, mais encore faut-il retenir son nombre croissant de commandes pour l’utiliser au mieux. Ce billet va être le premier d’une série qui va m’aider à mettre sur “papier” les commandes qui me sont le plus utiles.

Liste des commandes utiles

  1. Éditer le commentaire du dernier commit
  2. Supprimer une branche distante
  3. Supprimer un tag du repository distant
  4. Compter le nombre de commits par utilisateur
  5. Commiter sous une autre identité
  6. Antidater un commit
  7. Abandonner le suivi de fichiers
  8. Copier les fichiers inconnus de Git en dehors du répertoire de travail
  9. Supprimer les fichiers inconnus de Git
  10. Exporter son projet dans une archive ZIP ou TAR.GZ

Éditer le commentaire du dernier commit

Une commande qui se passe d’explications.

$ git commit --amend -m "Le nouveau commentaire."

Edit :
Comme le précise Jérémy dans les commentaires, cette commande n’est à utiliser que sur un commit qui n’a pas été diffusé sur un autre repository. Autrement, cela casserait l’historique et des divergences peuvent apparaître.

Supprimer une branche distante

Effacer une branche du dépôt distant s’effectue de la même manière que si vous la publiez à l’aide de la commande git push, mais en précédant le nom de la branche d’un double point.

$ git push origin :ma_branche

Supprimer un tag du repository distant

La commande git push --tags ne pousse pas les tags supprimés localement. Afin de supprimer un tag sur le serveur distant, il faut reprendre la syntaxe de suppression d’une branche :

$ git push origin :my_tag

Il est également possible d’utiliser la commande git tag et son flag -d :

$ git tag -d my_tag

Compter le nombre de commits par utilisateur

Avec git shortlog et ses flags -n et -s on obtient la sortie suivante pour le dépôt du framework PHP Pluf :

git shortlog -sn
   163  Loic d'Anterroches
     4  Jürgen Hörmann
     2  Mehdi Kabab
     1  Baptiste Durand-Bret
     1  Jakub Vitak

Ajoutez l’option -e pour afficher les adresses e-mails.

Commiter sous une autre identité

Un contributeur vous a envoyé un patch et vous souhaitez lui attribuer le commit1 ? Le flag --author est là pour ça :

$ git commit --author "Prénom Nom <email@address.com>"

Antidater un commit

Très pratique pour maintenir à jour son historique de commits, la définition de la variable GIT_AUTHOR_DATE permet de préciser la date et heure du commit.

$ GIT_AUTHOR_DATE="2009-11-26 08:32 +100" git commit -m "Un commit antidaté."

Abandonner le suivi de fichiers

Lors d’une phase de débogage, il est généralement peu utile de suivre les modifications de certains fichiers. La commande git update-index et son flag --assume-unchanged va permettre d’ignorer les changements du ou des fichiers précisés.

$ git update-index --assume-unchanged README.md

Pour revenir à la normale, utilisez le flag --no-assume-unchanged :

$ git update-index --no-assume-unchanged README.md

Copier les fichiers inconnus de Git en dehors du répertoire de travail

Sous Mac OS X2 la commande est :

$ git ls-files --others --exclude-standard | cpio -pmd /chemin/de/destination

Retirez l’option --exclude-standard si vous désirez exporter les fichiers ignorés par Git.

Supprimer les fichiers inconnus de Git

Il m’arrive de créer des fichiers qui ne seront finalement pas ajoutés à l’index de ma copie locale. Ces fichiers apparaissent donc inlassablement dans la liste des fichiers untracked. Au lieu de les supprimer manuellement, je charge Git de le faire :

$ git clean -n -d <path>

Ici, la commande git clean ne va rien supprimer. En effet, le flag -n réalise un dry run pour lister les fichiers et répertoires concernés par le nettoyage du répertoire de travail, ou du chemin <path> si ce dernier est précisé.

Si vous souhaitez supprimer uniquement les fichiers et conserver les répertoires vides, enlevez l’option -d.

Ajoutez le flag -x pour inclure les fichiers ignorés par Git (cf. le fichier .gitignore). Pour ne supprimer que les fichiers ignorés, optez pour l’option -X.

Dernière astuce, tant que l’option clean.requireForce n’est pas définie à false dans votre fichier de configuration, Git contraindra git clean à ne fonctionner qu’avec les flags -n et -f. Autrement dit, soit vous réalisez un test dry run, soit vous forcez l’action du nettoyage de votre arbre de travail. Et c’est une bonne chose, personne n’est à l’abri d’une erreur !

Exporter son projet dans une archive ZIP ou TAR.GZ

Si vous souhaitez fournir une archive d’une version précise de votre projet, git archive va pouvoir vous aider. En considérant que la version visée est marquée par le tag 1.0 :

$ git archive --format=zip --prefix=mon_projet-1.0/ -9 1.0 > /chemin/de/destination/mon-projet-1.0.zip

Détail sur les options :

  • --format pour spécifier le format de l’archive. git archive --list pour connaître la liste des formats supportés.
  • --prefix va préfixer tous les noms de fichiers et dossiers. N’oubliez pas le slash terminal si vous souhaitez regrouper les documents dans un dossier.
  • -9 est une option spécifique du format d’exportation ZIP. De 0 à 9, il détermine le niveau de compression.
  • 1.0 est le nom du tag. Vous pouvez également exporter des branches, le HEAD et autres tree-ish.
  • pour finir on redirige le tout dans un fichier.

Pour exporter les fichiers contenu dans le répertoire d’une branche donnée la commande devient :

$ git archive --format=zip --prefix=mon_projet-dev/ -9 dev:src/ > /chemin/de/destination/mon_projet-dev.zip

Enfin, l’export au format TAR.GZ se fait de la manière suivante :

$ git archive --format=tar --prefix=mon_projet-1.0/ 1.0 | gzip > /chemin/de/destination/mon-projet-1.0.tar.gz

Continuez votre lecture sur des sujets similaires

  1. une bonne pratique a encourager ! ↩

  2. si la commande cpio fonctionne différemment sur d’autres OS, merci de me le signaler en commentaire. Je mettrai à jour en conséquence le snippet. ↩

]]> http://pioupioum.fr/developpement/git-10-commandes-utiles.html/feed/ 2 Phing Header : une tâche pour ajouter un en-tête aux fichiers http://pioupioum.fr/developpement/phing-header-task.html http://pioupioum.fr/developpement/phing-header-task.html#comments Sun, 30 Aug 2009 19:54:24 +0000 piouPiouM http://pioupioum.fr/?p=215

Une des tâches les plus rébarbatives est bien l’ajout d’une licence d’utilisation à tous les fichiers sources de ses projets. Ajoutez à cela que, comme tout bon développeur, je n’aime pas répéter la même opération plus de deux fois, je me suis codé l’an dernier une tâche Phing pour automatiser cela1 : Header.

Présentation

Phing Header se découpe en deux tâches : HeaderTask et HeaderPhpTask.

La tâche HeaderTask permet d’ajouter un en-tête à n’importe quel fichier. Elle peut être comparée au paramètre imbriqué header de la tâche Concat d’Ant2.

Plus spécifique, la tâche HeaderPhpTask est à utiliser pour ajouter un en-tête aux fichiers PHP. Le tag PHP <?php précédera ainsi le contenu à concaténer ; le premier tag PHP étant supprimé.

Table des matières

  1. Présentation
  2. Téléchargement
  3. Installation
  4. Attributs
  5. Tags imbriquées supportées
  6. Exemples d’utilisation
  7. Licence
  8. Tâches à faire
  9. Historique des versions et changelog

Téléchargement

Télécharger la dernière version de la tâche Phing Header (8 Ko)

Vous pouvez également cloner le projet depuis son dépôt GitHub.

Installation

Si vous suivez la documentation de Phing, il vous faut copier le répertoire3 header contenu dans l’archive dans le dossier classes/phing/tasks/my de votre installation Phing.

Personnellement je préfère utiliser un chemin externe à l’installation de base de Phing. Pour ce faire, il suffit de créer l’arborescence phing/tasks/my à l’endroit désiré (par exemple /Library/WebServer/share/php) et de déclarer ce dernier via la propriété include_path de votre fichier php.ini. Ce qui nous donne ici :

include_path = ".:/Library/WebServer/share/php:/usr/local/php5/lib/php"

et l’arborescence suivante :

/Library/WebServer/share/php/
  `-- phing/
       `-- tasks/
            `-- my/
                 `-- header/
                      |-- HeaderPhpTask.php
                      `-- HeaderTask.php

Vous devrez déclarer ces nouvelles tâches à l’aide de la tâche Taskdef dans vos fichiers de build. Par exemple :

<taskdef name="header" classname="phing.tasks.my.header.HeaderTask" />

Attributs

Les tâches HeaderTask et HeaderPhpTask se partagent la liste d’attributs qui suit :

Nom Type Description Defaut Requis
file String Le chemin du fichier en-tête à charger. n/a Oui
eol String Préciser le caractère de fin de ligne. PHP_EOL Non
preservelastmodified Boolean Conserver la date de dernière modification de tous les fichiers. false Non
failonerror Boolean Stopper le processus à la première erreur survenue. true Non
verbose Boolean Activer le mode verbeu. false Non
encoding String Préciser l’encodage du fichier en-tête. UTF-8 Non
toencoding String Préciser l’encodage des fichiers de destination. UTF-8 Non

Caractères de fin de ligne valides

  • cr : un unique CR.
  • lf : un unique LF.
  • crlf : la paire CRLF.
  • mac : un unique CR.
  • unix : un unique LF.
  • dos : la paire CRLF.

La valeur par défaut est dépendante de la plateforme utilisée. Pour les système Unix, le caractère de fin de ligne par défaut est LF. Pour les systèmes de types DOS (incluant Windows), il s’agit de CRLF. Enfin, CR est la caractère utilisé par défaut sur les systèmes Mac OS.

Tags imbriquées supportées

Exemples d’utilisation

Ajouter un en-tête à un fichier PHP

<!-- load the header php task -->
<taskdef name="phpheader" classname="phing.tasks.my.header.HeaderPhpTask" />
 
<phpheader
    file="${project.basedir}/LICENSE"
    tofile="${project.basedir}/build/foo.php"/>
</phpheader>

Ajouter un en-tête à un ensemble de fichiers PHP

<!-- load the header php task -->
<taskdef name="phpheader" classname="phing.tasks.my.header.HeaderPhpTask" />
 
<phpheader file="${project.basedir}/LICENSE">
    <fileset dir="${project.basedir}/build">
        <include name="**/*.php" />
        <exclude name="**/foo*.php" />
    </fileset>
</phpheader>

Ajouter un en-tête encodé en ISO-8859-1 à un fichier encodé en UTF-8

<!-- load the header task -->
<taskdef name="header" classname="phing.tasks.my.header.HeaderTask" />
 
<header
    file="${project.basedir}/LICENSE"
    encoding="ISO-8859-1"
    tofile="${project.basedir}/build/foo.txt" />

Licence

Copyright (C) 2008 Mehdi Kabab, distribué sous licence LGPL version 3 ou supérieure.

Tâches à faire

Fonctionnalités en attente de développement.

  • [HeaderPhpTask] Optimiser la détection des tags PHP.
  • [Projet] Améliorer l’aspect POO.

Historique des versions et changelog

1.0

  • Version initiale.

Continuez votre lecture sur des sujets similaires

  1. nous travaillons par conséquent sur des projets PHP. Cependant, la tâche est utilisable pour tout type de fichier non binaire. ↩

  2. la tâche Concat n’est malheureusement pas encore disponible dans Phing. ↩

  3. ou directement les fichiers HeaderTask.php et HeaderPhpTask.php. Il vous suffira d’adapter en conséquence le chemin d’accès lors de leur déclaration via taskdef. ↩

]]> http://pioupioum.fr/developpement/phing-header-task.html/feed/ 0 PHP : supprimer récursivement un répertoire http://pioupioum.fr/developpement/php-spl-supprimer-repertoire-recursif.html http://pioupioum.fr/developpement/php-spl-supprimer-repertoire-recursif.html#comments Fri, 17 Jul 2009 17:47:02 +0000 piouPiouM http://pioupioum.fr/?p=95

Voici une petite fonction pour supprimer un répertoire et toute son arborescence. J’utilise ici la Standard PHP Library (SPL) et notamment son itérateur RecursiveDirectoryIterator qui permet de traverser récursivement un répertoire.

Il est important de noter l’utilisation de la constante RecursiveIteratorIterator::CHILD_FIRST. Grâce à elle, l’itérateur, instance de la classe RecursiveIteratorIterator, va parcourir récursivevement les fichiers des dossiers. Après avoir supprimés les fichiers, l’itérateur passe au dossier parent qui pourra être à son tour détruit. En effet, la fonction rmdir ne peut qu’effacer un dossier vide. 

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

<?php
/**
 * Attempts to remove recursively the directory named by dirname.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @param string $dirname Path to the directory.
 * @param boolean $followLinks Removes symbolic links if set to TRUE.
 * @return boolean Returns TRUE on success or FALSE on failure.
 * @throws Exception
 */
function recursive_rmdir($dirname, $followLinks = false)
{
    if (is_dir($dirname) && !is_link($dirname))
    {
        if (!is_writable($dirname))
            throw new Exception('You do not have renaming permissions!');
 
        $iterator = new RecursiveIteratorIterator(
            new RecursiveDirectoryIterator($dirname),
            RecursiveIteratorIterator::CHILD_FIRST
        );
 
        while ($iterator->valid())
        {
            if (!$iterator->isDot())
            {
                if (!$iterator->isWritable())
                {
                    throw new Exception(sprintf(
                        'Permission Denied: %s.',
                        $iterator->getPathName()
                    ));
                }
                if ($iterator->isLink() && false === (boolean) $followLinks)
                {
                    $iterator->next();
                }
                if ($iterator->isFile())
                {
                    unlink($iterator->getPathName());
                }
                else if ($iterator->isDir())
                {
                    rmdir($iterator->getPathName());
                }
            }
 
            $iterator->next();
        }
        unset($iterator); // Fix for Windows.
 
        return rmdir($dirname);
    }
    else
    {
        throw new Exception(sprintf('Directory %s does not exist!', $dirname));
    }
}
?>

Mis à jour du 02/08/2009
Suppression de la levée d’exception sur la suppression du lien symbolique. Le script passe au fichier suivant. Merci à Oncle Tom.

Mis à jour du 03/08/2009
Patch pour Windows. Libération de l’itérateur qui ferme correctement le répertoire à supprimer. Merci à Yho.

Continuez votre lecture sur des sujets similaires

]]> http://pioupioum.fr/developpement/php-spl-supprimer-repertoire-recursif.html/feed/ 15 Shortcode WordPress : intégrer un flux RSS http://pioupioum.fr/developpement/shortcode-wordpress-integrer-flux-rss.html http://pioupioum.fr/developpement/shortcode-wordpress-integrer-flux-rss.html#comments Fri, 17 Jul 2009 01:02:36 +0000 piouPiouM http://pioupioum.fr/?p=70

Dans son article Mastering WordPress Shortcodes, Smashing Magazine nous invite dans son 4ème exemple à intégrer le contenu d’un flux RSS dans vos billets WordPress à l’aide d’un shortcode.

Houston, on a un problème

Reprenons le code donné dans l’article :

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

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');
 
function readRss($atts) {
    extract(shortcode_atts(array(
    "feed" => 'http://',
      "num" => '1',
    ), $atts));
 
    return wp_rss($feed, $num);
}
 
add_shortcode('rss', 'readRss');

Si vous le testez, comme @Fran6 par exemple, vous constaterez que le résultat n’est pas celui escompté : le flux de syndication précède le contenu de votre article au lieu d’être inséré là où vous l’attendiez.

La raison ? À la ligne 10, le résultat de la fonction wp_rss() est retourné au moteur de WordPress pour remplacer le shortcode dans le contenu du billet. Or, la fonction wp_rss() ne retourne rien mais affiche directement le résultat. Ainsi, tout appel du shortcode entraîne l’envoi au client du flux RSS (sous la forme d’une liste non-ordonnée) suivi du contenu du billet.

Solution

On corrige le shortcode en capturant la sortie de la fonction wp_rss() à l’aide d’une tamporisation de sortie.

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

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');
 
function readRss($atts) {
    extract(shortcode_atts(array(
        "feed" => 'http://',
        "num" => '1',
    ), $atts));
 
    ob_start();
    wp_rss($feed, $num);
 
    return ob_get_clean();
}
 
add_shortcode('rss', 'readRss');

Continuez votre lecture sur des sujets similaires

]]> http://pioupioum.fr/developpement/shortcode-wordpress-integrer-flux-rss.html/feed/ 1