S01E32 — 29-08-2024.

Tricher c’est le mal! FAUX!.

jour 32.

Je ne sais pas si c’est à cause ou grâce à mon dernier speech, mais la nuit blanche que je viens de passer m’a été ultra bénéfique. Mon cerveau a bloqué sur le fait que je n’avais toujours pas de site internet. Puis après avoir fini le speech. Je me suis dit que ça serait bien d’en commencer un. Alors, je crée un simple index.html et lance un petit serveur et je commence.

Je me laisse aspirer par cette page vide :

• quels sont les informations importantes que je souhaite mettre en avant ?
• comment je m’adresse à mon auditoire ?
• comment je peux me démarquer des autres sites de présentation de langage de programmation ?
• quel design choisir ?

Et puis s’en branle, je me lance comme j’ai envie de le faire sans me poser de question. Les seuls choses que j’avais en tête était me différencier de mes concurrents et vulgariser tous les termes et concepts techniques pour que un autre sans cervelle comme moi puisse facilement comprendre quel est l’avantage derrière mon écosystème. Et finalement, je souhaite mettre en avant les fonctionnalités majeures. A ce moment là, je ne m’occupe pas du design. Je me concentre sur la structure de la page et du contenu.

Je commence par le logo et le titre zo — The symphonie of compilers, un menu pauvre menu avec une seul catégorie Docs et un slogan Codify human thoughts into energy-efficient, sane and reliable cross-platform software.. Ce sont les trois éléments qui ont commencés donner le ton de la nuit de travail que j’allais passer.

Seulement en visualisant ces trois éléments, je me rends tout de suite compte de tous les avantages d’avoir un site internet rapidement. Balek qu’il ne soit pas le plus beau mais le but est d’avoir un endroit accessible par tout le monde à tout moment. C-à-d, tu vas pouvoir en parler autour de toi avec un support disponible depuis ton téléphone. Lorsque tu parles de compilateur aux gens, qu’ils soient techniques ou pas, ils s’en foutent cruellement. C’est un sujet de niche de la niche. Tandis qu’avec un site internet, tu rends tes travaux accessibles et concrèts. Tu peux le partager rapidement, montrer des examples simples de code ou encore faire une démo en temps réel.

« L’explosion cérébrale à son paroxysme. »

Pris d’un élan de motivation et convaincu de ma conclusion, j’intègre une description qui servira d’argument de séduction. Parce que, je pars du principe que lorsque les gens accordent de leur temps pour une nouvelle technologie, ils vont être impartiaux. Je me fixe 15 secondes pour capter l’attention du visiteur du site. Il faut le faire rêver, montrer l’indispensabilité de ma technologie et l’engager à vouloir en savoir plus. Sans oublier le : ça m’intrigue, mais je ne sais pas.

C’est alors que je me dit qu’il faut un petit example de code. Le fameux hello, world!, histoire de se faire une idée rapide de la syntaxe et avoir l’envie de faire défiler le reste de la page pour en savoir plus.

fun main() {
  println("hello, world!");
}

Génial, l’ensemble me plaît donc ça pourra plaire à une autre personne. Sauf qu’il y a un truc qui me dérange. La syntaxe de mon extrait n’a pas de coloration syntaxique. Dé-gout-té surtout que je n’ai pas envie d’installer de librairies externes. C’est juste une version simple que je veux. Je n’ai pas envie de lire de la documentation sinon je vais perdre mon quaalude créatif.

C’est là que je me dis que j’allais tricher. Olala, le tricheur ! BAh ouais ma gueule, là je n’ai pas le temps donc je vais devoir me la jouer à la George Lucas qui a triché avec des maquettes miniatures de vaisseaux pour nous faire rêver de façon in-croy-able.

A savoir que pour afficher du code en HTML, tu as deux balises <pre> et <code> :

<!-- 1. -->
<pre>
fun main() {
  println("hello, world!");
}
</pre>

<!-- 2. -->
A code snippet for the <code>foobar()</code> call function.

1. <prev> doit être utilisé pour un bloc de code.
2. <code> doit être utilisé pour un fragment de code.

Mais pour représenté plusieurs lignes de code, c’est mieux d’avoir la balise <prev> en parent avec <code> comme enfant :

<pre>
  <code>
    fun main() {
      println("hello, world!");
    }
  </code>
</pre>

C’est bien beau tout ça, mais comment je triche moi ? Je suis déjà entrain de tricher sous tes yeux. Active ton byakugan car l’example au-dessus, est illustre déjà la tentative de triche que je vais faire. Pour t’expliquer ce que je souhaite faire, c’est appliquer une couleur différente sur chaque élément de mon programme simple, c-à-d :

• fun main ( ) { println ( "hello, world" ) ; }.

Chacun de ces élements sera colorié selon ma convention. Je me dis, vasy, je vais entourer chaque élément d’une balise qui aura une classe spécifique <span class="kw"> — ici kw est un diminutif pour les symboles de la famille des mots-clés (keyword en anglais). Donc je commence avoir un élément.

<pre>
  <code>
    <span class="kw">fun</span> main() {
      println("hello, world!");
    }
  </code>
</pre>

Dans une balise <style>, j’ai le code suivant :

  <style>
    .kw {
      color: purple;
    }
  </style>

Je sauvegarde, regarde le résultat à l’écran et j’obtiens :

  
fun main() {
  println("hello, world!");
}
  

Ô pu-tain, ça fonctionne, bordel de merde, j’y crois. Je rafraichis une nouvelle fois ma page. La couleur est toujours là. Olala, c’est turfu.

« Heeeey mais attends ?! Ce que je suis entrain de faire c’est de la coloration syntaxique tah les codeMirror, Monaco, les éditeurs de code et compagnie non ? C’est exact. Attends, attends, t’es entrain de me dire que c’est ma tentative de triche est utilisé par tout le monde ? Oui. Mais naaaaan, c’est tellement simple en faite. »

Après cette discussion avec un de mes mutants, je capte tout de suite la vibe et les ingrédients dont j’aurai besoin pour créer un module pour la coloration syntaxique.

Je continue mon exploration, tout fonctionne à merveille. Je n’ai plus qu’à transformer tout ça en une structure de données qui me fera gagner du temps. Mais le turfu est déjà là sans devoir apprendre une documentation, installer des dépendances surtout que ces librairies ne supportent que les langages mainstream donc j’aurai encore plus de travail pour comprendre comment supporter la coloration syntaxique pour trois pauvres lignes de code. Ils en n’ont rien à foutre de nos langages indépendants et disruptifs, on ne rapporte pas d’oseil pour les sponsoriser.

Du coup, l’adage :

« Avec ma bite et mon couteau. »

N’a jamais fait autant sens. Tu n’as pas les outils pour le faire ? Débrouille-toi, triche, mais fais-le.

« Just Do It! Et ça va aller. »

@invisageable