<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <title>Planète PHP</title>
        <link rel="icon" href="/assets/images/veille-logo-kfIoDGF.svg" sizes="any" type="image/svg+xml">

        <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.php">

        
    
            <link rel="canonical" href="/articles" />
    
            <link rel="next" href="/articles?page=2" />
    
                    <link rel="stylesheet" href="/assets/styles/app-oI5o2Jp.css">
        
                    
<link rel="stylesheet" href="/assets/styles/app-oI5o2Jp.css">
<script type="importmap">
{
    "imports": {
        "app": "/assets/app-NAdK9l0.js",
        "/assets/styles/app.css": "data:application/javascript,"
    }
}
</script><script>
if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('importmap')) (function () {
    const script = document.createElement('script');
    script.src = 'https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js';
    if (document.currentScript?.nonce) script.nonce = document.currentScript.nonce;
    script.setAttribute('crossorigin', 'anonymous');
    script.setAttribute('integrity', 'sha384-ie1x72Xck445i0j4SlNJ5W5iGeL3Dpa0zD48MZopgWsjNB/lt60SuG1iduZGNnJn');
    document.head.appendChild(script);
})();
</script>
<link rel="modulepreload" href="/assets/app-NAdK9l0.js">
<script type="module">import 'app';</script>            </head>
    <body class="dark:bg-slate-800 flex flex-col h-screen justify-between">
        <div>
            <div class="hidden sm:block bg-primary-900">
                <nav class="container mx-auto flex text-white justify-center">
                    <a href="https://afup.org" class="px-5 py-1 text-sm hover:bg-primary-500">AFUP</a>
                    <a href="https://event.afup.org" class="px-5 py-1 text-sm hover:bg-primary-500">Forum PHP 2026</a>
                    <a href="https://barometre.afup.org" class="px-5 py-1 text-sm hover:bg-primary-500">Baromètre</a>
                    <a href="https://planete-php.fr" class="px-5 py-1 text-sm hover:bg-primary-500 bg-primary-500">Planète PHP</a>
                    <a href="https://pufa.afup.org" class="px-5 py-1 text-sm hover:bg-primary-500">PUFA</a>
                </nav>
            </div>

            <div class="bg-primary-500">
                <nav class="container mx-auto flex flex-col sm:flex-row text-white px-0 sm:px-64 justify-center">
                    <div class="flex items-center grow gap-4 p-2 sm:p-0">
                        <img src="/assets/images/afup-icon-inverted-Fo5OHjq.png" class="h-11 my-auto" alt=""/>
                        <a href="/" class="text-2xl font-bold" data-qa="site-name">Planète PHP</a>
                    </div>
                    <div class="flex justify-between">
                        <a href="/articles" class="px-6 py-4 hover:bg-primary-300 bg-primary-300 sm:bg-transparent sm:border-b-4 border-white">Articles</a>
                        <a href="/feeds" class="px-6 py-4 hover:bg-primary-300">Sources</a>
                        <a href="http://www.planete-php.fr/rss.php" class="px-6 py-4 hover:bg-primary-300">Flux RSS</a>
                    </div>
                </nav>
            </div>

            <main class="container mx-auto px-0 sm:px-64 mt-0 sm:mt-4">
                
    <div class="flex flex-col gap-4 mt-4 sm:mt-0">
                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-1-date">16/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                16/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-1-title">Se former fait partie du travail</h2>
                <a href="https://www.jdecool.fr/blog/2026/09/17/se-former-fait-partie-du-travail.html" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-1-feed">
                    Lire l'article sur Jérémy DECOOL
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-1-content">
                Dans la lignée de ma publication précédente sur les side projects, il existe une autre injonction qui poursuit les développeurs: la veille technique. Et non, elle ne devrait pas reposer sur le temps personnel....
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-2-date">16/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                16/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-2-title">N+1 GraphQL dans NestJS : détecter avec NestJS Profiler, corriger avec DataLoader</h2>
                <a href="https://blog.eleven-labs.com/fr/diagnostiquer-n-plus-un-graphql-nestjs-profiler/" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-2-feed">
                    Lire l'article sur Eleven labs
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-2-content">
                Un problème N+1 dans une API GraphQL NestJS apparaît lorsqu'un résolveur de champ imbriqué déclenche une lecture supplémentaire pour chaque élément renvoyé. La query peut sembler rapide tout en exécutant...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-3-date">09/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                09/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-3-title">Le mythe du side project obligatoire</h2>
                <a href="https://www.jdecool.fr/blog/2026/09/10/le-mythe-du-side-project-obligatoire.html" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-3-feed">
                    Lire l'article sur Jérémy DECOOL
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-3-content">
                Il y a un mythe fortement ancré dans la tête des développeurs, sur l’importance d’avoir des side projects. Cassons-le immédiatement. Non, il n’est pas obligatoire d’avoir un side project pour être un...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-4-date">08/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                08/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-4-title">L&#039;AFUP fédère 32 assos autour d&#039;une lettre ouverte pour la survie des événements techniques</h2>
                <a href="https://afup.org/news/1265-l-afup-federe-32-assos-autour-d-une-lettre-ouverte-pour-la-survie-des-evenements-techniques" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-4-feed">
                    Lire l'article sur AFUP
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-4-content">
                32 associations, équipes animatrices de communautés et organisations d'événements techniques français publient ce mardi 8 septembre une lettre ouverte à l'initiative de l'AFUP pour alerter l'écosystème...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-5-date">07/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                07/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-5-title">Souveraineté : de l’IA agentique qui garde vos données en Europe</h2>
                <a href="https://les-tilleuls.coop/blog/souverainete-de-lia-agentique-qui-garde-vos-donnees-en-europe" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-5-feed">
                    Lire l'article sur Les-Tilleuls.coop
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-5-content">
                
Face à une actualité internationale qui nous pousse à réduire nos dépendances technologiques vis-à-vis des acteurs américains (infrastructure comme IA), on peut construire un agent IA pleinement opérationnel...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-6-date">07/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                07/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-6-title">Transformer une API en boîte à outils pour agents : l’architecture de notre assistant de conférence</h2>
                <a href="https://les-tilleuls.coop/blog/transformer-une-api-en-boite-a-outils-pour-agents-larchitecture-de-notre-assistant-de-conference" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-6-feed">
                    Lire l'article sur Les-Tilleuls.coop
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-6-content">
                
La première partie de ce retour d’expérience expliquait le choix d&rsquo;architecture : construire un serveur MCP plutôt qu&rsquo;un chatbot isolé, pour que le service soit accessible à n&rsquo;importe...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-7-date">07/09/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                07/09/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-7-title">Comment nous avons créé un assistant IA pour l’API Platform Conference 2026</h2>
                <a href="https://les-tilleuls.coop/blog/comment-nous-avons-cree-un-assistant-ia-pour-lapi-platform-conference-2026" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-7-feed">
                    Lire l'article sur Les-Tilleuls.coop
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-7-content">
                
Trouver le talk qui correspond à vos objectifs, savoir qui va briller sur la scène FrankenPHP, caler votre agenda&#8230; La billetterie de l&rsquo;API Platform Conference 2026 ferme dans quelques jours,...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-8-date">27/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                27/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-8-title">Migrer de Webpack Encore vers Vite avec Reprise</h2>
                <a href="https://jolicode.com/blog/migrer-de-webpack-encore-vers-vite-avec-reprise" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-8-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-8-content">
                Nous maintenons, pour un de nos clients, un projet à fort trafic : 5 sites servis par une même application Symfony, 800 templates Twig, et un front React + Tailwind buildé depuis des années par Webpack...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-9-date">25/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                25/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-9-title">Penser problème avant de penser solution</h2>
                <a href="https://www.jdecool.fr/blog/2026/08/26/penser-probleme-avant-de-penser-solution.html" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-9-feed">
                    Lire l'article sur Jérémy DECOOL
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-9-content">
                En tant que développeur, quand on démarre une tâche ou un projet, on pense facilement au framework que l’on va utiliser, à la base de données, aux patterns que l’on va pouvoir mettre en place. Et si c’était...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-10-date">25/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                25/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-10-title">La PHP Foundation, partenaire du Forum PHP 2026 !</h2>
                <a href="https://afup.org/news/1263-la-php-foundation-partenaire-du-forum-php-2026" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-10-feed">
                    Lire l'article sur AFUP
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-10-content">
                Un stand dans notre hall sponsors
Si les événements AFUP ont toujours mis en avant l'action de la PHP Foundation, cette édition passe à l'étape supérieure. L'organisme qui veille à la qualité et assure...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-11-date">20/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                20/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-11-title">Démarrage de la refonte graphique de notre site</h2>
                <a href="https://afup.org/news/1262-debut-refonte-graphique-de-notre-site" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-11-feed">
                    Lire l'article sur AFUP
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-11-content">
                Les différents choix techniques
Dans cet article, on vous explique ce qui a été mis en place pour cette refonte.
Le CSS
Le premier choix fait par les bénévoles a été Tailwindcss. Nous sommes plusieurs...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-12-date">18/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                18/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-12-title">SimHash : trouver les pages qui se ressemblent</h2>
                <a href="https://jolicode.com/blog/simhash-trouver-les-pages-qui-se-ressemblent" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-12-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-12-content">
                Il y a quelques semaines, j'ai eu besoin de détecter du contenu dupliqué dans le crawler de redirection.io. Pas du dupliqué à la virgule près, ça c'est facile, mais du dupliqué « en gros, c'est la même...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-13-date">12/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                12/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-13-title">Quand le cache de Symfony ralentit votre application...</h2>
                <a href="https://jolicode.com/blog/quand-le-cache-de-symfony-ralentit-votre-application" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-13-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-13-content">
                Mettre une valeur en cache, c'est toujours plus rapide, non ? Et bien, pas forcément ! Cet article partage l'analyse d'un problème de performance causé par la protection &quot;anti-stampede&quot; du composant...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-14-date">10/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                10/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-14-title">La fin de PHP Extension Repository</h2>
                <a href="https://nahan.fr/la-fin-de-php-extension-repository?pk_campaign=feed&amp;pk_kwd=la-fin-de-php-extension-repository" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-14-feed">
                    Lire l'article sur JB Nahan
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-14-content">
                Arrêt du PHP Extension Repository : temps, coûts et nouvelles règles rendent le maintien difficile. Pourquoi je ferme le site après des années d'efforts. Comment j'en suis arrivé là ?
The post La fin...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-15-date">10/08/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                10/08/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-15-title">L&#039;Agent Development Environment : une nouvelle unité de travail</h2>
                <a href="https://jolicode.com/blog/l-agent-development-environment-une-nouvelle-unite-de-travail" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-15-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-15-content">
                Régulièrement, quelque chose arrive et change ce que « écrire du code » veut dire. Cette fois, il se pourrait que ça ne veuille plus dire écrire du tout.
D'où je viens
Ce qui suit est mon parcours, pas...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-16-date">23/07/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                23/07/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-16-title">Détecter les régressions visuelles dans la CI avec Playwright et Docker</h2>
                <a href="https://jolicode.com/blog/detecter-les-regressions-visuelles-dans-la-ci-avec-playwright-et-docker" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-16-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-16-content">
                Sur un gros site public, le front bouge tout le temps : une migration Tailwind par-ci, un composant React par-là, un bloc CMS qui change de gabarit. Et comme toujours avec le CSS, la modification d’une...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-17-date">20/07/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                20/07/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-17-title">JoliMediaSyliusBundle, un nouveau bridge pour vos projets Sylius</h2>
                <a href="https://jolicode.com/blog/jolimediasyliusbundle-un-nouveau-bridge-pour-vos-projets-sylius" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-17-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-17-content">
                Est-il encore nécessaire de présenter l’excellent framework E-commerce Sylius ?
Si Sylius s’est imposé dans l’écosystème e-commerce, c’est notamment grâce à sa capacité à s’adapter à des besoins métier...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-18-date">17/07/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                17/07/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-18-title">Un RAG Magique !</h2>
                <a href="https://les-tilleuls.coop/blog/un-rag-magique" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-18-feed">
                    Lire l'article sur Les-Tilleuls.coop
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-18-content">
                
Il y a peu, je me suis mis à rejouer à Magic: The Gathering avec des amis. C’est un jeu de cartes à collectionner dans lequel on construit des decks pour affronter ses adversaires à travers divers modes...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-19-date">17/07/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                17/07/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-19-title">Accélérer votre CI : mettre en cache l’état de la base de données</h2>
                <a href="https://jolicode.com/blog/accelerer-votre-ci-mettre-en-cache-l-etat-de-la-base-de-donnees" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-19-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-19-content">
                Il y a quelques années, j’écrivais Accélérer votre intégration continue. L’article passait en revue tout un tas de techniques pour rendre une CI plus rapide : cache Composer, cache Yarn, layers Docker,...
            </p>
        </article>
    </div>
</div>

                    <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
    <div class="flex flex-row gap-5">
        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-20-date">16/07/2026</div>
        <article class="pb-4 sm:pb-8">
            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
                16/07/2026
            </span>
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-20-title">Customiser les grilles Sylius - DX améliorée avec les Grid mutators</h2>
                <a href="https://jolicode.com/blog/customiser-les-grilles-sylius-dx-amelioree-avec-les-grid-mutators" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-20-feed">
                    Lire l'article sur Jolicode
                </a>
            </div>
            <p class="py-2 font-light dark:text-gray-300" data-qa="article-20-content">
                Dans Sylius, les grilles sont responsables de l'affichage des listes du back-office : récupération des données, définition des colonnes, filtres, actions...
Sylius E-commerce fournit un grand nombre de...
            </p>
        </article>
    </div>
</div>

            </div>

    <nav class="sm:my-12 flex justify-between dark:text-gray-300">
        <div class="flex-grow">
                    </div>

                    <a href="/articles?page=2" class="block p-6 sm:p-0 hover:underline" data-qa="page-next">Page suivante</a>
            </nav>

            </main>
        </div>

        <footer class="py-5 bg-slate-50 dark:bg-slate-700 dark:text-white text-center">
            Un site <a href="https://afup.org" class="text-primary-500 hover:underline">AFUP</a><br />
            Hébergé sur <a href="https://www.clever-cloud.com" class="text-primary-500 hover:underline">Clever Cloud</a><br/>
            Code Source sur <a href="https://github.com/afup/planete" class="text-primary-500 hover:underline">GitHub</a>
        </footer>
    </body>
</html>
