J’aime à croire que la majorité du temps pour une intégration ou un développement se passe à réfléchir sur une architecture de qualité, un squelette ou un algorithme solide. Par conséquent, il est nécessaire de passer le moins de temps possible sur la rédaction du code, tout en diminuant le nombre d’erreurs bêtes : fautes de frappes, oublis de propriétés, …

Une des techniques qui accompagnent ma journée est ainsi l’utilisation de Snippets. Typiquement, il s’agit de quelques caractères significatifs, et une touche « Trigger » qui va transformer ces derniers en de belles lignes de codes. Parmi les avantages : On gagne du temps, on évite de faire des erreurs sur des structures complexes (gradients en CSS3) et on évite d’utiliser des fonctions ou outils externes pour générer du code. Text Expander m’apprend ainsi que, sur la semaine dernière, 426 caractères ont été étendus en 25000. Soit un gain de temps de 2h à 40 mots par minutes !

Mon arrière grand père me disait d’ailleurs qu’un bon intégrateur avait la touche « < > » très propre car elle n’est jamais utilisée. (Véridique)

Un snippet doit donc être simple, et représentatif de son contenu. Mais attention au piège : il faut maîtriser les bouts de code produits avant de les transformer en snippets, le but étant de ne pas avoir à les taper, pour mesurer leur impact. C’est pourquoi je déconseille de recopier bêtement la bibliothèque de snippets d’un collègue, en préférant s’en inspirer pour concevoir les siens. Zen Coding, dans sa partie snippets; peut néanmoins être un point de départ pour constituer votre bibliothèque.

Voici quelques snippets parmi mes préférés :

a->tab :

<a href="#">[curseur]</a>

br->tab :

-moz-border-radius : [curseur]px;
-webkit-border-radius : [curseur]px;
-webkit-background-clip: padding-box;
border-radius : [curseur]px;

bg->tab :

background : transparent url(../images/[curseur]) no-repeat top left;

b->tab :

<strong>[curseur]</strong>

inp->tab :

<label for="[fill:id]">[curseur]</label>
<input type="text" name="[fill:id]" id="[fill:id]" />

table->tab :

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

wpq->tab :

<?php 
$args = array(
    'posts_per_page' => 5,
    'paged' => $paged
);
$the_query = new WP_Query($args);
while ($the_query->have_posts()) : $the_query->the_post();
    the_title();
endwhile;
wp_reset_postdata(); 
?>

J’utilise Text Expander pour les centraliser, me permettant de les utiliser sur différents postes de travail (merci DropBox), et sur différents logiciels (oui, même pour rédiger cet article dans l’interface WordPress :)). Des gestionnaires de snippets sont souvent inclus dans les IDE.

Et vous, quels sont vos snippets favoris ?

Tags : , ,