Il y a des humains ici bas qui se disent "waaah être développeur ça doit être super dur jamais que je pourrais y arriver" - On va démystifier tout ça aujourd'hui, OK?

Ce à quoi vous allez assister dans un instant risque de changer votre façon d'envisager les différents problèmes que la vie nous donne généreusement à résoudre. Non, en fait, je pense que je peux aller modestement jusqu'à dire que tout ça risque de changer le sens de votre vie.

Je vous parle d'une méthode de travail mais qui est aussi une philosophie, qui dans son essence même nous permet de nous façonner au jour le jour en quête de connaissance et de perfection.

Commençons par une question qui, j'en suis sûr, n'a encore jamais été abordée auparavant tant dans les grandes librairies ancestrales que sur Tumblr: dessiner un froc en SVG. Il s'agit dès lors, je tiens à le préciser, d'un froc VECTORIEL.

Nous autres les développeurs, ont résout des problèmes, on euh... Remplit des... Besoins?

Un matin ça peut être créer une app. qui analyse les schémas migratoires des phoques tachetés à crêtes afin d'anticiper les endroits à surveiller contre le braconnage, et deux jours plus tard ça peut être dessiner un pantalon.

Le modèle sur papier

Tout commence par le papier. Que ça soit un carton de bière ou un carnet scolaire, nous aurons besoin d'un support et d'un stylo. Pas de crayon, on est pas là pour corriger des trucs, nous allons réaliser plusieurs itérations non-mutables (immutables? Inmutables?) c'est-à-dire qu'elles ne mutent pas. Vous comprendrez plus tard dans votre carrière de développeur.

Bon en pratique on va se limiter à maximum 1.5 itérations parce qu'on a pas que ça à faire et qu'il faut assez rapidement sortir de l'étape modèle sinon on avance pas. C'est de la pure sagesse ce que je vous dis là alors je vous conseille de prendre note.

J'ai décidé de partir sur un système de coordonnées de 0 à 100 sur x et y. En SVG ça se passe dans ce sens-là:

Reste à préparer un croquis hyper réaliste avec une grande partie des coordonnées. Pas nécessairement toutes parce que... Il y a des chances que certaines choses devront être ajustées une fois que l'on sera face à un visuel.

L'important en programmation est de ne jamais être trop déçu du résultat, même s'il pendouille et vous supplie de l'achever.

Vous pouvez voir ci-dessous deux tentatives. Les jambes me semblaient un peu trop écartées au dessus je ne sais pas trop pourquoi, j'ai un genre de sens inné des proportions et un compas naturel dans l'oeil. Et pas du côté de la pointe.

La photo semble laisser trahir qu'il y a un recto bourré de dessins de vêtements dignes d'un enfant de 8 ans, mais en fait c'est juste un défaut de la table.

Le CHEMIN

La meilleure manière de dessiner des trucs c'est imaginer un chemin entre différentes coordonnées dans votre tête. Quelqu'un se souvient du langage Logo? Non? M'étonne pas. On s'en fout.

Reste à découper le pantalon dans votre tête en "Je commence aux coordonnées (X,Y), je trace une horizontale jusque X=30, etc. Jusqu'à fermer le chemin. Il suffit de choisir un point de départ sur le brouillon et utiliser les coordonnées pour décider des dimensions.

Un chemin en SVG est représenté par l'élément path, dont l'argument d représente la suite d'instructions de tracé. Nous allons utiliser ces quelques instructions simples:

• M: Place la TORTUE aux coordonnées qui suivent
• H: Trace une horizontale jusqu'à la coordonnée X fournie
• V: Idem mais trace une verticale
• L: Trace une ligne vers les coordonnées (X,Y) fournies
• Z: Ferme le chemin

Avant toutes choses, créons des frontières à notre univers pour savoir jusqu'où on peut tracer. Les SVG ont un attribut viewBox qui permet de définir la zone de coordonnées qui sera utilisée. Moi j'utilise toujours 0 à 100 sur X et 0 à 100 sur Y. Parce que... Ben... 1000 c'est trop et 10 c'est trop peu. Réflechissez-y, pour moi c'est évident.

On en arrive à:

<svg viewBox="0 0 100 100" width="400" height="400">
  <path fill="transparent" stroke="#000"
    d="M15 0 H75 
       V15 L100 100 
       H65 L50 25 
       H40 L25 100 
       H0 L15 15 Z" 
  />
<svg>

Rien ne vous empêche d'écrire votre chemin sur plusieurs lignes qui ont un sens tout à fait apparent histoire d'y voir plus clair quand vous devrez indubitablement TOUT CHANGER dans les minutes qui suivent.

Résultat:

On s'approche du brouillon mais il y a quelques petits problèmes, reste à entrer en mode incrémental essai/erreur pour une durée indéterminée. C'est cette partie du procédé qui demande la plus grande quantité de café.

Donc, déjà, j'ai une jambe qui est trop large et je ne sais pas pourquoi, et ensuite, j'ai bien pris soin de répéter la même erreur commise chaque fois que je crée un SVG: j'ai utilisé les coordonnées max 0 et 100 pour X et Y et le problème c'est que le tracé a une certaine épaisseur en prixel qui dépasse de la boite quand on place le tracé sur l'extrémité du système de coordonnées.

Vous inquiétez pas! Il suffit de tripoter viewBox afin qu'il ne ressemble plus à rien pour que ça finisse par ressembler à quelque chose. Mais commençons par soigner cette jambe.

La jambe est tracée avec des lignes, dont une qui va vers le maximum de coordonnées 100,100. J'ai essayé avec 90,100 et c'est bon. Chouette. Juste que maintenant le pantalon est un peu décentré, je vous montre en ajoutant une petite bordure hein:

C'est le moment de sacrifier viewBox en le forçant à prendre une position pas du tout naturelle. Puisque je ne vais plus que jusqu'à 90 pour ma jambe droite, euh... Si au lieu de partir de X=0 je pars de X=-5, ça recentre tout.

Reste encore à décoller le haut et le bas du pantalon des extrémités. Ajoutons 10 unités à la taille verticale, et commençons également à Y=-5, on arrive à ceci:

<svg viewBox="-5 -5 100 110" width="400" height="400">
  <path fill="deeppink" 
        stroke="#000"
        stroke-width="4"
    d="M15 0 H75 
       V15 L90 100 
       H65 L50 25 
       H40 L25 100 
       H0 L15 15 Z" 
  />
</svg>

Et voilà le travail! Le reste de la journée est libre pour dire à toutes sortes de gens qu'ils ont TORT sur Twitter.

Vous venez de voir ce pantalon se dessiner tel une fleur qui éclot au ralenti dans une de ces vidéos de trucs qui éclosent au ralenti.

C'est donc ça être un artiste?

Tout à fait.

Même s'il est possible d'ajouter des détails, de dessiner des courbes, des dégradés et tout ce genre de choses, rien ne vaut la sobriété d'un truc bien carré ou de quelques cercles épongés sur une surface blanche.

Par exemple, je vous invite à analyser le cas particulier du logo de la Wallonie (région sinistrée de la Belgique, pas important pour l'analyse (enfin je pense)):

Vous croyez que l'artiste a juste copié collé le même cercle 5 fois dans Adobe Illustrator? Que nennnnnnni! Là aussi tout est parti d'une idée sur un callepin, de coordonnées de petites boules dans la tête puis d'essais/erreurs jusqu'à ce que le résultat soit satisfaisant et élégant de sobriété.

Magnifique. Etre artiste ou développeur c'est pas difficile si vous appliquez LA METHODE.

D'où tu crois qu'elle vient l'essence de ton scrum truc avec ton daily scrum et ton scrum master? C'est la méthode avec un cadre légèrement différent et surtout l'idée de mettre tout le monde plus ou moins d'accord dessus comme ça on peut vendre des formations et des certifications et avoir l'impression que ses développeurs travaillent vraiment quand on gère une boite de développement.

Je vais vous mettre dans le secret du principal obstacle de la méthode: la prosscrd prosdf proscratc procrastination. Par ex. choisir dans quel callepin faire le brouillon, avec quel stylo, et à quel endroit, avec quelle boisson. Pas mal de choix à gérer avant de pouvoir commencer, quoi.

Après vous avez les choix techonologiques, les choix artistico-stylistiques, l'éditeur à utiliser, la musique de fond à mettre, ... Une infinité d'obstacles que vous créez vous-mêmes et qui rendent la méthode foireuse.

Pour terminer sur une note plus positive, je me dois de vous rappeler que, de toutes manières, le seul but des formes de vie à base d'ADN c'est que cet ADN perdure au fil des générations, et ça marche avec ou sans scrum.