
<p>Si t&rsquo;es dans le Web, tu as forcément déjà entendu cette phrase lancée en plein milieu d&rsquo;une discussion</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Pas de release en prod un vendredi !</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>C’est comme une règle tacite, un peu comme le fait de ne pas associer chaussettes et sandales.</p>



<figure class="wp-block-image is-style-large"><img src="https://cdn-images-1.medium.com/max/1600/1*JFkOl-otLPKwihqcGd5VFQ.png" alt="Two socks one making fun of the other one"/><figcaption>Deux petites chausettes qui fête le début du printemps et l’arrivée des Birkenstocks —by Midjourney</figcaption></figure>



<p>Le client est rarement celui qui impose cette règle, c’est plutôt une sorte de mantra dans les équipes de devs.<br>Et honnêtement, personne ne veut se faire appeler pendant le week-end pour corriger un bug à cause d’une mise en prod foireuse.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">On a tous vécu au moins une fois une galère avec une mise en prod un vendredi après-midi…</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>Mais soyons honnêtes, ne pas déployer un vendredi, <strong>c’est traiter les symptômes sans s’attaquer à la maladie</strong>.<br>Les refus de mise en prod certains jours cachent souvent des problèmes plus profonds.</p>



<p>Alors, mettons nos plus beaux gants de chirurgien et examinons &#8211; ensemble &#8211; chacun de ces symptômes un par un.</p>



<h2>Un mal insidieux</h2>



<p>Vous êtes paranoïaque à l’idée de déployer un vendredi&nbsp;? Voici quelques symptômes qui le prouvent.</p>



<h3>La Release&nbsp;roulette</h3>



<p>Le premier symptôme est souvent l’absence d’un système de déploiement automatisé, <strong>fiable</strong>.&nbsp;<br>Ou pire, un système partiellement manuel, pas documenté pour un sou et totalement à la ramasse.</p>



<p>En conséquence, déployer prend un temps fou et nécessite un cerveau surhumain.</p>



<figure class="wp-block-image is-style-large"><img src="https://cdn-images-1.medium.com/max/1600/1*0YU69N2DdWfFKWk2qY4RUA.png" alt=""/><figcaption>La caricature du type de cerveau nécessaire pour des mises en production manuel — By Midjourney</figcaption></figure>



<p>Et le pire, c’est qu’en cas de problème, on peu difficilement revenir dans l’état pré-release sans s’arracher les cheveux.</p>



<h3>Le régression maléfique</h3>



<p>Un grand classique des déploiements catastrophique, un manque de tests de la dernière release.</p>



<p>Que ce soit par nécessité budgétaire ou sous la contrainte du temps, personne n’a eu l’occasion de mettre en place une batterie de tests solide. Du coup, on risque de se retrouver avec des bugs et des régressions, même les plus farfelus.</p>



<p>En cas de pépins, il faut être prêt à tout laisser tomber et corriger tout ça en urgence.<br>Et le vendredi après-midi, ce n’est pas la meilleure heure pour ça, non&nbsp;?</p>



<figure class="wp-block-image is-style-default"><img src="https://cdn-images-1.medium.com/max/1600/1*MJmUiZehuvub1nkNooV99A.jpeg" alt=""/><figcaption>Pas de mise en prod le vendredi qu’ils disaient… — <a href="https://www.commitstrip.com/fr/2012/11/23/pas-de-mise-en-prod-le-vendredi-quils-disaient/?" rel="noreferrer noopener" target="_blank">Commits Strip du 23 novembre&nbsp;2012</a></figcaption></figure>



<h3>Too big to&nbsp;unfail</h3>



<p>Plus on retarde la mise en production, plus on engrenge une montagne de changements. Et plus on en a, plus on a peur de tout faire planter lors de la mise en production.</p>



<p>En clair, c’est comme essayer de tout faire passer dans un Jeans SlimFit taille 34 alors qu’on a pris quelques kilos aux dernières fêtes de fin d’année. Ça risque de craquer de tous les côtés.</p>



<p>Il est tout à fait normal d’avoir des craintes. C’est mathématique, plus les changements sont importants, plus il y a de risques, d’effets de bord.</p>



<h3>Rollback hell</h3>



<p>Quand tout part en cacahuète, la solution la plus simple reste alors un rollback, soit une remise en état du système dans son état pré-release.</p>



<p>Mais soyons honnêtes, on ne sait souvent pas comment ça fonctionne et ça crée un peu de panique. C’est sûr que ce n’est pas très rassurant de déployer sans savoir comment revenir en arrière si jamais ça foire.</p>



<p>Évidemment, devoir déclencher un rollback ce n’est jamais très glorieux, au moins, ça va vous permettre de remettre rapidement votre projet sur les rails et de reporter la mise en production pour des raisons valables.</p>



<p>Malheureusement, la procédure est <strong>souvent négligée</strong>. Soit le système ne fonctionne pas bien, soit il n’a jamais vraiment été éprouvé ou relancer récemment. Rajoutant ainsi encore plus de stress à notre peur naturelle des déploiements.</p>



<h3>Sacralisation</h3>



<p>Trop souvent les mises en production sont sacralisées. Il en est fait un événement spécial et unique. C’est alors pas vraiment étonnant qu’il y ait tellement de stress et de panique.</p>



<figure class="wp-block-image is-style-large"><img src="https://cdn-images-1.medium.com/max/1600/1*dtwofK70aByhYrlCl2jRjw.png" alt=""/><figcaption>Si mettre en production c’est plus difficile que de trouver le Graal, il faut revoir quelques priorités— By Midjourney</figcaption></figure>



<p>Pire, la planification des mises en production sont faites plusieurs semaines à l’avance et doivent être faites en dehors des horaires de bureau — <strong>La fameuse release du mardi 20h</strong>.&nbsp;</p>



<h3>Diagnostique</h3>



<p>Donc pour résumé, en général on a un certain nombre de problèmes que l’on peut identifier:</p>



<ul class="is-style-default"><li>Pas de système de déploiement automatique</li><li>Batterie de tests insuffisante</li><li>Changements trop importants entre deux mises en production</li><li>Système de remise en état (rollback) scabreux</li><li>Sacralisation de l’événement</li></ul>



<p>Et comme on a peur de déployer, on le fait rarement, donc on connaît mal le processus de déploiement, ce qui fait que le problème se répand encore plus vite.<br>C’est la boucle infernale&nbsp;!</p>



<h2>Traitons le&nbsp;mal</h2>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Alors docteur, c&rsquo;est grave ?</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>Grave, à vous de voir, mais certainement pas catastrophique et heureusement ça se soigne bien&nbsp;!</p>



<h3>Deploy often &amp; with&nbsp;Ease</h3>



<p>Tout d’abord, je vous conseille vivement de mettre en place un outil de déploiement continu (Continuous Deployment). Et oui, c’est la base&nbsp;!</p>



<p>Que vous optiez pour un outil maison ou un système éprouvé comme <a rel="noreferrer noopener" href="https://capistranorb.com/" target="_blank">Capistrano</a>, l’important c’est d’avoir <strong>confiance en votre outil</strong>. Sinon, vous risquez de vivre l’enfer à chaque fois&nbsp;!</p>



<p>Personnellement, nous mettons systématiquement en place <a rel="noreferrer noopener" href="https://capistranorb.com/" target="_blank">Capistrano</a> dans nos Github Actions pour l’ensemble de nos projets.<br>Ainsi nous déployons nos projets Symfony avec <a rel="noreferrer noopener" href="https://everzet.github.io/capifony" target="_blank">Capifony</a> et Drupal avec <a rel="noreferrer noopener" href="https://github.com/antistatique/capdrupal" target="_blank">CapDrupal</a>.<br>Nous avons également réalisé nos propres recettes pour les projets WordPress et NextJS.</p>



<p>Il n’y a pas d’outil parfait, à vous de trouver le vôtre et de construire votre écosystème autour.</p>



<p>Si vous voulez éviter de vous retrouver avec une montagne de changements gargantuesques, il faut déployer souvent (merci le déploiement continu) et tenir à jour un <strong>CHANGELOG.md</strong> de vos modifications.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Do one thing, and do it well</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">La philosophie UNIX</p>
                      </div>
            </div>
</div>



<p>Nous chez Antistatique, on à adopter le format <a rel="noreferrer noopener" href="https://keepachangelog.com/en/1.1.0/" target="_blank">Keep a Changelog</a>&nbsp;, qui nous permet d’annoncer toutes les modifs à nos clients — à chaque Release — et de garder un œil sur le <strong>contenu exact de nos mises en production</strong>, sans se prendre la tête à fouiller dans l’historique Git.</p>



<figure class="wp-block-image is-style-large"><img src="https://cdn-images-1.medium.com/max/1600/1*HWpsyidOVfgdODKn0IIV0g.png" alt=""/><figcaption>Break the Monolith&nbsp;! — By Midjourney</figcaption></figure>



<h3>Tests everywhere</h3>



<p>Il va falloir mettre les <strong>mains dans le cambouis</strong>&nbsp;! Mais rassurez-vous, ce n’est pas insurmontable.<br>Pour éviter les régressions, il vous faut des tests unitaires et des tests fonctionnels.</p>



<p>Les tests unitaires vont vous permettre de vous assurer que le code que vous avez écrit est bien conforme à vos attentes, sans régression ni erreur.</p>



<p>Quant aux tests fonctionnels, il existe plusieurs solutions selon ce que vous voulez tester. Mais en gros, ils vous permettent de vous assurer que votre application fonctionne comme prévu pour l’utilisateur.</p>



<p>Personnellement, j’aime bien les outils <a href="https://docs.behat.org/" rel="noreferrer noopener" target="_blank">Behat</a> ou <a href="https://www.cypress.io/" rel="noreferrer noopener" target="_blank">Cypress</a> pour les tests purement fonctionnels.<br>Pour les tests unitaires, on utilise principalement <a href="https://phpunit.de/" rel="noreferrer noopener" target="_blank">PHPUnit</a> et <a href="https://symfony.com/components/Panther" rel="noreferrer noopener" target="_blank">Panther</a> (oui, même pour <a href="https://wordpress.com/" rel="noreferrer noopener" target="_blank">WordPress</a>&nbsp;!).</p>



<h3>Daily Routine</h3>



<p>Faire une mise en production ne devrait pas être un événement d’importance apocalyptique. C’est important de les planifier, mais il ne faut pas non plus que ça vire au psychodrame.</p>



<figure class="wp-block-image is-style-default"><img src="https://cdn-images-1.medium.com/max/1600/1*xPobADQ7T5rhWVH65aXn7A.png" alt=""/><figcaption>Si pour vous les déploiements sont un chemin semé d’embuche, il est temps de prendre des mesures pour contrer tout cela — By Midjourney</figcaption></figure>



<p>Plus on en fait, moins c’est stressant. Et puis si vous releasé plus souvent, vous aurez moins de choses à tester à chaque fois, donc moins de risques de tout casser. <strong>CQFD</strong>.</p>



<p>Chez nous, nous déployons tous les jours. Nous n’avons pas vraiment de règle ou de condition pour ne pas déployer. À l’exception d’événements spéciaux chez nos clients. Comme par exemple une conférence de presse de l’un de nos clients ou une démo, où le moindre down-time (site inaccessible, ce qui est en général de quelques minutes lors d’une mise en production et qui peut s’étendre à plusieurs minutes en cas de rollback) serait inacceptable.</p>



<p>Il nous arrive également de refuser des mises en production, lorsque l’équipe en charge du projet n’est tout simplement pas présente (vacances, maladies,&nbsp;…).</p>



<h3>Trust your&nbsp;Rollback</h3>



<p>Les déploiements qui fails, on sait tous que ça peut arriver, même aux meilleurs. Donc voici mon meilleur conseil: <strong>automatisez tout ce qui peut l’être et documentez le reste</strong>.<br>Soyez réalistes, tout ne peut pas être automatisé.&nbsp;<br>De ce fait, vous devez documenter les étapes de manière claire et précise.</p>



<p>Je vous assure, quand le système est down et que vous êtes en mode panique, vous serez content d’avoir une procédure “step-by-step” sous la main.<br>Ça vous évitera de faire des bêtises et de devoir réfléchir alors que vous êtes déjà en mode survie.</p>



<figure class="wp-block-image is-style-default"><img src="https://cdn-images-1.medium.com/max/1600/1*r7fGJfZsjoqxFiwkuBIk1g.png" alt=""/><figcaption>Tout va bien, tout est normal, let’s Rollback — By Midjourney</figcaption></figure>



<p>Donc, prenez le temps de documenter tout ce qui peut être documenté:</p>



<ul class="is-style-default"><li>Où se trouvent les backups&nbsp;?&nbsp;</li><li>Comment monter la base de données sur le serveur de production&nbsp;?</li><li>Comment remettre la release précédente en production&nbsp;?&nbsp;</li><li>Quelles sont les commandes à lancer pour remonter le serveur&nbsp;?</li><li>Où se trouve le serveur et qui sont les personnes de contacts en cas d’urgence&nbsp;?</li></ul>



<p>Et surtout, n’oubliez pas de tester votre procédure de rollback <strong>régulièrement</strong> pour être sûr que tout est bien à jour.</p>



<h3>Conclusion</h3>



<figure class="wp-block-image is-style-default"><img src="https://cdn-images-1.medium.com/max/1600/1*5nWMPIAdUDqWAntwZ4AkpA.jpeg" alt=""/><figcaption>Aucun risque — <a href="https://www.commitstrip.com/fr/2019/03/29/zero-risk/" rel="noreferrer noopener" target="_blank">Commits Strip du 29 mars&nbsp;2019</a></figcaption></figure>



<p>Il faut savoir préparer le terrain en amont. Avoir une bonne stratégie de déploiement et des outils efficaces vous permettront de déployer avec confiance et tranquillité d’esprit, même un vendredi à 17h. Il faut également avoir une procédure de remise en état efficace et fonctionnel.&nbsp;</p>



<p>Une fois ces outils en main et ceux-ci maîtriser alors vos mises en production se feront <strong>Finger in the Nose</strong>. Au pire des cas, un rollback et on prend le temps de comprendre ce qui vient de se passer.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Il faut briser le cercle vicieux qui ne fait qu&rsquo;augmenter la fréquence de déploiement, le risque et la perte de confiance.</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>Et si vos clients sont toujours réticents, dites-leur simplement&nbsp;: “On peut le faire, mais on va prévoir des pizzas et de la bière au cas où&nbsp;!” 😜🍕</p>



<p>Et vous, vous dites quoi à vos clients lorsqu’ils demandent de déployer en production un vendredi&nbsp;?</p>



<h2>Source</h2>



<p><strong>Yves Brissaud</strong> (Mar 2013) Ne pas pousser en prod le vendredi. FAUX&nbsp;!<br><a href="http://log.winsos.net/2013/03/12/ne-pas-pousser-en-prod-le-vendredi-faux.html" rel="noreferrer noopener" target="_blank">http://log.winsos.net/2013/03/12/ne-pas-pousser-en-prod-le-vendredi-faux.html</a></p>



<p><strong>Ruby K V</strong> (Déc 2021) Fear Of Production Deployment — A Never-Ending Tale?<br><a href="https://www.linkedin.com/pulse/fear-production-deployment-never-ending-tale-ruby-k-v/" rel="noreferrer noopener" target="_blank">https://www.linkedin.com/pulse/fear-production-deployment-never-ending-tale-ruby-k-v/</a></p>



<p><strong>Alessandro Minoccheri</strong> (Jan 2021) Why you should deploy on Friday without fear<br><a href="https://medium.com/flowingis/why-you-should-deploy-on-friday-without-fear-80a26d3c17c1" rel="noreferrer noopener" target="_blank">https://medium.com/flowingis/why-you-should-deploy-on-friday-without-fear-80a26d3c17c1</a></p>



<p><strong>Kyrylo Yefimenko</strong> (Déc 2020) The Fear of Deployment Factor<br><a href="https://engineering.talkdesk.com/the-fear-of-deployment-factor-48cf09095f16" rel="noreferrer noopener" target="_blank">https://engineering.talkdesk.com/the-fear-of-deployment-factor-48cf09095f16</a></p>



<p><strong>Mark Levy</strong> (Avr 2022) How to Deploy Code Without Fear<br><a href="https://www.opsmx.com/blog/how-to-deploy-code-without-fear/" rel="noreferrer noopener" target="_blank">https://www.opsmx.com/blog/how-to-deploy-code-without-fear/</a></p>



<p><strong>Steve Ardalis</strong> (Mar 2022) Deploy More Often<br><a href="https://ardalis.com/deploy-more-often/" rel="noreferrer noopener" target="_blank">https://ardalis.com/deploy-more-often/</a></p>



<p><strong>Candost Dagdeviren</strong> (Déc 2021) Why should you deploy your code in smaller chunks and release software often?<br><a href="https://candost.blog/why-should-you-deploy-your-code-in-smaller-chunks-and-release-software-often/" rel="noreferrer noopener" target="_blank">https://candost.blog/why-should-you-deploy-your-code-in-smaller-chunks-and-release-software-often/</a></p>



<p><strong>Matt Rickard</strong> (Oct 2022) Deploy Early, Deploy Often&nbsp;<br><a href="https://matt-rickard.com/deploy-early-deploy-often" rel="noreferrer noopener" target="_blank">https://matt-rickard.com/deploy-early-deploy-often</a></p>



<p><strong>Cédric Hulin</strong> (Mar 2022) Ne déploie pas en production un vendredi&nbsp;!?<br><a href="https://www.linkedin.com/pulse/ne-d%C3%A9ploie-pas-en-production-un-vendredi-c%C3%A9dric-hulin" rel="noreferrer noopener" target="_blank">https://www.linkedin.com/pulse/ne-d%C3%A9ploie-pas-en-production-un-vendredi-c%C3%A9dric-hulin</a></p>



<p><strong>Aurone</strong> (Juin 2022) La mise en production du vendredi à 17h<br><a href="https://www.aurone.com/blog/la-mise-en-production-du-vendredi-17h/" rel="noreferrer noopener" target="_blank">https://www.aurone.com/blog/la-mise-en-production-du-vendredi-17h/</a></p>



<p><a href="http://twitter.com/PasLeVendredi" rel="noreferrer noopener" target="_blank"><strong>@PasLeVendredi</strong></a> (2023) Votre rappel hebdomadaire que les mises en prod le vendredi, c’est interdit.<br><a href="https://mobile.twitter.com/paslevendredi" rel="noreferrer noopener" target="_blank">https://mobile.twitter.com/paslevendredi</a></p>



<p><strong>Est-ce qu’on met en prod aujourd’hui?</strong> (2023)<br><a href="https://www.estcequonmetenprodaujourdhui.info" rel="noreferrer noopener" target="_blank">https://www.estcequonmetenprodaujourdhui.info</a></p>



<p><strong>ChatGPT</strong> (2023)<br><a href="http://chat.openapi.com" rel="noreferrer noopener" target="_blank">http://chat.openapi.com</a></p>



<p><strong>Midjourney</strong> (2023)<br><a href="https://midjourney.com" rel="noreferrer noopener" target="_blank">https://midjourney.com</a></p>


Deploy on Friday: brisons le mythe de la malédiction du vendredi


<h2>Partager l&rsquo;aventure</h2>



<p>Une aventure prend tout son sens quand on la partage. Quand on la raconte mais surtout quand on la vit avec d&rsquo;autres personnes. Antistatique existe et appartient aux personnes qui nous font confiance. Les personnes qui y travaillent, les partenaires, les personnes et organisations pour qui nous travaillons contribuent à notre succès. Les associé·es sont celles et ceux qui souhaitent activement pérenniser notre vision sur le long terme. Alberto, Gilles et moi sommes extrêmement chanceux d&rsquo;avoir réussi à attirer et retenir des personnes de talents, de passions et de valeurs qui ont eu à coeur de devenir partenaires de cette vision. Cet article vous permet de comprendre ces nouveaux changements et nous permet de témoigner notre gratitude envers les associé·es passé·es et futur·es.</p>



<h2>Bon vent cher Guillaume Berry</h2>



<p>En 2014, Guillaume a rejoint notre équipe en tant que designer, apportant avec lui son talent et sa créativité. Au fil des années, il a su se démarquer et est devenu associé en 2018, prenant la direction métier design au sein de notre organisation. Son expertise en architecture de l&rsquo;information, design system, typographie et présentation en font l&rsquo;un des meilleurs designers d&rsquo;interaction que nous connaissons, avec une palette riche de compétences.</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1440" height="1800" src="https://content.antistatique.net/app/uploads/2023/04/guillaume.png" alt="Guillaume le jour de l'annonce où il devient associé à toute l'équipe. Chapagne !" class="wp-image-11859" srcset="https://content.antistatique.net/app/uploads/2023/04/guillaume.png 1440w, https://content.antistatique.net/app/uploads/2023/04/guillaume-240x300.png 240w, https://content.antistatique.net/app/uploads/2023/04/guillaume-768x960.png 768w, https://content.antistatique.net/app/uploads/2023/04/guillaume-1229x1536.png 1229w" sizes="(max-width: 1440px) 100vw, 1440px" /></figure>



<p>Pendant quatre années, Guillaume a dirigé l&rsquo;équipe design, contribuant à son évolution et à son succès. Son départ nous attriste profondément, mais notre amitié avec lui va au-delà de son rôle d&rsquo;associé. Nous savons que Guillaume est destiné à de nouvelles aventures et nous lui souhaitons le meilleur pour la suite. Nous garderons de bons souvenirs de son passage parmi nous, et nous sommes reconnaissants pour tout ce qu&rsquo;il a apporté à notre agence.</p>



<p>Nous lui souhaitons le meilleur pour la suite ! Il restera évidemment notre fournisseur officiel de caramels bretons et des blagues du vendredi.&nbsp;</p>



<h2>Nouveau·elle associé·es : Noémie Sandoz et Yann Lugrin</h2>



<p>Engagée et authentique Noémie, véritable pilier de l&rsquo;agence, a commencé à travailler chez Antistatique il y a presque 10 ans. En tant que spécialiste en architecture de l&rsquo;information et recherche utilisateur·trices, elle a profondément contribué à l&rsquo;évolution de notre agence en réalisant des projets d&rsquo;envergure. Mettant toujours l&rsquo;expérience utilisateur·trices au centre de nos décisions, elle apporte une expertise essentielle pour imaginer et créer des solutions pertinentes pour nos client<meta charset="utf-8">·es. Aujourd&rsquo;hui à la Direction de l&rsquo;équipe design, Noémie veille avec bienveillance au bonheur et à l&rsquo;évolution de chaque membre de son équipe. Autant de raisons pour nous de lui avoir proposé de devenir associée.</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1600" height="1124" src="https://content.antistatique.net/app/uploads/2023/04/nouveaux-nouvelles-associes-associees_1600.jpg" alt="" class="wp-image-11895" srcset="https://content.antistatique.net/app/uploads/2023/04/nouveaux-nouvelles-associes-associees_1600.jpg 1600w, https://content.antistatique.net/app/uploads/2023/04/nouveaux-nouvelles-associes-associees_1600-300x211.jpg 300w, https://content.antistatique.net/app/uploads/2023/04/nouveaux-nouvelles-associes-associees_1600-768x540.jpg 768w, https://content.antistatique.net/app/uploads/2023/04/nouveaux-nouvelles-associes-associees_1600-1536x1079.jpg 1536w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure>



<p>Yann a rejoint notre équipe il y a plus de 4 ans, mais notre histoire commune remonte bien plus loin. Nous avons eu l&rsquo;occasion de collaborer avec lui par le passé en tant que partenaire, client ou lors de fabuleux startup week-ends. Son expertise en stratégie technique ont toujours été un atout pour notre agence. Son engagement, sa loyauté et sa participation active aux changements stratégiques nous ont convaincus de lui proposer de rejoindre l&rsquo;actionnariat de l&rsquo;agence. Direction technique de Phoenix (une des 2 équipes de développeur·euses) et Direction RH sont les deux rôles que Yann occupe avec brio. Plus de 20 d&rsquo;expérience dans le développement web et la création de la startup Yalty (Application RH) en font le candidat idéal pour ces deux rôles.&nbsp;</p>



<p>Nous sommes ravis de les accueillir comme nouveaux actionnaires. Leur expertise et leur engagement envers notre vision commune de ce que l&rsquo;agence doit devenir sont inestimables. Ensemble, nous sommes impatient·es de réaliser les évolutions nécessaires pour continuer à innover et à offrir des solutions de qualité à nos client·es. Leur intégration à l&rsquo;actionnariat de l&rsquo;agence est une reconnaissance de leur contribution et une preuve de notre confiance en leur capacité à continuer à jouer un rôle clé dans notre aventure collective.</p>



<h2>La suite de l&rsquo;histoire</h2>



<p>Déjà 15 ans cette année, mais nous ne sommes qu&rsquo;au début de l&rsquo;histoire. Ces récents changements nous ont donné l&rsquo;occasion de réfléchir ensemble à notre positionnement, notre mission et ce que nous souhaitons apporter au paysage web et digital romand. Nous ne manquerons pas de vous en parler sur notre blog comme à notre habitude.</p>


Les associé·es d’Antistatique


<p>Cannes a son Lion, Lausanne a son<a href="https://associationgrand.ch/" data-type="URL" data-id="https://associationgrand.ch/"> GRAND</a>. Et ce fameux Grall pardon, cette fameuse brique est de retour pour célébrer les créatives et créatifs de Suisse Romande.</p>



<p>Le <a href="https://associationgrand.ch/" data-type="URL" data-id="https://associationgrand.ch/">GRAND</a> c&rsquo;est un peu cette Rolex que tu veux pas, mais que tu veux quand même, et si possible avant 30 ans. (à 50 ans c&rsquo;est l&rsquo;AP).</p>



<p>Donc le GRAND est de retour avec comme chefs d&rsquo;orchestre nos amis.es de chez <a href="https://www.baston.ch/" data-type="URL" data-id="https://www.baston.ch/">BASTON</a> , Leur seul but faire renaitre le <strong>GRAND</strong> tel un phénix afin de mettre en lumière les nombreux talents de notre chère région. </p>



<h2>Les infos à savoir</h2>



<ul><li>Délai d&rsquo;inscription: <strong>1er Mai 2023</strong></li><li>Nombre de catégories: 10</li><li>Date de la remise des prix: le 25 mai 2023</li><li>Site Internet pour s&rsquo;inscrire: <a href="https://associationgrand.ch/">https://associationgrand.ch/</a></li></ul>



<h2>Antistatique et le GRAND</h2>



<ul><li>En 2015, nous avons remporté un GRAND pour la refonte du Site Internet du Média de référence « Le Temps »</li><li>En 2017, nous étions finaliste avec un e-commerce,</li><li>En 2023, nous aidons humblement avec le design du <a href="https://associationgrand.ch/madeby/">Site Internet</a></li></ul>



<p>A vous de jouer, <a href="https://associationgrand.ch/les_categories/">inscrivez vos projets</a> et venez fêter aux côtés de vos consœurs et confrères ! </p>


L’ award du GRAND est de retour


<p>La santé mentale c’est important ! Et chez Antistatique, on en a bien conscience. Mais que peut-on faire pour que chaque collaborateur·trice se sente au mieux dans un environnement de travail et le stress inhérent à celui-ci ?</p>



<p>“<em>En Suisse, on estime qu’une personne sur cinq ressentira un stress important en raison de son activité professionnelle au cours de sa vie.</em>” (via un article de l’Hôpital du Valais). Ce stress peut parfois être si conséquent qu’il mène au burnout. Il est donc nécessaire d’être attentif·ve aux premiers signes d’alerte.</p>



<p>Si nous y sommes attentif-ve-s, cela ne signifie pas pour autant que l’on est immunisé. Et plus que de prévenir ce stress, il nous est nécessaire d’apprendre comment mieux réagir face aux difficultés que certain·es peuvent subir.</p>



<h2>L’intervention d’une experte !</h2>



<p>Pour se former sur la question, nous avons fait appel à une spécialiste du burnout, la psychologue et gestalt-thérapeute, Catherine Vasey. Elle est venue à l’agence fin janvier pour nous donner une conférence sur la santé mentale au travail et en particulier sur le burnout. Le talk s’intitulait “<em>Être un « professionnel durable » dans un contexte professionnel exigeant ?</em> ”. On a appris tellement de choses intéressantes… Voici les plus marquantes pour nous :&nbsp;</p>



<ul><li><strong>Reconnaître les signaux d’alerte du burnout</strong> (fatigue de tension, irritabilité, démotivation, saturation, ruminations, troubles du sommeil, isolement progressif…)</li><li><strong>L’évaluation de plusieurs témoignages</strong>. <strong>Apprendre à classer des signes d’alertes et des symptômes</strong> en allant d’une situation “normale”, à une situation qui demande de la vigilance jusqu’à la situation de gravité élevée qui nécessite une aide immédiate.</li><li><strong>La différence entre le “bon et le mauvais stress”</strong>, entre le stress aigu et le stress chronique.</li><li><strong>Faire le bilan de son environnement professionnel</strong> en identifiant les facteurs de stress et d’usure ainsi que les ressources. Dans le but de voir si l’équilibre est bien présent.&nbsp;</li><li><strong>L’importance de la récupération active</strong> pour recharger les batteries et se revitaliser.&nbsp;</li><li><strong>Le petit kit de survie en cas de déséquilibre</strong> (se ressourcer, préserver son sommeil, cadrer les ruminations…)</li></ul>



<figure class="wp-block-image size-full is-style-full-width"><a href="https://www.rts.ch/play/tv/redirect/detail/13960301" target="_blank" rel="noopener"><img loading="lazy" width="1616" height="907" src="https://content.antistatique.net/app/uploads/2023/04/19h30.jpg" alt="" class="wp-image-11913" srcset="https://content.antistatique.net/app/uploads/2023/04/19h30.jpg 1616w, https://content.antistatique.net/app/uploads/2023/04/19h30-300x168.jpg 300w, https://content.antistatique.net/app/uploads/2023/04/19h30-768x431.jpg 768w, https://content.antistatique.net/app/uploads/2023/04/19h30-1536x862.jpg 1536w" sizes="(max-width: 1616px) 100vw, 1616px" /></a><figcaption>L&rsquo;intervention est même passée au <a href="https://www.rts.ch/play/tv/redirect/detail/13960301">19h30 du 21 avril 2023 sur la RTS</a></figcaption></figure>



<h2>Un outil d’auto-bilan</h2>



<p>Lors de son talk, Mme Vasey nous a proposé de faire un exercice d’auto-évaluation de notre environnement professionnel. Un bilan personnel et individuel qui nous a toutes et tous séduit car il permet de faire le point assez rapidement.&nbsp;</p>



<ul><li>D’un côté, on doit <strong>identifier les facteurs de stress et d’usure </strong>que l’on rencontre au travail ainsi que notre capacité à agir sur ce point (une note de 1, pour signifier une impuissance face à ce problème, jusqu’à 10, qui signifie un plein pouvoir pour changer choses).<br><br><em>Exemple d’usures : Des conflits dans l’équipe, un manque de reconnaissance des client</em>·e·<em>s ou des collègues, une surcharge de travail, des interruptions trop fréquentes…</em><br></li><li>De l’autre côté, on doit<strong> identifier les ressources, ce qui nous fait du bien</strong>, dans notre travail.<br><br><em>Exemple de ressources : Des tâches intéressantes, apprendre de nouvelles choses, une bonne ambiance dans l’équipe, des client·e·s satisfait·e·s, se sentir entendu·e et soutenu·e…</em></li></ul>



<h2>Et maintenant ?</h2>



<p>Il est intéressant de voir que chacun·e est l’acteur·ice principal·e de sa santé mentale. Si notre entourage, et donc nos collègues dans le cadre professionnel, peuvent nous alerter sur notre état et peut-être nous aider à en prendre conscience, seule la personne concernée peut prendre les mesures nécessaires après avoir accepté qu’elle ne va pas bien. Le rôle de l’employeur est d’être à l’écoute, d’aider la personne à mettre en place les mesures qu’il ou elle aura choisi et parfois en dernier recours de dire tout simplement stop.</p>



<p>Dans ce but, nous avons mis en place depuis longtemps un parrainage des collaborateur·rice : un·e collègue qu’il ou elle choisit et dont le rôle est entre autres de s’assurer de son bien-être et d’être à son écoute. Le passage <a href="https://antistatique.net/blog/une-responsable-rh-chez-antistatique">d’une responsable RH dédiée chez Antistatique</a> nous a apporté beaucoup d’outils pour améliorer le bien être des collaborateur·rice·s.</p>



<p>Suite à l’intervention de Madame Vasey nous avons également décidé d’ajouter un rappel dans notre documentation interne. Un point sur le comportement à avoir lorsque l’on pense qu’un·e collègue est en situation de stress intense. Ce que l’on peut faire et ce qu’on ne doit pas faire.</p>



<p>L’outil d’auto-bilan est également mis à la disposition de chacun·e. Nous avons décidé d’encourager nos collaborateur·rices à l’utiliser dans le cadre de leur évaluation bi-annuelle. Le résultat reste personnel mais il peut leur servir à prendre conscience d’un déséquilibre et décider sur cette base de partager certains éléments afin que nous puissions prendre des mesures pour l’aider à retrouver une harmonie au travail.</p>



<p>Si vous êtes aussi intéressé·e que nous par le sujet, on vous invite à aller consulter le site <a href="https://www.noburnout.ch">https://www.noburnout.ch</a>.<br><br></p>



<p><strong>Prenez soin de vous !</strong> ❤️</p>


Santé mentale : la prévention du burnout


<p>Dans <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-emma">la</a> <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-sasha">série</a> <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-alberto">des</a> <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-tiphaine">interviews</a> <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-gilles">informels</a> pour mieux connaitre les collaborateur·rices, c&rsquo;est au tour de discuter avec <a href="https://antistatique.net/equipe/yannlugrin">Yann Lugrin</a> et <a href="https://antistatique.net/equipe/noemie">Noémie Sandoz</a>.</p>



<p>Tous deux sont devenu associé·es en 2023 et Antistatique les connait depuis de longues années.</p>



<p>Attachez votre ceinture, on va remonter le temps!</p>



<p></p>



<p>***</p>



<p></p>



<h2>Racontez-moi votre première « rencontre » avec l&rsquo;agence Antistatique?</h2>



<p><strong>Noémie:</strong> Vous faisiez des concours pour gagner des iPads (<a href="https://antistatique.net/blog/gagnez-un-ipad">en 2010</a>). Depuis, je m&rsquo;étais inscrite à la newsletter. J&rsquo;étais à l&rsquo;ERACOM et Jérôme, un camarade de classe, faisait un stage chez Antistatique.</p>



<p>Je connaissais aussi Marc depuis longtemps grâce à l&rsquo;Espoir Tramelan qui organise des camps.<br></p>



<p><strong>Yann: </strong>Mon premier souvenir? Vous aviez écrit à Liquid Concept (ndr: l&rsquo;ancienne agence web de Yann) pour vous présenter. C&rsquo;était en 2009. Un courrier papier, je tiens à signaler!</p>



<p>Après, je n&rsquo;arrive plus à mettre les événements dans l&rsquo;ordre:</p>



<ul><li>août 2009: 1ère rencontre entre Liquid Concept &lt;&gt; Antistatique</li><li>Startup Weekend, dans l&rsquo;équipe de Marc</li><li>Formation Puppetmaster chez Camp2Camp avec Gilles</li><li>Projet de concours pour la Police cantonale vaudoise (un super jeu de voiture en js)</li><li>Les lunchs Eats&amp;Learns pour partager entre entrepreneur·euses du secteur (Liquid Concept, Ratio &amp; Antistatique &#8211; et Liip Lausanne?)</li></ul>



<p></p>



<h2>Parlez-moi un peu de vos loisirs et de ce que vous aimez faire durant votre temps libre?</h2>



<p><strong>Noémie: </strong>J&rsquo;essaie de faire du crossfit (ndlr: comprendre, c&rsquo;est une grande sportive). Allez à un max de concerts. En hiver, j&rsquo;aime beaucoup le carnaval. Et je m&rsquo;occupe de mes chats.</p>



<p></p>



<p><strong>Yann:</strong> Quel temps libre? 😜 Non plus sérieusement, j&rsquo;aime faire du jeu vidéo (ndlr: c&rsquo;est un vrai passionné, il prend congé pour les sorties de jeu), jeu de rôle et jeu en général. Grand fan du LHC!<br>J&rsquo;aime regarder le sports avec des amis (ndlr: prend aussi congé pour le Superbowl). J&rsquo;aime beaucoup voyager et suis investi dans la vie civique de ma ville et du canton.</p>



<p></p>



<h2>Quels ont été les différents rôles que vous avez eu chez Antistatique?</h2>



<p><strong>Noémie:</strong> J&rsquo;ai commencé par faire un stage en 2012 (durant mes études). En 2015, j&rsquo;étais Junior UX Designer, ensuite UX Designer, renommé en Design Researcher &amp; Associate. Au fond, je fais toujours la même chose mais j&rsquo;espère un peu mieux chaque année et plus efficacement 😀</p>



<p><strong>Yann:</strong> J&rsquo;ai été partenaire technique d&rsquo;Antistatique (à l&rsquo;époque de Liquid Concept) et aussi client (notamment pour du design). Durant ma fonction chez Yalty, j&rsquo;étais client d&rsquo;Antistatique (UX &amp; Design). En 2019, j&rsquo;ai été engagé en tant que Senior Web Developer, puis directeur technique en 2020 et désormais associé et directeur RH.</p>



<p></p>



<h2>Quel a été votre « première fois » avec Internet? Quand? Et pour quel usage?</h2>



<p><strong>Noémie:</strong> Arrête avec tes questions!  On est vieux·vieille! On s&rsquo;en rappelle pas! 😀<br>Je me rappelle surtout de pouvoir surfer entre les téléphones que faisait mes parents (ndlr: oui, internet passait par la ligne téléphonique &#8211; et peut toujours passer par cette ligne). Mais pour quel usage? Chattez avec mes copines/copains sur MSN, je suppose&#8230;</p>



<p></p>



<p><strong>Yann: </strong>Moi, c&rsquo;était il y a très longtemps. J&rsquo;ai l&rsquo;impression que ça doit être entre 1995 et 1997. J&rsquo;avais pris un abonnement téléphonique exprès pour (et mon accès Internet chez worldcom). Un usage important de IRC qui m&rsquo;a permis entre autre de trouver un club de jeux de rôle;</p>



<p>Avant, mon père avait un accès au réseau « Compuserve » (ndlr: oui, avant internet, il y a eu d&rsquo;autres réseaux).</p>



<p></p>



<h2>Quel types de projet aimez-vous le plus?</h2>



<p><strong>Noémie:</strong> J&rsquo;apprécie particulièrement les projets pour les ONG. J&rsquo;aime aussi les projets qui correspondent à mon éthique, dans des industries responsables environnementalement.</p>



<p><strong>Yann: </strong>J&rsquo;aime la variété. Mais forcément, les projets qui ont un défi technique et applicatif ou d&rsquo;envergure m&rsquo;amusent beaucoup.<br>Les petits projets sont aussi intéressants pour d&rsquo;autres raisons.</p>



<p></p>



<h2>Vous êtes plutôt viandes rouge ou légumes vapeur sans sel ajouté?</h2>



<p><strong>Noémie:</strong> Ahah, Elle est tellement biaisée ta question!<br>Personnellement, je ne mange pas d&rsquo;animaux. Tous les délicieux plats végétariens et véganes me ravisent.</p>



<p></p>



<p><strong>Yann:</strong> Tout comme pour les types de projets, j&rsquo;aime la variété (ndlr: quel politicien ce Yann! 😅)</p>



<p></p>



<h2>Vous auriez un moment « fort » à partager dans la vie de l&rsquo;agence?</h2>



<p><strong>Noémie:</strong> Il y a eu plein. Les 10 ans au Chalet Zermatt et les voyages au bureau de Miami ont été assez fous!</p>



<p></p>



<p><strong>Yann:</strong> Les souvenirs qui me remontent à l&rsquo;esprit sont des moments parfois difficiles (pas liés à la vie pro) et qui montrent le réconfort trouvé auprès des collègues.</p>



<p></p>



<h2>Quelle est votre pizza préférée?</h2>



<p><strong>Noémie:</strong> Végétarienne de chez Mami (délicieuse), surtout quand elle est partagée avec <a href="https://antistatique.net/equipe/laura">Laura</a>!</p>



<p><strong>Yann:</strong> La pizza Napoli.</p>



<p></p>



<h2>Citez quelques adjectifs qui vous définissent bien et d&rsquo;autres qui ne vous ressemblent pas du tout?</h2>



<p><strong>Yann: </strong>Quelle horreur, c&rsquo;est quoi cet entretien d&#8217;embauche tout pourri ! </p>



<p><strong>Noémie:</strong> Pire dure&#8230; Je vais me faire virer?</p>



<p></p>



<h2>Et enfin, quel est le style de musique que vous aimez bien ?</h2>



<p><strong>Noémie: </strong>On va dire plutôt, metal, Rock, et Punk.</p>



<p><strong>Yann:</strong> C&rsquo;est, hum, comment on appelle ça déjà?<br>« French pop » (ndlr: chanson française). Mais pas que, je suis assez éclectique.</p>



<p></p>



<p></p>


1o questions pour Noémie et Yann


<p>Une bonne partie de notre travail consiste à intégrer plusieurs applications entre elles. La majorité de ces applications n&rsquo;ont pas d&rsquo;intégration native prévue par leurs auteurs, mais expose ce que l&rsquo;on appelle une API (<em>Application Programming Interface</em>) pour s&rsquo;échanger des informations.</p>



<p></p>



<p>Imaginons que nous souhaitons synchroniser les données de notre application avec un CRM (application de gestion de contact et de la relation client). Si ce CRM expose une API, nous pouvons régulièrement lui faire un appel qui dit en substance « <em>donne-moi  tout les contacts qui ont été modifié ou créé depuis hier</em>« . Il s&rsquo;agit de la stratégie API Polling.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Si vous avez déjà voyagé avec des enfants, c&rsquo;est l&rsquo;équivalent de « Est-ce que l&rsquo;on est bientôt arrivé? » un million de fois.</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Lu sur Internet (https://medium.com/swlh/an-alternative-strategy-to-api-polling-using-pub-sub-and-mqtt-40dc643dcf82)</p>
                      </div>
            </div>
</div>



<p>Les APIs modernes proposent une stratégie alternative: pouvoir <em>s&rsquo;inscrire</em> à des changements et être <em>notifié</em> rapidement. C&rsquo;est la stratégie de Push et c&rsquo;est la base des Webhooks.</p>



<h2>Webhooks</h2>



<p>Les Webhooks sont basés sur un système d&rsquo;évenement et passe par le protocole HTTP pour transmettre les données. La nature des événements dépendent de la logique business chaque application. Pour un CRM, ils est possible de s&rsquo;inscrire aux événements de type « création de nouveau contact », « modification de contact », « suppression de contact », etc.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Cette fois, c&rsquo;est moi qui annonce aux enfants quand nous sommes arrivés, seulement seule fois.</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>Le format des Webhooks n&rsquo;est pas normé et il n&rsquo;y a pas de spécification établie. Toutefois la plupart des acteurs utilisent le format JSON pour les données et applique des mécanismes de sécurité ou des stratégies de rappels (en cas d&rsquo;indisponibilité de notre application au moment de la communication).</p>



<p>Voici un site que j&rsquo;aurais aimé découvrir il y a 4 ans. Il s&rsquo;agit d&rsquo;un recueil de bonne pratique en matière de Webhooks (sécurité, documentations, exemples, tests, opérationnels) tant pour l&rsquo;émetteur que pour le client/consommateur:</p>



<p><a href="https://webhooks.fyi/">https://webhooks.fyi/</a></p>



<p></p>



<h2>Prochainement, les Webhooks dans Symfony?</h2>



<p>Et c&rsquo;est encore tout frais, mais à l&rsquo;occasion de la SymfonyCon 2022, une discussion est ouverte pour créer un composant afin de simplifier et normaliser la gestion des Webhooks (plus génériquement des « Remote Events ») dans Symfony. </p>



<ul><li><a href="https://speakerdeck.com/fabpot/symfonycon-2022-keynote-webhooks">Les slides de la Keynote</a> de Fabien Potencier:</li><li>Ainsi que le <a href="https://github.com/symfony/symfony/pull/48542">code en attente de feedbacks.</a></li></ul>



<p></p>



<p></p>



<p>Pour conclure, les webhooks permettent souvent d&rsquo;avoir des intégrations plus fluide et rapide en générant souvent un code plus simple (du point de vue du client) et en consommant moins de données sur le réseau. Pratique!</p>


L’usage des Webhooks dans les APIs


<p>La conférence AgileTour 2022 à Lausanne a encore une fois réuni de nombreux professionnels passionnés par l&rsquo;agilité. </p>



<p>Nous avons eu la chance d’y participer et avons profité de l’occasion pour apprendre de nouvelles techniques et échanger avec les autres participants. Nous sommes impatients de mettre en pratique ce que nous avons appris lors de cette conférence au sein de notre agence.</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1400" height="1122" src="https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour.jpg" alt="" class="wp-image-10928" srcset="https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour.jpg 1400w, https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour-300x240.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour-768x615.jpg 768w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>



<p>Parmi tout le programme, nous avons notamment apprécié les talks suivants :&nbsp;</p>



<h2>Marc &#8211; <em>Conscientiser son choix de posture</em> par Thomas Gibot</h2>



<p>Le talk de Thomas Gibot sur la conscientisation de son choix de posture a été particulièrement instructif et interpellant. </p>



<p>Ayant participé à de nombreuses conférences, j&rsquo;ai tendance à choisir les présentations qui me parlent le moins afin de sortir de ma zone de confort et de découvrir de nouvelles perspectives. C&rsquo;est donc avec une certaine appréhension que j&rsquo;ai assisté au talk de Thomas, me disant qu&rsquo;il s&rsquo;agirait sans doute d&rsquo;une présentation sur la communication et l&rsquo;amélioration de son « attirail de manipulation ».</p>



<p>Je dois avouer que j&rsquo;ai été agréablement surprise dès l&rsquo;introduction, lorsque Thomas a proposé trois versions différentes d&rsquo;entrée en matière pour prouver son propos sur l&rsquo;importance du choix de posture. </p>



<p>Avec un grand talent d&rsquo;orateur, il a réussi à nous maintenir en haleine après la pause repas, il a expliqué que notre éventail de postures est très limité et que cet éventail est construit par nos <strong>expériences</strong>, nos <strong>traumatismes</strong> et nos <strong>victoires</strong>. </p>



<p>Il a souligné que toutes les postures que nous prenons ont forcément <strong>un impact sur notre message</strong> et sur la façon dont il sera perçu et reçu. Toutes les postures sont soit Violantes, Blessantes, Frustrantes, Enervantes, Utiles, Aidantes, Soutenantes, Pertinentes.</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="2000" height="1346" src="https://content.antistatique.net/app/uploads/2023/01/agiletour_featured.jpg" alt="" class="wp-image-10924" srcset="https://content.antistatique.net/app/uploads/2023/01/agiletour_featured.jpg 2000w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-300x202.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-768x517.jpg 768w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-1536x1034.jpg 1536w" sizes="(max-width: 2000px) 100vw, 2000px" /></figure>



<p>Thomas a proposé une méthode pour prendre conscience et contenir son message par la manière dont on s&rsquo;exprime. Il a insisté sur l&rsquo;importance d&rsquo;être honnête et transparent face à ce choix conscient de posture, en explicitant à notre interlocuteur que l&rsquo;on a choisi cette posture et pourquoi dès le départ. Il a également souligné l&rsquo;importance de prendre conscience de la posture prise après une interaction, de se demander si elle a fonctionné, comment on aurait pu faire mieux et quelle posture on prendra lors de sa prochaine rencontre.</p>



<p>En résumé, le talk de Thomas Gibot sur la conscientisation de son choix de posture a été très intéressant et a suscité beaucoup de réflexion chez moi. Je recommande vivement cette présentation à tous ceux qui sont intéressés par l&rsquo;impact de leur posture sur leur communication et sur la façon dont leurs messages sont perçus par les autres.</p>



<h2>Susana &#8211; <em>Mon équipe ne voit pas le problème</em> par Grégory Alexandre</h2>



<p>En tant que cheffe de projet, il est fréquent de se retrouver face à un problème qui nous semble important mais qui n&rsquo;est pas perçu de la même manière par nos collègues. Cela peut créer un dysfonctionnement au sein même de l&rsquo;équipe et rendre difficile la résolution du problème.</p>



<p>Heureusement, lors de cette conférence, nous avons appris à résoudre ce genre de problème de communication grâce à trois clés.</p>



<p>La<strong> première clé</strong> consiste à décortiquer le problème en reposant la situation problématique de manière factuelle. </p>



<p>Pour ce faire, il est important de se poser les questions suivantes : Quelle est la faille ? Quel est le niveau de risque ? Quelle est la fréquence du problème ? Qui est touché par ce problème ? Si la personne touchée par le problème peut témoigner de ce dernier, cela peut aider à donner un exemple concret aux autres.</p>



<p>La <strong>deuxième clé</strong> consiste à travailler avec l&rsquo;équipe pour trouver une solution en écoutant l&rsquo;avis et le ressenti des autres. En tant que chef de projet, il est important de ne pas essayer de convaincre l&rsquo;équipe de notre point de vue, mais plutôt d&rsquo;exposer le problème de manière factuelle et de questionner sincèrement l&rsquo;équipe sur leur opinion sur le sujet. Cela permet de changer la dynamique de la discussion au sein de l&rsquo;équipe et offre la possibilité de mieux comprendre l&rsquo;avis de chacune des personnes impliquées.</p>



<p>Si les deux premières clés n&rsquo;ont pas suffi à résoudre le problème de compréhension, il est possible de recourir à une <strong>troisième clé</strong> : travailler le problème avec soi-même. Il peut être utile de<strong> prendre du recul sur la situation </strong>et de se demander quel est l&rsquo;impact réel de ce problème sur son environnement de travail et sa charge mentale. </p>



<p><strong>Il est important de ne pas être plus client que le client</strong> et de se demander comment on se sentait avant d&rsquo;avoir ce problème. Il est également important de se demander ce qui se passerait si on ne traitait pas la situation problématique. Est-ce qu’une catastrophe se produirait ou est-ce que rien ne se passerait finalement ?</p>



<p>Pour conclure, cette conférence nous a donné des astuces pour mieux gérer les problèmes de communication au sein de l&rsquo;équipe. En décortiquant le problème de manière factuelle, en travaillant avec toutes les personnes impliquées pour trouver une solution en écoutant le ressenti de chacun, et, si nécessaire, en travaillant sur soi-même en prenant du recul sur la situation, il est possible de mieux comprendre l&rsquo;avis de chacune des personnes dans le projet, d&rsquo;éviter les conflits inutiles et de gagner en sérénité.</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1300" height="1547" src="https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur.jpg" alt="" class="wp-image-10932" srcset="https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur.jpg 1300w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-252x300.jpg 252w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-768x914.jpg 768w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-1291x1536.jpg 1291w" sizes="(max-width: 1300px) 100vw, 1300px" /><figcaption>À Agiletour, on croise aussi des têtes connues ! Coucou Arthur !</figcaption></figure>



<h2>Sasha &#8211; <em>Feedback, une pratique à double tranchant</em> par Jérémie Roudaut</h2>



<p>Lors de cette conférence, Jérémie Roudaut a mis au centre l’importance d’apprendre à recevoir et donner du feedback. Il s’agit bien ici “d’apprendre”, car cet exercice n’est pas si simple et cache souvent une grande part d&rsquo;émotionnel derrière.&nbsp;</p>



<p>Exercice trop souvent réduit à souligner les erreurs des autres, il ne devrait pas se limiter aux entretiens annuel d’évaluation, mais être présent dans la culture d’entreprise pour faire évoluer et valoriser chaque membre de l’équipe !</p>



<p>Chez Antistatique nous sommes déjà convaincus par le bien du feedback, mais grâce à cette conférence nous allons pouvoir aller un cran plus loin et innover !</p>



<p>Mais déjà reposons les bases de ce talk&#8230;</p>



<p>La plupart du temps, nous avons tendance à être réfractaires de cette culture du feedback. Notamment car nous n&rsquo;y voyons pas toujours l&rsquo;intérêt, ou alors on manque de connaissance sur le sujet ou encore de pratique.</p>



<p>Du coup, ça nous amène à se demander : <strong>Qu’est-ce qu&rsquo;apporte la culture du feedback ?</strong></p>



<ul><li>Donner une pleine conscience des forces de chacun</li><li>Apporte une meilleure connaissance de soi</li><li>Permet d&rsquo;apprendre de ses points faibles pour pouvoir les améliorer</li></ul>



<p><strong>Les 4 ingrédients clés pour un bon feedback&nbsp;</strong></p>



<ol><li><strong>Bienveillance</strong> &#8211; Toujours dans l’intention d’aider l’autre (constructif)</li><li>Basé sur une <strong>compétence</strong> (communication)&nbsp;</li><li>Cadeau ! Doit être offert et proposé pour donner des opportunités d’améliorations à la personne. Elle est ensuite <strong>libre d’agir</strong> ou non !</li><li><strong>Environnement sain.</strong> Doit être donné dans un cadre sain, et dans une certaine sécurité psychologique.</li></ol>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">« La sécurité psychologique est la croyance que l&rsquo;on ne sera pas puni ou humilié pour avoir exprimé des idées, des questions, des préoccupations ou des erreurs. »</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Amy C. Edmondson</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Leadership expert</p>
                      </div>
            </div>
</div>



<p><strong>Sur quoi donne-t-on du feedback ?</strong></p>



<ol><li>Le savoir &#8211; Connaissance &amp; Expériences</li><li>Le savoir-faire &#8211; Mise en place de la théorie dans son quotidien</li><li>Le savoir-être &#8211; Attitude et les valeurs d’une personne</li></ol>



<p>⚠️ <strong>Le piège du feedback </strong>&#8211; S’ils sont mal donnés, les feedbacks sont en fait des jugements, ce qui empêche d’être constructif et ajoute beaucoup d&rsquo;émotionnel.</p>



<p><strong>Quelques clés pour savoir comment donner un bon feedback ?</strong></p>



<ol><li><em>Proposer un feedback en clarifiant votre intention (bienveillance)</em></li><li><em>Demander si la personne est d’accord de recevoir un feedback (ne pas lui imposer)</em></li></ol>



<p><strong>2 méthodes existent pour vous aider</strong></p>



<ol><li><strong>Modèle OSCAR</strong><ol><li>Observation et Situation (Faits)</li><li>Conséquence</li><li>Alternative proposée</li><li>Résultat souhaité</li></ol></li><li><strong>Communication Non-violente </strong><em>(Marshall Bertram Rosenberg)</em><ol><li>Observation (Faits)</li><li>Sentiment ressenti face à cette observation</li><li>Exprimer son besoin</li><li>Faire une proposition sur comment on pourrait satisfaire ce besoin</li></ol></li></ol>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">« Donner du feedback ce n’est pas inné cela s’apprend et se pratique. Soyez indulgent ! »</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Jérémie Roudaut</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Agile Coach / Scrum Master &#038; Speaker</p>
                      </div>
            </div>
</div>



<p></p>



<h2><strong>Plusieurs exemples pour accueillir les feedbacks</strong></h2>



<p>Grâce à ce talk, on repart même avec des exercices concrets à mettre en pratique, qu&rsquo;on se réjouit de tester au sein d’Antistatique !</p>



<ol><li><strong>Balle positive </strong>&gt;&gt; Chacun s&rsquo;envoi une balle. Le but est de garder la balle le moins longtemps possible tout en faisant un feedback positif à la personne de son choix, puis lui lancer la balle.</li><li><strong>Kudo cards </strong>&gt;&gt; Matérialiser un feedback positif sur une carte (ça peut être un dessin).</li><li><strong>Retrospectives</strong> &gt;&gt; Créez des opportunités dans vos retros pour se donner du feedback.</li><li><strong>Ange du feedback ou Secret Feedback</strong> &gt;&gt; Chaque personne aura une autre personne désignée comme étant son ange gardien inconnu et qui pourra l’observer afin de lui donner un feedback.</li><li><strong>Speed feedback </strong>&gt;&gt; Former des pairs. Ils ont 5 minutes pour faire un feedback positif à l’autre et une piste d’amélioration.</li><li><strong>Tournée des feedbacks </strong>&gt;&gt; Représenter les membres de l’équipe sur les murs. Laisser 15 minutes à l’équipe pour coller des feedbacks où les personnes le souhaitent. Puis parcourez ensemble les feedbacks pour chaque personne.</li><li><strong>Jeu de la perfection </strong>&gt;&gt; Quelqu’un se désigne pour présenter un sujet. Le reste de l’équipe évalue la présentation et font leur feedback avec une proposition concrète pour s’améliorer.</li><li><strong>Boîte à feedback</strong> &gt;&gt; Une personne sera volontaire pour recevoir des feedbacks. Plusieurs questions seront mises dans une boîte du type : qu&rsquo;appréciez vous le plus chez la personne ? quelles sont ses forces ? …<ol><li>Déposez les questions dans la boîte</li><li>La personne dépouille la boîte et découvre ses feedbacks.</li></ol></li></ol>



<figure class="wp-block-image size-full"><img loading="lazy" width="1000" height="711" src="https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour.jpg" alt="" class="wp-image-10926" srcset="https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour.jpg 1000w, https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour-300x213.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour-768x546.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<h2>Vivement l’année prochaine</h2>



<p>En conclusion, nous tenons à remercier toute l&rsquo;équipe des organisateurs et organisatrices de cette conférence pour leur travail et leur engagement. </p>



<p>Cette conférence a été une occasion très enrichissante de découvrir de nouvelles techniques et de discuter avec des professionnels passionnés par l&rsquo;agilité. Elle nous a également permis de revoir des têtes connues et de nous réunir avec d&rsquo;autres passionnés. </p>



<p>Nous nous réjouissons déjà de l&rsquo;édition 2024 de cette conférence et espérons y participer à nouveau.&nbsp;</p>


AgileTour 2022 – Lausanne


<p>Gilles est l&rsquo;un des trois cofondateurs de l&rsquo;agence, associés et directeur technique. </p>



<p>C&rsquo;est lui que l&rsquo;on appelle quand l&rsquo;on rencontre un problème technique et que l&rsquo;on ne sait pas (encore) comment l&rsquo;aborder. Il n&rsquo;a pas toujours la réponse mais ça tombe bien, car il aime ça, résoudre des problèmes.</p>



<p>Pour vous faire découvrir un peu plus Gilles, Tiphaine lui a posé quelques questions.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1950x2600.jpg" alt="" class="wp-image-10739" srcset="https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /><figcaption>Gilles en vacances</figcaption></figure>



<p> </p>



<h3><strong>À ce jour, de quoi es-tu le plus fier ?</strong></h3>



<p>Mes deux enfants! Je vous partagerais bien 500 photos mais je crois que vous n’êtes pas venu sur cette page pour ça 🙂. </p>



<p>Au niveau professionnel, cela fait 14 ans que Antistatique existe, c’est un joli succès.</p>



<p></p>



<h3><strong>Avec quelle personnalité voudrais-tu prendre un café et pourquoi ?</strong></h3>



<p>Bonne question, je dirais “Woz”, Steve Wozniak. Le personnage m&rsquo;a toujours intrigué depuis que je suis ado. Je crois que je suis resté un fan de son approche de l&rsquo;ingénieurie, des « débuts » de l&rsquo;informatique (cofondateur d&rsquo;Apple). Je serais curieux de connaitre son retour d&rsquo;expérience en tant qu&rsquo;enseignant.</p>



<p></p>



<h3><strong>Qu’est-ce qui te plaît et te motive le plus dans ton job ?&nbsp;</strong></h3>



<p>J’aime étudier et (tenter de) comprendre l&rsquo;essence des métiers de nos clients. C&rsquo;est très enrichissant. Et bien sûr, résoudre des problèmes. <br>Accompagner les équipes à réaliser des projets est très motivant!</p>



<p></p>



<h3><strong>Quel est le plat que tu préfères cuisiner (ou manger…) ?</strong></h3>



<p>J’aime cuisiner des plats simples et bons: légumes au four, quiches, poulet aux citrons. Je suis expert des pommes de terre rissolées (et ouais!).<br><br>Par contre, ne me demandez pas de faire de la pâtisserie (je n&rsquo;ai jamais été bon en chimie&#8230;).</p>



<p></p>



<h3><strong>Quel a été ton plus grand défi sportif jusqu’à ce jour ?</strong></h3>



<p>Aïe, ça date si on veux parler de “mes défis sportifs”. J’ai fait plusieurs semi-marathons et il y a quelques années, j’étais content d’avoir pu bien appréhender les dénivelés du 20km de Lausanne.</p>



<p></p>



<h3><strong>Nomme trois objets que tu apporterais sur une île déserte.</strong></h3>



<p>Un téléphone satellite (avec batterie solaire intégrée), un briquet et un jerrican d’eau de 50l. Pas spécialement envie d’y rester longtemps sur cette île (bien que j’apprécie la nature).</p>



<p></p>



<h3><strong>Quel super pouvoir aimerais-tu avoir ?</strong></h3>



<p>Celui de moins procrastiner ?</p>



<p></p>



<h3><br>Tu préfères : Rester coincé dans un ascenseur ou sur un télésiège en panne ?</h3>



<p>Ah ah, télésiège! J&rsquo;ai rencontré mon épouse sur un télésiège.</p>



<p></p>



<h3><strong>Quel est ton endroit préféré en Suisse où tout le monde devrait aller au moins une fois dans sa vie ?</strong></h3>



<p>J&rsquo;aime beaucoup le Lavaux et le Lac Léman. Il y a un endroit que l&rsquo;on nomme entre nous « la plage des Doge ». On y est bien!</p>



<p></p>



<h3><strong>Raclette ou fondue ?</strong></h3>



<p>C&rsquo;est pas un choix ça. La règle est assez simple: Avec mon père et si il y a un repas avec plus de 6 personnes: raclette. La fondue si mon beau-frère n&rsquo;est pas loin ou pour son avantage logistique.</p>



<p></p>



<p></p>


10 questions pour découvrir Gilles


<p class="is-style-lead">À la suite de <a href="https://antistatique.net/blog/laravel-livewire" data-type="post" data-id="9081">mon article sur Livewire</a>, j&rsquo;ai décidé d&rsquo;attaquer un plan plus important du Framework, à savoir l&rsquo;ORM Eloquent.</p>



<h2>Préambule</h2>



<p class="is-style-default">Histoire d&rsquo;être tous à la même page, je trouve utile de résumer afin de commencer sur de bonnes bases.</p>



<p class="has-drop-cap is-style-default">Laravel, comme la plupart des framework utilise un <strong>ORM</strong> (object-relational mapper). </p>



<p class="is-style-default">Facilement comparable à <em>Doctrine</em> utilisé par <em>Symfony</em>, ces deux se distinguent de-part leurs fondement. <br>L&rsquo;un est un <a rel="noreferrer noopener" href="https://martinfowler.com/eaaCatalog/activeRecord.html" data-type="URL" data-id="https://martinfowler.com/eaaCatalog/activeRecord.html" target="_blank">Active Record</a> tandis que l&rsquo;autre est un <a href="https://martinfowler.com/eaaCatalog/dataMapper.html" data-type="URL" data-id="https://martinfowler.com/eaaCatalog/dataMapper.html">Data Mapper</a>.</p>



<p class="is-style-default">Comparons les deux. Un modèle <em>Eloquent</em> est une représentation de la base de donnée et comprends également les opérations (<code>save</code>, <code>update</code>, <code>delete</code>, &#8230;) dans cette dernière.</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example.png" alt="" class="wp-image-10204" width="397" height="192" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example.png 794w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-300x145.png 300w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-768x371.png 768w" sizes="(max-width: 397px) 100vw, 397px" /><figcaption>Un exemple d&rsquo;insertion avec Eloquent.</figcaption></figure>



<p class="is-style-default">Tandis que sur <em>Doctrine</em>, les choses sont un peu différentes. <br>Ce dernier s&rsquo;appuie sur un <strong>EM</strong> (Entity Manager) pour executer ses actions et ses models sont une représentation de leurs tables respectives en base de données.</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine.png" alt="" class="wp-image-10208" width="400" height="681" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine.png 800w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine-176x300.png 176w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine-768x1308.png 768w" sizes="(max-width: 400px) 100vw, 400px" /><figcaption>Un exemple avec Doctrine.</figcaption></figure>



<h2>Eloquent dites-vous ?</h2>



<p class="is-style-default">Pour ne pas s&rsquo;éparpiller sur ce sujet aussi vaste que Eloquent, le plus simple serait de s&rsquo;attacher premièrement aux bases et par la suite (peut-être un second article ?) de détailler divers uses-cases et patterns.</p>



<h3>Les « nice to have »</h3>



<h4>Carbon!</h4>



<p class="is-style-default">Laravel arrive avec <code>Carbon</code> qui est une API simple d&rsquo;utilisation qui implémente et étends <code>DateTime</code> de PHP !<br><br>Ce qui permet à nos éléments stockés en <code>dateTimeTz</code> par exemple, d&rsquo;être directement transformés en <code>CarbonInterface</code>.<br><br>Vous pouvez choisir de votre côté comment votre champ doit être transformé en re-déclarant votre <em>propriété</em> du modèle :<br><code>$casts = ['votre_champ' =&gt; 'bool'];</code> <br><br><a rel="noreferrer noopener" href="https://carbon.nesbot.com/docs/" data-type="URL" data-id="https://carbon.nesbot.com/docs/" target="_blank">Si vous souhaitez en savoir plus sur Carbon, voici le lien de sa documentation.</a></p>



<h4>Les protections</h4>



<p class="is-style-default">De part son architecture, il arrive qu&rsquo;on passe directement la <code>$request</code> pour en créer un <em>record</em> en DB. <em>Eloquent</em> arrive avec une solution appelée la « <em>Mass Assignement Protection</em> » et nous permets de spécifier les champs que l&rsquo;on veut pouvoir remplir sans avoir à tout ré-écrire (parfois un gain de temps considérable).<br><br>Nous pouvons donc déclarer les champs directement dans la <em>propriété</em> du modèle <code>$fillable = ['field', ...];</code>.<br><br>Par défaut, tous les champs sont <code>$guarded = ['*'];</code> donc il est important de déclarer les champs à cet effet.</p>



<p class="is-style-default">Le but étant d&rsquo;éviter que certains champs soient accessibles trop facilement comme <code>'password'</code> ou <code>'roles'</code> dans l&rsquo;idée. </p>



<h4>Les scopes</h4>



<p class="is-style-default">Si dans votre usage vous remarquez que vous utilisez souvent les mêmes « filtres », il serait peut-être temps de les localiser dans votre <em>modèle</em>.<br>Laravel appelle ça un <strong>« Local Scope »</strong>. Pour en créer un, c&rsquo;est tout simple, il suffit d&rsquo;écrire la méthode avec comme préfix <code>scope</code> et il sera automatiquement utilisable.<br><br>Pour l&rsquo;utiliser:<br><code>User::popular()-&gt;orderBy('xyz')-&gt;get();</code> <br><br>L&rsquo;appel du scope ne doit pas inclure le préfix.<br><br>Un scope peut être dynamique et comporter un ou plusieurs paramètres.</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope.png" alt="" class="wp-image-10214" width="662" height="436" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope.png 1324w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope-300x198.png 300w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope-768x506.png 768w" sizes="(max-width: 662px) 100vw, 662px" /><figcaption>Un exemple de scope local.</figcaption></figure>



<h4>La magie de Laravel ✨</h4>



<p class="is-style-default">Laravel garde en tête sa simplicité d&rsquo;utilisation et propose des solutions out-of-the-box sans pour autant nous avertir.<br><br>Un exemple plus concret est l&rsquo;utilisation des méthodes dites magiques comme l&rsquo;exemple plus haut avec un scope déclaré par exemple, mais également des méthodes plus directes à notre model.<br><br>Je m&rsquo;explique, si nous avons un champ <code>vote</code> sur notre table, on peux très bien utiliser une méthode (invisible par notre IDE) <code>Model::whereVote('xzy');</code></p>



<p class="is-style-default">Laravel va passer par la méthode magique de PHP <code>__call</code> ou <code>__callStatic</code> et fournir des outils à notre disposition.<br><br>D&rsquo;ailleurs, pour les utilisateurs de <strong>PHPStorm</strong>, je vous recommande vivement <a rel="noreferrer noopener" href="https://plugins.jetbrains.com/plugin/13441-laravel-idea" data-type="URL" data-id="https://plugins.jetbrains.com/plugin/13441-laravel-idea" target="_blank">ce plugin</a>.</p>



<h4>Tinker !</h4>



<p class="is-style-default">Laravel Tinker est un petit outil très facile à installer <a rel="noreferrer noopener" href="https://laravel.com/docs/9.x/artisan#tinker" data-type="URL" data-id="https://laravel.com/docs/9.x/artisan#tinker" target="_blank">comme-ceci</a>.<br>Il permet d&rsquo;intéragir avec la base de donnée en simple ligne de commandes.</p>



<p class="is-style-default"><a href="https://tinkerwell.app/blog/the-ultimate-guide-to-php-artisan-tinker" data-type="URL" data-id="https://tinkerwell.app/blog/the-ultimate-guide-to-php-artisan-tinker" target="_blank" rel="noreferrer noopener">En voici un guide si celà vous intéresse.</a><br></p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/image.png" alt="" class="wp-image-10390" width="614" height="397" srcset="https://content.antistatique.net/app/uploads/2022/10/image.png 819w, https://content.antistatique.net/app/uploads/2022/10/image-300x194.png 300w, https://content.antistatique.net/app/uploads/2022/10/image-768x496.png 768w" sizes="(max-width: 614px) 100vw, 614px" /><figcaption>Un exemple de commande pour intéragir avec l&rsquo;application.</figcaption></figure>



<h4>Les relations</h4>



<p class="is-style-default">Un sujet vaste et assez complexe pour en faire simplement un paragraphe.</p>



<p class="is-style-default"><em>Eloquent</em> propose plusieurs niveau de relations entre <code>OneToOne</code> jusqu&rsquo;à <code>ManyToMany</code> en passant par les jointures à travers d&rsquo;autres tables.<br>La force de ces méhtodes résident dans le fait que les relations vont être « devinées » en fonction du nom de la clé primaire de la table (en général <code>id</code>) et du nom de la <code>class</code> qui la définit.</p>



<p class="is-style-default">Dans l&rsquo;exemple plus haut j&rsquo;ai un modèle <code>Flight</code> qui référence un autre modèle <code>FlightTime</code>.<br><br>La table <code>flights_times</code> a une colonne appellée <code>flight_id</code>, comme défini dans le fichier de migration.</p>



<p class="is-style-default">Il me sufit donc de créer une méthode:</p>



<pre class="wp-block-code"><code>    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasOne
     */
    public function times(): HasOne
    {
        return $this-&gt;hasOne(FlightTime::class);
    }</code></pre>



<p class="is-style-default">pour que la relation se fasse automatiquement !</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/image-1.png" alt="" class="wp-image-10400" width="429" height="400" srcset="https://content.antistatique.net/app/uploads/2022/10/image-1.png 572w, https://content.antistatique.net/app/uploads/2022/10/image-1-300x280.png 300w" sizes="(max-width: 429px) 100vw, 429px" /><figcaption>L&rsquo;appel à la méthode de relation (avec la parenthèse) permet d&rsquo;obtenir le <code>QueryBuilder</code> tandis que l&rsquo;appel sans les parenthèses permet d&rsquo;avoir le modèle directement résolu !</figcaption></figure>



<h2>Conclusion</h2>



<p class="is-style-default">Comme <em>Doctrine</em>, <em>Eloquent</em> reste à ce jour une référence.<br><br>Directement intégré à l&rsquo;écosysème de <em>Laravel</em>, ce dernier se distingue par sa simplicité, de ses méthodes magiques et de la rapidité à écrire une requête en base de données via très peu de lignes de code.</p>



<p class="is-style-default">Le choix sera fait par le choix du framework, prennez juste en compte que <em>Doctrine</em> et <em>Eloquent</em> sont très différents ainsi que la courbe d&rsquo;apprentissage n&rsquo;en sera pas la même ! <br>(<em>Doctrine</em> tends à être plus complexe)</p>



<p class="is-style-default">Dans mon cas, j&rsquo;apprécie beaucoup <em>Doctrine</em> pour les propriétés visibles sur l&rsquo;<em>entité</em>, les <em>getters</em> et <em>setters</em>, on sait ce qui s&rsquo;y trouve.<br><br><em>Eloquent</em> fonctionne differement, les propriétés de notre modèle ne reflète pas forcément les champs, donc beaucoup d&rsquo;attentes sur les méthodes magiques, ce qui peut rendre la chose plus difficile si on connaît mal le projet. Néamoins le gain de temps reste indégniable.</p>



<p class="is-style-default"></p>



<p class="is-style-default">Merci de m&rsquo;avoir lu !</p>


Laravel – Eloquent


<p>Tiphaine, c&rsquo;est un grand sourire 365 jours par an, même à&nbsp; -10°C et avec 20 cm de neige sur sa voiture. C’est vous dire à quelle point c’est une vraie source d’énergie pour toute l’agence !</p>



<p>Avec son expertise métier — UX Design, Tiphaine nous aide à remporter des mandats et aussi à les exécuter par la suite. Elle est également toujours partante pour la mise en place d’activités de toute nature (vide-dressing, remote à l’étranger, apéros…)&nbsp;</p>



<p>Nous lui avons posé 10 questions pour encore mieux la connaître. Avec un peu de chance, elle vous accompagnera dans la refonte de votre e-commerce ou la production de votre nouvelle application web mobile.</p>



<p>Bonne lecture&#8230;</p>



<p><strong>Si tu devais choisir une seule destination pour tes prochaines vacances, ce serait plutôt : Plage, montagne ou forêt tropicale? Et pourquoi?</strong><br><br>En février dernier je suis partie plusieurs semaines découvrir la jungle lors d’un road-trip au Costa-Rica et j’ai adoré la forêt tropicale (un peu moins les insectes et serpents qui y vivent). Mais là maintenant…j’ai très envie de retourner à l’océan pour progresser en surf ! 🤙🏼 </p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="2338" src="https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2600x2338.jpg" alt="" class="wp-image-9587" srcset="https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2600x2338.jpg 2600w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-300x270.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-768x691.jpg 768w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-1536x1381.jpg 1536w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2048x1842.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption> Session de surf à Santa-Teresa (côte Ouest du Costa-Rica)</figcaption></figure>



<p><strong>Parles-nous de tes loisirs et de ce que tu aimes faire lors de ton temps libre?</strong><br><br>On me répète tout le temps : “T’es toujours en vacances toi !!” alors que non… pas plus que les autres ! Mais c’est vrai que je suis souvent en vadrouille. J’adore être dehors, découvrir, changer d’air. Je ne suis pas du tout casanière, alors je m’évade dès que j’ai un peu de temps libre. On peut me trouver en rando, en road-trip tente de toit, en train de bronzer au bord des lacs du Jura, en ski ou raquettes, à l’entraînement de natation, au yoga mais aussi devant une bonne série Netflix, au musée ou en train de me perdre dans les boutiques&#8230;</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="2036" height="1277" src="https://content.antistatique.net/app/uploads/2022/08/20220716_214802074.jpg" alt="" class="wp-image-9667" srcset="https://content.antistatique.net/app/uploads/2022/08/20220716_214802074.jpg 2036w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-300x188.jpg 300w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-768x482.jpg 768w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-1536x963.jpg 1536w" sizes="(max-width: 2036px) 100vw, 2036px" /></figure>



<p><br><strong>En quelques mots, décris-nous ton travail au sein d’Antistatique?</strong><br><br>Je suis designer UX, je m’occupe à la fois de la recherche utilisateur (interviews, user test, immersion, persona…) que de l’architecture de l’information des sites et apps (arborescence, zonings, wireframes). Avec pour objectif principal que les usagers finaux puissent utiliser facilement ce que l’on a conçu et vivent une bonne expérience !</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1230" height="900" src="https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46.png" alt="" class="wp-image-9654" srcset="https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46.png 1230w, https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46-300x220.png 300w, https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46-768x562.png 768w" sizes="(max-width: 1230px) 100vw, 1230px" /><figcaption>Workshop dans les bureaux de Genève</figcaption></figure>



<p><br><strong>À quel moment de ton parcours académique ou professionnel tu as décidé de choisir une carrière dans le UX Design et non celle de UI Design?</strong><br><br>J’ai fait des études de design assez généraliste au départ. Puis j’ai choisi d’aller vers l’UX en faisant un master en innovation sociale. Finalement c’était choisir de faire du design pour améliorer le quotidien des gens, et ça, c’est l’essence même du design d’après moi. J’ai envie d’aider les gens en utilisant le design.<br><br><strong>Si tu devais choisir une des pratiques de l’UX, laquelle serait ta préférée ?</strong><br><br>Sans hésiter : la recherche utilisateur. C’est clairement là où je suis la plus à l’aise : je prends le temps d’écouter les gens, de comprendre leurs besoins. Donc les interviews, l’immersion et les tests utilisateurs, c’est clairement le kiff pour moi ! 🌈<br><br><strong>Si tu pouvais choisir un projet sur lequel tu rêves de pouvoir travailler et faire évoluer lequel ce serait?</strong><br><br>Ce n’est pas forcément un rêve mais j’aimerais bien faire de l’UX pour les enfants. J&rsquo;ai eu la chance une fois de faire tester une application pour le jeune public dans un musée de Genève et j’ai adoré l’expérience. Les petits ce sont les personnes les plus honnêtes du monde. Ça facilite les tests utilisateurs car on sait vraiment ce qu’ils pensent !<br><br><strong>A part l’industrie du numérique/digital une autre industrie t&rsquo;attire afin de développer ton savoir-faire?</strong><br><br>J’ai d’abord voulu faire une école de mode, puis j&rsquo;ai passé le concours d&rsquo;architecte avant de partir dans le design, donc ces milieux m’intéressent beaucoup. Mais avec <a href="https://antistatique.net/equipe/emma" data-type="URL" data-id="https://antistatique.net/equipe/emma">Emma</a>, on s’amuse à se dire que l’on ouvrira un jour notre boutique de fleurs et de mobilier d&rsquo;intérieur car on adore ça toutes les deux. Designer/styliste floral pourquoi pas !<br></p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="2080" src="https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2600x2080.jpg" alt="" class="wp-image-9647" srcset="https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2600x2080.jpg 2600w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-300x240.jpg 300w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-768x614.jpg 768w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-1536x1229.jpg 1536w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2048x1638.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption>Teaser de notre future devanture peut-être un jour (ahah)..</figcaption></figure>



<p><br><strong>Cites quelques mots clés qui te définissent bien ? Et à l’opposé ce qui ne te ressemble pas ?</strong><br><br>Curiosité, sourire, aventure (et émotivité ++). Et ce qui ne me ressemble pas du tout je dirais… Bling-bling (ahaha), égoïsme, pizza ananas et course à pied (“c’est l’enfeeeer” dixit <a href="https://antistatique.net/equipe/sacha">Sasha</a>).<br><br><strong>Si tu devais choisir un seul groupe ou artiste, lequel ça serait?</strong><br><br>C&rsquo;est trop dur cette question. En plus, j’écoute des styles très différents (Ben Mazué, Jay-Z, ABBA, Fakear et Queen peuvent se cotoyer dans mes folles playlists…) Alors je réponds Coldplay car je viens de les voir en concert à Berlin et c’était magique ! 😭<br><br><strong>Pour finir, t’es plus chien ou chat?</strong><br>Chien bien-sûr ! Je rêve de pouvoir en adopter un, mais j’attend le bon moment… Heureusement j’ai la chance de pouvoir couvrir de bisous ma belle Callie ❤️<br></p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1196" height="964" src="https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213.jpg" alt="" class="wp-image-9581" srcset="https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213.jpg 1196w, https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213-300x242.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213-768x619.jpg 768w" sizes="(max-width: 1196px) 100vw, 1196px" /><figcaption>Callie (et moi), very happy dans le Haut-Jura</figcaption></figure>


10 questions pour découvrir Tiphaine


<p class="is-style-lead">Le GIS (Geographic Information System ou SIG Systèmes d&rsquo;informations Géographiques en français) et leurs applications sur le web est un sujet fascinant. Le futur des cartes sur le web prend un nouveau contour. Cet article pour vous éclairer sur le sujet.</p>



<h2>Et si on changeait de perspective ?</h2>



<figure class="wp-block-image size-full is-style-full-width"><img loading="lazy" width="2500" height="1651" src="https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown.jpg" alt="" class="wp-image-9626" srcset="https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown.jpg 2500w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-300x198.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-768x507.jpg 768w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-1536x1014.jpg 1536w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-2048x1352.jpg 2048w" sizes="(max-width: 2500px) 100vw, 2500px" /><figcaption>Carte touristique de la Suisse dessinée par Eduard Imhof d&rsquo;après un dessin de Otto Muller. Publiée par Office National du Tourisme à Bern en 1939.</figcaption></figure>



<h2>Les cartes sont partout sur le web</h2>



<p class="is-style-default">D&rsquo;après les statistiques des Archives , 16% des pages web utilisent les cartes et 22% d&rsquo;entre-elles permettent une certaine forme d&rsquo;interactivité. Cette analyse vient de l&rsquo;entreprise bocoup que j&rsquo;ai eu la chance <a href="https://antistatique.net/blog/coworking-space-et-travail-distance-du-massachusset-au-michigan">de visiter à Boston en 2014</a>. </p>



<p class="is-style-default">Très active dans la création des standards du web, autant au sein des navigateurs que du W3C, bocoup pose aujourd&rsquo;hui la question du <a href="https://bocoup.com/blog/no-neutral-map">futur des cartes interactives</a> et pourquoi cette standardisation ne s&rsquo;est pas réalisée plus rapidement.</p>



<h2>Encore aujourd&rsquo;hui, les cartes sont bricolées</h2>



<p class="is-style-default">L&rsquo;ingéniosité des développeurs·euses web n&rsquo;a pas de limite. Quand une fonctionnalité n&rsquo;est pas proposée nativement en HTML par le navigateur, le Javascript permet d&rsquo;y remédier. Ce « bricolage » est prévu <em>by design</em> et fait partie de l&rsquo;évolution des standards. Le temps que ceux-ci soient discutés, mesurés puis implémentés dans la majorité des navigateurs. Cette période de transition est nécessaire à l&rsquo;évolution du web. Pensez, par exemple, au champ de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date">saisie d&rsquo;une date</a>, à la <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">vidéo</a>, aux <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">accordéons</a> ou encore <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap">aux sliders</a> pour lesquels le Javascript n&rsquo;est aujourd&rsquo;hui plus du tout nécessaire.  </p>



<p class="is-style-default">Les cartes interactives sur le web n&rsquo;échappent pas à cette règle. Elles font l&rsquo;objet de nombreuses implémentations librairies et outils permettant notamment de réaliser toutes sortes d&rsquo;interactions :</p>



<ul class="is-style-objectives"><li>Déplacer la carte dans les 4 directions</li><li>Zoomer dans la carte</li><li>Changer les couches géographiques (le fond de la carte : vue photo satellite, reliefs, routes, etc&#8230;)</li><li>Afficher des informations sur la carte (données statistiques, itinéraires, liste de points, formes)</li><li>Dessiner sur la carte (ajouter des points, tirer des lignes, créer des formes) </li><li>Naviguer en 3D </li></ul>



<p class="is-style-default">Effectivement, la complexité d&rsquo;une carte interactive explique autant pourquoi elle n&rsquo;a pas été implémentée dans le browser mais étonne tout autant qu&rsquo;elle ne soit pas déjà implémentée depuis longtemps.</p>



<h2>L&rsquo;historique des cartes sur le web, les dates importantes</h2>



<h3>1997 &#8211; Introduction de la balise &lt;map&gt;</h3>



<p class="is-style-default">Utilisée pour cartographier une image et définir des zones à l&rsquo;intérieur permettant d&rsquo;en créer un lien hypertexte. Une première <a href="https://www.w3.org/TR/2018/SPSD-html32-20180315/#map">implémentation standard</a>. </p>



<pre class="wp-block-code"><code>&lt;map name="Ma Carte"&gt;
 &lt;area href="colorado.html" alt="zoomer sur l'état du Collorado" shape="rect" coords="0,0,118,28"&gt;
&lt;/map&gt;</code></pre>



<h3>1999-2002 &#8211; Flash ou Java Applets pour les cartes interactives</h3>



<p class="is-style-default">Pour palier au manque de capacité des navigateurs en ce temps là, Flash ou les applets Java sont utilisé pour créer des cartes interactives. Véritable hiver pour l&rsquo;évolution des standards du web dominé par <a href="https://en.wikipedia.org/wiki/Browser_wars#First_Browser_War_(1995%E2%80%932001)">un seul navigateur</a>, nous nous sommes pourtant jurés de ne pas retomber dans le panneau. </p>



<h3>2004 &#8211; Création de OpenStreetMap</h3>



<p class="is-style-default">Premier projet open source intégrant la carte du monde et partageant son contenu.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1286" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2600x1286.png" alt="" class="wp-image-9601" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2600x1286.png 2600w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-300x148.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-768x380.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-1536x760.png 1536w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2048x1013.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h3>2004 &#8211; Yandex Maps</h3>



<p class="is-style-default">Yandex, l&rsquo;équivalent de Google en Russie lance son outil permettant une intégration sur une page web</p>



<h3>2005 &#8211; Google Maps</h3>



<p class="is-style-default">Fournisseur de carte et d&rsquo;une librairie de carte interactive, Google Maps s&rsquo;impose assez rapidement,</p>



<h3>2005 &#8211; Google Earth</h3>



<p class="is-style-default">Avec <a href="https://techcrunch.com/2019/03/29/how-a-google-side-project-evolved-into-a-4b-company/">l&rsquo;achat de Keyhole</a> Google propose un outil de visualisation cartographique en 3D. D&rsquo;abord comme un logiciel puis comme application web. La série netflix <a href="https://www.netflix.com/ch-en/title/81074012">The Billion Dollar Code</a> retrace <a href="https://en.wikipedia.org/wiki/The_Billion_Dollar_Code#:~:text=The%20Billion%20Dollar%20Code%20is,an%20additional%20feature%20story%20episode.">une partie de l&rsquo;histoire</a>. Dans tous les cas, l&#8217;emergence de l&rsquo;attrait des cartes interactives en ligne apparait dans cette période</p>



<h3>2005 &#8211; Open Layer</h3>



<p class="is-style-default">Framework Javascript Open Source de carte interactive</p>



<h3>2007 &#8211; Sortie de l&rsquo;IPhone</h3>



<p class="is-style-default">L&rsquo;iPhone a démocratisé le smartphone et avoir un GPS dans la poche est devenu normal. L&rsquo;usage des cartes interactives a eu alors un nouvel essor. </p>



<h3>2012 &#8211; Nouvelles librairies et outils</h3>



<p class="is-style-default"><a href="https://antistatique.net/blog/devenez-un-maitre-cartographe">Yann vous en parlait sur ce blog en 2013</a> avec Leaflet, MapBox etc. La création de cartes interactives se développe énormément.</p>



<h3>2016 &#8211; Création du groupe Maps for HTML</h3>



<p class="is-style-default"><a href="https://maps4html.org/#events">Ce groupe</a> entreprend de standardiser les cartes interactives.</p>



<h3>2019 &#8211; Discussion au W3C TPAC de l&rsquo;intégration du support des cartes web dans les navigateurs</h3>



<p class="is-style-default">Une première discussion sur l&rsquo;implémentation des cartes au sein du W3C.</p>



<h3>2020 &#8211; Rapport sur l’atelier conjoint W3C-OGC sur les cartes pour le Web</h3>



<p class="is-style-default">Étape importante dans la récolte des besoins et la définition d&rsquo;un standard. <a href="https://www.w3.org/2020/maps/report-fr">Le rapport est traduit en français et consultable sur le site du W3C</a>. </p>



<h2>Quelle feuille de route pour l&rsquo;avenir des cartes sur le web</h2>



<p class="is-style-default">Les 3 dernières dates de l&rsquo;historique montre ce mouvement de professionnel·les de la cartographie web qui travaillent pour un futur de la consultation et l&rsquo;interactions de cartes dans sur les sites et applications web. Un travail conséquent mais qui devrait changer le paysage dans les prochaines années.</p>



<h2>Une histoire de projection et encore les erreurs de l&rsquo;histoire</h2>



<figure class="wp-block-image size-large is-style-large"><img src="https://www.explainxkcd.com/wiki/images/6/6c/sea_chase.png" alt=""/><figcaption><a href="https://www.explainxkcd.com/wiki/index.php/2577:_Sea_Chase">Les projections</a> par l&rsquo;exemple</figcaption></figure>



<p class="is-style-default">Alors pourquoi cette standardisation n&rsquo;est-elle pas aussi simple à réaliser ? Une carte et la projection dans laquelle elle est affichée nous donne déjà un indice sur cette complexité. </p>



<figure class="wp-block-image size-large is-style-large"><img src="https://www.explainxkcd.com/wiki/images/9/9c/map_projections.png" alt=""/><figcaption><a href="https://www.explainxkcd.com/wiki/index.php/977:_Map_Projections">La projection utile pour la colonisation</a></figcaption></figure>



<p class="is-style-default">Une solution standardisée doit absolument tenir compte de l&rsquo;accessibilité, de l&rsquo;ergonomie et l&rsquo;utilisabilité de l&rsquo;outil. Copier les implémentations actuelles ne suffisent donc pas. Ce <a href="https://drive.google.com/file/d/1IK9y0MZ3XxQjvw2xIRG7tzsslKisKn7K/view">rapport résumant les besoins des professionnels</a> permet de comprendre l&rsquo;ampleur de la tâche.</p>



<p class="is-style-lead">Les cartes sont tellement importantes pour l&rsquo;expérience utilisateur sur le web</p>



<p class="is-style-default">Les cartes représentent un pont entre le monde digital et la réalité. Elle sont aussi un exemple important de l&rsquo;avantage d&rsquo;une interface interactive. Utilisées aujourd&rsquo;hui pour créer le lien, expliquer, orienter et enseigner, les cartes interactives vont continuer à être un terrain de jeu passionnant pour les créateurs de sites et applications web</p>



<p class="is-style-lead">Et chez Antistatique, que fait-on avec les cartes</p>



<p class="is-style-default">Passionné par cette question depuis longtemps, nous avons utilisé les frameworks et librairie pour créer des cartes interactives depuis les débuts de l&rsquo;agence. Avec Mapfish pour monboulanger.ch en 2008, l&rsquo;utilisation de Google Earth pour l&rsquo;entreprise OnAir en 2009, GoogleMapsAPI pour les sites de promotions immobilière, MapBox pour afficher <a href="https://antistatique.net/projets/cardis-2">les résultats de recherche de biens immobiliers</a>. Nous avons également travaillé avec l&rsquo;entreprise Inser sur <a href="https://antistatique.net/projets/conception-design-dune-plateforme-geographique-sig-en-collaboration-avec-inser">le projet GeoMSF</a> avec les technologies ArcGIS.</p>



<p class="is-style-lead">Des nouveaux exemples de cartes interactives</p>



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="1898" height="1482" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52.png" alt="" class="wp-image-9603" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52.png 1898w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-300x234.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-768x600.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-1536x1199.png 1536w" sizes="(max-width: 1898px) 100vw, 1898px" /></figure>



<p class="is-style-default"><a href="https://gpsjam.org/">GPSJam.org</a> &#8211; Cette carte interactive montre les brouillages du signal GPS dans chaque zone du globe. Et surtout avec le voyage dans le temps, cette application vous permet une leçon de géo-politique.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1559" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2600x1559.png" alt="" class="wp-image-9608" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2600x1559.png 2600w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-300x180.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-768x460.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-1536x921.png 1536w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2048x1228.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<p class="is-style-default">L&rsquo;outil <a href="https://felt.com/">Felt</a> qui permet de créer des cartes intégrables avec cet exemple de <a href="https://felt.com/map/Japans-Volcanoes-Earthquakes-Explained-G7dQ9BMqER9CWe9BZIBYo66hC">l&rsquo;activité sismique dans la mer d&rsquo;Okhotsk</a>. </p>



<p class="is-style-lead">Et des cartes pas interactives ?</p>



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="1200" height="1206" src="https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article.jpeg" alt="" class="wp-image-9596" srcset="https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article.jpeg 1200w, https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article-150x150.jpeg 150w, https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article-768x772.jpeg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /><figcaption>Restriction de 1km pendant le confinement France en 2020<br>Arthur Beaubois-Jude — Calais, France</figcaption></figure>



<p class="is-style-default">Et si vous êtes arrivé jusqu&rsquo;ici, vous méritez bien un petit cadeau. <a href="https://www.bloomberg.com/features/2020-coronavirus-lockdown-neighborhood-maps/">Cet article</a> de Bloomberg présentant des cartes faites mains pour illustrer la vie pendant le lockdown en 2020</p>



<figure class="wp-block-image size-large"><img src="https://eyeondesign.aiga.org/wp-content/uploads/2020/01/Map-Marmot-final-1024x640.jpg" alt=""/></figure>



<p class="is-style-default">Ou encore <a href="https://eyeondesign.aiga.org/for-decades-cartographers-have-been-hiding-covert-illustrations-inside-of-switzerlands-official-maps/">cet article</a> sur les easter eggs des cartographes suisses.</p>


Les cartes et le web, vaste sujet, mais quel futur ?


<p>Vous avez toujours rêvé d&rsquo;en savoir un peu plus sur <a rel="noreferrer noopener" href="https://antistatique.net/equipe/alberto" target="_blank">Alberto</a>, l&rsquo;un des fondateurs et associés d&rsquo;Antistatique ? </p>



<p>Ça tombe bien, on lui a posé quelques questions, afin de mieux cerner d&rsquo;où lui vient toute son énergie, son dynamisme et également pour en savoir un peu plus sur les origines de l&rsquo;agence&#8230;</p>



<p>Prenez un <a href="https://www.instagram.com/redbullswitzerland">Redbull</a>, mettez un peu de <a href="https://open.spotify.com/playlist/32666w3NS8j0LwWAPh88WN?si=4a535d4aadbb42a5">musique</a> et accrochez-vous, c&rsquo;est parti !<br><br><img loading="lazy" width="595" height="397" class="wp-image-9458" style="width: 650px;" src="https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie.jpg" alt="Alberto Gomez Antistatique" srcset="https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie.jpg 595w, https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie-300x200.jpg 300w" sizes="(max-width: 595px) 100vw, 595px" /></p>



<h3><strong>Comment as-tu eu l’envie de créer Antistatique ? Es-tu fier de son évolution ?</strong></h3>



<p><strong>La première étape:</strong> c’est en voyant <a rel="noreferrer noopener" href="https://antistatique.net/equipe/marc" target="_blank">Marc</a> (mon associé depuis 14 ans et ami depuis 20) travailler sur des projets lors de nos études. Il était le meilleur de la classe et a survolé les cours. Après les journées de cours, il travaillait sur des projets pour sa famille, ses amis et quelques clients. J’admirais sa capacité à créer un site Internet de A à Z…et je voulais faire comme lui. (Raté.)</p>



<p><strong>La deuxième étape:</strong> lors d’un stage en tant que « Webdesigner » au sein d’UNICOM agence de communication de l’<a rel="noreferrer noopener" href="https://unil.ch/" target="_blank">université de Lausanne</a>, j’ai découvert l’ensemble des métiers de la communication en agence: webdesigner, graphiste, web developer, directeur artistique, photographe, responsable technique …et celui de <strong>directeur d’agence. </strong>Et c’est concrètement à cet instant, que j’ai découvert que ma place était la sienne.</p>



<p>Concernant la fierté, je suis en effet assez fier de l&rsquo;évolution. Nous avons démarré nos meetings clients dans un fast food et maintenant nous pouvons accueillir nos clients dans nos bureaux de <a href="https://antistatique.net/agence-web">Genève et Lausanne</a>. Mais je pense que la plus grande des fiertés, c&rsquo;est de pouvoir compter sur une équipe soudée &amp; douée pour trouver les meilleures solutions pour nos clients et pour développer l&rsquo;agence.<br>(Une autre petite fierté c&rsquo;est d&rsquo;avoir ouvert un bureau à <a href="https://antistatique.net/blog/remote-a-miami" data-type="URL" data-id="https://antistatique.net/blog/remote-a-miami">Miami</a> durant presque 3 ans) </p>



<p><strong>Quelles sont tes sources d’inspiration ?</strong></p>



<p>Youtube, Spotify, Instagram, Netflix, Nike, PR, …</p>



<p><strong>Parles nous de tes hobbies ?</strong></p>



<p>Ecouter du Reggaeton, Manger, faire du sport, Regarder la Champions League (et prochainement la Challenge League 💔) , écouter de la musique et faire des playlist Spotify (<a href="https://open.spotify.com/playlist/32666w3NS8j0LwWAPh88WN?si=39cbf04b8abb4b46">de Reggaeton</a>), sortir.</p>



<p><strong>Une musique que tu écouterais en boucle ?</strong></p>



<p>Impossible d’en choisir une, mais bon :<br></p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Ryan Castro, Feid - Monastery (Vídeo Oficial)" width="500" height="281" src="https://www.youtube.com/embed/EOkCOYrPEsU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p></p>



<p><strong>Tu es plutôt fête jusqu’au petit matin ou netflix &amp; chill ?</strong>&nbsp;</p>



<p>Fête jusqu’au petit matin.</p>



<p><strong>Une citation qui te parle ?</strong></p>



<p>« More Strategy. Less Ads. »</p>



<p><strong>Un compte insta que tout le monde devrait découvrir ?</strong></p>



<p>Les meilleurs bières : <a href="https://www.instagram.com/brasserieduchateau/" data-type="URL" data-id="https://www.instagram.com/brasserieduchateau/">La Brasserie du Château</a><br>La meilleure Fête: <a rel="noreferrer noopener" href="https://www.instagram.com/houseofperreo/" data-type="URL" data-id="https://www.instagram.com/houseofperreo/" target="_blank">House Of Perreo</a><br>Les meilleurs empanadas: <a href="https://www.instagram.com/bondi_empanadas/" data-type="URL" data-id="https://www.instagram.com/bondi_empanadas/">Bondy Empanadas</a><br>Le meilleure festival: <a rel="noreferrer noopener" href="https://www.instagram.com/electrosanne/" data-type="URL" data-id="https://www.instagram.com/electrosanne/" target="_blank">Electrosanne</a><br>La meilleure coach: <a rel="noreferrer noopener" href="https://www.instagram.com/soso_coach/" data-type="URL" data-id="https://www.instagram.com/soso_coach/" target="_blank">Soso Coach</a><br>Les boss du offline: <a rel="noreferrer noopener" href="https://www.instagram.com/north_communication/" data-type="URL" data-id="https://www.instagram.com/north_communication/" target="_blank">North communication</a><br>La meilleure pâtissière: <a href="https://www.instagram.com/djellza.lmp8/" data-type="URL" data-id="https://www.instagram.com/djellza.lmp8/">Djellza</a> <br>Un seul rapper: <a rel="noreferrer noopener" href="https://www.instagram.com/yvdre/" data-type="URL" data-id="https://www.instagram.com/yvdre/" target="_blank">Yvdre</a><br>Un seul sound system: <a href="https://www.instagram.com/soldiasound">Soldia Sound</a><br>Un club de foot: <a rel="noreferrer noopener" href="https://www.instagram.com/lausanne_sport/" data-type="URL" data-id="https://www.instagram.com/lausanne_sport/" target="_blank">Lausanne Sport</a><br>Mon nouveau bar à Bogota: <a rel="noreferrer noopener" href="https://www.instagram.com/elsindicato_beer/" target="_blank">El Sindicato</a><br></p>



<p><strong>Un métier qui t’a toujours attiré ?</strong></p>



<p>Je suis clairement frustré de pas avoir une fibre artistique <s>assez </s>développé pour être: Designer, Dj, Rapper, autre…</p>



<p><strong>Cite quelques mots clés qui te définissent bien ?&nbsp;Et à l’opposé ce qui ne te ressemble pas ?</strong></p>



<p>Je suis assez mal-organisé, plutôt multi-tâches et je ne suis pas trop feignant.</p>



<p><strong>Et sinon, plutôt chat ou chien ?</strong>&nbsp;</p>



<p>Plutôt Cruz:<br><img loading="lazy" width="1638" height="2048" class="wp-image-9040" style="width: 300px;" src="https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52.jpeg" alt="Staffie " srcset="https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52.jpeg 1638w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-240x300.jpeg 240w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-768x960.jpeg 768w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-1229x1536.jpeg 1229w" sizes="(max-width: 1638px) 100vw, 1638px" /></p>


10 questions pour découvrir Alberto

<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">L&rsquo;interface d&rsquo;administration de Drupal par défaut est démodée et ne répond plus aux de normes de conception design modernes.</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Sascha Eggenberger</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Designer chez GitLab</p>
                      </div>
            </div>
</div>



<p>Mais croyez-moi, il est <strong>possible de rendre l&rsquo;interface Drupal sexy et simple d&rsquo;utilisation</strong> !</p>



<h2>Evolution</h2>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 8%;"></div>
    <div style="flex-basis: 20%; margin-right: 30px">
        <p style="font-size: 15px; color: #808098; text-align: right;">Commençons par le commencement et comparons l&rsquo;incomparable. </p>
    </div>
    <div style="flex-basis: 40%;">
        <p style="font-size: 21px;"><p>Les changements apportés à Drupal avec <strong>Gin</strong> sont considérables. Que l’ont soit <strong>Développeur</strong>, <strong>Site-Builder</strong> ou <strong>Éditeur</strong>: l’expérience est radicalement <strong>simplifiée</strong> et <strong>clarifiée</strong>.</p>
</p>
    </div>
</div>



<p>Après tout, Drupal a été <strong>pensé par des développeurs</strong>, <strong>construit par des développeurs</strong> et <strong>fait pour des développeurs</strong>.</p>



<figure class="wp-block-gallery aligncenter columns-2 is-cropped is-style-columns-6-6"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2600x1648.png" alt="" data-id="9374" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Content-Seven.png" data-link="https://antistatique.net/blog/reviser-vos-prejuges-sur-linterface-dadmin-drupal/content-seven/" class="wp-image-9374" srcset="https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Interface Seven</figcaption></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2600x1648.png" alt="" data-id="9372" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Content-Gin.png" data-link="https://antistatique.net/blog/reviser-vos-prejuges-sur-linterface-dadmin-drupal/content-gin/" class="wp-image-9372" srcset="https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Interface Gin</figcaption></figure></li></ul></figure>



<p>Il faut l&rsquo;assumer, on revient de loin, <strong>très loin même</strong>.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">C&rsquo;est beau ! &#8230; C&rsquo;est sexy ! &#8230; c&rsquo;est magnifique !
Que dis-je, magnifique ? &#8230; C&rsquo;est utilisable !</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Cyrano de bergerac</p>
                      </div>
            </div>
</div>



<p>Drupal ne supposait pas que les éditeurs de contenu constitueraient le public principal de l&rsquo;outil. <strong>Un comble pour un système de gestion de contenu (CMS)</strong>. </p>



<p>Heureusement, des personnalités talentueuses que sont <a rel="noreferrer noopener" href="https://twitter.com/saschaeggi" data-type="URL" data-id="https://twitter.com/saschaeggi" target="_blank">Sascha Eggenberger</a> et <a rel="noreferrer noopener" href="https://twitter.com/chumillas" target="_blank">Cristina Chumillas</a> on prit les choses en main et grâce à elles nous avons aujourd&rsquo;hui un outil élégant en constante évolution.  </p>



<p>Mais ne vous méprenez pas, l&rsquo;expérience éditoriale est au cœur des ajustements de <strong>Gin</strong>.</p>



<h2>Content is the new king</h2>



<p>Aujourd&rsquo;hui, nous avons l&rsquo;initiative <a rel="noreferrer noopener" href="https://www.drupal.org/about/core/strategic-initiatives/easy-out-of-the-box" data-type="URL" data-id="https://www.drupal.org/about/core/strategic-initiatives/easy-out-of-the-box" target="_blank">Easy Out of the Box</a>, qui vise à rendre Drupal plus facile à utiliser. Claro et Gin sont nés de cette initiative en tant que nouveaux thèmes d&rsquo;administration.</p>



<figure class="wp-block-gallery columns-2 is-cropped is-style-columns-6-6"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2600x1648.png" alt="" data-id="9382" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Node-Seven.png" data-link="https://content.antistatique.net/?attachment_id=9382" class="wp-image-9382" srcset="https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Formulaire d&rsquo;une page avec Seven</figcaption></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2600x1648.png" alt="" data-id="9380" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48.png" data-link="https://content.antistatique.net/?attachment_id=9380" class="wp-image-9380" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption"><meta charset="utf-8">Formulaire d&rsquo;une page avec Gin</figcaption></figure></li></ul></figure>



<p>L&rsquo;interface des formulaires est revue afin de se rapprocher des interfaces Google Docs ou MS Word &#8211; des interfaces éprouvées et connues des utilisateurs.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Est-ce vraiment Drupal ?</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Pierre Afeux</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Un client désormais heureux</p>
                      </div>
            </div>
</div>



<p>Les fonctions les plus importantes telles que l&rsquo;état publié, l&rsquo;aperçu et l&rsquo;enregistrement sont toujours à portée de main grâce à un positionnement sticky en haut du formulaire d&rsquo;édition.</p>



<h2>Un avenir radieux</h2>



<p>Que nous réserve l&rsquo;avenir ? Nous conviendrons que personne ne sait vraiment. Mais voici quelques pistes et projets en cours de réalisation qui annonce de bien belles choses pour Drupal.</p>



<h2><strong>Menus pour les créateurs de contenu</strong></h2>



<p>Une fois encore, le menu actuel propose une architecture pour les développeurs et non pour les éditeurs du contenu.</p>



<p>La proposition de menu <a rel="noreferrer noopener" href="https://www.drupal.org/project/ideas/issues/3203618" data-type="URL" data-id="https://www.drupal.org/project/ideas/issues/3203618" target="_blank">créateur de contenu</a> semble être en bonne voie pour résoudre cette problématique.</p>



<p>L&rsquo;initiative propose de regrouper les éléments de création et de proposer un menu complètement différent pour quelqu&rsquo;un qui n&rsquo;est pas un site-builder.</p>



<h2>Dark Mode</h2>



<p>Tout a un mode sombre. Pourquoi pas Drupal ? </p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2600x1648.png" alt="" class="wp-image-9394" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption>What we do in the shadows</figcaption></figure>



<h2>Editeur Next-Gen</h2>



<p>Le remplacement de CKEditor par le nouveau et très amélioré CKEditor 5 a été identifié comme une initiative Drupal 10.</p>



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="2560" height="1326" src="https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67.png" alt="" class="wp-image-9390" srcset="https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67.png 2560w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-300x155.png 300w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-768x398.png 768w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-1536x796.png 1536w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-2048x1061.png 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /></figure>



<h2>Login</h2>



<p>Avec le module de <a href="https://www.drupal.org/project/gin_login">Gin Login</a>, il est possible d&rsquo;homogénéiser l&rsquo;expérience utilisateur, de l&rsquo;écran de connexion aux touches finales de l&rsquo;interface.</p>



<p>Nous utilisons principalement ce module supplémentaire sur nos projets Headless.</p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2600x1648.png" alt="" class="wp-image-9386" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h3>Dashboard</h3>



<p>Drupal 7 <strong>proposait un tableau de bord personnalisable</strong>, quelque chose que l&rsquo;on ne retrouve pas dans les nouvelles versions de Drupal.</p>



<p>La communauté ne souhaite <strong>pas réitérer les erreurs du passé</strong>. Pour avoir un bon tableau de bord, vous devez <strong>connaître votre public cible</strong>. Présenter les bonnes informations à un utilisateur d&rsquo;une manière facile à digérer est l&rsquo;un des principaux objectifs.</p>



<p>C&rsquo;est pourquoi cette fonctionnalité tant attendue se développe doucement au fil des recherches et des faisabilités techniques.</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1600" height="1200" src="https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i.png" alt="" class="wp-image-9388" srcset="https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i.png 1600w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-300x225.png 300w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-768x576.png 768w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-1536x1152.png 1536w" sizes="(max-width: 1600px) 100vw, 1600px" /><figcaption>Concept de Dashboard Drupal</figcaption></figure>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Alors, prêt à sauter le pas ? </p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Belebt</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Base Jumper</p>
                      </div>
            </div>
</div>



<p class="is-style-default">Quoi qu’il en soit, n’hésitez pas à&nbsp;<strong>nous contacter</strong>&nbsp;pour vous&nbsp;<a href="https://antistatique.net/agence-web" data-type="URL" data-id="https://antistatique.net/agence-web">conseiller sur la meilleure stratégie à adopter</a>&nbsp;en relation avec votre projet.</p>



<h2>Sources</h2>



<p>Pour les plus curieux d&rsquo;entre vous, voici quelques sources d&rsquo;informations complémentaires ayant inspiré la création de cet article.</p>



<p><strong>Gin</strong>&nbsp;(Juin, 2022). Gin Admin Theme.<br><a href="https://antistatique.net/fr/node/455"></a><a href="https://www.drupal.org/project/gin" target="_blank" rel="noreferrer noopener">https://www.drupal.org/project/gin</a></p>



<p><meta charset="utf-8"><strong>Sascha Eggenberger</strong>&nbsp;(April, 2021). Drupal Gin Future UI.<br><a rel="noreferrer noopener" href="https://sascha.is/work/drupal-gin-future-ui" target="_blank"></a><a href="https://sascha.is/work/drupal-gin-future-ui" target="_blank" rel="noreferrer noopener">https://sascha.is/work/drupal-gin-future-ui</a></p>



<p><strong>Sascha Eggenberger</strong> (October, 2021). Drupal Gin Admin Theme: The Past, The Present &amp; The Future.<br><a rel="noreferrer noopener" href="https://noti.st/saschaeggi/0X9WTY/drupal-gin-admin-theme-the-past-the-present-the-future" target="_blank">https://noti.st/saschaeggi/&#8230;/drupal-gin-admin-theme&#8230;</a></p>



<p><strong>Cristina Chumillas</strong> (April, 2022). The Present and Future of Drupal’s Administrative Interface.<br><a rel="noreferrer noopener" href="https://www.lullabot.com/articles/present-and-future-drupals-administrative-interface" target="_blank">https://www.lullabot.com/&#8230;/present-and-future-&#8230;-interface</a></p>



<p><strong>Jayati Kataria</strong> (March, 2020). Claro: A modern outlook of Drupal admin UI.<br><a rel="noreferrer noopener" href="https://opensenselabs.com/blog/articles/claro-modern-outlook-drupal-admin-ui" target="_blank">https://opensenselabs.com/&#8230;/claro-modern-&#8230;-drupal-admin-ui</a></p>



<p><meta charset="utf-8"><strong>Mike Hubbard</strong> (January, 2020). Drupal’s admin UI &amp; how it compares to WordPress.<br><a rel="noreferrer noopener" href="https://www.acromedia.com/article/drupals-admin-ui-how-it-compares-to-wordpress" target="_blank">https://www.acromedia.com/&#8230;/drupals-admin-ui-&#8230;-wordpress</a></p>



<p><strong>Kevin Oleary</strong> (September, 2015). The evolution of the toolbar; Drupal 7 to Drupal 8.<br><a rel="noreferrer noopener" href="https://medium.com/@kevinoleary/the-evolution-of-the-toolbar-drupal-7-to-drupal-8-c1edb0875cc9" target="_blank">https://medium.com/@kevinoleary/evolution-toolbar-d7-to-d</a></p>



<p><strong>Bluedrop</strong> (March, 2021). Améliorer l&rsquo;expérience de la contribution : du confort dans le backoffice Drupal.<br><a rel="noreferrer noopener" href="https://www.bluedrop.fr/content/ux-contribution-backoffice-drupal" target="_blank">https://www.bluedrop.fr/content/ux-contribution-&#8230;-drupal</a></p>


Réviser vos préjugés sur l’interface d’Admin Drupal


<p>Quand on veut tendre vers plus de durabilité dans notre métier de développeur et développeuse de sites et d’applications web, l’énergie est l’une des premières thématiques qui émergent des réflexions. Surtout quand on sait qu’Internet se place en pole position aux côtés des pays les plus pollueurs de la planète.</p>



<h2><strong>Qui consomme ?</strong></h2>



<p>Pour un site ou une application web classique, voici les différentes étapes où l’énergie est consommée :</p>



<ul><li>La <strong>production</strong> : pour produire un site, il faut des personnes qui vont se rendre sur leur lieu de travail, qui vont utiliser un espace physique qu’il faudra chauffer et éclairer et qui vont finalement utiliser du matériel et des outils informatiques.</li><li>L’<strong>hébergement</strong> : afin de rendre le site disponible, il faut l’héberger sur un serveur ou <em>datacenter</em>. En somme, de gros ordinateurs mis en réseaux qui doivent assurer une disponibilité constante, 24h sur 24h.</li><li>Le <strong>réseau</strong> câblé et mobile : pour acheminer les données de notre serveur vers l’internaute.</li><li>Les <strong>routeurs</strong> (<em>boxe ADSL</em>) : véritable porte d’entrée du web dans nos foyers, ils sont nécessaires dans la mise en relation entre le réseau interne et externe.</li><li>Les <strong>appareils</strong> : permettent de consulter notre site au sens large; ordinateurs, téléphone mobile, écran, clavier, souris, etc.</li></ul>



<p>Toutes ces étapes vont consommer de l’énergie électrique qui va être produite de plusieurs manières, du très propre au très “sale”. Maintenant, même si l’énergie employée était uniquement issue de source renouvelable, <strong>il s’agit également de ne pas la gaspiller</strong>.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="1733" height="2600" src="https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1733x2600.jpeg" alt="Barrage de Gries, par Anders Nielsen" class="wp-image-9304" srcset="https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1733x2600.jpeg 1733w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-200x300.jpeg 200w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-768x1152.jpeg 768w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1024x1536.jpeg 1024w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1365x2048.jpeg 1365w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-scaled.jpeg 1707w" sizes="(max-width: 1733px) 100vw, 1733px" /><figcaption>Barrage et parc éolien de Gries, l&rsquo;un des plus hauts d&rsquo;Europe.</figcaption></figure>



<h2><strong>Où peut-on agir ?</strong></h2>



<p>À chaque étape, nous avons la possibilité et la responsabilité d’optimiser la consommation énergétique pour plus de durabilité :</p>



<h3><strong>La production</strong></h3>



<ul><li>En favorisant le <strong>télétravail</strong> afin de supprimer les déplacements inutiles</li><li>En optant pour des <strong>sources de production électrique renouvelable</strong> quand c’est possible; réseau local, panneaux solaires, etc.</li><li>En utilisant des <strong>outils optimisés</strong> pour leur consommation énergétique</li></ul>



<h3><strong>L’hébergement</strong></h3>



<ul><li>En optant pour un <strong>hébergement vert</strong> ou <em>Greenhosting</em>. Attention toutefois au <em>greenwashing</em> utilisé par les gros acteurs du marché. Il s’agit de passer par des organismes de notation indépendants comme <a href="https://www.thegreenwebfoundation.org/directory/">The Green Web Foundation</a>.</li><li>En optimisant notre site ou notre application pour <strong>réduire la charge serveur</strong>; nombre de requêtes, charge CPU, etc.</li><li>En <strong>filtrant les BOTs</strong>. En effet, les robots qui vont parcourir votre site pour diverses raisons sont responsables de 50% de la bande passante et de la charge CPU de votre serveur. Il s’agit de garder uniquement ceux qui vont référencer votre site afin de minimiser leur impact.</li><li><strong>Réduire l’espace disque</strong> utilisé en réduisant la taille et le nombre des médias, des archives, etc.</li><li><strong>En mettant notre site en <em>cache</em></strong>. Plutôt que de tout recalculer pour chaque internaute et chaque requête, une partie du “résultat” envoyé peut-être sauvegardé et envoyé aux prochains internautes pour une période donnée.</li></ul>



<h3><strong>Le réseau câblé et mobile</strong></h3>



<ul><li>En favorisant la <strong>proximité</strong>; moins votre site parcourt de distance, moins il consomme d’énergie. Il s’agit de choisir un hébergement proche de la majorité des utilisateurs et utilisatrices et/ou d’utiliser un CDN. Ce <em>Content Delivery Network</em> va, comme votre serveur d’hébergement, servir votre site, mais depuis différents lieux dans le monde selon l’internaute qui le consulte. Attention toutefois, car chaque lieu possédera une “copie” de votre site, ce qui aura un effet multiplicatif sur l’espace disque utilisé.</li><li>En réduisant et en <strong>optimisant la taille des ressources envoyées</strong> comme la taille des images, la quantité de code, etc.</li></ul>



<h3><strong>Les routeurs (<em>boxes ADSL</em>)</strong></h3>



<p>Sur ce point nous ne pouvons pas faire grand-chose si ce n’est sensibiliser nos internautes à la consommation d’énergie renouvelable.</p>



<h3><strong>Les appareils</strong></h3>



<p>Encore une fois, l’énergie consommée par nos internautes est difficilement optimisable. Il existe néanmoins plusieurs points sur lesquels nous pouvons agir :</p>



<ul><li>En réduisant la <strong>charge CPU/GPU</strong>. Le fonctionnement même de notre site ou notre application dans le navigateur va avoir un impacte fort sur l’énergie qui sera consommée pour l’utiliser. Notamment en optimisant le JavaScript, en réduisant la quantité de code à <em>parser</em> ou en optimisant la taille et la présence des médias.</li><li>En utilisant des <strong>couleurs sombres</strong>. Cela ne vaut que pour les appareils disposant d’écrans (AM)OLED ou cathodiques, même si ces derniers se sont faits très rares pour naviguer sur Internet. Maintenant, avec la généralisation des écrans OLED dont chaque pixel définit sa propre consommation d’énergie, opter pour des couleurs sombres ou des pixels éteins, permet de réduire la consommation énergétique des écrans. Tout comme utiliser trop de bleu aura un impact négatif, car il s’agit de la couleur la plus énergivore. Attention, cela ne vaut pas pour les écrans LCD qui composent encore la majorité des écrans de nos internautes.</li></ul>



<h2><strong>Ce qu’il faut retenir</strong></h2>



<ul><li>Optez pour un hébergement vert de proximité (voir <a href="https://www.thegreenwebfoundation.org/directory/">The Green Web Foundation</a>)</li><li>Optimisez votre code et votre projet pour réduire la puissance de calcul nécessaire à son usage</li><li>Soyez conscient de l’impact écologique et énergétique de chacun de vos choix et orientez-les en conséquence</li></ul>



<h2><strong>Notre responsabilité</strong></h2>



<p>Voici quelques-unes des nombreuses pistes qui s’offrent à nous pour rendre notre site ou notre application web énergiquement plus durable et moins impactant pour la planète. <strong>Il est de notre responsabilité de les mettre autant que possible en œuvre.</strong></p>



<p>Maintenant il s’agit également de ne pas se voiler la face, le site le plus écologique et le moins impactant dans la crise climatique que nous vivons est le site qui n’existe pas.</p>


Durabilité – Énergie et Hébergement


<p class="is-style-lead">Un article écrit par un développeur back-end. Simple à comprendre et à mettre en place. <br><a rel="noreferrer noopener" href="https://github.com/RSickenberg/Laravel-Livewire-Demo" target="_blank">Le projet est disponible sur mon GitHub.</a></p>



<h2>Préambule</h2>



<p class="has-drop-cap">Laravel est un framework tout comme Symfony. Une structure qui nous aide, nous, développeurs à créer des contenus toujours plus poussés, motivants et complets sans pour autant réinventer la roue à chaque projet.</p>



<p>La différence entre Symfony et Laravel ? Cela dépend des goûts et des préférences de chaque développeur et de ses expériences passées. Pour ma part, je suis pour Laravel, je préfère la syntaxe et « l&rsquo;élégance » de cette plateforme et la polyvalence des fonctionnalités présentes « out of the box », comme par exemple, la gestion des <code>queues</code>.</p>



<p><a rel="noreferrer noopener" href="https://laravel.com/docs/9.x/installation#meet-laravel" data-type="URL" data-id="https://laravel.com/docs/9.x/installation#meet-laravel" target="_blank">Si vous souhaitez en savoir un peu plus le temps qu&rsquo;un autre article arrive sur Laravel.</a></p>



<p>Aujourd&rsquo;hui, je vais me concentrer sur une fonctionnalité toute particulière, plus ou moins similaire à <a rel="noreferrer noopener" href="https://symfony.com/bundles/ux-live-component/current/index.html" data-type="URL" data-id="https://symfony.com/bundles/ux-live-component/current/index.html" target="_blank">Symfony UX Live Components</a> mais moins experimentale.</p>



<h2>Livewire</h2>



<p class="has-drop-cap">Ceci est une partie assez récente de Laravel. Elle est sortie il y a environ 3 ans à l&rsquo;heure où j&rsquo;écris cet article. </p>



<p>Livewire permet de construire une application web moderne complexe, tout en réduisant la difficulté pour un développeur <em>back-end</em> de gérer le <em>front-end</em>.</p>



<p>C&rsquo;est un peu comme un framework dans Laravel. On a ainsi la possibilité de construire des interfaces dynamiques et simples tout en gardant le confort de la syntaxe de Laravel.</p>



<div class="wp-block-image is-style-default"><figure class="aligncenter"><img src="https://laravel-livewire.com/img/underwater_jelly.svg" alt=""/></figure></div>



<h2>Let&rsquo;s go?</h2>



<p class="is-style-default">Je commence d&rsquo;abord par créer mon environnement de développement avec l&rsquo;aide de notre très cher <a href="https://www.docker.com/" target="_blank" rel="noreferrer noopener">Docker</a>. </p>



<p class="is-style-default"><meta charset="utf-8">Je travaille avec :</p>



<ul class="is-style-default"><li>Laravel: <code>9.7.X</code></li><li>Livewire: <code>2.10.5</code></li><li>PHP: <code>8.1.4</code></li><li>Postgress: <code>14</code></li></ul>



<h3>Dockerfile</h3>



<p class="is-style-default">Tout ce qui a de plus classique. <br><a href="https://github.com/RSickenberg/Laravel-Livewire-Demo/blob/main/.docker/php/Dockerfile" data-type="URL" data-id="https://github.com/RSickenberg/Laravel-Livewire-Demo/blob/main/.docker/php/Dockerfile" target="_blank" rel="noreferrer noopener">Disponible ici.</a></p>



<h3>Bootstrap</h3>



<p class="is-style-default">Après avoir «&nbsp;bootstrapé&nbsp;» le project grâce à l&rsquo;aide de composer (<code>composer create-project laravel/laravel example-app</code>), nous pouvons directement suivre Docker avec un joli <code>docker-compose up -d</code> et se rendre à la machine à café ☕️.<br><br>Ensuite <code>http://localhost:8080</code> est disponible !</p>



<p class="is-style-default">Le reste est globalement de la config; vous pouvez copier le <code>.env.example</code> en <code>.env</code>.</p>



<p class="is-style-default">On continue avec <a rel="noreferrer noopener" href="https://jetstream.laravel.com/2.x/introduction.html" target="_blank">Laravel Jetstram</a>, un starter-kit pour Laravel, qui nous permet d&rsquo;avoir, en un claquement de doigts, utilisateurs, <em>logins</em>, <em>2FA</em>, <em>session managements</em>, <em>API</em> et/ou <em>team management</em>. </p>



<pre class="wp-block-code"><code>composer require laravel/jetstream
php artisan jetstream:install livewire <meta charset="utf-8"># --teams
docker-compose exec app php artisan migrate
npm i &amp;&amp; npm run dev</code></pre>



<p class="is-style-default">Ces 4 commandes nous permettent de:</p>



<ol class="is-style-default"><li>Installer Jetstream.</li><li>Demander à avoir Livewire.<ol><li>Passer un argument <code>--teams</code> si vous souhaitez avoir la gestion d&rsquo;équipes.</li></ol></li><li>Faire les migrations sur la base de données.</li><li>Installer les dépendances front-end.</li></ol>



<p class="is-style-default">Et voilà 🎉, un Laravel tout beau tout neuf.</p>



<h2>Créons notre premier composant !</h2>



<h3>Le routing</h3>



<p class="has-drop-cap is-style-default">Le routing : une partie essentielle quand on parle de <em>cutting-edge</em> web framework. <br>Ici, c&rsquo;est plutôt simple, les routes se trouvent dans <code>routing/web.php</code> et sont très faciles à déclarer. Faisons-en une pour notre démo avec un <em>Controller</em>.</p>



<p class="is-style-default">Dans notre exemple, rendons nous dans l&rsquo;<em>URI</em> <code>/demo</code>.<br>Au début, ce n&rsquo;est qu&rsquo;une simple page blanche.</p>



<h3>Le composant Livewire</h3>



<p class="is-style-default">Nous voici dans le vif du sujet ! Créons un composant.</p>



<p class="is-style-default">Selon la <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/quickstart" data-type="URL" target="_blank">documentation</a>, la commande est simple: <code>php artisan make:livewire &lt;nom&gt;</code>. <br>Faisons le composant <code>Antistatique</code>.</p>



<p class="is-style-default">On se retrouve avec un composant tout bête pour l&rsquo;instant avec un <em>template</em>. </p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" width="1060" height="832" src="https://content.antistatique.net/app/uploads/2022/04/component.png" alt="" class="wp-image-9158" srcset="https://content.antistatique.net/app/uploads/2022/04/component.png 1060w, https://content.antistatique.net/app/uploads/2022/04/component-300x235.png 300w, https://content.antistatique.net/app/uploads/2022/04/component-768x603.png 768w" sizes="(max-width: 1060px) 100vw, 1060px" /><figcaption>Il s&rsquo;agit là d&rsquo;un simple composant qui étend Livewire. Nous allons commencer à travailler dessus très rapidement.</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/html.png" alt="" class="wp-image-9160" width="653" height="251" srcset="https://content.antistatique.net/app/uploads/2022/04/html.png 1094w, https://content.antistatique.net/app/uploads/2022/04/html-300x116.png 300w, https://content.antistatique.net/app/uploads/2022/04/html-768x296.png 768w" sizes="(max-width: 653px) 100vw, 653px" /><figcaption>Voici donc le template.</figcaption></figure></div>



<p class="is-style-default">Amusons-nous maintenant avec le <em>framework</em>.<br>Depuis un <em>template</em> quelconque, on peut donc appeler notre composant livewire comme un composant <code>VueJS</code> !<br>Il suffit d&rsquo;ajouter <code>&lt;livewire:le-nom-du-composant /&gt;</code> , et <em>Blade</em> (le moteur de rendu) se charge du reste.<br><br>Après quelques modifications du <em>template</em> de base <code>demo.index</code> ainsi que du <em>template</em> <code>livewire.antistatique</code>, on arrive à un résultat.<br></p>



<figure class="wp-block-image size-full is-resized is-style-full-width"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/image.png" alt="" class="wp-image-9162" width="1192" height="131" srcset="https://content.antistatique.net/app/uploads/2022/04/image.png 1651w, https://content.antistatique.net/app/uploads/2022/04/image-300x33.png 300w, https://content.antistatique.net/app/uploads/2022/04/image-768x85.png 768w, https://content.antistatique.net/app/uploads/2022/04/image-1536x169.png 1536w" sizes="(max-width: 1192px) 100vw, 1192px" /></figure>



<h4>Where the fun begins</h4>



<p class="is-style-default">Souvenez-vous de note <em>class</em> de base, <code>\App\Http\Livewire\Antistatique</code>, cette dernière étant une <em>class</em>, on peut y faire ce qu&rsquo;on veut. </p>



<p class="is-style-default">Ajoutons une propriété <code>int $loveCounter</code>.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/component-1.png" alt="" class="wp-image-9164" width="607" height="565" srcset="https://content.antistatique.net/app/uploads/2022/04/component-1.png 1292w, https://content.antistatique.net/app/uploads/2022/04/component-1-300x280.png 300w, https://content.antistatique.net/app/uploads/2022/04/component-1-768x716.png 768w" sizes="(max-width: 607px) 100vw, 607px" /><figcaption>Notre <em>class</em> devrait ressembler à ceci.</figcaption></figure></div>



<p class="is-style-default"><code>::showLove</code> et <code>$loveCounter</code> sont des éléments avec lesquels le <em>front-end</em> peut intéragir via <code>AlpineJS</code> (tout est déjà fourni !). <br>Dans le <em>template</em>, il suffit d&rsquo;ajouter sur un bouton <code>&lt;button wire:click=showLove"&gt;+&lt;/button&gt;</code>.</p>



<p class="is-style-default">Une fois le composant mis en place, il ressemble à ceci:</p>



<pre class="wp-block-code"><code>&lt;div&gt;
    &lt;div class="alert alert-info shadow-lg"&gt;
        &lt;div&gt;
            &lt;i class="fa-solid fa-circle-info"&gt;&lt;/i&gt;
            &lt;span&gt;Bonjour, je suis un composant Livewire!&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mt-10"&gt;
        &lt;div class="card bg-base-100 w-60 max-w-&#91;65em] shadow-2xl inner-shadow m-auto"&gt;
            &lt;div class="card-body"&gt;
                &lt;div class="flex gap-6"&gt;
                    &lt;div&gt;
                        &lt;span class="countdown font-mono text-9xl"&gt;
                            &lt;span style="--value:{{ $loveCounter }}"&gt;&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class="font-bold text-2xl"&gt;
                            Love for Antistatique 💘
                        &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="card-actions justify-end"&gt;
                    @if(!$shouldReturnToZero)
                        &lt;button wire:click="showLove" class="btn btn-block btn-accent mt-5"&gt;Ajouter de l'amour&lt;/button&gt;
                    @else
                        &lt;button wire:click="removeLove" class="btn btn-block btn-accent mt-5"&gt;Retirer de l'amour&lt;/button&gt;
                    @endif
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>



<p class="is-style-default">Tout se sittue au niveau du <em>back-end</em> et ainsi, <code>AlpineJS</code> discutent entre eux ainsi qu&rsquo;avec <em>Blade</em> qui fait la liaison initiale.<br><br>Tout ceci est bien entendu <em>SEO friendly</em> car la page est générée intialement comme n&rsquo;importe quelle page.</p>



<div class="wp-block-image is-style-large"><figure class="aligncenter size-full"><img loading="lazy" width="960" height="720" src="https://content.antistatique.net/app/uploads/2022/04/Screen-Recording-2022-04-08-at-17.30.19.gif" alt="" class="wp-image-9178"/><figcaption>Voici le résultat !</figcaption></figure></div>



<h3>Comment cela fonctionne et quelles sont les possibilités ?</h3>



<p class="has-drop-cap is-style-default">Livewire est rendu initialement comme n&rsquo;importe quelle page <em>Blade</em>. Ensuite, quand une interraction est demandée, en l&rsquo;occurence comme notre <code>wire:click</code>, Livewire génère une requête <em>AJAX</em> au <em>back-end</em> qui met à jour les données puis le composant. Ce dernier est ensuite renvoyé au <em>front-end</em>.<br>Le <em>DOM</em> est manipulé intelligement et ne change que les éléments du composant.<br><br>Les possibilités sont quasiment ilimitées et il faudrait plusieurs articles pour en parler dans les détails. Tout ceci étant branché à l&rsquo;écosystème de Laravel !<br><br>Autre élément qui me permet de prétendre ceci : <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/lifecycle-hooks" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/lifecycle-hooks" target="_blank">Livewire possède également les <code>Hooks</code> de lifecyle</a>.</p>



<p class="is-style-default">Livewire se comporte de façon <em>Stateless</em>,  cela veut dire qu&rsquo;il n&rsquo;y a pas d&rsquo;instance de Livewire qui vit sur le serveur et qui attend une interraction client.<br><br>Voici une petite image prise de la documentation de Livewire qui nous explique comment tout cela fonctionne.<br></p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" src="https://laravel-livewire.com/img/lifecycle_timeline.svg" alt="" width="660" height="363"/><figcaption>Source: https://laravel-livewire.com/docs/2.x/security</figcaption></figure></div>



<h3>Et la sécurité ?</h3>



<p class="is-style-default">Comme tout composant <em>front-end</em>, les données se situent chez le <em>client</em>. Il est donc possible d&rsquo;avoir une manipulation d&rsquo;une personne mal intentionnée, et il est donc primordial d&rsquo;avoir de la validation et/ou des contre-mesures adéquates en fonction de l&rsquo;implication des données (en l&rsquo;occurence ce n’est pas nécessaire pour un compteur).<br><br>Néamoins, Livewire passe des <em>checksums</em> entre chaques requêtes, si ces dernières ne sont pas valides, la requête ne sera pas lancée.<br><br><a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/security" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/security" target="_blank">Si vous souhaitez en savoir plus sur la sécurité, je vous laisse vous rendre sur cette page.</a></p>



<h2>Le mot de la fin.</h2>



<p class="has-drop-cap is-style-default">J&rsquo;espère avoir réussi à captiver votre attention. N&rsquo;hésitez pas à aller regarder le projet démo sur mon <em>repository</em> et à jouer avec !<br><br>Livewire est un concept vraiment intéressant d&rsquo;un point de vue de développeur <em>back-end</em>, permettant de générer des composants en PHP sans avoir à créer des API dédiées, ainsi que des <em>controllers / routings</em>. <br><br>Livewire permet <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/input-validation" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/input-validation" target="_blank">de valider les éléments</a> comme le texte, un email ou pleins d&rsquo;autres choses (comme dans Laravel). Vous pouvez aussi l&rsquo;utiliser pour <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/file-uploads" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/file-uploads" target="_blank">des envois de fichiers</a>, l’attacher à plein d’évènements d&rsquo;actions comme des <code>Clicks</code>, <code>Keydown</code> ou <code>Submit</code> ou pour émettre des <code>events</code> pour des <code>listeners</code>, &#8230;</p>



<p class="is-style-default">En soit, c&rsquo;est un <em>micro-framework</em> qui à une place très importante dans Laravel et nous permet d&rsquo;intéragir avec notre application et tout son écosystème autour. </p>



<p class="is-style-default">Merci de m&rsquo;avoir lu !</p>


Blog

Recevez notre newsletter mensuelle