La magie des Snippets

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

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 :

[curseur]

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 :

[curseur]

inp->tab :

table->tab :

wpq->tab :

 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 ?

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Pour moi, c’est une utilisation complémentaire à Zen Coding qui est très bon pour générer une structure HTML (ul>li*5>a et autres), mais qui n’est pas formidable dans sa gestion des snippets. les déclencheurs sont parfois trop longs et qu’on gagnera en vitesse à en mettre en place des plus courts (br pour border-radius), ou en mettant une structure personnalisée ( « inp » qui me génère un input avec label associé entouré d’un div).
    Si c’est juste pour étendre des « strong » vers des « <strong></strong> », Zen Coding suffira largement.

  • Ok 🙂 En tout cas c’est marrant que tu aies besoin d’utiliser un outil externe à ton IDE pour avoir des snippets.

  • J’utilise Netbeans et l’outil interne est presque suffisant, mais pas de synchro entre deux postes de travail, et l’impossibilité d’insérer un snippet HTML dans un bout de PHP ( à base de ) m’ont fait utiliser un outil mieux fichu.

  • Très bon article, et très bons snippets que j’utilise également régulièrement (grâce à leur implémentation super bien foutu dans Coda). La plupart des autres snippets que j’utilise sont spécifiques à des clients/projets.

    Par exemple, j’ai un client qu’à Un Nom Super Long Et Super Chiant A Retaper. Du coup, je me suis fait un snippet du genre : uns->Un Nom Super Long Et Super Chiant A Retaper.

    Autre exemple, sur certains projets, j’utilise des polices en CSS3. Quand je veux appeler cette police, je me suis fait un snippet du genre comicavec->font-family:’Comic avec’, Tahoma, sans-serif;.

    Bref, les snippets, c’est bon, mangez-en.

  • Article très intéressant, j’avais vite fait entendu parler de Zen coding mais je n’ai jamais vraiment testé. J’avoue que quand j’écris une table, c’est à grand coups de copier/coller (heureusement que j’en fais pas souvent).

    Sinon pour aller plus vite, j’utilise Notepad ++ et l’extension SnippetsPlus. Par défaut elle est fournie avec un lib générale (html), VS et CS. mais il est possible d’ajouter des libs. Du coup je me suis créée une grosse librairie WordPress avec tous les trucs utiles qu’on utilise et réutilise (templatepath, loop, etc) que je complète au fur et à mesure et exporte de pc en pc (merci dropbox ici aussi^^) ainsi qu’une autre avec des bouts de jquery que je réutilise aussi assez souvent. Le gros « plus » c’est qu’on peut insérer avec ce plugin des bouts de code « autour » de ce qu’on vient d’écrire, exemple mettre le chemin pour le javascript, le selectionner, et ajouter autour tout le code script type etc

  • J’ignorais que ça s’appelait des snippets aussi, tiens. Pour moi, un snippet c’est juste un bout de code qu’on conserve dans un coin (j’utilise Codex) et qu’on copie-colle au besoin 😉
    Il faudra que je me penche plus sur ZenCoding, je l’ai installé sur mon Netbeans mais je m’en sers peu.

  • J’utilise également les snippets de Netbeans mais pour développer sous Symfony.
    C’est vrai que l’IDE a pas mal de limitations mais le gain de temps est énorme (je pense notamment aux fichiers de trad xliff).

    Je ne l’ai pas encore mis en place pour l’inté par manque de taff et surtout parce que Netbeans n’est pas super, mais comme Maxime le dit, PHPStorm rox.