diff --git a/docs/learn/devops/2025-12-12.md b/docs/learn/devops/2025-12-12.md index 68e2a50..06839f6 100644 --- a/docs/learn/devops/2025-12-12.md +++ b/docs/learn/devops/2025-12-12.md @@ -4,7 +4,7 @@ tags: - Bash --- -kirk zehef pcq t'as pas commit +kirk zehef pcq t'as pas commit *completement zehef pcq t'as pas git push* # Git pour les neuilles (12/12/25) diff --git a/docs/learn/devops/2026-01-16.md b/docs/learn/devops/2026-01-16.md index 6ed5dde..6565025 100644 --- a/docs/learn/devops/2026-01-16.md +++ b/docs/learn/devops/2026-01-16.md @@ -8,7 +8,7 @@ tags: tk completement sous frozen *7alouf ouvre grabber apres 9h brainrot tsunami* -# pip et environnements virtuels pour les caca (16/01/26) +# pip et environnements virtuels pour les quoicoubenks (16/01/26) ## Python et ses environnements virtuels diff --git a/docs/learn/devops/2026-01-22.md b/docs/learn/devops/2026-01-22.md index 7ac3ba4..c091eb3 100644 --- a/docs/learn/devops/2026-01-22.md +++ b/docs/learn/devops/2026-01-22.md @@ -3,7 +3,7 @@ tags: - SQL --- -tuto ytb sql +tuto ytb sql *florian quand je lui demande de l'aide* # SQL pour les tung tung tung sahur (22/01/26) diff --git a/docs/projects/2026-01-23.md b/docs/projects/2026-01-23.md index 92a9097..5c74273 100644 --- a/docs/projects/2026-01-23.md +++ b/docs/projects/2026-01-23.md @@ -3,7 +3,7 @@ tags: - Projets - Docs --- - + # Docs et notes avec Zensical !!! note diff --git a/docs/projects/2026-02-13.md b/docs/projects/2026-02-13.md new file mode 100644 index 0000000..c76a460 --- /dev/null +++ b/docs/projects/2026-02-13.md @@ -0,0 +1,44 @@ +--- +tags: + - Javascript + - React + - HTML/CSS + - Projet +--- + + +# Faire un portfolio en JS moderne + +## But du projet +Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels. + +## Stack de travail +On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ? + +### Le Moteur (Build tool) +Souvent appelé "moteur" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers. + +### Le Framework +Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit. + +### Le Compilateur +C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement. + +### Choix +Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer. + +!!! success "Stack choisie" + + - Moteur : Vite -> Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles + - Framework : React -> Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente + - Compilateur : JS/SWC -> Très efficace et rapide et simple et utilnous permet d'utilise JS + +## Points importants du projet + +### Création du projet + +### Packages npm + +### Hébergement avec Vercel + +### Clés d'environnements diff --git a/mkdocs.yml b/mkdocs.yml index ff1ef90..c761d36 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -64,6 +64,7 @@ nav: - Projets: - projects/2025-12-05.md - projects/2026-01-23.md + - projects/2026-02-13.md - Liens cools: links.md markdown_extensions: diff --git a/site/404.html b/site/404.html index 4b80a1d..6caf4c7 100644 --- a/site/404.html +++ b/site/404.html @@ -514,7 +514,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -813,6 +813,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/index.html b/site/index.html index e61c975..23de7c6 100644 --- a/site/index.html +++ b/site/index.html @@ -580,7 +580,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -879,6 +879,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/learn/devops/2025-10-30/index.html b/site/learn/devops/2025-10-30/index.html index 191cfb2..9f563f7 100644 --- a/site/learn/devops/2025-10-30/index.html +++ b/site/learn/devops/2025-10-30/index.html @@ -586,7 +586,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -885,6 +885,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/learn/devops/2025-11-28/index.html b/site/learn/devops/2025-11-28/index.html index 88fcec9..8871b44 100644 --- a/site/learn/devops/2025-11-28/index.html +++ b/site/learn/devops/2025-11-28/index.html @@ -636,7 +636,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -935,6 +935,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/learn/devops/2025-12-12/index.html b/site/learn/devops/2025-12-12/index.html index 9dce457..1071def 100644 --- a/site/learn/devops/2025-12-12/index.html +++ b/site/learn/devops/2025-12-12/index.html @@ -686,7 +686,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -985,6 +985,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + @@ -1175,7 +1203,7 @@ -

    kirk zehef pcq t'as pas commit +

    kirk zehef pcq t'as pas commit completement zehef pcq t'as pas git push

    Git pour les neuilles (12/12/25)

    Créer un git

    diff --git a/site/learn/devops/2026-01-16/index.html b/site/learn/devops/2026-01-16/index.html index 2640387..4f7f21b 100644 --- a/site/learn/devops/2026-01-16/index.html +++ b/site/learn/devops/2026-01-16/index.html @@ -23,7 +23,7 @@ - pip et environnements virtuels pour les caca (16/01/26) - Les incroyables notes de devops + pip et environnements virtuels pour les quoicoubenks (16/01/26) - Les incroyables notes de devops @@ -146,7 +146,7 @@
    - + Skip to content @@ -182,7 +182,7 @@
    - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26)
    @@ -536,7 +536,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -554,7 +554,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -896,6 +896,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + @@ -999,7 +1027,7 @@

    tk completement sous frozen 7alouf ouvre grabber apres 9h brainrot tsunami

    -

    pip et environnements virtuels pour les caca (16/01/26)

    +

    pip et environnements virtuels pour les quoicoubenks (16/01/26)

    Python et ses environnements virtuels

    • En python, on peut travailler dans des "sandboxes" ou toutes les libraires installées resteront contenues dedans
    • diff --git a/site/learn/devops/2026-01-22/index.html b/site/learn/devops/2026-01-22/index.html index 753c1e8..9864741 100644 --- a/site/learn/devops/2026-01-22/index.html +++ b/site/learn/devops/2026-01-22/index.html @@ -527,7 +527,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -957,6 +957,34 @@ + + + + + + +
    • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
    • + + + +
    @@ -1119,7 +1147,7 @@ -

    tuto ytb sql +

    tuto ytb sql florian quand je lui demande de l'aide

    SQL pour les tung tung tung sahur (22/01/26)

    Modèle MVC

    diff --git a/site/learn/javascript/2026-01-30/index.html b/site/learn/javascript/2026-01-30/index.html index 44b3ca7..7b1a0aa 100644 --- a/site/learn/javascript/2026-01-30/index.html +++ b/site/learn/javascript/2026-01-30/index.html @@ -525,7 +525,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -836,6 +836,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + @@ -907,6 +935,8 @@ +

    boss dangereux criminel +celui qui pete fort dans la classe jv te grabber

    Javascript (30/01/26)

    diff --git a/site/learn/javascript/2026-02-06/index.html b/site/learn/javascript/2026-02-06/index.html index bbb4c82..f4e642c 100644 --- a/site/learn/javascript/2026-02-06/index.html +++ b/site/learn/javascript/2026-02-06/index.html @@ -525,7 +525,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -963,6 +963,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/learn/javascript/2026-02-09/index.html b/site/learn/javascript/2026-02-09/index.html index e8cd2d5..8ccc2a3 100644 --- a/site/learn/javascript/2026-02-09/index.html +++ b/site/learn/javascript/2026-02-09/index.html @@ -525,7 +525,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -935,6 +935,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/links/index.html b/site/links/index.html index b294291..3070638 100644 --- a/site/links/index.html +++ b/site/links/index.html @@ -9,7 +9,7 @@ - + @@ -521,7 +521,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -820,6 +820,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/projects/2025-12-05/index.html b/site/projects/2025-12-05/index.html index c39b8db..5ba74f0 100644 --- a/site/projects/2025-12-05/index.html +++ b/site/projects/2025-12-05/index.html @@ -523,7 +523,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -916,6 +916,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + diff --git a/site/projects/2026-01-23/index.html b/site/projects/2026-01-23/index.html index 5114aeb..62d2e2d 100644 --- a/site/projects/2026-01-23/index.html +++ b/site/projects/2026-01-23/index.html @@ -12,7 +12,7 @@ - + @@ -523,7 +523,7 @@ - pip et environnements virtuels pour les caca (16/01/26) + pip et environnements virtuels pour les quoicoubenks (16/01/26) @@ -905,6 +905,34 @@ + + + + + + +
  • + + + + + + + + Faire un portfolio en JS moderne + + + + + + + + +
  • + + + + @@ -1017,8 +1045,7 @@ -

    boss dangereux criminel -celui qui pete fort dans la classe jv te grabber

    +

    Docs et notes avec Zensical

    Note

    diff --git a/site/projects/2026-02-13/index.html b/site/projects/2026-02-13/index.html new file mode 100644 index 0000000..174e785 --- /dev/null +++ b/site/projects/2026-02-13/index.html @@ -0,0 +1,1369 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + Faire un portfolio en JS moderne - Les incroyables notes de devops + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + + + + + + +
    + + +
    + +
    + + + + + + +
    +
    + + + +
    +
    +
    + + + + + +
    +
    +
    + + + + + + + +
    + +
    + + + + + + +

    +

    Faire un portfolio en JS moderne

    +

    But du projet

    +

    Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels.

    +

    Stack de travail

    +

    On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ?

    +

    Le Moteur (Build tool)

    +

    Souvent appelé "moteur" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers.

    +

    Le Framework

    +

    Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit.

    +

    Le Compilateur

    +

    C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement.

    +

    Choix

    +

    Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer.

    +
    +

    Stack choisie

    +
      +
    • Moteur : Vite -> Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles
    • +
    • Framework : React -> Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente
    • +
    • Compilateur : JS/SWC -> Très efficace et rapide et simple et utilnous permet d'utilise JS
    • +
    +
    +

    Points importants du projet

    +

    Création du projet

    +

    Packages npm

    +

    Hébergement avec Vercel

    +

    Clés d'environnements

    + + + + + + + + + + + + + + + + + + + + +
    +
    + + + +
    + +
    + + + +
    +
    +
    +
    + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/search.json b/site/search.json index 508822d..6a7530c 100644 --- a/site/search.json +++ b/site/search.json @@ -1 +1 @@ -{"config":{"separator":"[\\s\\-_,:!=\\[\\]()\\\\\"`/]+|\\.(?!\\d)"},"items":[{"location":"","level":1,"title":"Bienvenue dans mes notes de devops","text":"

    avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois

    ","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#bienvenue-dans-mes-notes-de-devops","level":1,"title":"Bienvenue dans mes notes de devops","text":"","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#structure","level":2,"title":"Structure","text":"

    -> cours (Notes sur les cours)

    -> projects (Notes sur des nouveaux projets)

    -> liens cools (mes sites favoris)

    ","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"links/","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#liens-cools-de-ma-poche","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#design","level":2,"title":"🎨 Design","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#developpement","level":2,"title":"💽 Developpement","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"learn/devops/2025-10-30/","level":1,"title":"C'est quoi linux ? (30/10/25)","text":"","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-10-30/#cest-quoi-linux-301025","level":1,"title":"C'est quoi linux ? (30/10/25)","text":"

    Warning

    Page en travaux, doit être finie avec toutes les informations que j'ai sur Linux en général

    ","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-10-30/#arborescence-type-sur-unix","level":2,"title":"Arborescence type sur UNIX","text":"

    Unix a généralement cette arborescence que ce soit sur n'importe quelle distro Linux également Android pour les téléphones et même quelques similitudes sur macOS.

    /               # Racine du disque\n├── /bin/       # Contient les commandes de base\n├── /boot/      # Fichiers de demarrage\n├── /dev/       # Tout ce qui est lié aux périphériques\n├── /etc/       # Fichiers de configuration\n├── /home/      # Répertoires utilisateurs\n├── /lib/       # Bibliothèques logicielles\n├── /mnt/       # Point de montage pour les systèmes de fichier temporaires\n├── /media/     # Point de montage pour les disques temporaires\n├── /opt/       # Logiciels optionnels, la ou on installera des programmes maison\n├── /root/      # Répertoire du user root\n├── /var/       # Variable, contient des logs, ect...\n├── /usr/       # Contient sensiblement la même chose que la racine mais sans être utile au fonctionnement du système\n├── /srv/       # Services hébergés sur le systèmes (FTP, HTTP, ect...)\n├── /run/       # Emplacement mémoire des programmes\n└── /tmp/       # Temporaire\n
    source de l'arbo.

    ","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-11-28/","level":1,"title":"Commandes *sh pour les idiots (28/11/25)","text":"

    mon big ass qui fait sudo rm -rf / sans réfléchir

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#commandes-sh-pour-les-idiots-281125","level":1,"title":"Commandes *sh pour les idiots (28/11/25)","text":"","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#cheatsheet-de-plein-de-commandes","level":2,"title":"Cheatsheet de plein de commandes","text":"

    Depuis le début, beaucoup de commandes on été utilisées, du coup je note ici les commandes utilisées depuis le début et a quoi elles servent en gros

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#commandes-de-base","level":3,"title":"Commandes de base","text":"
    1. sudo : lance une commande avec les superdroits, peut manipuler tout le pc avec en gros

      sudo [commande]\n

    2. ls : liste les fichiers d'un dossier

      # -a pour afficher les fichiers cachés / -l pour afficher en liste avec plus d'infos\nls [options] [fichier|dir]\n

    3. cd : changer de dossier

      # ~ pour aller au répertoire home / .. pour revenir en arriere\ncd [dir]\n

    4. pwd : affiche le répertoire actuel

      pwd\n

    5. touch : affiche le contenu d'un fichier

      touch [fichier]\n

    6. nano : éditeur de texte

      nano [fichier]\n

    7. mkdir : supprime ce qu'on lui donne

      mkdir [options] [fichier|dir]\n

    8. rm : supprime ce qu'on lui donne

      # -r pour supprimer un dossier et son contenu (recursive) (`rmdir` le fait aussi)\n# -f force la commande\nrm [options] [fichier|dir]\n

    9. cp : copie...

      cp [options] [source] [destination]\n

    10. mv : ...et déplace

      mv [options] [source] [destination]\n

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#les-caracteres-dassociations","level":3,"title":"Les caractères d'associations","text":"

    | (le pipe) -> prend le résultat de la commande de gauche et le donne à celle de droite

    exemple : liste tout un répertoire, mais n'affiche que les résultats qui sont \"feur\"

    ls -la | grep \"feur\"\n

    > et >>

    • envoie le résultat d'une commande dans un fichier texte
    • > écrase le fichier / >> ajoute à la fin sans effacer
    • ex: echo \"coucou\" > fichier.txt
    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#permissions-et-utilisateurs","level":3,"title":"Permissions et Utilisateurs","text":"

    chmod [droits] [fichier] - change les permissions d'un fichier (qui peut lire/écrire/exécuter) - chmod +x [fichier] rend un script exécutable (très important) - chmod 777 [fichier] donne tous les droits à tout le monde (dangereux mais ça dépanne)

    chown [user]:[groupe] [fichier] - change le propriétaire du fichier (si t'as copié un truc en sudo et que tu peux plus le toucher)

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#lecture-et-recherche-dans-les-fichiers","level":3,"title":"Lecture et recherche dans les fichiers","text":"

    cat [fichier] - affiche tout le contenu d'un fichier d'un coup dans le terminal - utile pour les petits fichiers, sinon ça inonde l'écran

    less [fichier] - affiche le contenu page par page (on peut scroller) - appuyer sur q pour quitter

    head [fichier] / tail [fichier] - affiche juste le début (head) ou la fin (tail) d'un fichier - tail -f [fichier] hyper utile pour voir les logs en direct (ça attend les nouvelles lignes)

    grep [mot] [fichier] - cherche un mot ou une phrase spécifique dans un fichier (le ctrl+f du terminal) - -r pour chercher dans tous les dossiers (recursive) / -i pour ignorer les majuscules

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-12-12/","level":1,"title":"Git pour les neuilles (12/12/25)","text":"

    completement zehef pcq t'as pas git push

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#git-pour-les-neuilles-121225","level":1,"title":"Git pour les neuilles (12/12/25)","text":"","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#creer-un-git","level":2,"title":"Créer un git","text":"","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-si-le-projet-existe-deja","level":3,"title":"-> Si le projet existe deja","text":"
    • On clone le projet au sein d'un dossier, celui-ci sera dans son dossier de travail. -> git clone (url du projet git)
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-sinon-creer-le-projet","level":3,"title":"-> Sinon créer le projet","text":"
    • Crée le projet git à partir de ce dossier. -> git init (dossier de travail)
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#ignorer-des-fichiersdossiers","level":2,"title":"Ignorer des fichiers/dossiers","text":"
    • Ajouter des interdictions dans .gitignore

    echo gbvenv/ >> .gitignore <- on indique via un echo qui écrira dans le fichier .gitignore qu'on ne veut pas push le dossier \"gbvenv\" ici, un fichier on ne mettera pas le slash (logique en amont)

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#une-fois-que-de-fichiers-sont-dispos-empaqueter","level":2,"title":"Une fois que de fichiers sont dispos, empaqueter !","text":"

    Pour envoyer un projet git, c'est comme envoyer un colis à la poste, d'abord, on met nos affaires dans le colis

    Plusieures possibilités ☝️

    • Ajoute TOUS les fichiers du dossier via l'option -A ou --all -> git add -A

    • Ajoute SEULEMENT les modifications et suppressions (donc pas de nouveaux fichiers) -> git add -u

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#etiqueter-le-paquet","level":2,"title":"Etiqueter le paquet","text":"

    Ensuite, on rempli l'étiquette du colis et on la colle au colis

    • On écrit une note recap courte du commit sur le git -> git commit -m \"(message du commit)\"
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#deposer-le-colis","level":2,"title":"Déposer le colis","text":"

    Enfin pour push, c'est a dire déposer le colis au bureau de poste pour l'envoi, on fait :

    • On envoie le paquet de l'origine à la branche souhaitée dans le git -> git push -u origin (branche souhaitée)

    Info

    -u veut dire ce que dit la doc en gros

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-si-erreur","level":3,"title":"-> SI ERREUR","text":"

    Dans le cas ou un fichier/dossier a été supprimé autre part avant de push nos modifs

    • Merge de force les deux branches pour ne faire qu'une branche git config pull.rebase false
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#utiliser-deux-branches-differentes","level":2,"title":"Utiliser deux branches différentes","text":"

    Dans le cas ou l'on veut travailler avec une seconde branche

    • Pour switch de branche de travail -> git checkout (branche souhaitée)

    • Pour merge en ecrasant la branche souhaitée ⬇️

      git merge -s ours main\ngit checkout main\ngit merge (branche à merge)\n

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2026-01-16/","level":1,"title":"pip et environnements virtuels pour les caca (16/01/26)","text":"

    7alouf ouvre grabber apres 9h brainrot tsunami

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les caca (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#pip-et-environnements-virtuels-pour-les-caca-160126","level":1,"title":"pip et environnements virtuels pour les caca (16/01/26)","text":"","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les caca (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#python-et-ses-environnements-virtuels","level":2,"title":"Python et ses environnements virtuels","text":"
    • En python, on peut travailler dans des \"sandboxes\" ou toutes les libraires installées resteront contenues dedans

    Utile de créer donc un environnement pour chaque projet afin de en pas perturber d'autres projets avec des milliers de packages inutiles en gros

    python3 -m venv gbvenv <- permet de créer un environnement (venv crée l'environnement \"gbvenv\")

    source gbvenv/bin/activate <- lance cet environnement pour travailler dedans

    • En parlant de packages, parlons de ✨pip✨

    pip est le packages manager de python, en l'appelant, on peut installer des packages comme uvicorn par exemple, utile pour grabber

    pip install --upgrade pip <- update les packages

    python -m pip install *** <- installe le package qu'on notera a la place des ***

    pip freeze >> requirements.txt <- commande super utile pour partager les dependances necessaires pour faire fonctionner son projet sur un autre environnement

    deactivate <- désactive l'environnement virtuel

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les caca (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#script-de-roi-qui-automatise-le-process","level":2,"title":"Script de roi qui automatise le process","text":"
    • J'ai codé un script qui automatise ce process avec une seule commande :

    bash <(curl -fsSL https://raw.githubusercontent.com/buchtioof/venv-setup/main/venvsetup.sh)

    Pour en apprendre plus : le git du projet

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les caca (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-22/","level":1,"title":"SQL pour les tung tung tung sahur (22/01/26)","text":"

    florian quand je lui demande de l'aide

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#sql-pour-les-tung-tung-tung-sahur-220126","level":1,"title":"SQL pour les tung tung tung sahur (22/01/26)","text":"","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#modele-mvc","level":2,"title":"Modèle MVC","text":"

    Le modèle MVC est une façon de concevoir un projet logiciel, en gros on sépare celui-ci en trois grandes parties distinctes séparant la logique de la vue et rend le travail plus facile.

    Modèle MVC en prenant celui de grabber par exemple :

    - Model = Base De Donnée (ex: EMPLOYEES, COMPUTERS)\n- View = Tableau de bord, Site\n- Controller = Cerveau qui dirige les deux parties Model et View (ex: app.py)\n
    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#tuto-comment-cr2er-une-bdd-sql-facilement-en-2-minutes-super-facile","level":2,"title":"TUTO : COMMENT CR2ER UNE BDD SQL FACILEMENT EN 2 MINUTES (SUPER FACILE)","text":"","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#structure-dune-base-de-donnees","level":3,"title":"Structure d'une Base De Données","text":"

    celle de grabber pour l'exemple

    BDD (Etape 1) - grabberman\n├── TABLES (Etape 2) - COMPUTERS\n│   ├── Colonne (Etape 3) - PcId, entier/clé primaire\n│   │   └── Donnée (Etape 4)\n│   ├── Colonne (Etape 3) - Hostname, chaîne de charactère\n│   └── Colonne (Etape 3) - MacAddress, chaîne de charactère\n└── TABLES (Etape 2) - EMPLOYEES\n    ├── Colonne (Etape 3) - UserId, entier/clé primaire\n    ├── Colonne (Etape 3) - Username, chaîne de charactère\n    └── Colonne (Etape 3) - PcId, clé secondaire\n
    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-1-creer-une-bdd","level":3,"title":"Etape 1 : Créer une BDD","text":"

    sqlite3 grabberman.db <- Commande qui crée une DB qu'on appellera ici \"grabberman\"

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-2-creer-une-table","level":3,"title":"Etape 2 : Créer une table","text":"
    CREATE TABLE \"COMPUTERS\" \n(\n    PcId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Hostname VARCHAR(50) NOT NULL, \n    MacAddress VARCHAR(50)\n);\n

    Note

    Ici on crée une table dans laquelle on stockera des données (des PC que l'on grab par exemple)

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-3-ajouter-des-donnees-dans-une-table","level":3,"title":"Etape 3 : Ajouter des données dans une table","text":"

    INSERT into COMPUTERS (Hostname, MacAddress) VALUES ('mypc', '1B:12:F0:FL:94');

    Note

    Pour ajouter une donnée dans une tableau, on INSERE dans le TABLEAU donné les VALEURS dans les Colonnes

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-4-creer-un-autre-tableau-avec-une-cle-liee-foreign-key","level":3,"title":"Etape 4 : Créer un autre tableau avec une clé liée (foreign key)","text":"
    CREATE TABLE \"EMPLOYEES\" \n(\n    UserId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Username VARCHAR(50) NOT NULL, \n    FOREIGN KEY (PcId) REFERENCES COMPUTERS(PcId)\n);\n

    Note

    On recommence comme à l'étape 2, en ajoutant une clé étrangère foreign key, qui lie une clé extérieure, PcId ici, dans notre second Tableau

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/javascript/2026-01-30/","level":1,"title":"Javascript (30/01/26)","text":"","path":["Cours","☕ Javascript","Javascript (30/01/26)"],"tags":["Javascript"]},{"location":"learn/javascript/2026-02-06/","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#asynchrone-et-promesses-060226","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"

    Info

    Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module file system dit \"fs\" (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme fs, l'asynchrone.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#cest-quoi-asynchrone","level":2,"title":"C'est quoi Asynchrone ?","text":"

    Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.

    Rien de mieux qu'un exemple concret et gourmand en amont et en aval.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#1-sans-asynchrone","level":3,"title":"1. SANS Asynchrone","text":"
    1. Tu commandes un Tasty Crousty.
    2. Ce neuille de caissier part en cuisine.
    3. Il fait cuire le riz lui-même.
    4. Il coupe les tenders.
    5. Il met tout dans la barquette puis sauce.
    6. Et revient pour te donner le Tasty Crousty 67 doro party.
    7. SEULEMENT MAINTENANT, il prend la commande du gwer suivant.

    Résultat : La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#2-avec-asynchrone","level":3,"title":"2. AVEC Asynchrone","text":"
    1. Tu commandes un Tasty Crouspy.
    2. La caissière crie en cuisine \"Un Crousty piquant sucré supplément poulet !\".
    3. Elle te donne un bipeur, faisant donc la promesse de te servir un délicieux Crouspy Tasty.
    4. Puis elle passe directement au client suivant.
    5. Toi, tu vas t'asseoir et tu attends.
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#mais-cest-quoi-cette-promesse-promise","level":2,"title":"Mais c'est quoi cette promesse ? (Promise)","text":"

    Note

    ☝️🤓 Node.js fonctionne sur un principe de thread unique (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.

    Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de Promesses.

    Dans notre exemple, la Promise, c'est le bipeur.

    Ce boîtier est une promesse. Le restaurant te dit : \"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau.\"

    Une Promise a toujours 3 états possibles, et seulement 3 :

    1. En attente (Pending) : Le boîtier ne fait rien. Le cuisinier travaille. Tu attends.
    2. Succès (Resolved) : Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).
    3. Échec (Rejected) : Le manager arrive et te dit \"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir\". La promesse est rompue (il y a une erreur).
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemples-async-et-await","level":2,"title":"Exemples async et await","text":"","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-dun-async-exo-du-tp-2-de-js","level":3,"title":"Exemple d'un async (exo du TP 2 de JS)","text":"
    files.forEach((fileName) => {\n    fs.readFile(fileName, 'utf8').then((content) => {\n        ...\n    })\n});\n
    • fs.readFile : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans content.
    • La Promise : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans content
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-concret-await-exo-du-tp-2-de-js","level":3,"title":"Exemple concret await (exo du TP 2 de JS)","text":"

    On peut également demander spécifiquement d'attendre le retour d'une promesse avec await

    const stats = await fs.stat(filename);\n
    • fs.stat : Envoie le job de récupérer les stats d'un fichier à l'ordinateur et quand c'est pret, enrengistre son résultat dans stats.
    • La Promise : On te promet un résultat dans stats
    • **await** : Tant que l'on a pas de résultat, on \"fige\" à cette ligne jusqu'à ce que la promesse est reçue.
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-des-apis-et-serveur-http-090226","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-et-apis","level":2,"title":"Fetch et APIs","text":"

    Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.

    Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : fetch()

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-le-coursier","level":3,"title":"fetch() (Le coursier)","text":"

    fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).

    • Ce que ça fait : Ça envoie un ping à une URL pour aller chercher des data.

    • Et ça renvoie une promesse en attendant la réponse de l'API

    Pour traiter nos réponses proprement, on combine nos fetch avec le module json()

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#json-le-traducteur","level":3,"title":"json() (Le traducteur)","text":"

    Quand fetch revient, il te ramène un gros paquet brut (un Response object).

    • Ce que ça fait : Ça prend ce paquet et ça le transforme en Objet JavaScript utilisable (avec des accolades {} et tout).

    • Note : C'est aussi asynchrone, donc il faut un await devant aussi.

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#exemple-du-tp","level":3,"title":"Exemple du TP","text":"

    Dans une fonction async fetchCityInfo(), on essayera de fetch via cette fonction :

    // Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName\nconst geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);\n

    Puis on encode les données brutes reçues dans un joli tableau JSON :

    // La constante cities récupère le résultat geoRes et le range en JSON\nconst cities = await geoRes.json();\n

    Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) :

    //Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await\nconst weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&key=****`);\n

    Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#serveur-http","level":2,"title":"Serveur HTTP","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"projects/2025-12-05/","level":1,"title":"Grabber docs","text":"","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#grabber-docs","level":1,"title":"Grabber docs","text":"","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#but-du-projet","level":2,"title":"But du projet","text":"

    Grabber est un hub admin pour fetch les données hardware d'un parc informatique via un script qui fetch les ordinateurs (d'abord sur linux, plus tard intégration d'autres OS), lie les ordinateurs a des utilisateurs (ex. employés pour administration en entreprise) et de check d'un coup d'oeil les updates disponibles + état du software

    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#fonctionnement","level":2,"title":"Fonctionnement","text":"

    Pour fonctionner, grabber a plusieures tâches réparties par différents éléments dans le projet : -> Cerveau : Coordonne les différentes tâches du programme comme lancer le serveur admin, fetch les données d'un ordinateur dans une BDD (grabber.sh) -> Corps : Serveur admin python qui affichera les données stockées dans une BDD type sqlite

    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#technologies","level":2,"title":"Technologies","text":"
    • Bash -> Script qui fetch et lance la console admin
    • Python
      • uvicorn -> pour host le site admin en local
    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#avancement","level":2,"title":"Avancement","text":"
    • Script bash
      • Fetch le hardware
      • Uninstaller
    • Interface admin web (wip)
    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2026-01-23/","level":1,"title":"Docs et notes avec Zensical","text":"

    celui qui pete fort dans la classe jv te grabber

    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#docs-et-notes-avec-zensical","level":1,"title":"Docs et notes avec Zensical","text":"

    Note

    Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.

    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#pourquoi-faire","level":2,"title":"Pourquoi faire ?","text":"
    • Tester de créer un nouvel environnement en python
    • Travailler avec des modules pip pour améliorer le projet
    • Changer un peu de grabber
    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#comment-zensicle-marche","level":2,"title":"Comment Zensicle marche","text":"
    • mkdocs.yml est la navbar du site
    • dossier docs est la racine du site mkdocs
    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#hebergement-via-github-github-actions","level":2,"title":"Hébergement via Github (Github Actions)","text":"

    Pour héberger mon site de documentation en ligne, j'utilise Github via Github Actions qui est la solution parfaite pour un projet léger comme celui-ci.

    Docs pour host sur Github

    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]}]} \ No newline at end of file +{"config":{"separator":"[\\s\\-_,:!=\\[\\]()\\\\\"`/]+|\\.(?!\\d)"},"items":[{"location":"","level":1,"title":"Bienvenue dans mes notes de devops","text":"

    avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois

    ","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#bienvenue-dans-mes-notes-de-devops","level":1,"title":"Bienvenue dans mes notes de devops","text":"","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#structure","level":2,"title":"Structure","text":"

    -> cours (Notes sur les cours)

    -> projects (Notes sur des nouveaux projets)

    -> liens cools (mes sites favoris)

    ","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"links/","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#liens-cools-de-ma-poche","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#design","level":2,"title":"🎨 Design","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#developpement","level":2,"title":"💽 Developpement","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"learn/devops/2025-10-30/","level":1,"title":"C'est quoi linux ? (30/10/25)","text":"","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-10-30/#cest-quoi-linux-301025","level":1,"title":"C'est quoi linux ? (30/10/25)","text":"

    Warning

    Page en travaux, doit être finie avec toutes les informations que j'ai sur Linux en général

    ","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-10-30/#arborescence-type-sur-unix","level":2,"title":"Arborescence type sur UNIX","text":"

    Unix a généralement cette arborescence que ce soit sur n'importe quelle distro Linux également Android pour les téléphones et même quelques similitudes sur macOS.

    /               # Racine du disque\n├── /bin/       # Contient les commandes de base\n├── /boot/      # Fichiers de demarrage\n├── /dev/       # Tout ce qui est lié aux périphériques\n├── /etc/       # Fichiers de configuration\n├── /home/      # Répertoires utilisateurs\n├── /lib/       # Bibliothèques logicielles\n├── /mnt/       # Point de montage pour les systèmes de fichier temporaires\n├── /media/     # Point de montage pour les disques temporaires\n├── /opt/       # Logiciels optionnels, la ou on installera des programmes maison\n├── /root/      # Répertoire du user root\n├── /var/       # Variable, contient des logs, ect...\n├── /usr/       # Contient sensiblement la même chose que la racine mais sans être utile au fonctionnement du système\n├── /srv/       # Services hébergés sur le systèmes (FTP, HTTP, ect...)\n├── /run/       # Emplacement mémoire des programmes\n└── /tmp/       # Temporaire\n
    source de l'arbo.

    ","path":["Cours","🔌 DevOps","C'est quoi linux ? (30/10/25)"],"tags":["Linux","UNIX","Distributions"]},{"location":"learn/devops/2025-11-28/","level":1,"title":"Commandes *sh pour les idiots (28/11/25)","text":"

    mon big ass qui fait sudo rm -rf / sans réfléchir

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#commandes-sh-pour-les-idiots-281125","level":1,"title":"Commandes *sh pour les idiots (28/11/25)","text":"","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#cheatsheet-de-plein-de-commandes","level":2,"title":"Cheatsheet de plein de commandes","text":"

    Depuis le début, beaucoup de commandes on été utilisées, du coup je note ici les commandes utilisées depuis le début et a quoi elles servent en gros

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#commandes-de-base","level":3,"title":"Commandes de base","text":"
    1. sudo : lance une commande avec les superdroits, peut manipuler tout le pc avec en gros

      sudo [commande]\n

    2. ls : liste les fichiers d'un dossier

      # -a pour afficher les fichiers cachés / -l pour afficher en liste avec plus d'infos\nls [options] [fichier|dir]\n

    3. cd : changer de dossier

      # ~ pour aller au répertoire home / .. pour revenir en arriere\ncd [dir]\n

    4. pwd : affiche le répertoire actuel

      pwd\n

    5. touch : affiche le contenu d'un fichier

      touch [fichier]\n

    6. nano : éditeur de texte

      nano [fichier]\n

    7. mkdir : supprime ce qu'on lui donne

      mkdir [options] [fichier|dir]\n

    8. rm : supprime ce qu'on lui donne

      # -r pour supprimer un dossier et son contenu (recursive) (`rmdir` le fait aussi)\n# -f force la commande\nrm [options] [fichier|dir]\n

    9. cp : copie...

      cp [options] [source] [destination]\n

    10. mv : ...et déplace

      mv [options] [source] [destination]\n

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#les-caracteres-dassociations","level":3,"title":"Les caractères d'associations","text":"

    | (le pipe) -> prend le résultat de la commande de gauche et le donne à celle de droite

    exemple : liste tout un répertoire, mais n'affiche que les résultats qui sont \"feur\"

    ls -la | grep \"feur\"\n

    > et >>

    • envoie le résultat d'une commande dans un fichier texte
    • > écrase le fichier / >> ajoute à la fin sans effacer
    • ex: echo \"coucou\" > fichier.txt
    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#permissions-et-utilisateurs","level":3,"title":"Permissions et Utilisateurs","text":"

    chmod [droits] [fichier] - change les permissions d'un fichier (qui peut lire/écrire/exécuter) - chmod +x [fichier] rend un script exécutable (très important) - chmod 777 [fichier] donne tous les droits à tout le monde (dangereux mais ça dépanne)

    chown [user]:[groupe] [fichier] - change le propriétaire du fichier (si t'as copié un truc en sudo et que tu peux plus le toucher)

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-11-28/#lecture-et-recherche-dans-les-fichiers","level":3,"title":"Lecture et recherche dans les fichiers","text":"

    cat [fichier] - affiche tout le contenu d'un fichier d'un coup dans le terminal - utile pour les petits fichiers, sinon ça inonde l'écran

    less [fichier] - affiche le contenu page par page (on peut scroller) - appuyer sur q pour quitter

    head [fichier] / tail [fichier] - affiche juste le début (head) ou la fin (tail) d'un fichier - tail -f [fichier] hyper utile pour voir les logs en direct (ça attend les nouvelles lignes)

    grep [mot] [fichier] - cherche un mot ou une phrase spécifique dans un fichier (le ctrl+f du terminal) - -r pour chercher dans tous les dossiers (recursive) / -i pour ignorer les majuscules

    ","path":["Cours","🔌 DevOps","Commandes *sh pour les idiots (28/11/25)"],"tags":["Bash","UNIX"]},{"location":"learn/devops/2025-12-12/","level":1,"title":"Git pour les neuilles (12/12/25)","text":"

    completement zehef pcq t'as pas git push

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#git-pour-les-neuilles-121225","level":1,"title":"Git pour les neuilles (12/12/25)","text":"","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#creer-un-git","level":2,"title":"Créer un git","text":"","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-si-le-projet-existe-deja","level":3,"title":"-> Si le projet existe deja","text":"
    • On clone le projet au sein d'un dossier, celui-ci sera dans son dossier de travail. -> git clone (url du projet git)
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-sinon-creer-le-projet","level":3,"title":"-> Sinon créer le projet","text":"
    • Crée le projet git à partir de ce dossier. -> git init (dossier de travail)
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#ignorer-des-fichiersdossiers","level":2,"title":"Ignorer des fichiers/dossiers","text":"
    • Ajouter des interdictions dans .gitignore

    echo gbvenv/ >> .gitignore <- on indique via un echo qui écrira dans le fichier .gitignore qu'on ne veut pas push le dossier \"gbvenv\" ici, un fichier on ne mettera pas le slash (logique en amont)

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#une-fois-que-de-fichiers-sont-dispos-empaqueter","level":2,"title":"Une fois que de fichiers sont dispos, empaqueter !","text":"

    Pour envoyer un projet git, c'est comme envoyer un colis à la poste, d'abord, on met nos affaires dans le colis

    Plusieures possibilités ☝️

    • Ajoute TOUS les fichiers du dossier via l'option -A ou --all -> git add -A

    • Ajoute SEULEMENT les modifications et suppressions (donc pas de nouveaux fichiers) -> git add -u

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#etiqueter-le-paquet","level":2,"title":"Etiqueter le paquet","text":"

    Ensuite, on rempli l'étiquette du colis et on la colle au colis

    • On écrit une note recap courte du commit sur le git -> git commit -m \"(message du commit)\"
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#deposer-le-colis","level":2,"title":"Déposer le colis","text":"

    Enfin pour push, c'est a dire déposer le colis au bureau de poste pour l'envoi, on fait :

    • On envoie le paquet de l'origine à la branche souhaitée dans le git -> git push -u origin (branche souhaitée)

    Info

    -u veut dire ce que dit la doc en gros

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#-si-erreur","level":3,"title":"-> SI ERREUR","text":"

    Dans le cas ou un fichier/dossier a été supprimé autre part avant de push nos modifs

    • Merge de force les deux branches pour ne faire qu'une branche git config pull.rebase false
    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2025-12-12/#utiliser-deux-branches-differentes","level":2,"title":"Utiliser deux branches différentes","text":"

    Dans le cas ou l'on veut travailler avec une seconde branche

    • Pour switch de branche de travail -> git checkout (branche souhaitée)

    • Pour merge en ecrasant la branche souhaitée ⬇️

      git merge -s ours main\ngit checkout main\ngit merge (branche à merge)\n

    ","path":["Cours","🔌 DevOps","Git pour les neuilles (12/12/25)"],"tags":["Git","Bash"]},{"location":"learn/devops/2026-01-16/","level":1,"title":"pip et environnements virtuels pour les quoicoubenks (16/01/26)","text":"

    7alouf ouvre grabber apres 9h brainrot tsunami

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les quoicoubenks (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#pip-et-environnements-virtuels-pour-les-quoicoubenks-160126","level":1,"title":"pip et environnements virtuels pour les quoicoubenks (16/01/26)","text":"","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les quoicoubenks (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#python-et-ses-environnements-virtuels","level":2,"title":"Python et ses environnements virtuels","text":"
    • En python, on peut travailler dans des \"sandboxes\" ou toutes les libraires installées resteront contenues dedans

    Utile de créer donc un environnement pour chaque projet afin de en pas perturber d'autres projets avec des milliers de packages inutiles en gros

    python3 -m venv gbvenv <- permet de créer un environnement (venv crée l'environnement \"gbvenv\")

    source gbvenv/bin/activate <- lance cet environnement pour travailler dedans

    • En parlant de packages, parlons de ✨pip✨

    pip est le packages manager de python, en l'appelant, on peut installer des packages comme uvicorn par exemple, utile pour grabber

    pip install --upgrade pip <- update les packages

    python -m pip install *** <- installe le package qu'on notera a la place des ***

    pip freeze >> requirements.txt <- commande super utile pour partager les dependances necessaires pour faire fonctionner son projet sur un autre environnement

    deactivate <- désactive l'environnement virtuel

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les quoicoubenks (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-16/#script-de-roi-qui-automatise-le-process","level":2,"title":"Script de roi qui automatise le process","text":"
    • J'ai codé un script qui automatise ce process avec une seule commande :

    bash <(curl -fsSL https://raw.githubusercontent.com/buchtioof/venv-setup/main/venvsetup.sh)

    Pour en apprendre plus : le git du projet

    ","path":["Cours","🔌 DevOps","pip et environnements virtuels pour les quoicoubenks (16/01/26)"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/devops/2026-01-22/","level":1,"title":"SQL pour les tung tung tung sahur (22/01/26)","text":"

    florian quand je lui demande de l'aide

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#sql-pour-les-tung-tung-tung-sahur-220126","level":1,"title":"SQL pour les tung tung tung sahur (22/01/26)","text":"","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#modele-mvc","level":2,"title":"Modèle MVC","text":"

    Le modèle MVC est une façon de concevoir un projet logiciel, en gros on sépare celui-ci en trois grandes parties distinctes séparant la logique de la vue et rend le travail plus facile.

    Modèle MVC en prenant celui de grabber par exemple :

    - Model = Base De Donnée (ex: EMPLOYEES, COMPUTERS)\n- View = Tableau de bord, Site\n- Controller = Cerveau qui dirige les deux parties Model et View (ex: app.py)\n
    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#tuto-comment-cr2er-une-bdd-sql-facilement-en-2-minutes-super-facile","level":2,"title":"TUTO : COMMENT CR2ER UNE BDD SQL FACILEMENT EN 2 MINUTES (SUPER FACILE)","text":"","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#structure-dune-base-de-donnees","level":3,"title":"Structure d'une Base De Données","text":"

    celle de grabber pour l'exemple

    BDD (Etape 1) - grabberman\n├── TABLES (Etape 2) - COMPUTERS\n│   ├── Colonne (Etape 3) - PcId, entier/clé primaire\n│   │   └── Donnée (Etape 4)\n│   ├── Colonne (Etape 3) - Hostname, chaîne de charactère\n│   └── Colonne (Etape 3) - MacAddress, chaîne de charactère\n└── TABLES (Etape 2) - EMPLOYEES\n    ├── Colonne (Etape 3) - UserId, entier/clé primaire\n    ├── Colonne (Etape 3) - Username, chaîne de charactère\n    └── Colonne (Etape 3) - PcId, clé secondaire\n
    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-1-creer-une-bdd","level":3,"title":"Etape 1 : Créer une BDD","text":"

    sqlite3 grabberman.db <- Commande qui crée une DB qu'on appellera ici \"grabberman\"

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-2-creer-une-table","level":3,"title":"Etape 2 : Créer une table","text":"
    CREATE TABLE \"COMPUTERS\" \n(\n    PcId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Hostname VARCHAR(50) NOT NULL, \n    MacAddress VARCHAR(50)\n);\n

    Note

    Ici on crée une table dans laquelle on stockera des données (des PC que l'on grab par exemple)

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-3-ajouter-des-donnees-dans-une-table","level":3,"title":"Etape 3 : Ajouter des données dans une table","text":"

    INSERT into COMPUTERS (Hostname, MacAddress) VALUES ('mypc', '1B:12:F0:FL:94');

    Note

    Pour ajouter une donnée dans une tableau, on INSERE dans le TABLEAU donné les VALEURS dans les Colonnes

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/devops/2026-01-22/#etape-4-creer-un-autre-tableau-avec-une-cle-liee-foreign-key","level":3,"title":"Etape 4 : Créer un autre tableau avec une clé liée (foreign key)","text":"
    CREATE TABLE \"EMPLOYEES\" \n(\n    UserId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Username VARCHAR(50) NOT NULL, \n    FOREIGN KEY (PcId) REFERENCES COMPUTERS(PcId)\n);\n

    Note

    On recommence comme à l'étape 2, en ajoutant une clé étrangère foreign key, qui lie une clé extérieure, PcId ici, dans notre second Tableau

    ","path":["Cours","🔌 DevOps","SQL pour les tung tung tung sahur (22/01/26)"],"tags":["SQL"]},{"location":"learn/javascript/2026-01-30/","level":1,"title":"Javascript (30/01/26)","text":"

    celui qui pete fort dans la classe jv te grabber

    ","path":["Cours","☕ Javascript","Javascript (30/01/26)"],"tags":["Javascript"]},{"location":"learn/javascript/2026-01-30/#javascript-300126","level":1,"title":"Javascript (30/01/26)","text":"","path":["Cours","☕ Javascript","Javascript (30/01/26)"],"tags":["Javascript"]},{"location":"learn/javascript/2026-02-06/","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#asynchrone-et-promesses-060226","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"

    Info

    Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module file system dit \"fs\" (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme fs, l'asynchrone.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#cest-quoi-asynchrone","level":2,"title":"C'est quoi Asynchrone ?","text":"

    Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.

    Rien de mieux qu'un exemple concret et gourmand en amont et en aval.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#1-sans-asynchrone","level":3,"title":"1. SANS Asynchrone","text":"
    1. Tu commandes un Tasty Crousty.
    2. Ce neuille de caissier part en cuisine.
    3. Il fait cuire le riz lui-même.
    4. Il coupe les tenders.
    5. Il met tout dans la barquette puis sauce.
    6. Et revient pour te donner le Tasty Crousty 67 doro party.
    7. SEULEMENT MAINTENANT, il prend la commande du gwer suivant.

    Résultat : La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.

    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#2-avec-asynchrone","level":3,"title":"2. AVEC Asynchrone","text":"
    1. Tu commandes un Tasty Crouspy.
    2. La caissière crie en cuisine \"Un Crousty piquant sucré supplément poulet !\".
    3. Elle te donne un bipeur, faisant donc la promesse de te servir un délicieux Crouspy Tasty.
    4. Puis elle passe directement au client suivant.
    5. Toi, tu vas t'asseoir et tu attends.
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#mais-cest-quoi-cette-promesse-promise","level":2,"title":"Mais c'est quoi cette promesse ? (Promise)","text":"

    Note

    ☝️🤓 Node.js fonctionne sur un principe de thread unique (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.

    Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de Promesses.

    Dans notre exemple, la Promise, c'est le bipeur.

    Ce boîtier est une promesse. Le restaurant te dit : \"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau.\"

    Une Promise a toujours 3 états possibles, et seulement 3 :

    1. En attente (Pending) : Le boîtier ne fait rien. Le cuisinier travaille. Tu attends.
    2. Succès (Resolved) : Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).
    3. Échec (Rejected) : Le manager arrive et te dit \"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir\". La promesse est rompue (il y a une erreur).
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemples-async-et-await","level":2,"title":"Exemples async et await","text":"","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-dun-async-exo-du-tp-2-de-js","level":3,"title":"Exemple d'un async (exo du TP 2 de JS)","text":"
    files.forEach((fileName) => {\n    fs.readFile(fileName, 'utf8').then((content) => {\n        ...\n    })\n});\n
    • fs.readFile : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans content.
    • La Promise : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans content
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-concret-await-exo-du-tp-2-de-js","level":3,"title":"Exemple concret await (exo du TP 2 de JS)","text":"

    On peut également demander spécifiquement d'attendre le retour d'une promesse avec await

    const stats = await fs.stat(filename);\n
    • fs.stat : Envoie le job de récupérer les stats d'un fichier à l'ordinateur et quand c'est pret, enrengistre son résultat dans stats.
    • La Promise : On te promet un résultat dans stats
    • **await** : Tant que l'on a pas de résultat, on \"fige\" à cette ligne jusqu'à ce que la promesse est reçue.
    ","path":["Cours","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-des-apis-et-serveur-http-090226","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-et-apis","level":2,"title":"Fetch et APIs","text":"

    Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.

    Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : fetch()

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-le-coursier","level":3,"title":"fetch() (Le coursier)","text":"

    fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).

    • Ce que ça fait : Ça envoie un ping à une URL pour aller chercher des data.

    • Et ça renvoie une promesse en attendant la réponse de l'API

    Pour traiter nos réponses proprement, on combine nos fetch avec le module json()

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#json-le-traducteur","level":3,"title":"json() (Le traducteur)","text":"

    Quand fetch revient, il te ramène un gros paquet brut (un Response object).

    • Ce que ça fait : Ça prend ce paquet et ça le transforme en Objet JavaScript utilisable (avec des accolades {} et tout).

    • Note : C'est aussi asynchrone, donc il faut un await devant aussi.

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#exemple-du-tp","level":3,"title":"Exemple du TP","text":"

    Dans une fonction async fetchCityInfo(), on essayera de fetch via cette fonction :

    // Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName\nconst geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);\n

    Puis on encode les données brutes reçues dans un joli tableau JSON :

    // La constante cities récupère le résultat geoRes et le range en JSON\nconst cities = await geoRes.json();\n

    Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) :

    //Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await\nconst weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&key=****`);\n

    Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.

    ","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#serveur-http","level":2,"title":"Serveur HTTP","text":"","path":["Cours","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"projects/2025-12-05/","level":1,"title":"Grabber docs","text":"","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#grabber-docs","level":1,"title":"Grabber docs","text":"","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#but-du-projet","level":2,"title":"But du projet","text":"

    Grabber est un hub admin pour fetch les données hardware d'un parc informatique via un script qui fetch les ordinateurs (d'abord sur linux, plus tard intégration d'autres OS), lie les ordinateurs a des utilisateurs (ex. employés pour administration en entreprise) et de check d'un coup d'oeil les updates disponibles + état du software

    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#fonctionnement","level":2,"title":"Fonctionnement","text":"

    Pour fonctionner, grabber a plusieures tâches réparties par différents éléments dans le projet : -> Cerveau : Coordonne les différentes tâches du programme comme lancer le serveur admin, fetch les données d'un ordinateur dans une BDD (grabber.sh) -> Corps : Serveur admin python qui affichera les données stockées dans une BDD type sqlite

    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#technologies","level":2,"title":"Technologies","text":"
    • Bash -> Script qui fetch et lance la console admin
    • Python
      • uvicorn -> pour host le site admin en local
    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#avancement","level":2,"title":"Avancement","text":"
    • Script bash
      • Fetch le hardware
      • Uninstaller
    • Interface admin web (wip)
    ","path":["Projets","Grabber docs"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2026-01-23/","level":1,"title":"Docs et notes avec Zensical","text":"","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#docs-et-notes-avec-zensical","level":1,"title":"Docs et notes avec Zensical","text":"

    Note

    Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.

    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#pourquoi-faire","level":2,"title":"Pourquoi faire ?","text":"
    • Tester de créer un nouvel environnement en python
    • Travailler avec des modules pip pour améliorer le projet
    • Changer un peu de grabber
    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#comment-zensicle-marche","level":2,"title":"Comment Zensicle marche","text":"
    • mkdocs.yml est la navbar du site
    • dossier docs est la racine du site mkdocs
    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#hebergement-via-github-github-actions","level":2,"title":"Hébergement via Github (Github Actions)","text":"

    Pour héberger mon site de documentation en ligne, j'utilise Github via Github Actions qui est la solution parfaite pour un projet léger comme celui-ci.

    Docs pour host sur Github

    ","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-02-13/","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#faire-un-portfolio-en-js-moderne","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#but-du-projet","level":2,"title":"But du projet","text":"

    Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels.

    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#stack-de-travail","level":2,"title":"Stack de travail","text":"

    On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ?

    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-moteur-build-tool","level":3,"title":"Le Moteur (Build tool)","text":"

    Souvent appelé \"moteur\" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers.

    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-framework","level":3,"title":"Le Framework","text":"

    Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit.

    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-compilateur","level":3,"title":"Le Compilateur","text":"

    C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement.

    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#choix","level":3,"title":"Choix","text":"

    Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer.

    Stack choisie

    • Moteur : Vite -> Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles
    • Framework : React -> Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente
    • Compilateur : JS/SWC -> Très efficace et rapide et simple et utilnous permet d'utilise JS
    ","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#points-importants-du-projet","level":2,"title":"Points importants du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#creation-du-projet","level":3,"title":"Création du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#packages-npm","level":3,"title":"Packages npm","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#hebergement-avec-vercel","level":3,"title":"Hébergement avec Vercel","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#cles-denvironnements","level":3,"title":"Clés d'environnements","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]}]} \ No newline at end of file