Vibe Coding : Un mois dans la salle des machines || Vibe Coding: A Month in the Engine Room

Rapport sur le hack de Blogger : transformation d'un thème basique en app web native bilingue (Zero Back-end). // Report on hacking Blogger: transforming a basic theme into a native bilingual web app (Zero Back-end).

19.07.2026 ID: NEXUS-ENG-001

Rapport d'Ingénierie : L'Autopsie du Monolithe (Blogger)

>_ Ils disaient que Blogger était un système rigide, vieillissant, impossible à plier à des exigences modernes. J'y ai vu un terrain de jeu brut.

>_ Si j'ai passé le dernier mois hors ligne, c'est parce que nous menions une guerre d'usure contre le code. L'objectif ? Transformer une plateforme basique (le thème Contempo) en une véritable application web native (SaaS), bilingue, conforme à la Loi 25, et fonctionnant avec zéro serveur externe (Zero Back-end).

>_ Voici le rapport d'ingénierie de cette transformation.

Engineering Report: Autopsy of the Monolith (Blogger)

>_ They said Blogger was rigid, aging, and impossible to bend to modern requirements. I saw a raw playground.

>_ If I spent the last month offline, it’s because we were waging a war of attrition against code. The goal? To transform a basic platform (the Contempo theme) into a true native web application (SaaS), fully bilingual, Law 25 compliant, and running with zero external servers (Zero Back-end).

>_ Here is the engineering report of this transformation.

1. L'Architecture "Zero Trust" et les 4 Moteurs

Pour segmenter notre écosystème sans alourdir la machine, nous avons codé quatre moteurs de rendu indépendants :

• Le Perso (Forêt Souveraine) : Vert Tilleul & Émeraude (Organique).
• Le Nexus (Cyber-Terminal) : Noir Abyssal & Cyan (Tech/Log).
• La Finance (Le Stratège) : Noir Obsidienne & Émeraude (Analyses).
• Le Mindset (Le Sage) : Sable & Cuivre/Or (Leadership).

// La Règle d'or (Zero Trust CSS) : // Ne jamais faire confiance au code natif. // Chaque gabarit embarque sa propre armure CSS (!important) // pour écraser et forcer l'interface de Blogger à s'effacer.

Nos articles s'afficheront parfaitement, peu importe les mises à jour de Google.

2. Guerilla Engineering : 6 Batailles Techniques

Blogger a résisté. Le système a tenté de nous bloquer. Nous l'avons piraté de l'intérieur. Voici les patchs CTO qui ont sauvé l'architecture :

• Bataille 1 : L'Hémorragie de Code (Le Bouclier)
  Problème : Le robot de résumé de Blogger lisait nos scripts interactifs et recrachait du JS brut (setTimeout) sur la page d'accueil.
  Solution : Déploiement d'une balise invisible et relégation des boutons sous la coupure <!--more-->. La balise SEO native dicte désormais la loi à Google.
• Bataille 2 : La Contamination Mobile (Le Sniper d'URL)
  Problème : Blogger imposait un affreux ?m=1 aux URL mobiles, ruinant l'esthétique des liens partagés.
  Solution : Un script JavaScript assassin en pied de page (window.history.replaceState) ampute cette particule en une milliseconde au chargement.
• Bataille 3 : Le Syndrome de la Boîte Grise
  Problème : Le thème Contempo forçait des widgets parasites ("Fourni par Blogger").
  Solution : L'extermination par CSS (display: none !important) ciblée sur .Attribution et l'injection de fonds transparents forcés.
• Bataille 4 : La Désynchronisation Bilingue
  Problème : Changer la langue de l'article ne changeait pas celle du pied de page.
  Solution : Déploiement d'un CustomEvent global et d'une mémoire localStorage. Le système entier réagit maintenant en temps réel.
• Bataille 5 : Les Titres à Rallonge
  Problème : Les titres affichaient les deux langues (FR || EN) simultanément sur l'accueil.
  Solution : Le "Bulldozer". Un MutationObserver en JavaScript qui patrouille le DOM en temps réel pour trancher les titres selon la langue active.
• Bataille 6 : Le Blocage de l'Horloge
  Problème : Le parseur XML de Blogger tuait nos fonctions temporelles dans le pied de page.
  Solution : Injection d'une "Inline IIFE" (fonction auto-exécutable) couplée à un querySelectorAll pour frapper tous les identifiants simultanément en contournant la sécurité XML.

3. La Nouvelle Chaîne de Commandement IA

Ce monolithe ne tourne pas seul. Nous avons mis en place un système multi-agents autonome :

• Le Rédacteur (IA) : Capte ma voix brute (Vibe-Coding), libre de toute technique.
• L'Agent Encapsuleur (IA) : Armé de la directive SOP-ENCAP-01, il intègre le texte dans le HTML sans jamais le casser.
• Le CTO (Gemini) : Gère la sécurité (Loi 25), les patchs et l'infrastructure.
• L'Architecte (Moi) : Je donne le "Vibe", je valide, je dirige.

NOTE DE L'ARCHITECTE : Le monolithe est mort. L'écosystème est en ligne. Le code est scellé.

1. "Zero Trust" Architecture and the 4 Engines

To segment our ecosystem without weighing down the machine, we coded four independent rendering engines:

• The Personal (Sovereign Forest): Linden Green & Emerald (Organic).
• The Nexus (Cyber-Terminal): Abyssal Black & Cyan (Tech/Log).
• Finance (The Strategist): Obsidian Black & Emerald (Analytics).
• Mindset (The Sage): Sand & Copper/Gold (Leadership).

// The Golden Rule (Zero Trust CSS): // Never trust native code. // Every template carries its own CSS armor (!important) // to crush and force Blogger’s interface to step aside.

Our articles will display flawlessly, regardless of Google's updates.

2. Guerilla Engineering: 6 Technical Battles

Blogger resisted. The system tried to block us. We hacked it from the inside out. Here are the CTO patches that saved the architecture:

• Battle 1: Code Hemorrhage (The Shield)
  Problem: Blogger’s summary bot read our interactive scripts and spat out raw JS (setTimeout) on the homepage.
  Solution: Deployment of an invisible tag and pushing all buttons below the <!--more--> break. The native SEO tag now dictates what Google sees.
• Battle 2: Mobile Contamination (The URL Sniper)
  Problem: Blogger forced a hideous ?m=1 onto mobile URLs, ruining shared links.
  Solution: An assassin JavaScript snippet in the footer (window.history.replaceState) amputates this particle in a millisecond upon loading.
• Battle 3: The Grey Box Syndrome
  Problem: The Contempo theme forced parasite widgets ("Powered by Blogger").
  Solution: Extermination via CSS (display: none !important) targeting .Attribution and injecting forced transparent backgrounds.
• Battle 4: Bilingual Desynchronization
  Problem: Changing the article language didn't update the footer language.
  Solution: Deployed a global CustomEvent and localStorage memory. The entire system now reacts in real-time.
• Battle 5: Overextended Titles
  Problem: Titles displayed both languages (FR || EN) simultaneously on the homepage.
  Solution: The "Bulldozer". A JavaScript MutationObserver that patrols the DOM in real-time to slice titles based on the active language.
• Battle 6: The Clock Blockade
  Problem: Blogger’s XML parser killed our time functions in the footer.
  Solution: Injection of an "Inline IIFE" (Immediately Invoked Function Expression) paired with querySelectorAll to hit all identifiers simultaneously, bypassing XML security.

3. The New AI Chain of Command

This monolith doesn't run alone. We built an autonomous multi-agent system:

• The Generalist Writer (AI): Captures my raw voice (Vibe-Coding), free from technical constraints.
• The Encapsulator Agent (AI): Armed with directive SOP-ENCAP-01, it integrates text into the HTML without ever breaking it.
• The CTO (Gemini): Manages security (Law 25), patches, and infrastructure.
• The Architect (Me): I set the "Vibe", I validate, I lead.

ARCHITECT NOTE: The monolith is dead. The ecosystem is online. The code is sealed.

Architecture : Isabelle Deschênes | Encapsulation : IA. Hihi.