13 septembre 2012

vim : ne garder que des lignes qui commencent par…

J’avais aspiré un site et je ne voulais garder que les cellules. Donc ce qui commence par « <td »

Voici le code à taper :

:g!/^<td/d

30 août 2012

ExtJS : comment envoyer une form au format JSON ?

Je viens de passer 4 heures à chercher comment envoyer, avec ExtJS, une forme au format JSON.

Ce qui suit ne fonctionne pas :

form.submit({
    type: 'ajax',
    headers: {
        'Content-Type': 'application/json'
    },
    url: '/json/destination.php',
    jsonData: data,
    params: {
        mode: 'update'
    },
    success: function(form, action) {
        /* ok !! */
    },
    failure: function(form, action) {
        /* gérer les erreurs */
    }
});

Si vous essayez d’utiliser la fonction « submit » alors vous risquez, comme moi peut être, de ne pas y arriver.
La solution est :

récupérer soi même les données via getValues() ;
les encoder au format JSON ;
les envoyer avec la méthode Ext.Ajax.request().

Voici un exemple de code qui fonctionne :

var data = Ext.JSON.encode({ data: form.getValues(false) }); 
Ext.Ajax.request({
    headers: {
        'Content-Type': 'application/json'
    },
    url: '/json/destination.php',
    method : 'POST',
    jsonData : data,
    params : {
        mode: 'update'
    },
    success: function(form, action) {
        /* ok !! */
    },
    failure: function(form, action) {
        /* gérer les erreurs */
    }   
});

J’ai perdu 4 heures là dessus, alors si je vous en fais gagner 3, n’oubliez pas de me « flattr » 😉

23 août 2012

Vim: comment remplacer tous les mots par celui sous le curseur?

Je n’ai pas été bien loin, vous trouverez la version anglaise ici.

:%s/mot/<c-r><c-a>/g

Remplacer chaque occurrence de ‘mot’ avec le mot sous le curseur (le mot est délimité par des espaces ou des retours à la ligne).

<c-r><c-a> signifie qu’il faut appuyer sur Ctrl et R puis sur Ctrl et A.

Le mot sous le curseur sera automatiquement inséré dans la ligne de commande exactement comme il apparaît à l’écran.

Le côté génial, c’est que vous pouvez enregistrer cela dans une macro et il se souviendra du principe !

Exemple concret : j’ai une centaine de partenaires auquels je dois appliquer la même opération SQL. Voilà comment je me suis servi de la fonctionnalité :

J’ai mis toute la liste des partenaires dans un fichier, un partenaire par ligne ;
J’ai crée une seule fois, pour le partenaire 1, la série de commandes SQL ;
Ensuite, j’ai copié collé une centaine de fois cette même série pour tous les partenaires (sous vim: « chiffre+@a » et il joue chiffre fois la macro « a », donc ça ne m’a pris que le temps de taper une dizaine de touches) ;
J’ai enregistré la macro suivante, que je vous explique en français : «sélectionne la série de commande courante, monte d’une ligne pour aller sur le nom du partenaire courant, et remplace toutes les occurences de «partenaire1» par le mot sous le curseur.

Ensuite, une fois la macro enregistrée, j’ai tapé « 100@a » = jouer 100 fois la macro « a ».

Et voilà.

Beaucoup de temps de gagné !

10 août 2012

Linux : plusieurs copies vers une destination unique

Pour ceux qui ne connaissent pas et s’émerveillent de certaines nouveautés de Windows : ça existe depuis des années sous Linux !

C’est, de plus, très bien fait.

Quand on copie plusieurs fichiers vers une seule et même destination, ils se mettent tous dans la même boîte de dialogue.

30 juillet 2012

PhpDocumentor 2 : howto et résultats exceptionnels

Après plusieurs échanges avec le développeur principal de PhpDocumentor 2, celui-ci a corrigé plusieurs bogues et maintenant la version alpha tourne, et j’ai pu la lancer sur mon framework.

Résultats tout simplement exceptionnels (pas pour mon framework, mais pour PhpDocumentor).

Ce qui m’a le plus bluffé c’est le schéma de diagramme de classes : non seulement il est beau et pratique, mais il est clair.

Donc une vue globale de mon diagramme de classes :

Et quand on clique pour zoomer, le rendu est tout aussi exceptionnel :

C’est pratique, grâce à ça, je vois tout ce qui manque. Par exemple, les ListeXXX ne sont pas dans une classe générique, alors que les ItemXXX oui, des petites évolutions à faire pour rendre un peu tout ça plus propre, mais c’est un bon début !

Ensuite, viennent les classes et la documentation générée : de la même façon, si tout est correctement organisé, le rendu est vraiment très bon et la documentation est enfin utilisable !

25 juillet 2012

jQuery Mobile : comment forcer le rechargement d’une page ?

Si vous faites des boutons de navigation, votre code jQuery Mobile va ressembler à ceci :

<a href="/">Home</a>

Le seul hic, c’est qu’en cliquant dessus, le navigateur ne va pas recharger réellement la page, il va se baser sur son cache, en supposant que la page n’a pas changé. Ce qui peut poser problème. Par exemple, sur mon site mobile, lorsqu’un commande est validée, je vide le panier côté serveur et je fais un lien vers la page racine, le « home ». Avec le code précédent, le navigateur ne recharge pas réellement la page, et garde le panier toujours « rempli » car il garde les informations et variables JavaScript en mémoire. Dans ce cas, il faut forcer au rechargement de la page. Comment faire ?

Grâce à l’astuce de ce site, voici la solution : il suffit d’ajouter cette balise : rel="external".

Et la page sera rechargée.

<a href="/" rel="external">Home</a>

En espérant que cela aide du monde !

4 juin 2012

JavaScript, jQuery et closure: petit exercice à faire

Ci suit un petit exercice JavaScript: copiez collez les deux morceaux de code qui suivent dans une page jsfiddle.net

Si vous examinez le code JavaScript, il est très simple : l’objectif de l’exercice semble simple : il faut juste faire « flasher » les libellés les uns après les autres (c’est là que la difficulté se trouve).

Seul problème, avec le code qui suit et semble correct : ça ne fonctionne pas. L’exercice est… de trouver la solution en JavaScript.

Ne regardez pas la fin, car il y a la solution !.

Code HTML :

<table id="s-inscrire-infos">
    <tbody>
        <tr>
            <td id="label-nomprenom"> <span><label for="label-nomprenom"><b>Nom et prénom&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="nomprenom" id="nomprenom" class="form-nom-prenom" size="50" maxlength="50" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-nomprenom" style="display:none">
            <td colspan="2">* Il faut renseigner votre nom et prénom</td>
        </tr>
        <tr>
            <td id="label-adresse1"> <span> <label for="label-adresse"> <b>Adresse ligne 1 :&nbsp;</b> <br /> <font size="-2">(ou nom de la société)&nbsp;</font> </label> </span> </td>
            <td> <span><input type="text" name="adresse1" id="adresse1" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Rue, voie, boîte postale, nom de société</span> </td>
        </tr>
        <tr class="erreur" id="erreur-adresse1" style="display:none">
            <td colspan="2">* Il faut au moins renseigner une ligne</td>
        </tr>
        <tr>
            <td id="label-adresse2"> <span><label for="label-adresse"><b>Adresse ligne 2 :&nbsp;</b> <br /> <font size="-2">(facultatif)&nbsp;</font> </label></span> </td>
            <td> <span><input type="text" name="adresse2" id="adresse2" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Appartement, bâtiment, étage, digicode, cedex, etc.</span> </td>
        </tr>
        <tr>
            <td id="label-cp"> <span><label for="label-cp"><b>Code postal&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="cp" id="cp" class="form-cp" size="20" maxlength="20" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-cp" style="display:none">
            <td colspan="2">* Il faut renseigner votre code postal</td>
        </tr>
        <tr>
            <td id="label-ville"> <span><label for="label-ville"><b>Ville&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="ville" id="ville" class="form-ville" size="25" maxlength="50" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-ville" style="display:none">
            <td colspan="2">* Il faut renseigner votre ville</td>
        </tr>
        <tr>
            <td id="label-tel"> <span> <label for="tel"><b>Numéro de téléphone&nbsp;:&nbsp;</b></label> </span> </td>
            <td> <span> <input type="text" name="tel" id="tel" class="form-tel" size="15" maxlength="20" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-tel" style="display:none">
            <td colspan="2">* Il faut renseigner votre téléphone</td>
        </tr>
        <tr>
            <td colspan="2" class="form-submit"> <input type="submit" value="Valider" /> </td>
        </tr>
    </tbody>
</table>

Code JavaScript :

jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

function flash(id, font_color, bg_color, nb) {
    var bc = $(id).getBg();
    var cl = $(id).css('color');
    var mx = parseInt(nb);
    if (mx <= 0) {
        mx = 1;
    }
    for (var i = 0; i < mx; i++) {
        $(id).animate({
            backgroundColor: bg_color,
            color: font_color
        }, 200).animate({
            backgroundColor: bc,
            color: cl
        });
    };
}

dataMessage = new Array("#erreur-nomprenom", "#erreur-adresse1", "#erreur-cp", "#erreur-ville", "#erreur-tel");
var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        console.log('should add:'+m);
        theQueue.queue('flash', function(next) {
           console.log('i will flash:'+m);
            $(m).fadeIn('slow', function() {
                flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                next();
            });
        });
    }
}
theQueue.dequeue('flash');

Solution :

var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        console.log('should add:' + m);
        var toFlash = (function(m) {
            return function(next) {
                console.log('i will flash:' + m);
                $(m).fadeIn('slow', function() {
                    flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                    next();
                });
            }
        })(m);
        theQueue.queue('flash', toFlash);
    }
}
theQueue.dequeue('flash');

Eh oui pas si évident que ça à trouver !

Merci à Julien pour son aide !

Si vous avez d’autres solutions n’hésitez pas à les mettre dans un commentaire en bas !

20 mai 2012

Erreurs 404 originales

Voici quelques liens vers des erreurs 404 que j’ai trouvé très originales.
Si vous en avez d’autres, n’hésitez pas à les ajouter dans les commentaires !