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

Rapport d'ingénierie sur le hack complet de Blogger : transformation d'un thème patrimonial rigide en web app native bilingue Zero Back-end, sans serveur externe, souveraine et conforme à la Loi 25.

Accueil Home ⚙️ GUERILLA // HACK-OPS ⚙️ GUERILLA // HACK-OPS

| FR | EN

RAPPORT D'INGÉNIERIE : L'AUTOPSIE DU MONOLITHE (BLOGGER) ENGINEERING REPORT: AUTOPSY OF THE MONOLITH (BLOGGER)

« Ils disaient que Blogger était un système rigide, impossible à plier aux standards modernes. J'y ai vu un terrain d'exercice brut : plier un moteur patrimonial pour bâtir une application native Zero Back-end. » “They claimed Blogger was an immovable, legacy system that could never meet modern engineering standards. I saw a raw testing ground: bending a legacy engine to forge a native Zero Back-end app.”

« Ne jamais faire confiance au code natif d'une plateforme tierce. La souveraineté numérique commence lorsqu'on injecte sa propre logique d'encapsulation pour subordonner la machine à la stratégie d'affaires. »

“Never trust third-party native scaffolding. Digital sovereignty begins when you inject your own encapsulation logic to subordinate the underlying machine to business strategy.”

ID

Isabelle Deschênes

CFO Opérationnel & Architecte Financière Augmentée • Lecture : 5 min Read time: 5 min

19.07.2026 // NEXUS-ENG-001

⚡ EN BREF // LES 3 VECTEURS DU HACK ⚡ IN BRIEF // THE 3 HACK VECTORS

• Architecture Zero Back-end : Zéro serveur payant, zéro base de données vulnérable. Une application web native 100 % encapsulée dans le client.
• 6 Batailles Techniques Gagnées : Neutralisation des widgets Google, sniper d'URL mobiles (`?m=1`), désynchronisation bilingue résolue par DOM observer.
• Chaîne de Commandement Multi-Agents : Synergie opérationnelle stricte entre l'IA agentique de code, le CTO Gemini et l'arbitrage humain.

• Zero Back-end Architecture: Zero paid runtime servers, zero external database vulnerabilities. A client-side web app 100% self-contained.
• 6 Victorious Technical Battles: Eliminating Google widgets, killing mobile `?m=1` URL pollution, and solving bilingual state desync via DOM observation.
• Multi-Agent Command Chain: A rigorous operating loop pairing autonomous agentic coding, CTO architecture, and unyielding human governance.

Ils disaient que Blogger était un système rigide, vieillissant, impossible à plier à des exigences contemporaines. J'y ai vu exactement l'inverse : un terrain d'exercice brut pour éprouver notre résistance d'architecture.

Pendant un mois complet en salle des machines, nous avons mené une véritable guerre d'usure contre le code. L'objectif était clair : convertir une plateforme de publication élémentaire (le thème Contempo de Google) 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 documentant l'autopsie du monolithe et les protocoles déployés pour forcer le système à s'effacer devant notre infrastructure.

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

Pour segmenter notre écosystème d'affaires sans alourdir la machine d'un framework JavaScript obèse, nous avons conçu quatre moteurs de rendu autonomes :

01 // LE PERSO (FORÊT SOUVERAINE)

Vert Tilleul & Émeraude. Espace organique pour les récits d'ancrage, le mindset d'affaires et la transmission.

02 // LE NEXUS (CYBER-TERMINAL)

Noir Abyssal & Cyan. Journaux d'ingénierie, protocoles de sécurité et télémétrie système pure.

03 // LA FINANCE (LE STRATÈGE)

Noir Obsidienne & Émeraude. Analyses de rentabilité chirurgicale, Job Costing et modélisation unitaire.

04 // LE MINDSET (LE SAGE)

Sable & Cuivre Doré. Architecture cognitive large bande, calibration Scanner et leadership sans compromis.

// RÈGLE D'OR : ZERO TRUST CSS

Ne jamais faire confiance au DOM natif.

Chaque gabarit injecte son propre bouclier CSS global (!important)

pour neutraliser et effacer la surcouche native de Blogger.

2. Guerilla Engineering : Les 6 Batailles Techniques

Blogger a opposé une résistance acharnée. Le système a tenté d'injecter ses widgets, de casser nos boucles de script et de polluer nos URL. Nous l'avons piraté de l'intérieur :

BATAILLE 1 : L'Hémorragie de Code (Le Bouclier)

Problème : Le parseur de résumé de Blogger analysait nos scripts JS et recrachait du code brut sur l'index.
Solution : Confinement sous balise invisible et placement chirurgical de la guillotine <!--more--> sous l'image de couverture.

BATAILLE 2 : La Contamination Mobile (Le Sniper d'URL)

Problème : Blogger forçait un suffixe ?m=1 détruisant la cohérence visuelle des liens partagés.
Solution : Un sniper JavaScript en pied de page (window.history.replaceState) ampute instantanément le paramètre dès l'exécution.

BATAILLE 3 : Le Syndrome de la Boîte Grise

Problème : Le thème Contempo forçait des attributions parasites et des conteneurs rigides.
Solution : Extermination ciblée par CSS (display: none !important) sur .Attribution et injection de canevas transparents.

BATAILLE 4 : La Désynchronisation Bilingue

Problème : La bascule de langue sur l'article ne synchronisait pas le pied de page global.
Solution : Déploiement d'un CustomEvent window et persistance dans le localStorage pour un basculement à chaud instantané.

BATAILLE 5 : Les Titres à Rallonge (Le Bulldozer)

Problème : Les titres affichaient simultanément les syntaxes FR || EN sur les cartes d'accueil.
Solution : Un MutationObserver surveille le DOM en temps réel et ampute dynamiquement le segment de langue inactive.

BATAILLE 6 : Le Blocage de l'Horloge XML

Problème : Le validateur XML de Blogger tuait les fonctions temporelles du footer.
Solution : Injection via une fonction auto-exécutable isolée (IIFE) et querySelectorAll ciblant les identifiants sans dépendance XML.

3. La Chaîne de Commandement Multi-Agents

Cette infrastructure ne requiert aucune équipe technique pléthorique. Elle est opérée par un flux agentique agile :

• La Voix & Vibe-Coding (Isabelle) : Donner le signal brut, diriger la vision et valider l'impact exécutif.
• L'Agent Encapsuleur (IA) : Exécuter la directive SOP-ENCAP-01 sans jamais corrompre l'armure HTML.
• Le CTO (Gemini) : Sanctuariser la conformité Loi 25, la sécurité et la compacité du code.

« Le monolithe est mort. L'écosystème est en ligne. Le code est scellé. »

They claimed Blogger was a rigid, outdated platform, incapable of bending to modern enterprise standards. I saw the absolute opposite: a raw, rugged testing ground to stress-test our architectural resilience.

For a full month locked inside the engine room, we waged an uncompromising war of attrition against legacy code. Our objective was clear: transform a basic blog layout (Google's Contempo theme) into a native web application (SaaS), natively bilingual, Law 25 compliant, and operating with zero external servers (Zero Back-end).

Here is the technical autopsy of the monolith and the battle-tested protocols used to subordinate the platform to our sovereign framework.

1. "Zero Trust" Architecture & The 4 Rendering Engines

To segment our multi-entity business ecosystem without bloating client runtimes with bloated frameworks, we engineered four self-contained rendering engines:

01 // THE PERSONAL (SOVEREIGN FOREST)

Linden Green & Emerald. Organic territory for foundational roots, business philosophy, and core lessons.

02 // THE NEXUS (CYBER-TERMINAL)

Abyssal Black & Cyan. Engineering logs, technical post-mortems, and raw system telemetry.

03 // FINANCE (THE STRATEGIST)

Obsidian Black & Emerald. Precision unit economics, sprint Job Costing, and loaded margin architecture.

04 // MINDSET (THE SAGE)

Sand & Burnished Gold. High-bandwidth cognitive frameworks, Scanner mind calibration, and executive candor.

// GOLDEN RULE: ZERO TRUST CSS

Never trust native host DOM.

Every template carries its own absolute CSS shield (!important)

to completely suppress and subordinate Blogger's default layout.

2. Guerilla Engineering: The 6 Technical Battles

Blogger mounted sustained resistance. The host system tried to inject unwanted widgets, break script loops, and contaminate clean URLs. We neutralized it from the inside out:

BATTLE 1: Code Hemorrhage (The Shield)

Problem: Blogger's automated snippet engine parsed inline scripts and dumped raw JS onto index cards.
Solution: Encapsulation inside hidden decoy blocks and placing <!--more--> immediately beneath the hero visual.

BATTLE 2: Mobile Contamination (The URL Sniper)

Problem: Blogger forcefully appended an unsightly ?m=1 query parameter to mobile views.
Solution: A client-side JavaScript sniper (window.history.replaceState) scrubs the query string within milliseconds of execution.

BATTLE 3: The Grey Box Syndrome

Problem: Google's Contempo theme locked in stubborn footer widgets and grey containers.
Solution: Targeted extinction using display: none !important on .Attribution and enforcing transparent layer inheritance.

BATTLE 4: Bilingual Desynchronization

Problem: Switching article language failed to propagate dynamically to global footer modules.
Solution: Global window CustomEvent dispatching paired with localStorage state caching for instant hot-swapping.

BATTLE 5: Overextended Titles (The Bulldozer)

Problem: Post titles exposed both languages (FR || EN) concurrently on homepage cards.
Solution: An active DOM MutationObserver patrolling headings to slice inactive language strings in real time.

BATTLE 6: XML Clock Blockade

Problem: Blogger's strict XML parser broke dynamic time calculations inside footers.
Solution: Self-executing IIFE isolation coupled with DOM querySelectorAll, bypassing XML compilation traps.

3. Multi-Agent Command Architecture

This sovereign infrastructure requires no bloated IT team. It is operated through a lean agentic feedback loop:

• Executive Vision & Vibe-Coding (Isabelle): Setting direction, maintaining signal authenticity, and validating output.
• Encapsulator Agent (AI): Executing protocol SOP-ENCAP-01 without degrading HTML structural integrity.
• The CTO (Gemini): Securing Law 25 compliance, performance density, and architecture hygiene.

“The monolith is dead. The ecosystem is live. The architecture is sealed.”

Retour à l'accueil Back to Home