Face au défi constant de surveiller la santé et la disponibilité de nos sites et applications web, notre agence a dû trouver une solution efficace. La diversité et l&#8217;ampleur de notre &#8216;parc&#8217; de sites nous ont poussés à chercher une méthode systématique pour surveiller leur état, que ce soit pour un site Drupal en maintenance active ou pour un site statique plus ancien nécessitant peu de maintenance.



Il existe un multitude d&#8217;outil de monitoring de site web. Nous avons établi nos critères de sélection pour le parfait outil de monitoring :



<ol>
<li>Abordable avec un modèle de prix non exponentiel, adapté à la surveillance de plus de 100 sites.</li>



<li>Capacité à monitorer HTTP / HTTPS, incluant l&#8217;envoi de headers personnalisés.</li>



<li>Simplicité d&#8217;utilisation et efficacité.</li>



<li>Disponibilité d&#8217;une API pour des besoins futurs.</li>
</ol>



Notre choix s&#8217;est porté sur Updown.io, qui a excellemment répondu à nos attentes après un an d&#8217;utilisation.



Créé en 2012 par <a href="https://twitter.com/adrienjarthon" data-type="link" data-id="https://twitter.com/adrienjarthon">Adrien Rey-Jarthon</a> à Paris, France, comme un side-project, cela a immédiatement suscité l&#8217;intérêt de Gilles. Nous apprécions les side-projects!



Le modèle de prix basé sur des crédits (1 crédit = 1 requête) nous a séduits. Cela nous permet de surveiller un grand nombre de sites tout en respectant notre budget. Nous avons également réalisé que des alertes minutieuses n&#8217;étaient pas nécessaires pour tous nos projets. Certains sont vérifiés toutes les heures, tandis que pour d&#8217;autres, un intervalle de 10 minutes est suffisant.



L&#8217;interface utilisateur d&#8217;Updown.io est un modèle de simplicité et d&#8217;efficacité.







👉 Découvrez <a href="https://updown.io/r/5oNNY">Updown.io</a> (via notre lien referral, vous avez 100K crédits d&#8217;offert; nous aussi).



<h2 class="wp-block-heading">Page de Health checks</h2>



Vous pouvez très bien surveiller la page d&#8217;accueil ou un autre page clé de votre site web, mais il serait idéal que chaque application/site web possède une URL dédiée pour les &#8216;health checks&#8217;, permettant de tester la fonctionnalité globale de l&#8217;application (base de données, service d&#8217;indexation, workers, etc.).



<h2 class="wp-block-heading">Alternative gratuite: Upptime</h2>



Une alternative découverte plus tard est le projet <a href="https://upptime.js.org/">Upptime</a>. L&#8217;idée est ingénieuse et se repose uniquement sur les Github Actions, les Github Pages et les Github Issues pour la gestion des incidents et alertes. Rien que pour cette idée, cela vaut le détour



<h2 class="wp-block-heading">Surveillance des tâches récurrentes :</h2>



Nous envisageons d&#8217;améliorer la surveillance de nos tâches programmées ou récurrentes (cronjobs). Nous évaluons actuellement le projet open source <a href="https://github.com/healthchecks/healthchecks">Healthchecks</a>, en alternative à des services comme <a href="https://ohdear.app/">Oh Dear</a>, trop onéreux pour une utilisation étendue







 En conclusion, les solutions les plus simples sont souvent les meilleures. Un monitoring constant à la seconde près n&#8217;est pas toujours nécessaire. Centraliser notre monitoring nous a permis de gagner en efficacité et en tranquillité d&#8217;esprit.











Vous souhaitez réagir ou laisser un commentaire ? <a href="https://www.linkedin.com/feed/update/urn:li:activity:7135172370062823424" data-type="link" data-id="https://www.linkedin.com/feed/update/urn:li:activity:7135172370062823424">Faites le sous le post LinkedIn</a>.

Quel outil pour le monitoring de vos sites web?

Dans ce vaste monde du web, chaque interaction, que ce soit l&#8217;ouverture d&#8217;une page web, la soumission d&#8217;un formulaire ou le visionnage d&#8217;une vidéo, tout repose sur un protocole appelé HTTP (HyperText Transfer Protocol). Dans cet article je vais partager les bases qui selon moi sont importantes à connaître pour une ou un développeur frontend.



Le rôle de HTTP est d&#8217;agir comme le messager entre le client (le navigateur de l&#8217;utilisateur) et le serveur.



Lorsque vous saisissez une URL ou cliquez simplement sur un lien, vous envoyez une requête HTTP. Le serveur reconnaît (ou non) la demande et renvoie une réponse avec le contenu que vous avez demandé.



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1475" height="622" src="https://content.antistatique.net/app/uploads/2023/11/http-request.webp" alt="" class="wp-image-13187" srcset="https://content.antistatique.net/app/uploads/2023/11/http-request.webp 1475w, https://content.antistatique.net/app/uploads/2023/11/http-request-300x127.webp 300w, https://content.antistatique.net/app/uploads/2023/11/http-request-768x324.webp 768w" sizes="(max-width: 1475px) 100vw, 1475px" /></figure>



On pourrait faire une analogie avec par exemple un restaurant. Vous (le navigateur / client) passez votre commande (requete HTTP). La commande est emmenée à la cuisine (le serveur web), la commande est ensuite préparée et vous est ramenée (réponse HTTP).



<h2 class="wp-block-heading">Pourquoi est-il important pour un développeur frontend de comprendre le protocole HTTP ?</h2>



En tant que développeur frontend, vous devez fréquemment interagir avec les services provenant du backend. Le fait de connaître le protocole HTTP va vous permettre de communiquer efficacement avec ces services afin de traiter des données de la manière la plus optimale pour votre site.



Vous avez probablement déjà entendu le terme CORS, ou bien vous vous êtes déjà pris une erreur 404. C’est dans ce genre de cas ou des connaissances du protocole HTTP vous aides a comprendre ce qui vous arrive.



Ça pourra aussi éveiller votre curiosité et vous permettre de développer des compétences pour utiliser des techniques comme le lazy loading, le caching, etc. Tout ça pour offrir de meilleures performances à vos utilisateurs.



<h2 class="wp-block-heading">Au-delà de GET et POST</h2>



Les verbes HTTP, souvent appelés méthodes HTTP, définissent l&#8217;action que nous avons l&#8217;intention d&#8217;effectuer sur une ressource donnée.



Ces méthodes offrent bien plus que la simple capacité de récupérer des pages web avec <code>GET</code> ou de soumettre des données avec <code>POST</code>.



Voici des méthodes qui pourraient vous être utiles (continuons avec des analogies culinaires) :



<h3 class="wp-block-heading">GET</h3>



<ul>
<li>Analogie : Prendre le lait du frigo.</li>



<li>Cas concret : Récupérer des données. Lorsque vous chargez une page web, votre navigateur utilise une requête <code>GET</code> pour récupérer le contenu.</li>
</ul>



<h3 class="wp-block-heading">POST</h3>



<ul>
<li>Analogie : Ajouter une nouvelle bouteille de soda dans votre frigo.</li>



<li>Cas concret : Soumettre des données. Lorsque vous remplissez un formulaire d&#8217;inscription sur un site web, les données que vous saisissez sont envoyées au serveur à l&#8217;aide d&#8217;une requête <code>POST</code>.</li>
</ul>



<h3 class="wp-block-heading">PUT</h3>



<ul>
<li>Analogie : Remplacer votre mayonnaise périmée par un nouveau tube tout frais.</li>



<li>Cas concret : Mettre à jour des données existantes ou les créer si elles n&#8217;existent pas. Si un utilisateur souhaite mettre à jour les informations de son profil, une application frontend pourrait utiliser une requête <code>PUT</code>.</li>
</ul>



<h3 class="wp-block-heading">PATCH</h3>



<ul>
<li>Analogie : Ajouter une tranche supplémentaire de fromage dans votre sandwich.</li>



<li>Cas concret : Mettre à jour partiellement une ressource. Par exemple, si un utilisateur souhaite changer uniquement son adresse e-mail sur un profil, <code>PATCH</code> le permet sans affecter les autres données.</li>
</ul>



<h3 class="wp-block-heading">DELETE</h3>



<ul>
<li>Analogie : Composter votre salade toute fanée.</li>



<li>Cas concret : Supprimer une ressource. Si un utilisateur décide de supprimer son compte, une requête <code>DELETE</code> serait initiée.</li>
</ul>



Vous pouvez trouver la liste complète un peut partout en ligne, par exemple <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">sur la doc de mozilla</a>.



ㅤ



Utiliser uniquement <code>GET</code> et <code>POST</code> peut entraîner des transferts de données inutiles, menant à des applications moins rapides. En revanche, l&#8217;utilisation appropriée de verbes tels que <code>PATCH</code> peut optimiser le transfert de données, économisant ainsi du temps et de la bande passante, ce qui est un vrai point positif pour une optique durable du développement.



<h2 class="wp-block-heading">418 je suis une théière</h2>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="750" height="600" src="https://content.antistatique.net/app/uploads/2023/11/418.jpg" alt="" class="wp-image-13189" srcset="https://content.antistatique.net/app/uploads/2023/11/418.jpg 750w, https://content.antistatique.net/app/uploads/2023/11/418-300x240.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" /></figure>



Il est bon de savoir ce qu&#8217;est un <code>Status Code</code>, ou en tout cas ce que représente les différentes catégories de ces statuts. Cela facilitera le débuging et pourra par conséquent vous éviter des migraines aiguës.



Les statuts HTTP sont regroupés en cinq catégories représentées par le premier chiffre du code. Chaque catégorie indique le résultat général de la demande. Si vous aimez les chats, n’hésitez pas à visiter <a href="https://http.cat/">https://http.cat/</a> pour des exemples bien sympas.



<ol>
<li><code>1xx</code> (Informatif) : Ces codes indiquent généralement une réponse provisoire. La réponse finale réelle suivra la réponse informative.</li>



<li><code>2xx</code> (Réussite) : Cette catégorie indique que la demande du client a été reçue, comprise et acceptée avec succès.</li>



<li><code>3xx</code> (Redirection) : Ces codes indiquent qu&#8217;une action supplémentaire est nécessaire pour compléter la demande, souvent sous la forme d&#8217;une redirection.</li>



<li><code>4xx</code> (Erreurs du client) : Ces codes indiquent que le client semble avoir commis une erreur. Ils sont utilisés lorsque la demande contient par exemple une syntaxe incorrecte ou ne peut pas être satisfaite.</li>



<li><code>5xx</code> (Erreurs du serveur) : Ces codes indiquent que le serveur n&#8217;a pas pu satisfaire une demande valide. Le serveur lui-même est conscient qu&#8217;il a une erreur ou est incapable d&#8217;effectuer la demande.</li>
</ol>



<h2 class="wp-block-heading">Les headers</h2>



Ça sonne à votre porte, c&#8217;est le facteur qui vient vous déposer votre colis commandé la veille chez [insérez votre e-commerce favori commençant par la lettre G]. 



Avant même d’ouvrir la boîte, l&#8217;étiquette collée sur le carton vous fournit des informations précieuses : l&#8217;expéditeur, la destination, potentiellement des instructions spéciales, la valeur marchande, etc.



De la même manière, les headers (en-têtes) HTTP fournissent des informations cruciales sur la demande ou la réponse, indiquant comment elle doit être traitée, quel est son contenu, comment elle doit être mise en cache, qui a les autorisations.



Voici une liste non exhaustive de headers qui je pense sont important à connaître :



<h3 class="wp-block-heading">Accept</h3>



Spécifie les types de médias qu&#8217;il est possible de traiter. Les serveurs peuvent ainsi adapter leurs réponses en fonction des capacités du client. Par exemple, un en-tête <code>Accept</code> peut indiquer que le client accepte les réponses au format JSON (<code>application/json</code>) ou XML (<code>application/xml</code>).



<code>Accept: application/json</code>



<h3 class="wp-block-heading">User-Agent</h3>



Identifie le navigateur, le système d&#8217;exploitation et d&#8217;autres caractéristiques du navigateur. Cela permet au serveur de fournir une réponse optimisée en fonction des capacités du client. Les développeurs frontend peuvent parfois utiliser cet en-tête pour effectuer des ajustements spécifiques à un navigateur / OS.



<code>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36</code>



<h3 class="wp-block-heading">Authorization (avec Bearer)</h3>



Ce header est crucial pour les requêtes sécurisées. Lorsqu&#8217;un utilisateur est authentifié, le serveur attend généralement un token d&#8217;accès. Le schéma le plus courant est le schéma &#8220;Bearer&#8221;, utilisé avec les token JWT.



<code>Authorization: Bearer eyJhbGciOiJ-IUzI1NiIhssInR5cCI6IkpX-VCJ9.eyJzddWIiOqiIxMjM-0NTY3ODkwIdiwibmg-FtZSI6Ikpv-aG4gRG9lIiwi-aWF0IjoxNTsdfE2MjM5M-DIyfQ.SflKxwRJSMeKK-F2QT4fwpMeJf36POk-6ymjJV-adQssw5c</code>



<h3 class="wp-block-heading">Content-Type</h3>



Indique le type de média du <code>body</code> de la requête ou de la réponse. Pour les requêtes, cela informe le serveur sur le format des données envoyées, tandis que pour les réponses, cela indique au client comment interpréter le contenu.



<code>Content-Type: application/json</code>



<h3 class="wp-block-heading">Cookie</h3>



Ce header contient les cookies qui doivent être inclus dans la requête. Les cookies servent par exemple à maintenir l&#8217;état de la session entre le client et le serveur.



<code>Cookie: sessionId=123456; userId=9876</code>



<h3 class="wp-block-heading">Cache-Control</h3>



Spécifie les directives de mise en cache dans les requêtes et les réponses. Les développeurs frontend peuvent utiliser cet en-tête pour contrôler le comportement du cache du navigateur.



<code>Cache-Control: no-cache, no-store, must-revalidate</code>



ㅤ



En comprenant ces quelques headers fréquemment utilisés, les développeurs frontend peuvent améliorer la gestion des requêtes, la sécurité et l&#8217;efficacité globale du site web.



<h2 class="wp-block-heading">Payloads</h2>



<h3 class="wp-block-heading">Qu&#8217;est-ce qu&#8217;un payload ?</h3>



Dans le contexte de HTTP, un payload fait référence aux données transmises dans une requête ou une réponse. Ces données peuvent prendre diverses formes, telles que du texte, du JSON, du XML, voire même des données binaires. Etant donné que ça influe directement sur les données que vos applications envoient et reçoivent, je pense qu’il est important d’en parler dans cet article.



<h3 class="wp-block-heading">Types de Payloads</h3>



Voici quelques exemples classiques de type de contenu utilisé par nous autres frontends:



Text-Based Payloads (basés sur du texte) :



<ul>
<li><code>HTML</code> : Le plus courant sur le web, le HTML contient la structure et le contenu d&#8217;une page.</li>



<li><code>JSON</code> : largement utilisé pour des données, le JSON est un format léger, facilement lisible et que les développeurs frontend manipulent souvent lors de l’intérraction avec des API.</li>
</ul>



Binary Payloads (basés sur du binaires) :



<ul>
<li><code>Images</code> : Les données d&#8217;image, telles que les fichiers JPEG ou PNG, sont souvent transmises en tant que charges binaires dans les requêtes et réponses HTTP.</li>



<li><code>Fichiers</code> : Lorsque les utilisateurs téléchargent des fichiers, la charge utile binaire est utilisée pour transmettre les données du fichier.</li>
</ul>



Structured Payloads :



<ul>
<li><code>XML</code> (eXtensible Markup Language) : Bien moins courant que le JSON, XML est un autre format pour structurer les données de manière lisible par l&#8217;homme et compréhensible par la machine.</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1920" height="1080" src="https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited.jpg" alt="" class="wp-image-13218" srcset="https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited.jpg 1920w, https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-300x169.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-768x432.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-1536x864.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" /></figure>



<h3 class="wp-block-heading">Prenons l’exemple d’un site de e-commerce</h3>



Vous avez comme objectif d&#8217;implémenter une fonctionnalité qui permet aux utilisateur·ices d&#8217;ajouter des produits à leur panier sans devoir actualiser l&#8217;ensemble de la page.



Mises à jour asynchrones du panier :



Sans une compréhension des payloads, le développeur frontend pourrait avoir du mal à communiquer efficacement avec le backend lorsqu&#8217;un utilisateur ajoute un article à son panier. Ici, le payload contiendrait les informations sur le produit (ID, nom, quantité, etc.) qui doivent être envoyées au serveur.



Mises à jour dynamiques de l&#8217;interface utilisateur :



Une fois que le serveur traite le payload et met à jour le statut du panier, le payload de réponse (par exemple au format JSON) devient important. Il faut l’interpréter pour mettre à jour dynamiquement l&#8217;interface utilisateur. Grâce à ça, son panier mit à jour sans devoir recharger la page.



Gestion des erreurs :



Si, pour une raison quelconque, le serveur rencontre un problème, le payload d&#8217;erreur devient essentiel. Les devs frontend peuvent utiliser cette réponse pour afficher un message d&#8217;erreur utile à l&#8217;utilisateur.

Introduction à HTTP pour le développement frontend

Voilà, c’est fait ! Nous avons fêté 15 ans. 15 ans… le village de Sainte-Croix, une idée « novatrice » entre deux cours d’électrotechnique et informatique et depuis notre agence ne cesse d’évoluer, d’apprendre, d’innover et d’accompagner des clientes et clients toujours plus nombreux.



Aujourd’hui, nous sommes une équipe de spécialistes aux savoir-faire complémentaires. Nous sommes convaincu·es que les meilleurs projets sont ceux auxquels nous croyons. Persuadé·es que l’humain doit être au centre, c’est avec vous que nous créons des solutions qui connectent les individus et leur permettent de mieux se comprendre. C’est pourquoi nous vous remercions chaleureusement pour votre confiance et votre collaboration. Un grand MERCI ! Merci à chaque membre de cette équipe remarquable &#8211; ainsi qu’à tous·tes les collaborateur·trices qui se sont impliqué·es au sein d&#8217;Antistatique – Merci à toute notre clientèle. Merci à nos partenaires. Merci à celles et ceux qui ont contribué à notre évolution. Joyeux 15e anniversaire à Antistatique! Que cette aventure continue d’être aussi passionnante, inspirante et prometteuse pour les prochaines décennies.



Digital since forever.



Nous vous invitons à découvrir notre manifeste qui présente notre raison d’être et nos valeurs: <a href="https://antistatique.net/manifeste">https://antistatique.net/manifeste</a>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13146" src="https://content.antistatique.net/app/uploads/2023/11/4E66CA73-E93B-46FD-92FF-9BB76795FDD1-26487-000003D9E50123A0.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13146" srcset="https://content.antistatique.net/app/uploads/2023/11/4E66CA73-E93B-46FD-92FF-9BB76795FDD1-26487-000003D9E50123A0.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/4E66CA73-E93B-46FD-92FF-9BB76795FDD1-26487-000003D9E50123A0-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/4E66CA73-E93B-46FD-92FF-9BB76795FDD1-26487-000003D9E50123A0-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/4E66CA73-E93B-46FD-92FF-9BB76795FDD1-26487-000003D9E50123A0-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13150" src="https://content.antistatique.net/app/uploads/2023/11/04C976B0-157F-4FD9-B8B4-E167B7E16DC9-26487-000003D9F6247D6C.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13150" srcset="https://content.antistatique.net/app/uploads/2023/11/04C976B0-157F-4FD9-B8B4-E167B7E16DC9-26487-000003D9F6247D6C.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/04C976B0-157F-4FD9-B8B4-E167B7E16DC9-26487-000003D9F6247D6C-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/04C976B0-157F-4FD9-B8B4-E167B7E16DC9-26487-000003D9F6247D6C-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/04C976B0-157F-4FD9-B8B4-E167B7E16DC9-26487-000003D9F6247D6C-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13148" src="https://content.antistatique.net/app/uploads/2023/11/1C4132F6-3024-413D-8364-312D43C3A694-26487-000003D9EBB6A779.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13148" srcset="https://content.antistatique.net/app/uploads/2023/11/1C4132F6-3024-413D-8364-312D43C3A694-26487-000003D9EBB6A779.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/1C4132F6-3024-413D-8364-312D43C3A694-26487-000003D9EBB6A779-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/1C4132F6-3024-413D-8364-312D43C3A694-26487-000003D9EBB6A779-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/1C4132F6-3024-413D-8364-312D43C3A694-26487-000003D9EBB6A779-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13164" src="https://content.antistatique.net/app/uploads/2023/11/76CD34D1-B206-4DEA-B1BE-74682ABD61FB-26487-000003D99CF1AAA1.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13164" srcset="https://content.antistatique.net/app/uploads/2023/11/76CD34D1-B206-4DEA-B1BE-74682ABD61FB-26487-000003D99CF1AAA1.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/76CD34D1-B206-4DEA-B1BE-74682ABD61FB-26487-000003D99CF1AAA1-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/76CD34D1-B206-4DEA-B1BE-74682ABD61FB-26487-000003D99CF1AAA1-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/76CD34D1-B206-4DEA-B1BE-74682ABD61FB-26487-000003D99CF1AAA1-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13160" src="https://content.antistatique.net/app/uploads/2023/11/74C956DE-738F-4C4F-97FA-05BCC58F0BC2-26487-000003D9DB58F8B4.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13160" srcset="https://content.antistatique.net/app/uploads/2023/11/74C956DE-738F-4C4F-97FA-05BCC58F0BC2-26487-000003D9DB58F8B4.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/74C956DE-738F-4C4F-97FA-05BCC58F0BC2-26487-000003D9DB58F8B4-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/74C956DE-738F-4C4F-97FA-05BCC58F0BC2-26487-000003D9DB58F8B4-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/74C956DE-738F-4C4F-97FA-05BCC58F0BC2-26487-000003D9DB58F8B4-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13162" src="https://content.antistatique.net/app/uploads/2023/11/73C2F00E-638D-4B94-A25B-12560C9769EB-26487-000003DA15835303.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13162" srcset="https://content.antistatique.net/app/uploads/2023/11/73C2F00E-638D-4B94-A25B-12560C9769EB-26487-000003DA15835303.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/73C2F00E-638D-4B94-A25B-12560C9769EB-26487-000003DA15835303-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/73C2F00E-638D-4B94-A25B-12560C9769EB-26487-000003DA15835303-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/73C2F00E-638D-4B94-A25B-12560C9769EB-26487-000003DA15835303-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13154" src="https://content.antistatique.net/app/uploads/2023/11/56A5858C-3C23-439B-B1FF-8D69D75BC606-26487-000003DA6BA2FDE4.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13154" srcset="https://content.antistatique.net/app/uploads/2023/11/56A5858C-3C23-439B-B1FF-8D69D75BC606-26487-000003DA6BA2FDE4.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/56A5858C-3C23-439B-B1FF-8D69D75BC606-26487-000003DA6BA2FDE4-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/56A5858C-3C23-439B-B1FF-8D69D75BC606-26487-000003DA6BA2FDE4-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/56A5858C-3C23-439B-B1FF-8D69D75BC606-26487-000003DA6BA2FDE4-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13158" src="https://content.antistatique.net/app/uploads/2023/11/A612EDA3-6DDA-44F6-A560-E11C912CFB86-26487-000003DA6ED3AEB6.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13158" srcset="https://content.antistatique.net/app/uploads/2023/11/A612EDA3-6DDA-44F6-A560-E11C912CFB86-26487-000003DA6ED3AEB6.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/A612EDA3-6DDA-44F6-A560-E11C912CFB86-26487-000003DA6ED3AEB6-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/A612EDA3-6DDA-44F6-A560-E11C912CFB86-26487-000003DA6ED3AEB6-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/A612EDA3-6DDA-44F6-A560-E11C912CFB86-26487-000003DA6ED3AEB6-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13168" src="https://content.antistatique.net/app/uploads/2023/11/A7A6076B-3342-4D48-B610-31A9949EA80A-26487-000003D911082C8E.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13168" srcset="https://content.antistatique.net/app/uploads/2023/11/A7A6076B-3342-4D48-B610-31A9949EA80A-26487-000003D911082C8E.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/A7A6076B-3342-4D48-B610-31A9949EA80A-26487-000003D911082C8E-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/A7A6076B-3342-4D48-B610-31A9949EA80A-26487-000003D911082C8E-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/A7A6076B-3342-4D48-B610-31A9949EA80A-26487-000003D911082C8E-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13165" src="https://content.antistatique.net/app/uploads/2023/11/A4B230AD-173D-4150-B194-CA37651CB8DB-26487-000003D9EF0F6994.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13165" srcset="https://content.antistatique.net/app/uploads/2023/11/A4B230AD-173D-4150-B194-CA37651CB8DB-26487-000003D9EF0F6994.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/A4B230AD-173D-4150-B194-CA37651CB8DB-26487-000003D9EF0F6994-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/A4B230AD-173D-4150-B194-CA37651CB8DB-26487-000003D9EF0F6994-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/A4B230AD-173D-4150-B194-CA37651CB8DB-26487-000003D9EF0F6994-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13170" src="https://content.antistatique.net/app/uploads/2023/11/CC9DAA19-44D7-4039-A567-E875AB5F1275-26487-000003D9595A34AA.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13170" srcset="https://content.antistatique.net/app/uploads/2023/11/CC9DAA19-44D7-4039-A567-E875AB5F1275-26487-000003D9595A34AA.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/CC9DAA19-44D7-4039-A567-E875AB5F1275-26487-000003D9595A34AA-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/CC9DAA19-44D7-4039-A567-E875AB5F1275-26487-000003D9595A34AA-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/CC9DAA19-44D7-4039-A567-E875AB5F1275-26487-000003D9595A34AA-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13156" src="https://content.antistatique.net/app/uploads/2023/11/C8080F41-D14A-42AC-99CF-606552FCFD76-26487-000003DA5E9E9805.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13156" srcset="https://content.antistatique.net/app/uploads/2023/11/C8080F41-D14A-42AC-99CF-606552FCFD76-26487-000003DA5E9E9805.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/C8080F41-D14A-42AC-99CF-606552FCFD76-26487-000003DA5E9E9805-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/C8080F41-D14A-42AC-99CF-606552FCFD76-26487-000003DA5E9E9805-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/C8080F41-D14A-42AC-99CF-606552FCFD76-26487-000003DA5E9E9805-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2048" height="1365" data-id="13152" src="https://content.antistatique.net/app/uploads/2023/11/F18DB903-CE1C-40E4-944C-C9A87D8C6A0B-26487-000003D921BA20B7.jpg" alt="Antistatique fête 15 ans.
Digital since forever" class="wp-image-13152" srcset="https://content.antistatique.net/app/uploads/2023/11/F18DB903-CE1C-40E4-944C-C9A87D8C6A0B-26487-000003D921BA20B7.jpg 2048w, https://content.antistatique.net/app/uploads/2023/11/F18DB903-CE1C-40E4-944C-C9A87D8C6A0B-26487-000003D921BA20B7-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2023/11/F18DB903-CE1C-40E4-944C-C9A87D8C6A0B-26487-000003D921BA20B7-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2023/11/F18DB903-CE1C-40E4-944C-C9A87D8C6A0B-26487-000003D921BA20B7-1536x1024.jpg 1536w" sizes="(max-width: 2048px) 100vw, 2048px" /></figure>
</figure>

Nous avons 15 ans.

Une PWA (progressive web app) c’est une fusion entre un site web et une application mobile native. C&#8217;est un peu comme si un site web revêtait les atouts et les fonctionnalités d&#8217;une application mobile sans nécessiter d&#8217;installation.



Il est possible de les installer sur votre écran d&#8217;accueil directement depuis le navigateur sans passer par un store. Elles sont rapides, offrent des possibilités de caching, de notifications PUSH et même des pages hors-ligne si jamais votre connexion internet venait à faire des caprices.



<h2 class="wp-block-heading">Fruit défendu 🍎</h2>



Tandis que les PWA sont plutôt bien ancrées sur les navigateurs Chromium (<a href="https://gs.statcounter.com/browser-market-share">qui dominent le marché des navigateurs d’une majorité écrasante</a>), on ne peut pas en dire de même concernant Safari, le navigateur de la marque à la pomme, Apple.



Sur les navigateurs Chromium et si le site web est bien configuré pour supporter les PWA, il est possible grâce au <code>beforeInstallPrompt</code> de fournir une expérience d&#8217;installation simple et intuitive.



Ce n&#8217;est malheureusement pas la même chose sur Safari qui ne fournit pas de moyens simples d&#8217;installer une application Web. Il faut donc soi-même faire toutes les démarches, ce qui freine l&#8217;adoption de celles-ci sur iOS.



<s>On pourrait presque croire qu’Apple fait exprès de rendre ça difficile pour encourager les développeurs et développeuses à publier leurs applications sur l’AppStore</s> 👀



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1004" height="705" src="https://content.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1.jpg" alt="" class="wp-image-12231" srcset="https://content.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1.jpg 1004w, https://content.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1-300x211.jpg 300w, https://content.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1-768x539.jpg 768w" sizes="(max-width: 1004px) 100vw, 1004px" /><figcaption class="wp-element-caption">Processus d&#8217;installation d&#8217;une PWA sur un iPhone</figcaption></figure>



<h2 class="wp-block-heading">Une lueur d’espoir 🌥️</h2>



Peu connue des consommateur·trices de l’écosystème d’Apple (et à juste titre), leur adoption stagne depuis plus de 10 ans malgré les avantages qu’elles peuvent apporter&#8230; Mais, attendez, que vois-je là ?



Et oui, promesse faite promesse tenue, c’est avec la sortie d’iOS 16.4 que les notifications push font enfin partie intégrante des PWA sur iOS.



Il est donc maintenant possible, par exemple, d’installer l’application web de WhatsApp sur son iPad et recevoir des notifications (il n’existe pas de version native de WhatsApp sur iPad).



Ce pas en avant de la part d’Apple donne l’espoir de peut-être un jour voir arriver un processus d’installation simplifié comme sur Android.



<h2 class="wp-block-heading">Quel futur pour les PWA ?</h2>



Malgré un taux d’adoption stable voire à la baisse, les PWA sont un bon moyen de lancer un produit rapidement et à moindre coût. Elles offrent une expérience proche des applications natives.



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="779" height="652" src="https://content.antistatique.net/app/uploads/2023/07/pwa-usage-statistics.webp" alt="Graphique montrant le taux d'utilisation des PWA" class="wp-image-12233" srcset="https://content.antistatique.net/app/uploads/2023/07/pwa-usage-statistics.webp 779w, https://content.antistatique.net/app/uploads/2023/07/pwa-usage-statistics-300x251.webp 300w, https://content.antistatique.net/app/uploads/2023/07/pwa-usage-statistics-768x643.webp 768w" sizes="(max-width: 779px) 100vw, 779px" /></figure>



Les PWA continuent d&#8217;être une option intéressante pour les entreprises souhaitant fournir une expérience mobile sans avoir à développer des applications natives distinctes pour chaque plate-forme.



Elles ont démontré leur capacité à améliorer l&#8217;engagement des utilisateurs et utilisatrices et à réduire les taux d&#8217;abandon (bounce rate), ce qui en fait une solution viable pour de nombreux cas d&#8217;utilisation.



<h2 class="wp-block-heading"><s>P</s> TWA</h2>



Parce qu’utiliser un seul acronyme ça serait trop simple, voici les TWA !


<div>
 
 Trusted Web Activities
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 </div>
</div>



Pour résumer, c’est une évolution des PWA afin d&#8217;intégrer des contenus Web sécurisés dans une application Android native. En suivant la <a href="https://developer.chrome.com/docs/android/trusted-web-activity/#establish_an_association_from_the_website_to_the_app">doc de Google</a>, il est possible de transformer sa PWA en TWA et de pouvoir finalement la publier sur le PlayStore.



Contrairement aux PWA, les TWA offrent une intégration plus profonde avec le système d&#8217;exploitation Android, permettant aux utilisateurs et utilisatrices d&#8217;interagir à travers une expérience native, comme s&#8217;il s&#8217;agissait d&#8217;une application traditionnelle tout en gardant les avantages d’une application web. Les mises à jour faites sur votre site seront par conséquent directement accessibles depuis votre PWA !



En plus de bénéficier de tous les avantages des PWA, les TWA offrent également une intégration avec les fonctionnalités Android telles que les “Shared Action” pour partager des données avec d’autres applications, l&#8217;authentification unique et l&#8217;accès aux API natives du système.



Il convient cependant de noter que les TWA sont spécifiques à Android et ne sont pas disponibles sur les autres plateformes mobiles telles qu&#8217;iOS.



<h2 class="wp-block-heading">En conclusion</h2>



Malgré un taux d’adoption plutôt lent, les PWA offrent une expérience proche des applications natives à moindre coût, et peuvent même être publiées sur le PlayStore grâce aux Trusted Web Activities.



Les PWA sont idéales pour :



<ul>
<li>Une disponibilité multiplateforme immédiate</li>



<li>Des phases de développement intense où des mises à jour peuvent être publiées sans que l&#8217;utilisateur et utilisatrices ait besoin de mettre à jour son application.</li>



<li>Des cas simples tels que des sites e-commerce, des blogs, sites éditoriaux et dashboards. </li>
</ul>



Tandis qu&#8217;une application mobile native est plus avantageuse quand il faut utiliser des fonctions plus avancées telles que :



<ul>
<li>De l&#8217;image processing</li>



<li>Des tâches exigeantes au niveau du hardware</li>



<li>De l&#8217;AR et des jeux vidéo</li>
</ul>

PWA, toujours d’actualité ?

C’est la question de fond et le fil rouge de la seconde édition des Assises nationales genre et numérique 2023. J’ai eu la possibilité d’assister à ces deux jours riches en partage et échanges autour des enjeux de l’égalité de genre en transformation numérique (EGTN). Cet événement a eu lieu le 7 et 8 septembre 2023 à l’Université de Lausanne (UNIL).



Les sujets abordés et approfondis étaient les suivants :



<ul>
<li>l’inclusion des femmes dans les métiers du numérique (et les enjeux pour les y maintenir)</li>
</ul>



<ul>
<li>les défis de l’intégration du numérique dans la formation&nbsp;sous l’angle du genre</li>
</ul>



<ul>
<li>les biais de genre dans les technologies telles que l’intelligence artificielle (IA)</li>
</ul>



<ul>
<li>l’usage d’outils numériques pour lutter contre les violences faites aux femmes</li>
</ul>



Source : <a href="https://wp.unil.ch/genre-numerique/" data-type="link" data-id="https://wp.unil.ch/genre-numerique/">UNIL</a>



 



<h3 class="wp-block-heading">Quels sont les 3 chiffres qui m’ont le plus interpellé ?</h3>



<ul>
<li>moins de 9% du corps estudiantin en informatique en Suisse sont des femmes (<a href="https://www.ictjournal.ch/etudes/2021-03-08/la-proportion-de-femmes-dans-lit-ne-progresse-presque-pas">HES-SO</a>, statistiques pour la période 2016 à 2021)</li>



<li>88% des algorithmes sont conçus par des hommes (<a href="https://www.laboratoiredelegalite.org/2220-2/" data-type="link" data-id="https://www.laboratoiredelegalite.org/2220-2/">L’Intelligence artificielle, pas sans elles !</a>, Aude Bernheim, édition Belin, 2019)</li>



<li>14’604 pages Wikipédia permettant de compléter l’histoire universelle grâce à une meilleure représentation intersectionnelle et de genre ont été créées et améliorées par les personnes du projet Les sans pagEs (<a href="https://fr.wikipedia.org/wiki/Projet:Les_sans_pagEs" data-type="link" data-id="https://fr.wikipedia.org/wiki/Projet:Les_sans_pagEs">Les sans pagEs</a>, 7 septembre 2023)</li>
</ul>



 



<h3 class="wp-block-heading">Quel était le programme de ces Assises ?</h3>



Une multitude d’informations précises et précieuses ont été transmises par plus de 30 professionnel·x·les et spécialistes impliqué·x·es, d’horizons complémentaires, suisses et internationaux. Le programme était composé de 6 conférences, 5 tables rondes, 9 ateliers et plusieurs événements annexes.



 



<h3 class="wp-block-heading">Qu’est-ce que je savais déjà ?</h3>



Les savoirs sont très souvent sexués et une grande partie des interactions sociales sont imprégnées par le genre. Il en va de même avec l’éducation, la formation et les représentations en général. Le numérique reflète ces faits, voire les décuple dans certains cas.



 



<h3 class="wp-block-heading">Qu’est-ce que l’on peut faire, de façon individuelle et factuelle ?</h3>



S’informer, prendre ses responsabilité, et s’investir en faveur de l’égalité et de l’équité de genre. En tant que :



<ul>
<li>citoyen·x·ne : face aux actes et aux habitudes sexistes qui habitent le quotidien, aux mots utilisés, aux représentations mises en avant, aux contenus partagés sur les réseaux sociaux</li>



<li>parent·x·e : vis-à-vis des stéréotypes autour des jouets, des jeux vidéos, de l’utilisation faite de l’ordinateur et du smartphone, des biais de genre présents dans les modèles et représentations pour les jeunes</li>



<li>professionnel·x·le : par rapport aux stéréotypes dans l’éducation et la formation, aux critères de recrutement et aux politiques internes, à la place est faite à la pluridisciplinarité des équipes</li>



<li>collègue·x : concernant les blagues verbalisées, le vocabulaire utilisé, le rapport à l’autre dans les échanges professionnels</li>
</ul>



 



<h3 class="wp-block-heading">Et l’intelligence collective dans tout ça ?</h3>



Il y a encore du chemin à faire pour changer les biais de genre. Qu’il s’agisse de réduire les <a href="https://www.excellence-decisionnelle.com/tag/bruit-cognitif/">biais et le bruit</a> de l’intelligence artificielle, de proposer des solutions numériques plus inclusives, et de parvenir à l’<a href="https://sdgs.un.org/fr/goals">égalité des sexes et autonomiser toutes les femmes et les filles</a>, qui est l’objectif 5 mentionné par les Objectifs de Développement Durable (ODD) universels de l’Agenda 2030 des Nations Unies. Et ce chemin est à créer et emprunter ensemble : femmes, hommes, et personnes non binaires.

Vers une égalité de genre dans le numérique ?

Hello ! Je suis très heureuse d’avoir rejoint l’équipe d’Antistatique en tant que développeuse back-end.



Hello c’était aussi le nom de mon premier sprint. Donc, commençons par faire connaissance.



Moi c’est Justine, j’ai 32 ans. J’ai tout récemment déménagé en région Lausannoise, après avoir longtemps habité dans un village de montagne 🏔️. En arrivant chez Antistatique, j’ai découvert que chaque personne faisait partie de l’équipage d’un vaisseau. J’aime bien parfois me décrire comme une extraterrestre, heureusement pour elleux, nous ne sommes pas dans un film de Ridley Scott ! 👽



<h3 class="wp-block-heading">2ème sprint iridescent</h3>



3..2..1..Décollage 🚀 ! Notre vaisseau (l&#8217;Arcadia) vole à toute vitesse et traverse les couches iridescentes des nuages! Nous sommes en orbite, il est temps de prendre mon poste au sein de l’équipe.



Parlons de mon rôle chez Antistatique ! J’ai rejoint l’équipe en tant que développeuse back-end. Pour vous faire une idée, je suis la personne qui s’occupera de la gestion du moteur ainsi que des algorithmes de vol afin que toute l’équipe puisse vous amener à votre destination en toute sécurité.



J’exerce le métier de développeuse depuis maintenant une dizaine d’années. J’ai eu l’occasion de réaliser de nombreux projets web au sein de différentes agences : du simple site internet vitrine à l’application de gestion et passant par des sites e-commerce.



Je me suis spécialisée en développement PHP, notamment sur WordPress et Laravel. Mais surtout je touche à tout, et j’adore coder !



<h3 class="wp-block-heading">Je suis développeuse</h3>



Je crois que je savais depuis très longtemps que je voulais être développeuse. Déjà à l’adolescence je m’initiais aux bases du code. Je me souviens avoir codé pendant des heures un petit jeu sur ma Nintendo DS hackée. Je n’ai plus le code source (qui ne devait pas être beau à voir), mais une version du jeu est toujours sur ma DS, et fonctionne toujours très bien !



C’est donc naturellement que j’ai commencé des études d’informatique au CPNV à Sainte-Croix. Tout d’abord pour obtenir un CFC d’informaticienne et ensuite un diplôme ES en développement d’applications.



<h3 class="wp-block-heading">Et en dehors du code ?</h3>



Ce que j’aime par-dessus tout, c’est être créative. Lors de mon temps libre, je joue souvent à des jeux-vidéo. Notamment à Minecraft, dans lequel j’explore l’architecture et crée des constructions contemporaines réalistes.



En parlant de jeux-vidéo, je m’intéresse à la création ludique et au game design. Un domaine passionnant qui mêle technique et art, mais surtout qui est très fun ! Je participe régulièrement à des game jams, des événements qui regroupent une équipe sur un weekend pour créer des petits jeux. 🕹️



<figure class="wp-block-gallery has-nested-images columns-default is-cropped is-style-columns-6-6 wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1919" height="1080" data-id="12350" src="https://content.antistatique.net/app/uploads/2023/08/1673429361241.jpg" alt="" class="wp-image-12350" srcset="https://content.antistatique.net/app/uploads/2023/08/1673429361241.jpg 1919w, https://content.antistatique.net/app/uploads/2023/08/1673429361241-300x169.jpg 300w, https://content.antistatique.net/app/uploads/2023/08/1673429361241-768x432.jpg 768w, https://content.antistatique.net/app/uploads/2023/08/1673429361241-1536x864.jpg 1536w" sizes="(max-width: 1919px) 100vw, 1919px" /></figure>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1919" height="1080" data-id="12348" src="https://content.antistatique.net/app/uploads/2023/08/1673429361152.jpg" alt="" class="wp-image-12348" srcset="https://content.antistatique.net/app/uploads/2023/08/1673429361152.jpg 1919w, https://content.antistatique.net/app/uploads/2023/08/1673429361152-300x169.jpg 300w, https://content.antistatique.net/app/uploads/2023/08/1673429361152-768x432.jpg 768w, https://content.antistatique.net/app/uploads/2023/08/1673429361152-1536x864.jpg 1536w" sizes="(max-width: 1919px) 100vw, 1919px" /></figure>
</figure>



Deux activités que j’aime diffuser en stream sur internet. Soit pour simplement jouer et me détendre ou pour coder et partager mes connaissances en live.



En parallèle, je m&#8217;investis bénévolement avec l’équipe du <a href="https://webmardi.ch">Webmardi</a>. Une association qui propose un talk par mois autour des métiers du web.



J’aurais encore beaucoup à vous dire sur mes autres activités, mais ce serait beaucoup trop long.



L’alarme retentit dans le vaisseau et m’arrache à mes rêveries. Nous allons passer en hyperespace, on a besoin de moi dans la salle des machines. Un dernier instant, je regarde les étoiles briller au travers de mon hublot et me remets à imaginer les aventures qui m’attendent.



Je retourne à mon poste pendant que, dans un déluge de lumière, notre navette s’envole et disparaît vers de nouvelles destinations ! 🪐

Justine, embarquement immédiat !

<h2 class="wp-block-heading">Laurent nous a rejoint il y a bientôt une année, c&#8217;est donc plus que le moment d&#8217;en apprendre davantage sur lui! </h2>



Co-fondateur du Bureau Duplex, il vient renforcer notre équipe avec son savoir-faire en direction artistique, conception et développement de marques, création de concepts de communication.



Grâce à lui, l&#8217;agence compte un sportif de plus et il nous sensibilise à la cause animale et écologique.



<h2 class="wp-block-heading">Prêt·e à découvrir un peu mieux Laurent ?</h2>



<h3 class="wp-block-heading">1. Quelques mots-clés pour te définir ?</h3>



Enthousiaste, déterminé, simple, sensible, têtu, un peu maladroit aussi.



<h3 class="wp-block-heading">2. Une cause qui te tient à cœur ?</h3>



<meta charset="utf-8"></meta>Je suis très sensible à la lutte pour le climat, la cause animale et aux inégalités de manière générale.



Du coup, j&#8217;ai décidé de mettre la souffrance animale avant mon propre confort: je suis donc vegan depuis plus d&#8217;une année, après avoir été végétarien pendant plus de 5 ans.



Aussi, j&#8217;aimerais m&#8217;investir et être plus actif: en attendant je fais des dons, je suis les médias qui en parlent et j&#8217;essaie de relayer leurs messages. Je suis convaincu qu&#8217;expliquer et encourager permet aux gens de mieux appréhender les idées du changement. J&#8217;essaie de ne jamais être dans le jugement et je me documente le plus possible pour déconstruire les idées reçues.



<h3 class="wp-block-heading">3. Une recette fétiche à nous partager ?</h3>



Un bon petit curry de légumes tout simple, vite fait bien fait. 



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1950x2600.jpg" alt="Vegan confort food - cette photo n'est pas le curry de la recette, mais un autre plat vegan appétissant." class="wp-image-12255" srcset="https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



Photo : Vegan confort food &#8211; cette photo n&#8217;est pas le curry de la recette, mais un autre plat vegan appétissant.



Allez, je vous liste les ingrédients: ail, échalote, légumes variés (patate douce, courgette, aubergine, carotte, par exemple), pâte de curry rouge ou vert (ça pique plus ou moins), concentré de tomates, cumin, lait de coco, poivre/sel et jus de citron, un peu de basilic haché et un peu de piment, c&#8217;est toujours une bonne idée le piment. Parfois j&#8217;ajoute même du tofu et/ou quelques champignons.



Tout ça servi avec un riz au jasmin, une tombée de lait de coco et quelques feuilles de coriandre.



C&#8217;est fait en 20 min, ça se garde plusieurs jours et ça ne fait du mal à personne. 



<h3 class="wp-block-heading">4. Un voyage marquant ?</h3>



Il est tout récent: un mois à vélo à travers l&#8217;Espagne et la France 



La plupart du voyage s&#8217;est faite en autonomie (préparer sa nourriture, dormir sous tente). Il y a évidement des moments ou j&#8217;ai dormi au camping et même à l&#8217;hôtel, surtout dans les grandes villes.



Je me suis rendu compte que le vrai confort c&#8217;est d&#8217;avoir un lit et une salle de bains, donc même les hôtels qu&#8217;on pourrait qualifier de miteux, avaient un petit goût de palace. Il faut dire qu&#8217;après une bonne grosse journée (entre 150 et 200 km) sous le cagnard ou le déluge espagnol, c&#8217;est royal se laver et dormir au sec. 



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1950x2600.jpg" alt="Côte méditerranéenne " class="wp-image-12265" srcset="https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



Photo : Côte méditerranéenne



Je suis donc parti de Lausanne en train pour rejoindre Perpignan, mon point de départ. Depuis là, direction la côte, en traversant successivement la Catalogne, la région de Valence puis la région de Murcie, l&#8217;Andalousie pour arriver à finalement à Gibraltar. Le détroit, un lieu magique et magnétique, je l&#8217;avoue, a marqué la fin de cette surprenante et sublime côte méditerranéenne. 



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Gibraltar-1950x2600.jpg" alt="Gibraltar" class="wp-image-12261" srcset="https://content.antistatique.net/app/uploads/2023/07/Gibraltar-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2023/07/Gibraltar-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/Gibraltar-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/Gibraltar-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2023/07/Gibraltar-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2023/07/Gibraltar-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



Photo : Détroit de Gibraltar



Et puis, j&#8217;ai commencé à remonter dans les terres en traversant tout le pays: Ronda, Antequera, Grenade, Madrid, les Hauts-Plateaux de la région d&#8217;Aragon, avant d&#8217;arriver à Pampelune et terminer ce périple espagnol dans le Royaume de Navarre. J&#8217;ai encore en tête un souvenir vif des Bardenas Reales, un désert de formations argileuses, un spectacle complètement lunaire que j&#8217;ai traversé avant mon arrivée à Pampelune. Un des points forts de ce voyage sans doute, tant sur le plan émotionnel que physique. Il s&#8217;est passé un truc ouf ce jour-là. 



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1950x2600.jpg" alt="Bardenas Reales" class="wp-image-12263" srcset="https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



Photo : Bardenas Reales



Après ça, j&#8217;ai entamé ma dernière étape en Espagne, en rejoignant Saint Sébastien, une petite ville sur la côte atlantique. L&#8217;arrivée s&#8217;est faite par le mont Urgull, véritable balcon naturel d&#8217;où on appréhende une grande partie de la ville, l&#8217;océan et les paysages vallonnés des environs, à couper le souffle. Deux jours plus tard j&#8217;arrivais finalement à Bordeaux, la fin de ce voyage après avoir roulé le long de la côte Atlantique et ses interminables forêts des Landes.



Ce voyage est inoubliable: avancer chaque jour et vivre autant de changements, que ce soit de paysages, de conditions météo, d&#8217;altitude, de couleurs, d&#8217;énergies et avoir le temps et la disponibilité pour moi-même, le temps de vivre mes émotions et de les comprendre, c&#8217;était vraiment précieux. Ces 23 jours sur la route ont été fabuleux, j&#8217;en ressors grandi et serein.



<h3 class="wp-block-heading">5. Ton plus grand défi sportif ?</h3>



Je crois que c&#8217;est ce voyage dont je viens de parler et celui que j&#8217;ai réalisé l&#8217;année passée (Lausanne &#8211; Stockholm à vélo). 



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/La-machine-1950x2600.jpg" alt="La machine" class="wp-image-12268" srcset="https://content.antistatique.net/app/uploads/2023/07/La-machine-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2023/07/La-machine-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/La-machine-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/La-machine-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2023/07/La-machine-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2023/07/La-machine-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



Photo : Mon fidèle destrier



En plus d&#8217;être sportifs, ces voyages ont une dimension humaine incontestable.



Bouger de manière douce et active, avec un impact environnemental réduit permet de voyager différemment. J&#8217;allie deux choses que j&#8217;aime particulièrement: le sport et les voyages. Ces voyages sont évidemment de gros défis sportifs et me permettent de repousser mes propres limites (physiques et mentales), de profiter de rencontres inattendues et de découvrir des territoires insoupçonnés, même à quelques kilomètres de chez moi.



J&#8217;ai adoré être dans cette intensité physique. Elle pousse à être dans le moment présent, à se raccrocher à la réalité du moment.



<h3 class="wp-block-heading">6. Tes sources d&#8217;inspiration ?</h3>



Elles sont de moins en moins définies: il y a quelques années, c&#8217;étaient surtout des studios graphiques réputés ou des indépendants ultra-créatifs, des designers en tout genre, les voyages lointains qui m&#8217;inspiraient. Maintenant, ce sont plutôt des sources intérieures et simples que je vais chercher, par exemple dans la nature, le sport et aussi dans les connexions humaines. Ça évolue, tout est en mouvement, toujours.



J&#8217;en trouve aussi à travers les gens qui se battent pour le climat, la planète, les minorités, la cause animale. C&#8217;est très fort. J&#8217;admire les personnes qui sont capables de s&#8217;oublier et changer d&#8217;échelle, de point de vue, voir les choses plus globalement.



<h3 class="wp-block-heading">7. Le métier que tu rêvais de faire étant enfant ?</h3>



J&#8217;ai été très tôt inspiré par l&#8217;architecture. J&#8217;en ai fait mon premier métier, j&#8217;ai côtoyé ce milieu durant quelques années, mais ça ne s&#8217;est pas révélé être ce que je voulais faire au final. Le graphisme a pris le relai et c&#8217;est dans ce domaine que je me suis le plus épanoui jusqu&#8217;à aujourd&#8217;hui. J&#8217;aimerais beaucoup réussir dans le futur à me rapprocher des causes qui me sont chères et pourquoi pas les implémenter dans mon travail. Un besoin d&#8217;authenticité, sans doute.



<h3 class="wp-block-heading">8. As-tu un prochain gros projet ?</h3>



Oui! Il est encore très flou, mais je songe à partir voyager à vélo (et non pas en vacances), partir sans trajectoire &#8220;définie&#8221; ni date de retour. Il n&#8217;y a pas que celui-là, mais on a pas assez de temps pour ça! 🙂 Ca fait du bien de rêver, non?



<h3 class="wp-block-heading">9. Un livre qui traine sur ta table de chevet ?</h3>



Il y en a toujours plein! 



Ils sont naturellement en lien et propres à ce que je vis: j&#8217;arrive parfois être très focus sur un ouvrage et d&#8217;autres fois je suis sur plein de trucs en même temps et quand je suis trop excité de la vie et par mes projets, je n&#8217;arrive plus à lire du tout, pendant un temps.



(Laurent va vérifier ce qu&#8217;il a sur sa table de nuit, pour être sûr et revient avec plusieurs livres).



Là je lis Cher Connard, de Virginie Despentes et l&#8217;Evénement de Annie Ernau. Je lis aussi Forêt, un magazine de la maison d&#8217;édition &#8220;La Relève et la Peste&#8221;.



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="697" height="639" src="https://content.antistatique.net/app/uploads/2023/07/La-relèvelapeste.jpg" alt="La relève &amp; la peste" class="wp-image-12257" srcset="https://content.antistatique.net/app/uploads/2023/07/La-relèvelapeste.jpg 697w, https://content.antistatique.net/app/uploads/2023/07/La-relèvelapeste-300x275.jpg 300w" sizes="(max-width: 697px) 100vw, 697px" /></figure>



Photo : Forêts de La relève &amp; la peste



Je lis et relis aussi un livre qui s&#8217;appelle Two Years on a Bike : c&#8217;est l&#8217;histoire d&#8217;un graphiste hollandais, qui part voyager à vélo pendant deux ans. Il a réalisé lui-même toutes les photos, rédigé les textes et mis en pages son livre. Inspirant vous avez dit? C&#8217;est clair, à fond!



<h3 class="wp-block-heading">10. Tu ne vas pas y couper : plutôt chien ou chat ? 😉</h3>



Je crois que la réponse est claire, j&#8217;aime tous les animaux mais je crois que Marius ne serait pas du tout content que je dise chat!



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1602" height="2137" src="https://content.antistatique.net/app/uploads/2023/07/Mariusmoi.jpg" alt="Marius et Laurent" class="wp-image-12251" srcset="https://content.antistatique.net/app/uploads/2023/07/Mariusmoi.jpg 1602w, https://content.antistatique.net/app/uploads/2023/07/Mariusmoi-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2023/07/Mariusmoi-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2023/07/Mariusmoi-1151x1536.jpg 1151w, https://content.antistatique.net/app/uploads/2023/07/Mariusmoi-1535x2048.jpg 1535w" sizes="(max-width: 1602px) 100vw, 1602px" /></figure>



Photo : Marius et Laurent



&#8212;



Merci Laurent ! On a hâte de continuer à te découvrir !

10 questions pour découvrir Laurent

Au-delà de ce titre aguicheur, il s&#8217;agit de comparer sous divers angles, <a href="https://remix.run/" target="_blank" rel="noreferrer noopener">Remix</a>, le bientôt plus si nouveau framework des créateurs de react-router et de unpkg, et <a href="https://nextjs.org/" target="_blank" rel="noreferrer noopener">Next.js</a> que nous utilisons activement à l&#8217;agence depuis quelques années. L&#8217;idée est de comprendre les forces et faiblesses de chacun afin de déterminer quels types de projets peuvent bénéficier de l&#8217;un ou l&#8217;autre.



<h2 class="wp-block-heading">Disclaimer</h2>



Cela peut sembler évident, mais toute cette comparaison se base sur les versions actuelles de Remix (1.18) et de Next.js (13.4). Beaucoup d&#8217;aspects vont probablement continuer d&#8217;évoluer dans les prochains mois et rendront certaines comparaisons totalement obsolètes, mais tant mieux.



Personnellement, je trouve qu&#8217;il n&#8217;y a pas eu d&#8217;aussi belle époque qu&#8217;actuellement pour faire du développement JavaScript; toutes les solutions et tous les frameworks proposés sont excellents (même Angular), tous vont offrir des résultats très aboutis et une expérience de développement aux petits oignons !



<h2 class="wp-block-heading">React au centre</h2>



Avant d&#8217;aller plus loin, il est également important de préciser que ces deux frameworks sont construits autour de <a href="https://react.dev/" target="_blank" rel="noreferrer noopener">React.js</a>. Désireux de demeurer, pour l&#8217;instant, dans cet écosystème, voici pourquoi nous avons choisi de confronter Next.js à Remix, et pas à Nuxt ou Sveltkit qui n&#8217;en demeurent pas moins intéressants.



React n&#8217;étant “qu&#8217;une” librairie de gestion d&#8217;interfaces utilisateur, ces frameworks apportent des solutions pour gérer les routes, le rendu et la logique coté serveur et tout l&#8217;outillage qui va servir à faire tourner, builder et déployer notre application.



<h2 class="wp-block-heading">La philosophie de Remix</h2>



Premièrement, il s&#8217;agit de séparer très clairement à la logique serveur et cliente. Contrairement aux débuts de Next.js avec son getInitialProps exécuté tantôt sur le serveur, tantôt dans le navigateur; Remix marque clairement la frontière entre serveur et client par le nom des fichiers <code>xyz.client</code> et<code>xyz.server</code> et par les méthodes exposées et utilisées par les routes.



Deuxièmement, il y a une vraie volonté de Remix de se rapprocher au plus prêt des standards du web. D&#8217;une part pour éviter toutes frictions d&#8217;adoption, mais aussi pour être le plus cohérent possible. Cela passe par les attributs HTML, l&#8217;utilisation de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noreferrer noopener">Fetch API</a> coté serveur ou par le fonctionnement et la gestion des formulaires.



Ensuite il s&#8217;agit d&#8217;utiliser JavaScript à bon escient : améliorer l&#8217;expérience utilisateur·trice. Évidemment que tout le langage de notre application Remix est en JavaScript (TypeScript idéalement), mais le JavaScript envoyé à l&#8217;internaute se veux le plus léger et performant possible. Et contrairement à Next.js, Remix nous offre l&#8217;option de désactiver l&#8217;hydratation React d&#8217;une ou plusieurs routes par un simple <code>export const handle = { hydrate: false; };</code>.



Pour finir, Remix favorise l&#8217;abstraction minimum. Il s&#8217;agit de garder en général les termes au plus proches de l&#8217;origine,comme Next.js sait également très bien le faire.



<h2 class="wp-block-heading">Remix en deux mots</h2>



Maintenant qu&#8217;on situe sa philosophie : qu&#8217;est-ce que propose Remix ?



Pour la faire courte, Remix c&#8217;est :



<ul><li>Un compilateur (basé sur <a href="https://esbuild.github.io/" target="_blank" rel="noreferrer noopener">esbuild</a>)</li><li>Un serveur HTTP</li><li>Un framework serveur <del>M</del>VC, qui va laisser le soin du modèle aux développeurs·euses selon les besoins du projet</li><li>Un framework client avec l&#8217;aide de React</li></ul>



Remix offre des “stacks” ou templates de projets qui vont comprendre une préconfiguration :



<ul><li>de la base de données</li><li>des processus de déploiements</li><li>du système d&#8217;authentification</li><li>des tests</li><li>des linters et de TypeScript</li></ul>



<h2 class="wp-block-heading">Router</h2>



Le premier gros avantage d&#8217;utiliser Next.js ou Remix réside dans leurs routers. À l&#8217;époque où j&#8217;écris cet article (en juillet de l&#8217;an de grâce 2023), Next.js possède deux routers; le Page Router et l&#8217;App Router. Je ne vais pas rentrer dans les détails ici, mais certaines comparaisons ne vont se faire qu&#8217;avec l&#8217;un ou l&#8217;autre et parfois, les deux. Maintenant, l&#8217;App Router est encore relativement frais, donc il est possible que certaines de ses possibilités m&#8217;échappent encore.



Ce qu&#8217;il faut déjà retenir c&#8217;est que tous ces routers, Remix compris, sont file-based; ce qui veut dire que l&#8217;arborescence et le nom des fichiers vont définir les URLs (routes) de notre application. Maintenant, mis à part quelques différences de syntaxe, Next.js et Remix offre les mêmes possibilités dans le naming pour générer des segments de route dynamique. On notera toutefois que la version 2 de Remix offre la possibilité de mettre de côté les répertoires imbriqués au profil de simple <code>.</code> dans le nom des fichiers pour marquer la hiérarchie.



Pour ce qui est de l&#8217;anatomie d&#8217;une route, soit le fichier qui va rendre notre page finale, les deux frameworks fonctionnent d&#8217;une manière assez similaire : exporter une méthode par défaut pour le rendu et d&#8217;autres méthodes pour gérer les spécificités. Dans les choses très bien pensées chez Remix, il y a l&#8217;export des méthodes loader pour exécuter une logique GET coté serveur et action pour exécuter une logique POST, PUT, etc coté serveur. Next.js offre quelque chose de similaire avec getServerSideProps pour la logique GET dans le Page Router ou les Server Actions pour la logique <meta charset="utf-8">POST, PUT, etc dans l&#8217;App Router.



Très pratique également, Remix offre de base un CatchBoundary et un ErrorBoundary pour les interceptions. Il est également de redéfinir très facilement les headers, meta et links d&#8217;une route en les exportant sans passer par un fichier <code>_document.tsx</code> ou <code>layout.tsx</code> comme dans Next.js.



Nos deux frameworks gèrent la revalidation d&#8217;une route; Remix avec la méthode shouldRevalidate qui doit retourner un boolean et Next.js avec l&#8217;option revalidate du Page Router ou la méthode revalidatePath de l&#8217;App Router.



<h2 class="wp-block-heading">Composants, Hooks, Utils</h2>



Remix comme Next.js va proposer des composants React qui vont simplifier l&#8217;intégration de certaines mécaniques. Les deux exposent les composants équivoques Link et Script. Remix va proposer en plus Await, Form, Links, LiveReload, Meta, NavLink, Outlet, PrefetchPageLinks et ScrollRestoration, mais contrairement à Next.js, pas de composant Image.



Next.js offre déjà quelques hooks comme useRouter ou useParams, mais Remix en propose six fois plus. Beaucoup sont directement hérités de react-router comme useParams ou useNavigate, et d&#8217;autres uniquement pour Remix comme useLoaderData ou useActionData. Ce qui est appréciable dans cette diversité, c&#8217;est la simplicité d&#8217;usage faite de ces hooks.



Pour finir, comme Next.js, Remix offre des utils pour gérer des choses comme les cookies et les redirections. Chacun a ici sa subtilité.



<h2 class="wp-block-heading">En conclusion</h2>



Vous avez directement sauté à ce chapitre, tant mieux, voici quel framework choisir selon votre projet. En soi, les deux proposent une approche et des fonctionnalités très similaires, mais aussi une très bonne expérience de développement.



Le premier point déterminant est la capacité à faire du Static Site Generation (SSG), Next.js en est capable avec son Page Router. Il permet de prégénérer les pages et de les revalider (rebuilder) à la demande. Remix n&#8217;est pas positionné dans ce sens, plutôt que de générer les pages, il pousse à s&#8217;appuyer sur les performances de systèmes distribués. Maintenant, si vous voulez faire un site vitrine ou un blog avec du SSG, Remix n&#8217;est pas pour vous (contrairement à <a href="https://astro.build/" data-type="URL" data-id="https://astro.build/" target="_blank" rel="noreferrer noopener">Astro</a> 🤫).



Sachant cela, on comprend rapidement que Remix s&#8217;adresse à des projets plus orientés applicatifs au même titre que l&#8217;App Router de Next.js.



En dehors de ça, le deuxième et dernier facteur déterminant va résider dans la préférence personnelle entre la philosophie, la syntaxe et les subtilités de Remix ou de Next.js. Mettez les mains dedans et choisissez lequel vous parle le plus pour développer votre application. Dans tous les cas, vous n&#8217;allez pas faire de mauvais choix !

Remix vs Next.js

Cet article vous propose un retour sur l&#8217;événement organisé par La Foncière sur le thème du béton dans un contexte de responsabilité environnementale. Et le parallèle avec le béton dans nos métiers du web.



Merci à <a href="https://lafonciere.ch/">Investissements Fonciers SA</a>, plus connu sous le nom de la Foncière, de m&#8217;avoir invité à leur événement. Nous avons la chance d&#8217;entretenir une collaboration fructueuse avec ce fonds de référence depuis plusieurs années. Nous nous occupons de leur présence web. Nous avons réalisé deux versions majeures du site internet <a href="https://lafonciere.ch/">lafonciere.ch</a> et travaillons également sur la partie <a href="https://lafonciere.ch/six-newsletter">newsletter</a>.



<h2 class="wp-block-heading">Sortir de notre environnement</h2>



Cet événement nous a offert l&#8217;opportunité de sortir de nos bureaux et de rencontrer des professionnels, tout en nous permettant d&#8217;en apprendre davantage sur un sujet d&#8217;une importance capitale : le défi de la durabilité dans un secteur qui a un impact considérable.



<figure class="wp-block-image size-full is-style-large"><img decoding="async" loading="lazy" width="1524" height="1257" src="https://content.antistatique.net/app/uploads/2023/06/geneve_vue_depuis_le_lieu_de_conference.jpg" alt="" class="wp-image-12116" srcset="https://content.antistatique.net/app/uploads/2023/06/geneve_vue_depuis_le_lieu_de_conference.jpg 1524w, https://content.antistatique.net/app/uploads/2023/06/geneve_vue_depuis_le_lieu_de_conference-300x247.jpg 300w, https://content.antistatique.net/app/uploads/2023/06/geneve_vue_depuis_le_lieu_de_conference-768x633.jpg 768w" sizes="(max-width: 1524px) 100vw, 1524px" /><figcaption>La vue depuis le lieu de l&#8217;événement FER Genève</figcaption></figure>



<h2 class="wp-block-heading">Le béton, lourd sujet.</h2>



Le thème de cette édition était : &#8220;Quelle place pour le béton dans la transition écologique ?&#8221; Nous avons commencé par une introduction sur les défis majeurs auxquels nous sommes confrontés (la Suisse utilise des dizaines de milliers de tonnes de béton chaque année). Trois intervenants passionnants ont abordé ce sujet sous différents angles.



<figure class="wp-block-image size-full is-style-large"><img decoding="async" loading="lazy" width="1831" height="1831" src="https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere.jpg" alt="" class="wp-image-12108" srcset="https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere.jpg 1831w, https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2023/06/rencontres_la_fonciere-1536x1536.jpg 1536w" sizes="(max-width: 1831px) 100vw, 1831px" /><figcaption>Michael Loose, CEO de Investissements Fonciers SA</figcaption></figure>



<h2 class="wp-block-heading">Transition entre cycles et tendances:</h2>



En se penchant sur la situation économique en Suisse et dans le monde, <a href="https://ch.linkedin.com/in/val%C3%A9rie-lemaigre">Valérie Lemaigre</a> a tenu un discours résolument rassurant et optimiste. Elle a expliqué les causes et les défis que les chiffres révèlent. Il est important de noter que les transitions énergétique et démographique que nous vivons viennent perturber et challenger les acteurs de l&#8217;économie. Selon Valérie, il ne s&#8217;agit pas d&#8217;une crise structurelle et les indicateurs vont s&#8217;améliorer.



<h2 class="wp-block-heading">Le béton en question</h2>



Ensuite, <a href="https://www.aliabengana.com/about">Alia Bengana</a> nous a dressé un état des lieux du béton, en mettant en évidence les principaux impacts de sa production sur l&#8217;environnement ainsi que les alternatives possibles.



<figure class="wp-block-image size-full is-style-large"><img decoding="async" loading="lazy" width="1965" height="1266" src="https://content.antistatique.net/app/uploads/2023/06/beton_consequences.jpg" alt="" class="wp-image-12110" srcset="https://content.antistatique.net/app/uploads/2023/06/beton_consequences.jpg 1965w, https://content.antistatique.net/app/uploads/2023/06/beton_consequences-300x193.jpg 300w, https://content.antistatique.net/app/uploads/2023/06/beton_consequences-768x495.jpg 768w, https://content.antistatique.net/app/uploads/2023/06/beton_consequences-1536x990.jpg 1536w" sizes="(max-width: 1965px) 100vw, 1965px" /><figcaption>Alia Bengana présente les 4 impacts principaux de l&#8217;utilisation du béton</figcaption></figure>



<h2 class="wp-block-heading">Le réemploi, pourquoi ?</h2>



Finalement, Raphaël Bach nous a présenté les activités de <a href="https://materiuum.ch/">Matériuum</a>, une entreprise qui vise à améliorer la réutilisation des matériaux. Il nous a invités à réfléchir à ce qui différencie un déchet d&#8217;une ressource. Pendant la phase de discussion et de questions, Raphaël a rappelé que nous n&#8217;avons jamais encore vécu une transition énergétique, citant notamment les travaux de Jean-Baptiste Fressoz.



<h2 class="wp-block-heading">Un temps de débat et de questions</h2>



Au-delà du plaisir d&#8217;échanger et de débattre avec des personnes passionnantes, ces questionnements sur la durabilité au sein de nos entreprises et de nos domaines sont véritablement vitaux. Ils renforcent notre fierté de travailler avec un acteur engagé pour l&#8217;avenir.



<h2 class="wp-block-heading">Peut-on établir un parallèle avec notre industrie ?</h2>



Il est intéressant de se demander ce qui, dans le domaine du web, correspond au béton dans le monde de l&#8217;immobilier. Sachant qu&#8217;Internet a une empreinte carbone désastreuse, nous pouvons effectivement établir un parallèle. 



Nous nous efforçons d&#8217;améliorer la situation et de changer nos habitudes dans nos projets web. En travaillant dès la conception jusqu&#8217;au développement, nous cherchons à réduire le poids des pages et à être plus responsables de l&#8217;attention des utilisateurs. 



Bien que nous n&#8217;en soyons pas encore arrivés à la fin du chemin, nous nous engageons à <a href="https://antistatique.net/blog/cest-quoi-la-durabilite">réduire l&#8217;impact environnementa</a>l et à améliorer notre approche en matière d&#8217;éco-conception.



<h2 class="wp-block-heading">Au fait, le brutalisme dans le web, ça donne quoi ?</h2>



On dérive complètement du sujet de la conférence sur la durabilité du béton. Mais je ne pouvais m&#8217;empêcher d&#8217;essayer de comprendre cette envie irrésistible d&#8217;utiliser le béton pour construire. Il y a bien l&#8217;excuse en Suisse, des barrages et autres ponts qui façonnent notre imagination. 



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1262" height="940" src="https://content.antistatique.net/app/uploads/2023/06/2.6-3_©Frank-Gygli-Médiathèque-Valais-Martigny.jpg" alt="" class="wp-image-12100" srcset="https://content.antistatique.net/app/uploads/2023/06/2.6-3_©Frank-Gygli-Médiathèque-Valais-Martigny.jpg 1262w, https://content.antistatique.net/app/uploads/2023/06/2.6-3_©Frank-Gygli-Médiathèque-Valais-Martigny-300x223.jpg 300w, https://content.antistatique.net/app/uploads/2023/06/2.6-3_©Frank-Gygli-Médiathèque-Valais-Martigny-768x572.jpg 768w" sizes="(max-width: 1262px) 100vw, 1262px" /><figcaption>Le chantier de la Grande Dixence, vers 1955 – Médiathèque du Valais</figcaption></figure>



Lors de la conférence, on nous explique que c&#8217;est un matériaux qui permet de faire toutes les formes possibles et donne énormément de possibilités créatives. Pensez à l&#8217;opéra de Sydney par exemple ou au siège de la Vaudoise Assurance à Lausanne (presque pareil :-P). 



<figure class="wp-block-image size-full is-style-full-width"><img decoding="async" loading="lazy" width="836" height="610" src="https://content.antistatique.net/app/uploads/2023/06/2.7-4_AcmEPFL_Fds-Tschumi_0060.01.0098_09.jpg" alt="" class="wp-image-12102" srcset="https://content.antistatique.net/app/uploads/2023/06/2.7-4_AcmEPFL_Fds-Tschumi_0060.01.0098_09.jpg 836w, https://content.antistatique.net/app/uploads/2023/06/2.7-4_AcmEPFL_Fds-Tschumi_0060.01.0098_09-300x219.jpg 300w, https://content.antistatique.net/app/uploads/2023/06/2.7-4_AcmEPFL_Fds-Tschumi_0060.01.0098_09-768x560.jpg 768w" sizes="(max-width: 836px) 100vw, 836px" /><figcaption>Un béton brut anobli, dont la précision l’assimile à la pierre calcaire – Jean Tschumi, siège de la Mutuelle Vaudoise Accident, Lausanne, 1951-1956 – Archives de la construction moderne – EPFL. Fonds Jean Tschumi.</figcaption></figure>



Cette fascination pour ce que le béton a révolutionné dans le monde de l&#8217;architecture vient des possibilités de créer des structures avec moins de contraintes techniques. On façonne le projet au grès de notre imagination. Elle vient également du désir de rendre apparente les fondations structurelles de la création. 



Si l&#8217;on revient à la base de cette fascination, qui dépasse le matériau utilisée et se concentre sur cette notion de structure apparente il y a également un courant <a href="https://brutalist-web.design/">brutalisme du webdesign</a>. 



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="973" height="707" src="https://content.antistatique.net/app/uploads/2023/06/brutalisme_website_guidelines.png" alt="" class="wp-image-12104" srcset="https://content.antistatique.net/app/uploads/2023/06/brutalisme_website_guidelines.png 973w, https://content.antistatique.net/app/uploads/2023/06/brutalisme_website_guidelines-300x218.png 300w, https://content.antistatique.net/app/uploads/2023/06/brutalisme_website_guidelines-768x558.png 768w" sizes="(max-width: 973px) 100vw, 973px" /></figure>



Une des définitions est un courant du design qui se concentre sur le contenu, sur les interactions disponible dans la page et à respecter le comportement du navigateur (scroll, page précédente, &#8230;). Un contenu qui s&#8217;adapte parfaitement à tous les types d&#8217;écran et qui expose fièrement sa structure. 



<h2 class="wp-block-heading">Un nouvel élan créatif, un retour aux sources</h2>



D&#8217;autres exemples contredisent ces guidelines mais proposent des expériences web orientées sur le contenu, avec une part belle aux choix typographiques. Comme les exemples de <a href="https://www.brutalistwebsites.com/">Brutaslitwebsites</a>. Ces exemples donne presque un sentiment de nostalgie d&#8217;une période ou aucun site ne se ressemblait.



<figure class="wp-block-image size-full is-style-full-width"><img decoding="async" loading="lazy" width="1757" height="1294" src="https://content.antistatique.net/app/uploads/2023/06/gallery_brutalisme_websites.png" alt="" class="wp-image-12106" srcset="https://content.antistatique.net/app/uploads/2023/06/gallery_brutalisme_websites.png 1757w, https://content.antistatique.net/app/uploads/2023/06/gallery_brutalisme_websites-300x221.png 300w, https://content.antistatique.net/app/uploads/2023/06/gallery_brutalisme_websites-768x566.png 768w, https://content.antistatique.net/app/uploads/2023/06/gallery_brutalisme_websites-1536x1131.png 1536w" sizes="(max-width: 1757px) 100vw, 1757px" /></figure>



C&#8217;est là où le parallèle s&#8217;arrête car les sites qui respectent les guidelines du brutalisme webdesign en se concentrant sur l&#8217;essentiel sont à priori bien moins gourmands en ressources.



Tous ces courants nous permettent d&#8217;évoluer dans la manière d&#8217;utiliser le média digital. Chaque jour, chaque nouvelle page originale publiée représente une avancée dans la créativité humaine pour interagir et communiquer avec nos semblables. Une des conclusion de la conférence et qu&#8217;il est vital de repenser nos manières de faire. De voir ce qu&#8217;il est possible de faire en bois, en paille et en terre et penser à plus long terme et explorer d&#8217;anciennes méthodes avec nos outils et nos défis actuels.

Rencontres La Foncière – Transition écologique, la fin du béton ?

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

<h2 class="wp-block-heading">Partager l&#8217;aventure</h2>



Une aventure prend tout son sens quand on la partage. Quand on la raconte mais surtout quand on la vit avec d&#8217;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&#8217;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.



<h2 class="wp-block-heading">Bon vent cher Guillaume Berry</h2>



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&#8217;information, design system, typographie et présentation en font l&#8217;un des meilleurs designers d&#8217;interaction que nous connaissons, avec une palette riche de compétences.



<figure class="wp-block-image size-full"><img decoding="async" 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>



Pendant quatre années, Guillaume a dirigé l&#8217;é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&#8217;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&#8217;il a apporté à notre agence.



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



<h2 class="wp-block-heading">Nouveau·elle associé·es : Noémie Sandoz et Yann Lugrin</h2>



Engagée et authentique Noémie, véritable pilier de l&#8217;agence, a commencé à travailler chez Antistatique il y a presque 10 ans. En tant que spécialiste en architecture de l&#8217;information et recherche utilisateur·trices, elle a profondément contribué à l&#8217;évolution de notre agence en réalisant des projets d&#8217;envergure. Mettant toujours l&#8217;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&#8217;hui à la Direction de l&#8217;équipe design, Noémie veille avec bienveillance au bonheur et à l&#8217;évolution de chaque membre de son équipe. Autant de raisons pour nous de lui avoir proposé de devenir associée.



<figure class="wp-block-image size-full"><img decoding="async" 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>



Yann a rejoint notre équipe il y a plus de 4 ans, mais notre histoire commune remonte bien plus loin. Nous avons eu l&#8217;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&#8217;actionnariat de l&#8217;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&#8217;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;



Nous sommes ravis de les accueillir comme nouveaux actionnaires. Leur expertise et leur engagement envers notre vision commune de ce que l&#8217;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&#8217;actionnariat de l&#8217;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.



<h2 class="wp-block-heading">La suite de l&#8217;histoire</h2>



Déjà 15 ans cette année, mais nous ne sommes qu&#8217;au début de l&#8217;histoire. Ces récents changements nous ont donné l&#8217;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.

Les associé·es d’Antistatique

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.



Le <a href="https://associationgrand.ch/" data-type="URL" data-id="https://associationgrand.ch/">GRAND</a> c&#8217;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&#8217;est l&#8217;AP).



Donc le GRAND est de retour avec comme chefs d&#8217;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 GRAND tel un phénix afin de mettre en lumière les nombreux talents de notre chère région. 



<h2 class="wp-block-heading">Les infos à savoir</h2>



<ul><li>Délai d&#8217;inscription: 1er Mai 2023</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&#8217;inscrire: <a href="https://associationgrand.ch/">https://associationgrand.ch/</a></li></ul>



<h2 class="wp-block-heading">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 &#8220;Le Temps&#8221;</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>



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 !

L’ award du GRAND est de retour

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 ?



“En Suisse, on estime qu’une personne sur cinq ressentira un stress important en raison de son activité professionnelle au cours de sa vie.” (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.



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.



<h2 class="wp-block-heading">L’intervention d’une experte !</h2>



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 “Être un « professionnel durable » dans un contexte professionnel exigeant ? ”. On a appris tellement de choses intéressantes… Voici les plus marquantes pour nous :&nbsp;



<ul><li>Reconnaître les signaux d’alerte du burnout (fatigue de tension, irritabilité, démotivation, saturation, ruminations, troubles du sommeil, isolement progressif…)</li><li>L’évaluation de plusieurs témoignages. Apprendre à classer des signes d’alertes et des symptômes 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>La différence entre le “bon et le mauvais stress”, entre le stress aigu et le stress chronique.</li><li>Faire le bilan de son environnement professionnel 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>L’importance de la récupération active pour recharger les batteries et se revitaliser.&nbsp;</li><li>Le petit kit de survie en cas de déséquilibre (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 decoding="async" 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&#8217;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 class="wp-block-heading">Un outil d’auto-bilan</h2>



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;



<ul><li>D’un côté, on doit identifier les facteurs de stress et d’usure 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). Exemple d’usures : Des conflits dans l’équipe, un manque de reconnaissance des client·e·s ou des collègues, une surcharge de travail, des interruptions trop fréquentes… </li><li>De l’autre côté, on doit identifier les ressources, ce qui nous fait du bien, dans notre travail. 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…</li></ul>



<h2 class="wp-block-heading">Et maintenant ?</h2>



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.



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.



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.



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.



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>. 



Prenez soin de vous ! ❤️

Santé mentale : la prévention du burnout

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&#8217;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>.



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



Attachez votre ceinture, on va remonter le temps!







***







<h2 class="wp-block-heading">Racontez-moi votre première &#8220;rencontre&#8221; avec l&#8217;agence Antistatique?</h2>



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



Je connaissais aussi Marc depuis longtemps grâce à l&#8217;Espoir Tramelan qui organise des camps. 



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



Après, je n&#8217;arrive plus à mettre les événements dans l&#8217;ordre:



<ul><li>août 2009: 1ère rencontre entre Liquid Concept &lt;&gt; Antistatique</li><li>Startup Weekend, dans l&#8217;é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>







<h2 class="wp-block-heading">Parlez-moi un peu de vos loisirs et de ce que vous aimez faire durant votre temps libre?</h2>



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







Yann: Quel temps libre? 😜 Non plus sérieusement, j&#8217;aime faire du jeu vidéo (ndlr: c&#8217;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! J&#8217;aime regarder le sports avec des amis (ndlr: prend aussi congé pour le Superbowl). J&#8217;aime beaucoup voyager et suis investi dans la vie civique de ma ville et du canton.







<h2 class="wp-block-heading">Quels ont été les différents rôles que vous avez eu chez Antistatique?</h2>



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



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







<h2 class="wp-block-heading">Quel a été votre &#8220;première fois&#8221; avec Internet? Quand? Et pour quel usage?</h2>



Noémie: Arrête avec tes questions! On est vieux·vieille! On s&#8217;en rappelle pas! 😀 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;







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



Avant, mon père avait un accès au réseau &#8220;Compuserve&#8221; (ndlr: oui, avant internet, il y a eu d&#8217;autres réseaux).







<h2 class="wp-block-heading">Quel types de projet aimez-vous le plus?</h2>



Noémie: J&#8217;apprécie particulièrement les projets pour les ONG. J&#8217;aime aussi les projets qui correspondent à mon éthique, dans des industries responsables environnementalement.



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







<h2 class="wp-block-heading">Vous êtes plutôt viandes rouge ou légumes vapeur sans sel ajouté?</h2>



Noémie: Ahah, Elle est tellement biaisée ta question! Personnellement, je ne mange pas d&#8217;animaux. Tous les délicieux plats végétariens et véganes me ravisent.







Yann: Tout comme pour les types de projets, j&#8217;aime la variété (ndlr: quel politicien ce Yann! 😅)







<h2 class="wp-block-heading">Vous auriez un moment &#8220;fort&#8221; à partager dans la vie de l&#8217;agence?</h2>



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







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







<h2 class="wp-block-heading">Quelle est votre pizza préférée?</h2>



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



Yann: La pizza Napoli.







<h2 class="wp-block-heading">Citez quelques adjectifs qui vous définissent bien et d&#8217;autres qui ne vous ressemblent pas du tout?</h2>



Yann: Quelle horreur, c&#8217;est quoi cet entretien d&#8217;embauche tout pourri ! 



Noémie: Pire dure&#8230; Je vais me faire virer?







<h2 class="wp-block-heading">Et enfin, quel est le style de musique que vous aimez bien ?</h2>



Noémie: On va dire plutôt, metal, Rock, et Punk.



Yann: C&#8217;est, hum, comment on appelle ça déjà? &#8220;French pop&#8221; (ndlr: chanson française). Mais pas que, je suis assez éclectique.

1o questions pour Noémie et Yann

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







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 &#8220;donne-moi tout les contacts qui ont été modifié ou créé depuis hier&#8220;. Il s&#8217;agit de la stratégie API Polling.


<div>
 
 Si vous avez déjà voyagé avec des enfants, c&#8217;est l&#8217;équivalent de &#8220;Est-ce que l&#8217;on est bientôt arrivé?&#8221; un million de fois.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Lu sur Internet (https://medium.com/swlh/an-alternative-strategy-to-api-polling-using-pub-sub-and-mqtt-40dc643dcf82)
 </div>
 </div>
</div>



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



<h2 class="wp-block-heading">Webhooks</h2>



Les Webhooks sont basés sur un système d&#8217;é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&#8217;inscrire aux événements de type &#8220;création de nouveau contact&#8221;, &#8220;modification de contact&#8221;, &#8220;suppression de contact&#8221;, etc.


<div>
 
 Cette fois, c&#8217;est moi qui annonce aux enfants quand nous sommes arrivés, seulement seule fois.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 </div>
</div>



Le format des Webhooks n&#8217;est pas normé et il n&#8217;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&#8217;indisponibilité de notre application au moment de la communication).



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



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







<h2 class="wp-block-heading">Prochainement, les Webhooks dans Symfony?</h2>



Et c&#8217;est encore tout frais, mais à l&#8217;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 &#8220;Remote Events&#8221;) dans Symfony. 



<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>











Pour conclure, les webhooks permettent souvent d&#8217;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!

Notre enthousiasme est contagieux

La vie de l’agence, les dernières infos et les mandats remportés

La vie de l’agence, les dernières infos et les mandats remportés