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

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

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

La fonction array_big_intersect()

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

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

Un gain de performances

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

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

Et c’est tout

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

Anecdote

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

Continuez votre lecture sur des sujets similaires

• Une console JSLint pour aider vos validations JavaScript
• Optimiser le chargement des AdSense
• Bundle License Helper pour TextMate
• TextMate : commande « Export words »
• TextMate : convertir une couleur hexadécimale en notation RGBA

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

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

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

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

Table des matières

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

Code source

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

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

Prérequis

Les prérequis sont simples :

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

Usage

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

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

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

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

Voici un exemple de sortie de la console :

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

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

Historique des versions et changelog

0.1.1 (2010-06-24)

• Forcer un multiplieur positif dans String.prototype.repeat

0.1 (2010-06-03)

• Version initiale.

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Bundle License Helper pour TextMate
• TextMate : commande « Export words »
• TextMate : convertir une couleur hexadécimale en notation RGBA
• Optimiser le chargement des AdSense

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

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

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

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

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

En finir avec les ralentissements de chargement des pages

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

Intégration dans une maquette

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

1
2
3

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

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

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

Appliquez les styles CSS qui suivent.

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

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

Insertion du code de l’annonceur

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

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

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

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

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

Un Adsense Loader avec jQuery

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

1
2
3
4
5
6
7

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

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

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript
• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress : autoriser l’upload de fichiers au format non-supporté

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

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

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

• JavaScript : tester le support des couleurs RGBA
• TextMate : convertir une couleur hexadécimale en notation RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles

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 :

1. Atteindre le premier élément script² 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

• Du RGBA dans vos animations avec le plugin jQuery Color
• TextMate : convertir une couleur hexadécimale en notation RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles

WordPress jQuery UI Effects est un plugin pour WordPress permettant d’enregistrer et de charger les composants JavaScript de la librairie jQuery UI Effects.

Ce ne sont pas moins de 14 effets que vous pourrez utiliser dans vos développement de plugins ou dans la personnalisation de vos thèmes : Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale, Bounce, Highlight, Pulsate, Shake, Size et Transfer.

Table des matières

1. Téléchargement
2. Installation
3. Foire aux questions
   1. Comment utiliser ce plugin ?
   2. Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?
   3. Comment trouver la liste des gestionnaires disponibles ?
   4. La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?
4. Développement
5. Historique des versions

Téléchargement

Vous pouvez également vous rendre sur la page WordPress.org du plugin ou lancer son téléchargement et installation directement depuis l’interface d’administration de votre WordPress.

Installation

WordPress jQuery UI Effects s’installe en 3 étapes :

1. Téléversez le répertoire wp-jquery-ui-effects et son contenu dans votre répertoire /wp-content/plugins/.
2. Activez le plugin WordPress jQuery UI Effects via le menu Extensions du panel d’administration de WordPress.
3. C’est tout

Foire aux questions

Comment utiliser ce plugin ?

Pour charger l’effet Bounce dans votre thème ou un plugin, utilisez la méthode wp_enqueue_script :

1
2
3
4
5
6
7
8

<?php
function my_init_method()
{
    wp_enqueue_script('jquery-ui-effects-bounce');
}
 
add_action('init', 'my_init_method');
?>

WordPress chargera¹ l’effet jQuery UI Effects Bounce et, si besoin est, ses dépendances : jQuery et jQuery UI Effects Core.

Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?

Déclarez et chargez en toute simplicité un nouveau script dépendant de jQuery UI Effect Highlight :

1
2
3
4
5
6
7
8
9

<?php
wp_enqueue_script(
    'my-script',
    get_bloginfo('template_url', 'raw') . '/js/my-script.js',
    array('jquery-ui-effects-highlight'),
    '1.0',
    true
);
?>

Comment trouver la liste des gestionnaires disponibles ?

Préfixez le nom de l’effet voulu par jquery-ui-effects- pour obtenir le nom du gestionnaire associé². Attention, le nom du gestionnaire doit être en minuscules.

Par exemple, chargez l’effet Shake soit :

• avec le gestionnaire jquery-ui-effects-shake ;
• en utilisant la méthode statique WPjQueryUIEffects::getHandle('shake').

La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?

Non. Vous n’avez donc pas à charger le gestionnaire jquery-ui-core (fichier ui.core.js) en tant que dépendance d’un quelconque effet pour que ce dernier fonctionne.

Quelle est la version de jQuery UI Effects utilisé ?

Le plugin utilise jQuery UI Effects dans sa version 1.7.2.
Il nécessite également jQuery 1.3+, disponible depuis WordPress 2.8.

Développement

Distribué sous licence GNU/GLP, le code source du plugin est accessible sur GitHub.

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

Historique des versions

1.0.0

• Version initiale.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• Get Author’s Comments
• JavaScript : tester le support des couleurs RGBA
• Supprimer les effets de neige avec Greasemonkey
• SPIP Google Tools 1.0.1

La fin d’année approche à grands pas et voici que la la neige tombe sur les sites. Ces effets JavaScript, à l’esthétique discutable, entravent la navigation sur les pages mais surtout consomment un maximum de cycles CPU.

Supprimer les effets Snow Storm

On en a gros !

Je sais, moi aussi je ne les supporte plus >_<

C’est pourquoi j’ai écrit deux scripts destinés aux utilisateurs de l’extension Greasemonkey :

• SnowStorm Killer qui inhibe l’action de SnowStorm¹.
• jSnow Killer qui supprime l’effet du plugin jQuery jSnow.

Ils ciblent les 2 effets que je rencontre le plus souvent.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress jQuery UI Effects
• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript

Voici une expression régulière pour capturer les tags HTML doubles¹ sous JavaScript.

/<(\w+)((?:\s+\w+(?:\s*=\s*(?:"[\s\S]*?"|'[\s\S]*?'|[^'">\s]+))?)+\s*|\s*)>([\s\S]*?)<\/\1>/gi

Considérons la phrase :

Testons une <tag class="foobar" title="un > dans l'attribut">regexp en Javascript</tag> complexe.

La regex va capturer les éléments suivants :

• RegExp.$0 = "<tag class="foobar">regex en Javascript</tag>". Le texte qui satisfait le masque complet.
• RegExp.$1 = "tag". Le nom de la balise HTML.
• RegExp.$2 = " class="foobar" title="un > dans l'attribut"". Les attributs.
• RegExp.$3 = "regex en Javascript". Le contenu englobé par les balises ouvrantes et fermantes.

Il sera possible de traiter par la suite les attributs de l’élément.

Merci à Phil Haack pour cette expression régulière adaptée ici pour JavaScript².

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript
• Optimiser le chargement des AdSense
• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA

La lecture en streaming de longues vidéos sur Dailymotion ne me convient pas : crash de Firefox inopinés, pas de contrôle de lecture à distance, etc… Le bookmarklet qui suit m’offre plus de liberté en me permettant de visionner les vidéos dans le lecteur de mon choix.

De nouveaux liens de téléchargement.

Mise en place

Glissez-déposez simplement le lien ci-dessous dans les favoris de votre navigateur, dans votre barre personnelle par exemple.

Utilisation

Rendez-vous sur une page vidéo de Dailymotion et attendez le début de son chargement.¹ Cliquez sur le favori fraîchement créé. De nouveaux liens apparaissent sous la vidéo.

Cliquez droit sur le lien du format vidéo désiré puis sélectionnez l’entrée de menu Enregistrez le lien sous… pour lancer le téléchargement.

Changelog

Version 1.0.2

• Fixed issue 5, Not on a video of the dailymotion website.
  Important : Vous devez mettre à jour votre bookmarklet (cf. procédure d’installation).

Version 1.0.1

• Fixed format detection. Dailymotion now uses absolute paths.

Version 1.0.0

• Initial release.

Code source

Les sources sont disponibles sur ma forge InDefero.

Continuez votre lecture sur des sujets similaires

• JavaScript : optimiser le calcul de l’intersection de tableaux de grandes tailles
• Une console JSLint pour aider vos validations JavaScript
• Optimiser le chargement des AdSense
• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA