DEV Community: RAHMANI Mohammad The latest articles on DEV Community by RAHMANI Mohammad (@mrahdev). https://dev.to/mrahdev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F120885%2F90930769-e88d-4503-a879-2fd56c285e85.jpg DEV Community: RAHMANI Mohammad https://dev.to/mrahdev en Tailwindcss 4 RAHMANI Mohammad Sat, 01 Mar 2025 21:06:45 +0000 https://dev.to/mrahdev/tailwindcss-4-5b5m https://dev.to/mrahdev/tailwindcss-4-5b5m tailwindcss DevPush Bulletin 01 - [FR] RAHMANI Mohammad Sun, 17 Mar 2024 16:59:52 +0000 https://dev.to/mrahdev/devpush-bulletin-01-fr-3j51 https://dev.to/mrahdev/devpush-bulletin-01-fr-3j51 <blockquote> <p><strong>Attention</strong>: <br> Ce numéro du bulletin a été publié le <strong>17 septembre 2023</strong>, et il est possible que les nouvelles et mises à jour <strong>ne soient pas à jour</strong>.</p> </blockquote> <p> </p> <h2> 🔅 Introduction </h2> <p>Bonjour 👋<br> J'espère que vous allez tous bien. Après un certain temps, je pense qu'il y a suffisamment d'articles et de contenus pour que je puisse publier le numéro 0️⃣1️⃣. Après la publication du numéro 0️⃣0️⃣, près de <strong>200</strong> personnes ont suivi ce bulletin 😳 et il a obtenu plus de succès que ce que à quoi je m'attendais.</p> <h2> 📣 L'actualité </h2> <p> </p> <h3> 📰 Résultats du plus grand test de Turing </h3> <p>Si vous avez vu le film <strong><a href="proxy.php?url=https://fr.wikipedia.org/wiki/Imitation_Game">Imitation Game</a></strong>, il raconte l'histoire d'<strong><a href="proxy.php?url=https://fr.wikipedia.org/wiki/Alan_Turing">Alan Turing</a></strong>. En 1950, il a créé le “Test de Turing” dans laquelle une machine devrait être capable de montrer des comportements intelligents de telle manière qu'ils ne puissent pas être distingués du comportement humain. Aujourd'hui, en 2023, la société <strong><a href="proxy.php?url=https://www.ai21.com/">AI21 Labs</a></strong> a mené ce test pour répondre à la question de savoir si les machines ont atteint un niveau d'intelligence leur permettant de battre les humains. Pendant ce test, des personnes conversent pendant <strong>2 minutes</strong> avec quelqu'un dont on ne sait pas s'il s'agit d'une machine ou d'un humain et doivent répondre à la question de savoir si leur interlocuteur est un humain ou une machine. Ce test a utilisé les modèles de langage <strong>Jurassic-2</strong>, <strong>GPT-4</strong>, <strong>Claude</strong> et <strong>Cohere</strong>. Environ <strong>2 millions</strong> de personnes du monde entier y ont participé. Il est intéressant de regarder les résultats.</p> <ul> <li> <strong>68%</strong> des gens ont pu correctement déterminer s'ils parlaient à un humain ou à un chatbot d'intelligence artificielle.</li> <li>Lorsqu'un humain parlait, <strong>73%</strong> l'ont correctement identifié, mais lorsqu'une machine parlait, seulement <strong>60%</strong> l'ont correctement identifiée.</li> </ul> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjnma0vjn54djfkorrb8.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjnma0vjn54djfkorrb8.png" alt="bulletin-01 devpush" width="742" height="450"></a></p> <p><strong>La France</strong>, avec <strong>71,3%</strong> de taux de reconnaissance correcte (au-dessus de la moyenne de <strong>68%</strong>), a eu le pourcentage le plus élevé.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1p53u8ogw6v098pju0r8.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1p53u8ogw6v098pju0r8.png" alt="bulletin-01 devpush" width="800" height="646"></a></p> <p>Les femmes 👩 ont un taux légèrement plus élevé que les hommes 👨.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fscedq0ogfl43f008f3dn.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fscedq0ogfl43f008f3dn.png" alt="bulletin-01 devpush" width="769" height="651"></a></p> <p>Les jeunes ont mieux deviné que les personnes âgées.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjyjcw32hqh36ygjgj7no.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjyjcw32hqh36ygjgj7no.png" alt="bulletin-01 devpush" width="773" height="655"></a></p> <p>Et enfin, les mots les plus utilisés dans ces conversations sont :</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffysusgh0y2z8tcpn2h5x.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffysusgh0y2z8tcpn2h5x.png" alt="bulletin-01 devpush" width="715" height="523"></a></p> <p>Vous pouvez trouver des explications plus détaillées sur cette expérience dans l'article ci-dessous :</p> <p>🌐<a href="proxy.php?url=https://www.ai21.com/blog/human-or-not-results">https://www.ai21.com/blog/human-or-not-results</a><br>  </p> <h3> 📰 Présentation du modèle d'intelligence artificielle SeamlessM4T </h3> <p>La société Meta a présenté un modèle d'intelligence artificielle appelé Seamless M4T, qui est un traducteur supportant par défaut 100 langues. Cet outil peut traduire du texte et de la voix et vous donner la traduction dans la langue de votre choix, sous forme de texte ou de voix. Il est annoncé que les traductions de ce modèle d'IA sont supérieures à ce que l'on voit actuellement dans Google Translate.</p> <p>🌐<a href="proxy.php?url=https://seamless.metademolab.com/demo">https://seamless.metademolab.com/demo</a></p> <p>🌐<a href="proxy.php?url=https://ai.meta.com/blog/seamless-m4t">https://ai.meta.com/blog/seamless-m4t</a><br>  </p> <h3> 📰 Meta publie le modèle de langage Code Llama spécialisé dans le code </h3> <p>La société Meta a également publié le projet Code Llama. Cet outil transforme votre texte en code. Ce projet est open source et gratuit et vous pouvez trouver plus de détails via les liens ci-dessous :</p> <p>🌐<a href="proxy.php?url=https://ai.meta.com/blog/code-llama-large-language-model-coding">https://ai.meta.com/blog/code-llama-large-language-model-coding</a></p> <p>🌐<a href="proxy.php?url=https://github.com/facebookresearch/codellama">https://github.com/facebookresearch/codellama</a><br>  </p> <h3> 📰 Python dans Excel 🤔 </h3> <p><a href="proxy.php?url=https://fr.wikipedia.org/wiki/Guido_van_Rossum">Guido van Rossum</a>, le créateur de <strong><a href="proxy.php?url=https://fr.wikipedia.org/wiki/Python_(langage)">Python</a></strong>, qui travaille maintenant chez Microsoft, a intégré Python à Excel dans son dernier projet... Il suffit de taper "PY" dans la zone de formule pour pouvoir utiliser tout Python et ses bibliothèques pour l'analyse de données, le machine learning, les graphiques, etc... <strong><a href="proxy.php?url=https://fr.wikipedia.org/wiki/Anders_Hejlsberg">Anders Hejlsberg</a></strong>, le créateur de C#, a aussi participé au projet !</p> <p>🌐<a href="proxy.php?url=https://twitter.com/gvanrossum/status/1694031794306458056">https://twitter.com/gvanrossum/status/1694031794306458056</a></p> <p>🌐<a href="proxy.php?url=https://techcommunity.microsoft.com/t5/excel-blog/announcing-python-in-excel-combining-the-power-of-python-and-the/ba-p/3893439">https://techcommunity.microsoft.com/t5/excel-blog/announcing-python-in-excel-combining-the-power-of-python-and-the/ba-p/3893439</a><br>  </p> <h3> 📰 Activation de la fonctionnalité Custom Instructions sur ChatGPT </h3> <p>La fonctionnalité Custom Instructions, qui vous permet de définir certaines conditions que ChatGPT doit respecter lors de conversations avec vous, a été activée pour la plupart des utilisateurs ayant un abonnement gratuit. Vous pouvez y accéder via l'image ci-dessous (1er item) :</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwdzfrnx58k95nph8vmyr.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwdzfrnx58k95nph8vmyr.png" alt="bulletin-01 devpush" width="249" height="228"></a><br>  </p> <h3> 📰 Que fait l'Inde ? </h3> <p>Je pense que le mois dernier, c'était le mois de l'Inde et on entendait toutes sortes de nouvelles dans tous les domaines. Des choses comme le lancement réussi d'un satellite sur la lune, le BRICS, etc. En plus de cela, une autre nouvelle a été publiée selon laquelle l'Inde veut abandonner Windows et utiliser Linux appelé MayaOS basé sur Ubuntu. La raison principale étant que Windows avec ses malwares et les attaques qu'il subit ont réduit la sécurité de l'Inde.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu95la7mlmlv1unmy0jwb.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu95la7mlmlv1unmy0jwb.png" alt="bulletin-01 devpush" width="673" height="264"></a></p> <p>🌐<a href="proxy.php?url=https://www.gadgets360.com/laptops/news/maya-os-defence-ministry-replace-windows-ubuntu-based-malware-ransomware-attacks-4296787">https://www.gadgets360.com/laptops/news/maya-os-defence-ministry-replace-windows-ubuntu-based-malware-ransomware-attacks-4296787</a><br>  </p> <h3> 📰 Intelligence artificielle mieux notée que les humains pour résoudre les tests CAPTCHA </h3> <p>Les CAPTCHA sont des tests pour distinguer les robots des humains, mais le problème est que maintenant l'intelligence artificielle a réussi à obtenir de meilleurs scores que les humains pour les résoudre.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod7tm9cwx3o9fpiodpop.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod7tm9cwx3o9fpiodpop.png" alt="bulletin-01 devpush" width="680" height="444"></a></p> <p>🌐<a href="proxy.php?url=https://arxiv.org/abs/2307.12108">https://arxiv.org/abs/2307.12108</a></p> <h2> ✅ Liens utiles </h2> <p> </p> <h3> 💠 Technologie: </h3> <p>Test de vitesse Internet par Cloudflare:</p> <p>🌐<a href="proxy.php?url=https://speed.cloudflare.com">https://speed.cloudflare.com</a><br>    <br> Si vous êtes intéressé à contribuer à des projets open source, ce site vous fournit des conseils sur la façon de contribuer à des projets open source et des sujets connexes.</p> <p>🌐<a href="proxy.php?url=https://opensource.guide/fr">https://opensource.guide/fr</a><br>    <br> Tout le monde connait le site GSMArena, mais j'ai vu une nouvelle section appelée Network coverage où vous pouvez voir les réseaux 2G / 3G / 4G / 5G utilisés dans différents pays.</p> <p>🌐<a href="proxy.php?url=https://www.gsmarena.com/network-bands.php3">https://www.gsmarena.com/network-bands.php3</a><br>    </p> <h3> 💠 Programmation: </h3> <p>Comment créer une bibliothèque d'utilitaires JavaScript comme Lodash :</p> <p>🌐<a href="proxy.php?url=https://www.freecodecamp.org/news/how-to-create-a-javascript-utility-library-like-lodash">https://www.freecodecamp.org/news/how-to-create-a-javascript-utility-library-like-lodash</a><br>    <br> Outils alimentés par l'IA pour générer de la documentation de code, des tests et des refactorisations de code :</p> <p>🌐<a href="proxy.php?url=https://www.docuwriter.ai">https://www.docuwriter.ai</a><br>    <br> CSS Selectors: Un guide visuel et une référence :</p> <p>🌐<a href="proxy.php?url=https://fffuel.co/css-selectors">https://fffuel.co/css-selectors</a><br>    <br> Un assistant d'intelligence artificielle qui identifie les problèmes dans votre code et vous fournit des solutions appropriées pour les résoudre:</p> <p>🌐<a href="proxy.php?url=https://useadrenaline.com">https://useadrenaline.com</a><br>    </p> <h3> 💠 UI et UX: </h3> <p>UI Design System - Icon-Iconpark:</p> <p>🌐<a href="proxy.php?url=https://www.figma.com/community/file/1275424510882790713">https://www.figma.com/community/file/1275424510882790713</a><br>    </p> <h3> 💠 Autre: </h3> <p>Si vous êtes à la recherche d'un emploi, ce site vous donne gratuitement accès à toutes les offres d'emploi dans le domaine et le pays de votre choix :</p> <p>🌐<a href="proxy.php?url=https://www.devjobsscanner.com">https://www.devjobsscanner.com</a><br>    <br> Un cours d'anglais débutant gratuit :</p> <p>🌐<a href="proxy.php?url=https://www.bbc.co.uk/learningenglish/course/how-to-speak-english/unit-1">https://www.bbc.co.uk/learningenglish/course/how-to-speak-english/unit-1</a></p> <h2> 😺 Quoi de neuf sur GitHub ? </h2> <p>Ce dépôt GitHub maintient une liste d'APIs gratuites dans différentes catégories. La liste est très longue et complète :</p> <p>🌐<a href="proxy.php?url=https://github.com/public-apis/public-apis">https://github.com/public-apis/public-apis</a><br>    <br> Ce repo était très cool, il contient tous les fichiers de configuration pour créer un profil GitHub. C'est nouveau et c'était dans les tendances d'aujourd'hui :</p> <p>🌐<a href="proxy.php?url=https://github.com/BEPb/BEPb">https://github.com/BEPb/BEPb</a><br>    <br> Une liste de newsletters :</p> <p>🌐<a href="proxy.php?url=https://github.com/zudochkin/awesome-newsletters">https://github.com/zudochkin/awesome-newsletters</a></p> <h2> 🆕 Mises à jour </h2> <p> </p> <h3> 📦 Bun 1.0 </h3> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxl7kl7dnenzi6dodt3g1.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxl7kl7dnenzi6dodt3g1.png" alt="Bun v1.0.0" width="800" height="340"></a></p> <p>Bun a publié sa version 1 il y a quelques jours et a reçu un accueil très positif. Un article à ce sujet sur Bun disait:</p> <blockquote> <p>Bun is a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript, from a single file to a full-stack application. Today, Bun is stable and production-ready.</p> </blockquote> <p>Bun vous offre toutes les fonctionnalités de pointe en un seul endroit. Bien que l'accent soit fortement mis sur la vitesse de Bun par rapport à ses concurrents, je pense que le véritable atout de Bun est qu'il s'agit d'un outil tout-en-un et qu'au lieu d'installer des dizaines de packages différents, vous pouvez avoir tout cela avec Bun.</p> <p>Vous pouvez voir les explications complètes dans l'article ci-dessous:</p> <p>🌐<a href="proxy.php?url=https://bun.sh/blog/bun-v1.0">https://bun.sh/blog/bun-v1.0</a></p> <p>🌐<a href="proxy.php?url=https://www.youtube.com/watch?v=BsnCpESUEqM">https://www.youtube.com/watch?v=BsnCpESUEqM</a></p> <p>🌐<a href="proxy.php?url=https://www.youtube.com/watch?v=dWqNgzZwVJQ">https://www.youtube.com/watch?v=dWqNgzZwVJQ</a><br>  </p> <h3> 📦Astro 3.0 </h3> <p>La version 3 d'Astro a été publiée à la fin du mois d'août. Dans le résumé d'un article sur la sortie de cette version d'Astro, les explications suivantes ont été données:</p> <ul> <li>Image Optimization (stable): Unflagged and better than ever.</li> <li>Faster Rendering Performance: Astro components render 30-75% faster.</li> <li>SSR Enhancements for Serverless: New ways to connect to your hosting platform.</li> <li>HMR Enhancements for JSX: Fast Refresh support for React and Preact.</li> <li> <p>Optimized Build Output: Cleaner and more performant HTML.<br>  </p> <h3> 📦Autres: </h3> </li> <li><p>Angular (16.2.5) : <a href="proxy.php?url=https://github.com/angular/angular/releases/tag/16.2.5">https://github.com/angular/angular/releases/tag/16.2.5</a></p></li> <li><p>Axios (1.5.0) : <a href="proxy.php?url=https://github.com/axios/axios/releases/tag/v1.5.0">https://github.com/axios/axios/releases/tag/v1.5.0</a></p></li> <li><p>Electron (26.2.1) : <a href="proxy.php?url=https://github.com/electron/electron/releases/tag/v26.2.1">https://github.com/electron/electron/releases/tag/v26.2.1</a></p></li> <li><p>Jest (29.7.0) : <a href="proxy.php?url=https://github.com/jestjs/jest/releases/tag/v29.7.0">https://github.com/jestjs/jest/releases/tag/v29.7.0</a></p></li> <li><p>Node (20.6.1): <a href="proxy.php?url=https://github.com/nodejs/node/releases/tag/v20.6.1">https://github.com/nodejs/node/releases/tag/v20.6.1</a></p></li> <li><p>Pnpm (8.7.5) : <a href="proxy.php?url=https://github.com/pnpm/pnpm/releases/tag/v8.7.5">https://github.com/pnpm/pnpm/releases/tag/v8.7.5</a></p></li> <li><p>Remix (2.0.0): <a href="proxy.php?url=https://github.com/remix-run/remix/releases/tag/remix%402.0.0">https://github.com/remix-run/remix/releases/tag/remix%402.0.0</a></p></li> <li><p>Turborepo (1.10.14) : <a href="proxy.php?url=https://github.com/vercel/turbo/releases/tag/v1.10.14">https://github.com/vercel/turbo/releases/tag/v1.10.14</a></p></li> <li><p>Vitest (0.34.4): <a href="proxy.php?url=https://github.com/vitest-dev/vitest/releases/tag/v0.34.4">https://github.com/vitest-dev/vitest/releases/tag/v0.34.4</a></p></li> </ul> <h2> ▶️ YouTube </h2> <p>Use Type, not Interface in TypeScript :</p> <p>▶️<a href="proxy.php?url=https://www.youtube.com/watch?v=Idf0zh9f3qQ">https://www.youtube.com/watch?v=Idf0zh9f3qQ</a><br>   <br>  <br> Figma for Edu: Figma Design 101 (L'atelier présente les bases de Figma pour la conception, comprenant les graphiques, la typographie et les composants réutilisables.) :</p> <p>▶️<a href="proxy.php?url=https://youtu.be/traOvK4lJ_M?si=U-6truyPtD7PuDVV">https://youtu.be/traOvK4lJ_M?si=U-6truyPtD7PuDVV</a><br> ▶️<a href="proxy.php?url=https://www.figma.com/community/file/1276670014901247361">https://www.figma.com/community/file/1276670014901247361</a><br>   <br>  <br> Don't be AFRAID of Typescript | A Guide For Beginners :</p> <p>▶️<a href="proxy.php?url=https://www.youtube.com/watch?v=f_JG0IJvhtQ">https://www.youtube.com/watch?v=f_JG0IJvhtQ</a></p> <h2> 📋 Antisèche </h2> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fegjjrn404qgrn5qtxaeh.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fegjjrn404qgrn5qtxaeh.png" alt="Antisèche bulletin-01 devpush" width="590" height="900"></a></p> <h2> 😅 Humour </h2> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8e3fdc6ix5mg81mcf7sj.jpeg" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8e3fdc6ix5mg81mcf7sj.jpeg" alt="Humour JS" width="294" height="387"></a></p> <p>Au revoir !</p> webdev news developer code DevPush Bulletin 00 - [FR] RAHMANI Mohammad Mon, 04 Mar 2024 18:53:49 +0000 https://dev.to/mrahdev/devpush-bulletin-00-fr-3500 https://dev.to/mrahdev/devpush-bulletin-00-fr-3500 <blockquote> <p><strong>Attention</strong>: <br> Ce numéro du bulletin a été publié le <strong>11 août 2023</strong>, et il est possible que les nouvelles et mises à jour <strong>ne soient pas à jour</strong>.</p> </blockquote> <p> </p> <h2> 🔅 Introduction </h2> <p>Bonjour 👋. Il y a quelques jours, en naviguant sur LinkedIn, j'ai remarqué la possibilité d'envoyer une <strong>newsletter</strong> 📰 sur ce réseau. Cela m'a donné l'idée 💡 de créer ma propre newsletter et de partager avec vous le contenu intéressant que je trouve en ligne dans le domaine de la technologie et de la programmation. Bien, ceci est le numéro 0️⃣0️⃣ et j'ai déjà quelques idées. Cela va probablement s'améliorer progressivement.</p> <h2> 📣 L'actualité </h2> <p> </p> <h3> 📰 La mauvaise situation du site Stack Overflow </h3> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk43imrfxgcxujcgzhlbz.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk43imrfxgcxujcgzhlbz.png" alt="Stack Overflow" width="360" height="360"></a></p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbh649slf54a1a3ap33sl.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbh649slf54a1a3ap33sl.png" alt="Stack Overflow" width="360" height="360"></a></p> <p>Il semble que l'un des sites qui a souffert avec l'arrivée de ChatGPT est notre bon vieux Stack Overflow. Certaines statistiques montrent que le trafic et le nombre de publications sur ce site ont fortement diminué au cours de ce dernier semestre. Dans un article de <a href="proxy.php?url=https://observablehq.com/@ayhanfuat"><strong>Ayhan Fuat Çelik</strong></a> sur le site <a href="proxy.php?url=https://observablehq.com">observablehq.com</a>, il est indiqué que le trafic a diminué de 35 à 50% et que le nombre de questions-réponses a baissé d'environ 50%. Vous pouvez consulter le rapport complet via le lien ci-dessous:</p> <p>🌐 <a href="proxy.php?url=https://observablehq.com/@ayhanfuat/the-fall-of-stack-overflow">https://observablehq.com/@ayhanfuat/the-fall-of-stack-overflow</a><br>  </p> <h3> 📰 Le créateur de Vim est :wq </h3> <p>La triste nouvelle du début du mois d'août a été que le créateur du programme <a href="proxy.php?url=https://www.vim.org/">Vim</a>, Monsieur <strong>Bram Moolenaar</strong>, est décédé le 3 août des suites d'une maladie. Bien qu'il n'ait pas été une personne très connue (et je ne le connaissais pas personnellement), il a vraiment été une personne influente dans le domaine de la programmation et de la technologie.<br>  </p> <h3> 📰 Une nouvelle de ChatGPT </h3> <p>La société OpenAI, dans une mise à jour publiée dans ses documents, a expliqué que cette société utilise le crawler GPTBot pour indexer le contenu des sites web et a expliqué comment nous pouvons le détecter et même le bloquer. Lien de l'article.</p> <p>🌐<a href="proxy.php?url=https://platform.openai.com/docs/gptbot">https://platform.openai.com/docs/gptbot</a><br>  </p> <h3> 📰 Project IDX par Google </h3> <p>Google vient de lancer Project IDX, un superbe nouvel éditeur de code dans le navigateur + environnement de développement. Il supportera une variété de frameworks, tels que Angular, Next.js, React, Svelte et Flutter, avec le support de Python et Go arrivant bientôt.</p> <p>Pour voir l'introduction de cet outil, vous pouvez aller sur le lien suivant :</p> <p>🌐<a href="proxy.php?url=https://developers.googleblog.com/2023/08/introducing-project-idx-experiment-to-improve-full-stack-multiplatform-app-development.html">https://developers.googleblog.com/2023/08/introducing-project-idx-experiment-to-improve-full-stack-multiplatform-app-development.html</a></p> <p>Et le lien de cet outil lui-même est à l'adresse suivante :</p> <p>🌐<a href="proxy.php?url=https://idx.dev">https://idx.dev</a></p> <p>Un utilisateur de Twitter a écrit à propos de cet outil 🤣:</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fay1d0n8q61y7bsrucpec.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fay1d0n8q61y7bsrucpec.png" alt="tweet" width="576" height="199"></a><br>  </p> <h3> 📰 La guerre contre les ordinateurs ! </h3> <p>Cette photo était également intéressante. Dans le titre d'un journal en 1981, au moment où les ordinateurs personnels se répandaient, il était écrit : les enseignants doivent lutter contre les ordinateurs ! Un professeur d'université avait averti que si les enseignants ne résistaient pas à l'invasion croissante des ordinateurs, il était très probable que d'ici dix ans (1991), l'alphabétisation disparaisse complètement !</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ih7f6wmpen63pej9rhw.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ih7f6wmpen63pej9rhw.png" alt="La guerre contre les ordinateurs" width="680" height="436"></a></p> <p>🌐<a href="proxy.php?url=https://twitter.com/AlirezaNaji_/status/1688784603195080705">https://twitter.com/AlirezaNaji_/status/1688784603195080705</a></p> <h2> 😺 Quoi de neuf sur GitHub ? </h2> <p>Si comme moi vous vous êtes déjà demandé comment sont construits des outils comme Git, Docker, les bases de données, etc. que nous utilisons quotidiennement, ce référentiel a catalogué des articles et tutoriels par item pour vous aider à comprendre comment ces outils sont construits grâce à ces tutoriels, et peut-être même en construire un vous-même.</p> <p>🌐<a href="proxy.php?url=https://github.com/codecrafters-io/build-your-own-x">https://github.com/codecrafters-io/build-your-own-x</a></p> <h2> 🆕 Mises à jour </h2> <p> </p> <h3> 📦Astro 2.10 </h3> <p>Pendant ce temps, la version 2.10 du framework Astro est sortie et la version 3 devrait également être publiée prochainement. L'une des nouvelles fonctionnalités intéressantes ajoutées dans ces mises à jour est la prise en charge des View Transitions API. Astro est à l'origine un framework MPA et cette mise à jour donnera l'impression de naviguer sur un site SPA. Voici quelques liens pour mieux comprendre.</p> <p>Différence entre MPA et SPA :</p> <p>🌐<a href="proxy.php?url=https://docs.astro.build/en/concepts/mpa-vs-spa/#terminology">https://docs.astro.build/en/concepts/mpa-vs-spa/#terminology</a></p> <p>Article du site Google Developers sur View Transitions API</p> <p>🌐<a href="proxy.php?url=https://developer.chrome.com/docs/web-platform/view-transitions">https://developer.chrome.com/docs/web-platform/view-transitions</a></p> <p>Tweet <a class="mentioned-user" href="proxy.php?url=https://dev.to/sebastienlorber">@sebastienlorber</a> :</p> <p>🌐<a href="proxy.php?url=https://twitter.com/sebastienlorber/status/1687403424847921153">https://twitter.com/sebastienlorber/status/1687403424847921153</a></p> <p>Ou regardez ce tweet « Faites attention à l'adresse du bar »</p> <p>🌐<a href="proxy.php?url=https://twitter.com/astrodotbuild/status/1689742663116115969">https://twitter.com/astrodotbuild/status/1689742663116115969</a></p> <p>Si vous ne connaissez pas encore Astro, ce tweet pourrait vous donner envie d'en savoir plus. <a href="proxy.php?url=https://twitter.com/sigma__dev/status/1676505365935005696">Source</a></p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsornzjaj7yzos4zetlr8.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsornzjaj7yzos4zetlr8.png" alt="Astro benchmark" width="592" height="451"></a><br>  </p> <h3> 📦Version 1.0 de Bun </h3> <p>Jarred Sumner, le créateur de Bun, a annoncé dans un tweet que la version 1.0 de Bun sera publiée le 7 septembre. Si vous ne connaissez pas Bun, vous pouvez visiter son site web.</p> <p>🌐<a href="proxy.php?url=https://bun.sh">bun.sh</a></p> <p>Bun est un runtime JavaScript et si vous avez déjà développé en JavaScript, vous avez sûrement entendu parler de <strong>Node.js</strong> ou <strong>Deno</strong>. Bun est considéré comme un concurrent plus rapide que ces deux outils et fournit tous les outils pour travailler avec JavaScript « TypeScript ». Juste pour comprendre pourquoi Bun a pu attirer autant d'attention en 1 an, regardez l'image ci-dessous.</p> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi84094bkqdctxarqusbq.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi84094bkqdctxarqusbq.png" alt="Bun benchmark" width="454" height="472"></a><br>  </p> <h3> 📦Autres </h3> <ul> <li>pnpm (Fast, disk space efficient package manager): <a href="proxy.php?url=https://github.com/pnpm/pnpm/releases/tag/v8.6.12">v8.6.12</a> </li> <li>zustan (A small, fast and scalable bearbones state-management) : <a href="proxy.php?url=https://github.com/pmndrs/zustand/releases/tag/v4.4.1">v4.4.1</a> </li> <li>unocss (Atomic CSS Engine) : <a href="proxy.php?url=https://github.com/unocss/unocss/releases/tag/v0.55.0">v0.55.0</a> </li> <li>vite (frontend build tooling) : <a href="proxy.php?url=https://github.com/vitejs/vite/releases/tag/v4.4.9">v4.4.9</a> </li> <li>wordpress : <a href="proxy.php?url=https://fr.wordpress.org/2023/08/08/wordpress-6-3-lionel/">v6.3 Lionel</a> </li> </ul> <h2> ✅Liens utiles </h2> <p> </p> <h3> Technologie </h3> <ul> <li> <a href="proxy.php?url=http://perplexity.ai/">perplexity.ai</a> : Un moteur de recherche doté d'IA</li> <li> <p><a href="proxy.php?url=https://www.maxai.me/">maxai.me</a> : Une extension dotée d'IA pour aider à l'écriture, la lecture rapide, le résumé de textes, etc.<br>  </p> <h3> Développement </h3> </li> <li> <p><a href="proxy.php?url=http://devdocs.io/">devdocs.io</a> : Toute votre documentation de codage en un seul endroit ! DevDocs combine de multiples références comme HTML, CSS et JavaScript dans un seul site, etc.<br>  </p> <h3> UI &amp; UX </h3> </li> <li><p><a href="proxy.php?url=https://icons.mono.company/">icons.mono.company</a> : Icon gratuits</p></li> <li> <p><a href="proxy.php?url=https://www.figma.com/community/file/1247635958046281195/Portfolio-Template-(Community)">Gabarit de portfolio de design minimaliste</a> (figma)<br>  </p> <h3> Autres </h3> </li> <li><p><a href="proxy.php?url=http://resumeworded.com/">resumeworded.com</a> : Un site pour revoir votre CV et votre profil LinkedIn</p></li> </ul> <h2> 📋 Antisèche </h2> <p><a href="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ndvpb7qt0083b2waq55.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ndvpb7qt0083b2waq55.png" alt="CSS Position Properties Cheat Sheet" width="680" height="680"></a></p> <p>Au revoir ! 👋</p> webdev news developer code Comment utiliser TypeScript avec Node.js RAHMANI Mohammad Thu, 02 Feb 2023 00:00:24 +0000 https://dev.to/mrahdev/comment-utiliser-typescript-avec-nodejs-g5j https://dev.to/mrahdev/comment-utiliser-typescript-avec-nodejs-g5j <p>Après ma formation CDA (Concepteur Développeur d’Applications), j’ai pu trouver du temps pour travailler sur mes projets personnels. Je me suis notamment concentré sur le langage TypeScript car j’ai vraiment envie de l’apprendre. J’ai déjà travaillé avec sur mon projet de stage mais j’ai besoin d’enrichir mes compétences sur ce langage.<br> Pour cela, j’ai créé un projet <code>NodeJS</code> avec un fichier au format « <code>.ts</code> ». Sur le <code>package.json</code> , j'ai ajouté l'entrée <code>"start"</code> avec la valeur <code>"node index.ts"</code> pour lancer mon projet :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"node index.ts"</span><span class="w"> </span><span class="p">}</span><span class="err">,</span><span class="w"> </span></code></pre> </div> <p>J’ai rencontré un problème parce que mon projet ne s'est pas lancé. J'ai compris que j’avais oublié que NodeJS ne fonctionnait pas avec <code>TypeScript</code> . NodeJS est un outil pour exécuter JavaScript et non TypeScript. J'ai alors recherché sur le internet pour trouver une solution, pour réussir à exécuter TypeScript avec NodeJS et j’ai trouvé quelques solutions. Dans ce poste j'ai mis à disposition une liste de ces solutions, j’espère que ça vous aidera.</p> <h2> 1- typescript (tsc) </h2> <p>La première solution est d’utiliser le package <code>typescript</code> , vous devez installer ce package avec la commande suivante :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm i <span class="nt">-D</span> typescript </code></pre> </div> <p>Vous pouvez également utiliser cette autre commande, pour configurer le compilateur. Par exemple, choisir la version <code>ECMAScript</code> ou le directory pour la sortie des fichiers <code>.js</code> :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx tsc <span class="nt">--init</span> </code></pre> </div> <p>Ou sinon vous pouvez utiliser cet exemple dans le fichier « <code>tsconfig.json</code> » :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"compilerOptions"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"outDir"</span><span class="p">:</span><span class="w"> </span><span class="s2">"dist"</span><span class="p">,</span><span class="w"> </span><span class="nl">"target"</span><span class="p">:</span><span class="w"> </span><span class="s2">"es6"</span><span class="p">,</span><span class="w"> </span><span class="nl">"module"</span><span class="p">:</span><span class="w"> </span><span class="s2">"commonjs"</span><span class="p">,</span><span class="w"> </span><span class="nl">"moduleResolution"</span><span class="p">:</span><span class="w"> </span><span class="s2">"node"</span><span class="p">,</span><span class="w"> </span><span class="nl">"experimentalDecorators"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="nl">"emitDecoratorMetadata"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="nl">"sourceMap"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="nl">"noImplicitAny"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nl">"include"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"**/*"</span><span class="p">]</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <p>Et enfin avec la commande suivante, vous pouvez convertir vos fichiers <code>.ts</code> en <code>.js</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>tsc <span class="nt">-p</span> <span class="nb">.</span> </code></pre> </div> <p>Si vous avez fait attention à la dernière commande, elle s’arrête après son exécution. Cela signifie que pour chaque changement, on force l'exécution de cette commande pour convertir nos fichiers <code>.ts</code> en <code>.js</code> . Il existe cependant une meilleure solution qui consiste à ajouter le flag <code>—watch</code> à la fin de la commande, pour que la compilation ne s’arrête pas et que chaque changement soit automatiquement converti lorsque vous enregistrez vos fichiers <code>.ts</code> .<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx tsc <span class="nt">-p</span> <span class="nb">.</span> <span class="nt">--watch</span> </code></pre> </div> <p>Pour terminer, vous devez ajouter l’entrée suivante sur la propriété <code>scripts</code> dans le fichier <code>package.json</code> et exécuter la commande <code>npm start</code> dans votre terminal :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"node dist/index.js"</span><span class="w"> </span><span class="p">}</span><span class="err">,</span><span class="w"> </span></code></pre> </div> <p>🌐 Plus de détails : <a href="proxy.php?url=https://www.typescriptlang.org/docs/" rel="noopener noreferrer">Docs</a></p> <h2> 2- nodemon </h2> <p>La deuxième solution est d’utiliser l’outil <code>nodemon</code>. Pour cela vous devez installer les packages suivants :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm i <span class="nt">-D</span> nodemon @types/node ts-node typescript </code></pre> </div> <p>Ensuite, ajouter l’entrée suivante sur la propriété <code>scripts</code> dans le fichier <code>package.json</code> et exécuter la commande <code>npm start</code> dans votre terminal :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"nodemon index.ts"</span><span class="w"> </span><span class="p">}</span><span class="err">,</span><span class="w"> </span></code></pre> </div> <p>Avec <code>nodemon</code> vous n’avez pas besoin d’arrêter votre projet. Il redémarre automatiquement lorsque que vous enregistrez vos changements.</p> <p>🌐 Plus de détails : <strong><a href="proxy.php?url=https://github.com/remy/nodemon" rel="noopener noreferrer">GitHub</a></strong></p> <h2> 3- tsx </h2> <p>La troisième solution est d’utiliser <code>tsx</code> . Pour cela vous devez installer ce package avec la commande suivante :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm i <span class="nt">-D</span> tsx </code></pre> </div> <p>Puis ajouter l’entrée suivante sur la propriété <code>"scripts"</code> dans le fichier <code>package.json</code> et exécuter la commande <code>npm start</code> dans votre terminal :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"tsx watch index.ts"</span><span class="w"> </span><span class="p">}</span><span class="err">,</span><span class="w"> </span></code></pre> </div> <p>🌐 Plus de détails : <a href="proxy.php?url=https://github.com/esbuild-kit/tsx" rel="noopener noreferrer"><strong>GitHub</strong></a></p> <h2> 4- tsc-node-env </h2> <p>La dernière solution que j’ai trouvée, est d’utiliser le package <code>“tsc-node-env”</code> . Pour cela vous devez installer les packages suivants :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="err">npm</span><span class="w"> </span><span class="err">i</span><span class="w"> </span><span class="err">-D</span><span class="w"> </span><span class="err">ts-node-dev</span><span class="w"> </span><span class="err">@types/node</span><span class="w"> </span><span class="err">typescript</span><span class="w"> </span></code></pre> </div> <p>Pour la surveillance de vos changements, vous devez ajouter l’entrée suivante pour la propriété <code>“scripts”</code> dans le fichier <code>package.json</code> et exécuter la commande <code>npm start</code> dans votre terminal :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"tsnd --respawn index.ts"</span><span class="w"> </span><span class="p">}</span><span class="err">,</span><span class="w"> </span></code></pre> </div> <p>🌐 Plus de détails : <strong><a href="proxy.php?url=https://github.com/wclr/ts-node-dev" rel="noopener noreferrer">GitHub</a></strong></p> cryptocurrency blockchain web3 offers Faites attention en utilisant google fonts RAHMANI Mohammad Thu, 25 Aug 2022 20:36:00 +0000 https://dev.to/mrahdev/faites-attention-en-utilisant-google-fonts-27gj https://dev.to/mrahdev/faites-attention-en-utilisant-google-fonts-27gj <p>J’adore la police « <a href="proxy.php?url=https://fonts.google.com/specimen/Poppins">Poppins</a> » et je l’utilise habituellement dans mes projets. Pour concevoir mon site, j’ai utilisé l’outil <a href="proxy.php?url=http://fonts.google.com/">fonts.google.com</a> pour l'obtenir, ainsi que l'autre police « <a href="proxy.php?url=https://fonts.google.com/specimen/Space+Mono">Space Mono</a> ». Je les ai utilisées et je les ai choisies avec plusieurs graisses différentes. Je les ai importés grâce au lien que le site m’a fourni.</p> <p>Lorsque j'ai créé la première version du site, j'ai utilisé les outils PageSpeed et Lighthouse pour analyser ses performances. Le score obtenu se situait entre 90 et 92 %. La principale raison de cette baisse du score de 8 à 10 %, était due à l'utilisation des polices que j'avais ajoutées dans le projet.</p> <p>Au début, j'ai essayé de réduire le nombre de graisse de police, mais cela ne changeait pas beaucoup les résultats. J'ai recherché sur Internet s'il existait de meilleures façons d'importer des polices personnalisées dans le projet, mais je ne trouvais pas de réponse satisfaisante. J'ai commencé à oublier ce problème jusqu'à ce que je trouve une explication sur l'utilisation des polices dans la documentation du site <a href="proxy.php?url=https://docs.astro.build/fr/guides/fonts/">Astro</a>.</p> <p>Cette page donne plusieurs solutions pour importer des polices personnalisées, l'une d'entre elles utilise l'outil Fontsource. Fontsource est un projet open source qui nous fournit une liste des polices connues. Nous pouvons alors installer celle de notre choix et l'importer en tant que "self-host" dans nos projets.</p> <p>Par exemple, j'ai installé les deux polices que j'ai mentionnées ci-dessus comme suit :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> @fontsource/poppins npm <span class="nb">install</span> @fontsource/space-mono </code></pre> </div> <p>Ensuite, j'ai ajouté ces polices dans la couche d'en-tête principal (ci-dessous) :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>import <span class="s2">"@fontsource/poppins"</span> import <span class="s2">"@fontsource/poppins/500.css"</span> import <span class="s2">"@fontsource/poppins/700.css"</span> import <span class="s2">"@fontsource/space-mono"</span> import <span class="s2">"@fontsource/space-mono/700.css"</span> </code></pre> </div> <p>Bien sûr, le fichier de style contenait déjà les polices utilisées pour chaque balise et chaque classe, il n'était pas nécessaire de le modifier.</p> <p>Après avoir redéployé le site et checké ses performances avec PageSpeed et Lighthouse, j'ai constaté que le score du site avait atteint 98 et 100 %. Autrement dit, avec ce petit changement dans l'utilisation des polices personnalisées, ces deux outils ont démontré que le score été plus élevé de 8 et 10 %.</p> <p>J’ai créé un autre projet pour savoir si l'utilisation des polices self-host avait un impact important sur le score du site, au lieu de me servir des polices de <a href="proxy.php?url=http://fonts.google.com/">fonts.google.com</a>. J'ai utilisé en moyenne 18 polices “Poppins" avec des graisses différentes et j'ai checké par la suite ses performances.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--wqK85yqh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ofnwuf68l44aqn26dhj.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--wqK85yqh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ofnwuf68l44aqn26dhj.png" alt="Page fonts" width="631" height="890"></a></p> <p>Lorsque j'ai importé des polices par <a href="proxy.php?url=http://fonts.google.com/">fonts.google.com</a>, le score était de 79%.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--bRTGDr4x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzzg3llrf8rhxxl020mw.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--bRTGDr4x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzzg3llrf8rhxxl020mw.png" alt="perfermences test google" width="880" height="632"></a></p> <p>Le score obtenu dans le cas où j'utilisais la police self-host, était entre 94 et 97%, soit une augmentation minimum de 15% de plus que le précédent. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--RVasQiN1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o42p6g8afyi3qm7xty7h.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--RVasQiN1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o42p6g8afyi3qm7xty7h.png" alt="perfermences test self host" width="880" height="636"></a></p> <p><strong>Conclusion :</strong><br> L'un des avantages de l'outil Fontsource est de pouvoir utiliser des polices qui sont dans la gamme des lettres latines, ce qui réduit considérablement la taille des fichiers de police et accélère le chargement du site. Par exemple, pour la police "Poppins", comme vous pouvez le voir sur l'image ci-dessous, la taille du fichier est d'environ 66 Ko lorsque tous les caractères s'y trouvent, mais seulement 11 Ko dans le domaine des lettres latines.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--btZV1v6X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdnjkr7zgbeqgef83flg.jpg" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--btZV1v6X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdnjkr7zgbeqgef83flg.jpg" alt="size fonts" width="306" height="98"></a></p> <p>Il existe sûrement de meilleures solutions d'utiliser des polices personnalisées que je ne connais pas encore, mais je voulais partager cette expérience avec vous. </p> <p>Bonne journée à tous.</p> webdev html seo french