{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: RAHMANI Mohammad","description":"The latest articles on DEV Community by RAHMANI Mohammad (@mrahdev).","link":"https:\/\/dev.to\/mrahdev","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F120885%2F90930769-e88d-4503-a879-2fd56c285e85.jpg","title":"DEV Community: RAHMANI Mohammad","link":"https:\/\/dev.to\/mrahdev"},"language":"en","item":[{"title":"Tailwindcss 4","pubDate":"Sat, 01 Mar 2025 21:06:45 +0000","link":"https:\/\/dev.to\/mrahdev\/tailwindcss-4-5b5m","guid":"https:\/\/dev.to\/mrahdev\/tailwindcss-4-5b5m","description":{},"category":"tailwindcss"},{"title":"DevPush Bulletin 01 - [FR]","pubDate":"Sun, 17 Mar 2024 16:59:52 +0000","link":"https:\/\/dev.to\/mrahdev\/devpush-bulletin-01-fr-3j51","guid":"https:\/\/dev.to\/mrahdev\/devpush-bulletin-01-fr-3j51","description":"<blockquote>\n<p><strong>Attention<\/strong>: <br>\nCe num\u00e9ro du bulletin a \u00e9t\u00e9 publi\u00e9 le <strong>17 septembre 2023<\/strong>, et il est possible que les nouvelles et mises \u00e0 jour <strong>ne soient pas \u00e0 jour<\/strong>.<\/p>\n<\/blockquote>\n\n<p>&nbsp;<\/p>\n\n<h2>\n  \n  \n  \ud83d\udd05 Introduction\n<\/h2>\n\n<p>Bonjour \ud83d\udc4b<br>\nJ'esp\u00e8re que vous allez tous bien. Apr\u00e8s un certain temps, je pense qu'il y a suffisamment d'articles et de contenus pour que je puisse publier le num\u00e9ro 0\ufe0f\u20e31\ufe0f\u20e3. Apr\u00e8s la publication du num\u00e9ro 0\ufe0f\u20e30\ufe0f\u20e3, pr\u00e8s de <strong>200<\/strong> personnes ont suivi ce bulletin \ud83d\ude33 et il a obtenu plus de succ\u00e8s que ce que \u00e0 quoi je m'attendais.<\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\udce3 L'actualit\u00e9\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 R\u00e9sultats du plus grand test de Turing\n<\/h3>\n\n<p>Si vous avez vu le film <strong><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Imitation_Game\">Imitation Game<\/a><\/strong>, il raconte l'histoire d'<strong><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Alan_Turing\">Alan Turing<\/a><\/strong>. En 1950, il a cr\u00e9\u00e9 le \u201cTest de Turing\u201d dans laquelle une machine devrait \u00eatre capable de montrer des comportements intelligents de telle mani\u00e8re qu'ils ne puissent pas \u00eatre distingu\u00e9s du comportement humain. Aujourd'hui, en 2023, la soci\u00e9t\u00e9 <strong><a href=\"https:\/\/www.ai21.com\/\">AI21 Labs<\/a><\/strong> a men\u00e9 ce test pour r\u00e9pondre \u00e0 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\u00e9pondre \u00e0 la question de savoir si leur interlocuteur est un humain ou une machine. Ce test a utilis\u00e9 les mod\u00e8les 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\u00e9. Il est int\u00e9ressant de regarder les r\u00e9sultats.<\/p>\n\n<ul>\n<li>\n<strong>68%<\/strong> des gens ont pu correctement d\u00e9terminer s'ils parlaient \u00e0 un humain ou \u00e0 un chatbot d'intelligence artificielle.<\/li>\n<li>Lorsqu'un humain parlait, <strong>73%<\/strong> l'ont correctement identifi\u00e9, mais lorsqu'une machine parlait, seulement <strong>60%<\/strong> l'ont correctement identifi\u00e9e.<\/li>\n<\/ul>\n\n<p><a href=\"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=\"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>\n\n<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 \u00e9lev\u00e9.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Les femmes \ud83d\udc69 ont un taux l\u00e9g\u00e8rement plus \u00e9lev\u00e9 que les hommes \ud83d\udc68.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Les jeunes ont mieux devin\u00e9 que les personnes \u00e2g\u00e9es.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Et enfin, les mots les plus utilis\u00e9s dans ces conversations sont :<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Vous pouvez trouver des explications plus d\u00e9taill\u00e9es sur cette exp\u00e9rience dans l'article ci-dessous :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.ai21.com\/blog\/human-or-not-results\">https:\/\/www.ai21.com\/blog\/human-or-not-results<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Pr\u00e9sentation du mod\u00e8le d'intelligence artificielle SeamlessM4T\n<\/h3>\n\n<p>La soci\u00e9t\u00e9 Meta a pr\u00e9sent\u00e9 un mod\u00e8le d'intelligence artificielle appel\u00e9 Seamless M4T, qui est un traducteur supportant par d\u00e9faut 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\u00e9 que les traductions de ce mod\u00e8le d'IA sont sup\u00e9rieures \u00e0 ce que l'on voit actuellement dans Google Translate.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/seamless.metademolab.com\/demo\">https:\/\/seamless.metademolab.com\/demo<\/a><\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/ai.meta.com\/blog\/seamless-m4t\">https:\/\/ai.meta.com\/blog\/seamless-m4t<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Meta publie le mod\u00e8le de langage Code Llama sp\u00e9cialis\u00e9 dans le code\n<\/h3>\n\n<p>La soci\u00e9t\u00e9 Meta a \u00e9galement publi\u00e9 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\u00e9tails via les liens ci-dessous :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/ai.meta.com\/blog\/code-llama-large-language-model-coding\">https:\/\/ai.meta.com\/blog\/code-llama-large-language-model-coding<\/a><\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/github.com\/facebookresearch\/codellama\">https:\/\/github.com\/facebookresearch\/codellama<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Python dans Excel \ud83e\udd14\n<\/h3>\n\n<p><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Guido_van_Rossum\">Guido van Rossum<\/a>, le cr\u00e9ateur de <strong><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Python_(langage)\">Python<\/a><\/strong>, qui travaille maintenant chez Microsoft, a int\u00e9gr\u00e9 Python \u00e0 Excel dans son dernier projet... Il suffit de taper \"PY\" dans la zone de formule pour pouvoir utiliser tout Python et ses biblioth\u00e8ques pour l'analyse de donn\u00e9es, le machine learning, les graphiques, etc... <strong><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Anders_Hejlsberg\">Anders Hejlsberg<\/a><\/strong>, le cr\u00e9ateur de C#, a aussi particip\u00e9 au projet !<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/twitter.com\/gvanrossum\/status\/1694031794306458056\">https:\/\/twitter.com\/gvanrossum\/status\/1694031794306458056<\/a><\/p>\n\n<p>\ud83c\udf10<a href=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Activation de la fonctionnalit\u00e9 Custom Instructions sur ChatGPT\n<\/h3>\n\n<p>La fonctionnalit\u00e9 Custom Instructions, qui vous permet de d\u00e9finir certaines conditions que ChatGPT doit respecter lors de conversations avec vous, a \u00e9t\u00e9 activ\u00e9e pour la plupart des utilisateurs ayant un abonnement gratuit. Vous pouvez y acc\u00e9der via l'image ci-dessous (1er item) :<\/p>\n\n<p><a href=\"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=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Que fait l'Inde ?\n<\/h3>\n\n<p>Je pense que le mois dernier, c'\u00e9tait le mois de l'Inde et on entendait toutes sortes de nouvelles dans tous les domaines. Des choses comme le lancement r\u00e9ussi d'un satellite sur la lune, le BRICS, etc. En plus de cela, une autre nouvelle a \u00e9t\u00e9 publi\u00e9e selon laquelle l'Inde veut abandonner Windows et utiliser Linux appel\u00e9 MayaOS bas\u00e9 sur Ubuntu. La raison principale \u00e9tant que Windows avec ses malwares et les attaques qu'il subit ont r\u00e9duit la s\u00e9curit\u00e9 de l'Inde.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>\ud83c\udf10<a href=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Intelligence artificielle mieux not\u00e9e que les humains pour r\u00e9soudre les tests CAPTCHA\n<\/h3>\n\n<p>Les CAPTCHA sont des tests pour distinguer les robots des humains, mais le probl\u00e8me est que maintenant l'intelligence artificielle a r\u00e9ussi \u00e0 obtenir de meilleurs scores que les humains pour les r\u00e9soudre.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>\ud83c\udf10<a href=\"https:\/\/arxiv.org\/abs\/2307.12108\">https:\/\/arxiv.org\/abs\/2307.12108<\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \u2705 Liens utiles\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udca0 Technologie:\n<\/h3>\n\n<p>Test de vitesse Internet par Cloudflare:<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/speed.cloudflare.com\">https:\/\/speed.cloudflare.com<\/a><br>\n&nbsp; &nbsp;<br>\nSi vous \u00eates int\u00e9ress\u00e9 \u00e0 contribuer \u00e0 des projets open source, ce site vous fournit des conseils sur la fa\u00e7on de contribuer \u00e0 des projets open source et des sujets connexes.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/opensource.guide\/fr\">https:\/\/opensource.guide\/fr<\/a><br>\n&nbsp; &nbsp;<br>\nTout le monde connait le site GSMArena, mais j'ai vu une nouvelle section appel\u00e9e Network coverage o\u00f9 vous pouvez voir les r\u00e9seaux 2G \/ 3G \/ 4G \/ 5G utilis\u00e9s dans diff\u00e9rents pays.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.gsmarena.com\/network-bands.php3\">https:\/\/www.gsmarena.com\/network-bands.php3<\/a><br>\n&nbsp; &nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udca0 Programmation:\n<\/h3>\n\n<p>Comment cr\u00e9er une biblioth\u00e8que d'utilitaires JavaScript comme Lodash :<\/p>\n\n<p>\ud83c\udf10<a href=\"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>\n&nbsp; &nbsp;<br>\nOutils aliment\u00e9s par l'IA pour g\u00e9n\u00e9rer de la documentation de code, des tests et des refactorisations de code :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.docuwriter.ai\">https:\/\/www.docuwriter.ai<\/a><br>\n&nbsp; &nbsp;<br>\nCSS Selectors: Un guide visuel et une r\u00e9f\u00e9rence :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/fffuel.co\/css-selectors\">https:\/\/fffuel.co\/css-selectors<\/a><br>\n&nbsp; &nbsp;<br>\nUn assistant d'intelligence artificielle qui identifie les probl\u00e8mes dans votre code et vous fournit des solutions appropri\u00e9es pour les r\u00e9soudre:<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/useadrenaline.com\">https:\/\/useadrenaline.com<\/a><br>\n&nbsp; &nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udca0 UI et UX:\n<\/h3>\n\n<p>UI Design System - Icon-Iconpark:<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.figma.com\/community\/file\/1275424510882790713\">https:\/\/www.figma.com\/community\/file\/1275424510882790713<\/a><br>\n&nbsp; &nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udca0 Autre:\n<\/h3>\n\n<p>Si vous \u00eates \u00e0 la recherche d'un emploi, ce site vous donne gratuitement acc\u00e8s \u00e0 toutes les offres d'emploi dans le domaine et le pays de votre choix :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.devjobsscanner.com\">https:\/\/www.devjobsscanner.com<\/a><br>\n&nbsp; &nbsp;<br>\nUn cours d'anglais d\u00e9butant gratuit :<\/p>\n\n<p>\ud83c\udf10<a href=\"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>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\ude3a Quoi de neuf sur GitHub ?\n<\/h2>\n\n<p>Ce d\u00e9p\u00f4t GitHub maintient une liste d'APIs gratuites dans diff\u00e9rentes cat\u00e9gories. La liste est tr\u00e8s longue et compl\u00e8te :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/github.com\/public-apis\/public-apis\">https:\/\/github.com\/public-apis\/public-apis<\/a><br>\n&nbsp; &nbsp;<br>\nCe repo \u00e9tait tr\u00e8s cool, il contient tous les fichiers de configuration pour cr\u00e9er un profil GitHub. C'est nouveau et c'\u00e9tait dans les tendances d'aujourd'hui :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/github.com\/BEPb\/BEPb\">https:\/\/github.com\/BEPb\/BEPb<\/a><br>\n&nbsp; &nbsp;<br>\nUne liste de newsletters :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/github.com\/zudochkin\/awesome-newsletters\">https:\/\/github.com\/zudochkin\/awesome-newsletters<\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83c\udd95 Mises \u00e0 jour\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udce6 Bun 1.0\n<\/h3>\n\n<p><a href=\"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=\"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>\n\n<p>Bun a publi\u00e9 sa version 1 il y a quelques jours et a re\u00e7u un accueil tr\u00e8s positif. Un article \u00e0 ce sujet sur Bun disait:<\/p>\n\n<blockquote>\n<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>\n<\/blockquote>\n\n<p>Bun vous offre toutes les fonctionnalit\u00e9s de pointe en un seul endroit. Bien que l'accent soit fortement mis sur la vitesse de Bun par rapport \u00e0 ses concurrents, je pense que le v\u00e9ritable 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\u00e9rents, vous pouvez avoir tout cela avec Bun.<\/p>\n\n<p>Vous pouvez voir les explications compl\u00e8tes dans l'article ci-dessous:<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/bun.sh\/blog\/bun-v1.0\">https:\/\/bun.sh\/blog\/bun-v1.0<\/a><\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.youtube.com\/watch?v=BsnCpESUEqM\">https:\/\/www.youtube.com\/watch?v=BsnCpESUEqM<\/a><\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/www.youtube.com\/watch?v=dWqNgzZwVJQ\">https:\/\/www.youtube.com\/watch?v=dWqNgzZwVJQ<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udce6Astro 3.0\n<\/h3>\n\n<p>La version 3 d'Astro a \u00e9t\u00e9 publi\u00e9e \u00e0 la fin du mois d'ao\u00fbt. Dans le r\u00e9sum\u00e9 d'un article sur la sortie de cette version d'Astro, les explications suivantes ont \u00e9t\u00e9 donn\u00e9es:<\/p>\n\n<ul>\n<li>Image Optimization (stable): Unflagged and better than ever.<\/li>\n<li>Faster Rendering Performance: Astro components render 30-75% faster.<\/li>\n<li>SSR Enhancements for Serverless: New ways to connect to your hosting platform.<\/li>\n<li>HMR Enhancements for JSX: Fast Refresh support for React and Preact.<\/li>\n<li>\n<p>Optimized Build Output: Cleaner and more performant HTML.<br>\n&nbsp;<\/p>\n<h3>\n  \n  \n  \ud83d\udce6Autres:\n<\/h3>\n<\/li>\n<li><p>Angular (16.2.5) : <a href=\"https:\/\/github.com\/angular\/angular\/releases\/tag\/16.2.5\">https:\/\/github.com\/angular\/angular\/releases\/tag\/16.2.5<\/a><\/p><\/li>\n<li><p>Axios (1.5.0) : <a href=\"https:\/\/github.com\/axios\/axios\/releases\/tag\/v1.5.0\">https:\/\/github.com\/axios\/axios\/releases\/tag\/v1.5.0<\/a><\/p><\/li>\n<li><p>Electron (26.2.1) : <a href=\"https:\/\/github.com\/electron\/electron\/releases\/tag\/v26.2.1\">https:\/\/github.com\/electron\/electron\/releases\/tag\/v26.2.1<\/a><\/p><\/li>\n<li><p>Jest (29.7.0) : <a href=\"https:\/\/github.com\/jestjs\/jest\/releases\/tag\/v29.7.0\">https:\/\/github.com\/jestjs\/jest\/releases\/tag\/v29.7.0<\/a><\/p><\/li>\n<li><p>Node (20.6.1): <a href=\"https:\/\/github.com\/nodejs\/node\/releases\/tag\/v20.6.1\">https:\/\/github.com\/nodejs\/node\/releases\/tag\/v20.6.1<\/a><\/p><\/li>\n<li><p>Pnpm (8.7.5) : <a href=\"https:\/\/github.com\/pnpm\/pnpm\/releases\/tag\/v8.7.5\">https:\/\/github.com\/pnpm\/pnpm\/releases\/tag\/v8.7.5<\/a><\/p><\/li>\n<li><p>Remix (2.0.0): <a href=\"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>\n<li><p>Turborepo (1.10.14) : <a href=\"https:\/\/github.com\/vercel\/turbo\/releases\/tag\/v1.10.14\">https:\/\/github.com\/vercel\/turbo\/releases\/tag\/v1.10.14<\/a><\/p><\/li>\n<li><p>Vitest (0.34.4): <a href=\"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>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  \u25b6\ufe0f YouTube\n<\/h2>\n\n<p>Use Type, not Interface in TypeScript :<\/p>\n\n<p>\u25b6\ufe0f<a href=\"https:\/\/www.youtube.com\/watch?v=Idf0zh9f3qQ\">https:\/\/www.youtube.com\/watch?v=Idf0zh9f3qQ<\/a><br>\n&nbsp; <br>\n&nbsp;<br>\nFigma for Edu: Figma Design 101 (L'atelier pr\u00e9sente les bases de Figma pour la conception, comprenant les graphiques, la typographie et les composants r\u00e9utilisables.) :<\/p>\n\n<p>\u25b6\ufe0f<a href=\"https:\/\/youtu.be\/traOvK4lJ_M?si=U-6truyPtD7PuDVV\">https:\/\/youtu.be\/traOvK4lJ_M?si=U-6truyPtD7PuDVV<\/a><br>\n\u25b6\ufe0f<a href=\"https:\/\/www.figma.com\/community\/file\/1276670014901247361\">https:\/\/www.figma.com\/community\/file\/1276670014901247361<\/a><br>\n&nbsp; <br>\n&nbsp;<br>\nDon't be AFRAID of Typescript | A Guide For Beginners :<\/p>\n\n<p>\u25b6\ufe0f<a href=\"https:\/\/www.youtube.com\/watch?v=f_JG0IJvhtQ\">https:\/\/www.youtube.com\/watch?v=f_JG0IJvhtQ<\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\udccb Antis\u00e8che\n<\/h2>\n\n<p><a href=\"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=\"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\u00e8che bulletin-01 devpush\" width=\"590\" height=\"900\"><\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\ude05 Humour\n<\/h2>\n\n<p><a href=\"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=\"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>\n\n<p>Au revoir !<\/p>\n\n","category":["webdev","news","developer","code"]},{"title":"DevPush Bulletin 00 - [FR]","pubDate":"Mon, 04 Mar 2024 18:53:49 +0000","link":"https:\/\/dev.to\/mrahdev\/devpush-bulletin-00-fr-3500","guid":"https:\/\/dev.to\/mrahdev\/devpush-bulletin-00-fr-3500","description":"<blockquote>\n<p><strong>Attention<\/strong>: <br>\nCe num\u00e9ro du bulletin a \u00e9t\u00e9 publi\u00e9 le <strong>11 ao\u00fbt 2023<\/strong>, et il est possible que les nouvelles et mises \u00e0 jour <strong>ne soient pas \u00e0 jour<\/strong>.<\/p>\n<\/blockquote>\n\n<p>&nbsp;<\/p>\n\n<h2>\n  \n  \n  \ud83d\udd05 Introduction\n<\/h2>\n\n<p>Bonjour \ud83d\udc4b. Il y a quelques jours, en naviguant sur LinkedIn, j'ai remarqu\u00e9 la possibilit\u00e9 d'envoyer une <strong>newsletter<\/strong> \ud83d\udcf0 sur ce r\u00e9seau. Cela m'a donn\u00e9 l'id\u00e9e \ud83d\udca1 de cr\u00e9er ma propre newsletter et de partager avec vous le contenu int\u00e9ressant que je trouve en ligne dans le domaine de la technologie et de la programmation. Bien, ceci est le num\u00e9ro 0\ufe0f\u20e30\ufe0f\u20e3 et j'ai d\u00e9j\u00e0 quelques id\u00e9es. Cela va probablement s'am\u00e9liorer progressivement.<\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\udce3 L'actualit\u00e9\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 La mauvaise situation du site Stack Overflow\n<\/h3>\n\n<p><a href=\"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=\"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>\n\n<p><a href=\"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=\"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>\n\n<p>Il semble que l'un des sites qui a souffert avec l'arriv\u00e9e 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\u00e9 au cours de ce dernier semestre. Dans un article de <a href=\"https:\/\/observablehq.com\/@ayhanfuat\"><strong>Ayhan Fuat \u00c7elik<\/strong><\/a> sur le site <a href=\"https:\/\/observablehq.com\">observablehq.com<\/a>, il est indiqu\u00e9 que le trafic a diminu\u00e9 de 35 \u00e0 50% et que le nombre de questions-r\u00e9ponses a baiss\u00e9 d'environ 50%. Vous pouvez consulter le rapport complet via le lien ci-dessous:<\/p>\n\n<p>\ud83c\udf10 <a href=\"https:\/\/observablehq.com\/@ayhanfuat\/the-fall-of-stack-overflow\">https:\/\/observablehq.com\/@ayhanfuat\/the-fall-of-stack-overflow<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Le cr\u00e9ateur de Vim est :wq\n<\/h3>\n\n<p>La triste nouvelle du d\u00e9but du mois d'ao\u00fbt a \u00e9t\u00e9 que le cr\u00e9ateur du programme <a href=\"https:\/\/www.vim.org\/\">Vim<\/a>, Monsieur <strong>Bram Moolenaar<\/strong>, est d\u00e9c\u00e9d\u00e9 le 3 ao\u00fbt des suites d'une maladie. Bien qu'il n'ait pas \u00e9t\u00e9 une personne tr\u00e8s connue (et je ne le connaissais pas personnellement), il a vraiment \u00e9t\u00e9 une personne influente dans le domaine de la programmation et de la technologie.<br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Une nouvelle de ChatGPT\n<\/h3>\n\n<p>La soci\u00e9t\u00e9 OpenAI, dans une mise \u00e0 jour publi\u00e9e dans ses documents, a expliqu\u00e9 que cette soci\u00e9t\u00e9 utilise le crawler GPTBot pour indexer le contenu des sites web et a expliqu\u00e9 comment nous pouvons le d\u00e9tecter et m\u00eame le bloquer. Lien de l'article.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/platform.openai.com\/docs\/gptbot\">https:\/\/platform.openai.com\/docs\/gptbot<\/a><br>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 Project IDX par Google\n<\/h3>\n\n<p>Google vient de lancer Project IDX, un superbe nouvel \u00e9diteur de code dans le navigateur + environnement de d\u00e9veloppement. Il supportera une vari\u00e9t\u00e9 de frameworks, tels que Angular, Next.js, React, Svelte et Flutter, avec le support de Python et Go arrivant bient\u00f4t.<\/p>\n\n<p>Pour voir l'introduction de cet outil, vous pouvez aller sur le lien suivant :<\/p>\n\n<p>\ud83c\udf10<a href=\"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>\n\n<p>Et le lien de cet outil lui-m\u00eame est \u00e0 l'adresse suivante :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/idx.dev\">https:\/\/idx.dev<\/a><\/p>\n\n<p>Un utilisateur de Twitter a \u00e9crit \u00e0 propos de cet outil \ud83e\udd23:<\/p>\n\n<p><a href=\"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=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udcf0 La guerre contre les ordinateurs !\n<\/h3>\n\n<p>Cette photo \u00e9tait \u00e9galement int\u00e9ressante. Dans le titre d'un journal en 1981, au moment o\u00f9 les ordinateurs personnels se r\u00e9pandaient, il \u00e9tait \u00e9crit : les enseignants doivent lutter contre les ordinateurs ! Un professeur d'universit\u00e9 avait averti que si les enseignants ne r\u00e9sistaient pas \u00e0 l'invasion croissante des ordinateurs, il \u00e9tait tr\u00e8s probable que d'ici dix ans (1991), l'alphab\u00e9tisation disparaisse compl\u00e8tement !<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>\ud83c\udf10<a href=\"https:\/\/twitter.com\/AlirezaNaji_\/status\/1688784603195080705\">https:\/\/twitter.com\/AlirezaNaji_\/status\/1688784603195080705<\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\ude3a Quoi de neuf sur GitHub ?\n<\/h2>\n\n<p>Si comme moi vous vous \u00eates d\u00e9j\u00e0 demand\u00e9 comment sont construits des outils comme Git, Docker, les bases de donn\u00e9es, etc. que nous utilisons quotidiennement, ce r\u00e9f\u00e9rentiel a catalogu\u00e9 des articles et tutoriels par item pour vous aider \u00e0 comprendre comment ces outils sont construits gr\u00e2ce \u00e0 ces tutoriels, et peut-\u00eatre m\u00eame en construire un vous-m\u00eame.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/github.com\/codecrafters-io\/build-your-own-x\">https:\/\/github.com\/codecrafters-io\/build-your-own-x<\/a><\/p>\n\n\n\n\n<h2>\n  \n  \n  \ud83c\udd95 Mises \u00e0 jour\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udce6Astro 2.10\n<\/h3>\n\n<p>Pendant ce temps, la version 2.10 du framework Astro est sortie et la version 3 devrait \u00e9galement \u00eatre publi\u00e9e prochainement. L'une des nouvelles fonctionnalit\u00e9s int\u00e9ressantes ajout\u00e9es dans ces mises \u00e0 jour est la prise en charge des View Transitions API. Astro est \u00e0 l'origine un framework MPA et cette mise \u00e0 jour donnera l'impression de naviguer sur un site SPA. Voici quelques liens pour mieux comprendre.<\/p>\n\n<p>Diff\u00e9rence entre MPA et SPA :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/docs.astro.build\/en\/concepts\/mpa-vs-spa\/#terminology\">https:\/\/docs.astro.build\/en\/concepts\/mpa-vs-spa\/#terminology<\/a><\/p>\n\n<p>Article du site Google Developers sur View Transitions API<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/view-transitions\">https:\/\/developer.chrome.com\/docs\/web-platform\/view-transitions<\/a><\/p>\n\n<p>Tweet <a class=\"mentioned-user\" href=\"https:\/\/dev.to\/sebastienlorber\">@sebastienlorber<\/a> :<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/twitter.com\/sebastienlorber\/status\/1687403424847921153\">https:\/\/twitter.com\/sebastienlorber\/status\/1687403424847921153<\/a><\/p>\n\n<p>Ou regardez ce tweet \u00ab Faites attention \u00e0 l'adresse du bar \u00bb<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/twitter.com\/astrodotbuild\/status\/1689742663116115969\">https:\/\/twitter.com\/astrodotbuild\/status\/1689742663116115969<\/a><\/p>\n\n<p>Si vous ne connaissez pas encore Astro, ce tweet pourrait vous donner envie d'en savoir plus. <a href=\"https:\/\/twitter.com\/sigma__dev\/status\/1676505365935005696\">Source<\/a><\/p>\n\n<p><a href=\"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=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udce6Version 1.0 de Bun\n<\/h3>\n\n<p>Jarred Sumner, le cr\u00e9ateur de Bun, a annonc\u00e9 dans un tweet que la version 1.0 de Bun sera publi\u00e9e le 7 septembre. Si vous ne connaissez pas Bun, vous pouvez visiter son site web.<\/p>\n\n<p>\ud83c\udf10<a href=\"https:\/\/bun.sh\">bun.sh<\/a><\/p>\n\n<p>Bun est un runtime JavaScript et si vous avez d\u00e9j\u00e0 d\u00e9velopp\u00e9 en JavaScript, vous avez s\u00fbrement entendu parler de <strong>Node.js<\/strong> ou <strong>Deno<\/strong>. Bun est consid\u00e9r\u00e9 comme un concurrent plus rapide que ces deux outils et fournit tous les outils pour travailler avec JavaScript \u00ab TypeScript \u00bb. Juste pour comprendre pourquoi Bun a pu attirer autant d'attention en 1 an, regardez l'image ci-dessous.<\/p>\n\n<p><a href=\"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=\"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>\n&nbsp;<\/p>\n\n<h3>\n  \n  \n  \ud83d\udce6Autres\n<\/h3>\n\n<ul>\n<li>pnpm (Fast, disk space efficient package manager): <a href=\"https:\/\/github.com\/pnpm\/pnpm\/releases\/tag\/v8.6.12\">v8.6.12<\/a>\n<\/li>\n<li>zustan (A small, fast and scalable bearbones state-management) : <a href=\"https:\/\/github.com\/pmndrs\/zustand\/releases\/tag\/v4.4.1\">v4.4.1<\/a>\n<\/li>\n<li>unocss (Atomic CSS Engine) : <a href=\"https:\/\/github.com\/unocss\/unocss\/releases\/tag\/v0.55.0\">v0.55.0<\/a>\n<\/li>\n<li>vite (frontend build tooling) : <a href=\"https:\/\/github.com\/vitejs\/vite\/releases\/tag\/v4.4.9\">v4.4.9<\/a>\n<\/li>\n<li>wordpress : <a href=\"https:\/\/fr.wordpress.org\/2023\/08\/08\/wordpress-6-3-lionel\/\">v6.3 Lionel<\/a>\n<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  \u2705Liens utiles\n<\/h2>\n\n<p>&nbsp;<\/p>\n\n<h3>\n  \n  \n  Technologie\n<\/h3>\n\n<ul>\n<li>\n<a href=\"http:\/\/perplexity.ai\/\">perplexity.ai<\/a> : Un moteur de recherche dot\u00e9 d'IA<\/li>\n<li>\n<p><a href=\"https:\/\/www.maxai.me\/\">maxai.me<\/a> : Une extension dot\u00e9e d'IA pour aider \u00e0 l'\u00e9criture, la lecture rapide, le r\u00e9sum\u00e9 de textes, etc.<br>\n&nbsp;<\/p>\n<h3>\n  \n  \n  D\u00e9veloppement\n<\/h3>\n<\/li>\n<li>\n<p><a href=\"http:\/\/devdocs.io\/\">devdocs.io<\/a> : Toute votre documentation de codage en un seul endroit ! DevDocs combine de multiples r\u00e9f\u00e9rences comme HTML, CSS et JavaScript dans un seul site, etc.<br>\n&nbsp;<\/p>\n<h3>\n  \n  \n  UI &amp; UX\n<\/h3>\n<\/li>\n<li><p><a href=\"https:\/\/icons.mono.company\/\">icons.mono.company<\/a> : Icon gratuits<\/p><\/li>\n<li>\n<p><a href=\"https:\/\/www.figma.com\/community\/file\/1247635958046281195\/Portfolio-Template-(Community)\">Gabarit de portfolio de design minimaliste<\/a> (figma)<br>\n&nbsp;<\/p>\n<h3>\n  \n  \n  Autres\n<\/h3>\n<\/li>\n<li><p><a href=\"http:\/\/resumeworded.com\/\">resumeworded.com<\/a> : Un site pour revoir votre CV et votre profil LinkedIn<\/p><\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  \ud83d\udccb Antis\u00e8che\n<\/h2>\n\n<p><a href=\"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=\"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>\n\n<p>Au revoir ! \ud83d\udc4b<\/p>\n\n","category":["webdev","news","developer","code"]},{"title":"Comment utiliser TypeScript avec Node.js","pubDate":"Thu, 02 Feb 2023 00:00:24 +0000","link":"https:\/\/dev.to\/mrahdev\/comment-utiliser-typescript-avec-nodejs-g5j","guid":"https:\/\/dev.to\/mrahdev\/comment-utiliser-typescript-avec-nodejs-g5j","description":"<p>Apr\u00e8s ma formation CDA (Concepteur D\u00e9veloppeur d\u2019Applications), j\u2019ai pu trouver du temps pour travailler sur mes projets personnels. Je me suis notamment concentr\u00e9 sur le langage TypeScript car j\u2019ai vraiment envie de l\u2019apprendre. J\u2019ai d\u00e9j\u00e0 travaill\u00e9 avec sur mon projet de stage mais j\u2019ai besoin d\u2019enrichir mes comp\u00e9tences sur ce langage.<br>\nPour cela, j\u2019ai cr\u00e9\u00e9 un projet <code>NodeJS<\/code> avec un fichier au format \u00ab <code>.ts<\/code> \u00bb. Sur le <code>package.json<\/code> , j'ai ajout\u00e9 l'entr\u00e9e <code>\"start\"<\/code> avec la valeur <code>\"node index.ts\"<\/code> pour lancer mon projet :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n    <\/span><span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"node index.ts\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>J\u2019ai rencontr\u00e9 un probl\u00e8me parce que mon projet ne s'est pas lanc\u00e9. J'ai compris que j\u2019avais oubli\u00e9 que NodeJS ne fonctionnait pas avec <code>TypeScript<\/code> . NodeJS est un outil pour ex\u00e9cuter JavaScript et non TypeScript. J'ai alors recherch\u00e9 sur le internet pour trouver une solution, pour r\u00e9ussir \u00e0 ex\u00e9cuter TypeScript avec NodeJS et j\u2019ai trouv\u00e9 quelques solutions. Dans ce poste j'ai mis \u00e0 disposition une liste de ces solutions, j\u2019esp\u00e8re que&nbsp;\u00e7a&nbsp;vous&nbsp;aidera.<\/p>\n\n<h2>\n  \n  \n  1- typescript (tsc)\n<\/h2>\n\n<p>La premi\u00e8re solution est d\u2019utiliser le package <code>typescript<\/code> , vous devez installer ce package avec la commande&nbsp;suivante :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i <span class=\"nt\">-D<\/span> typescript\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser cette autre commande, pour configurer&nbsp;le&nbsp;compilateur. Par exemple, choisir la version <code>ECMAScript<\/code> ou le directory pour la sortie des&nbsp;fichiers&nbsp;<code>.js<\/code> :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx tsc <span class=\"nt\">--init<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Ou sinon vous pouvez utiliser cet exemple dans le fichier \u00ab <code>tsconfig.json<\/code> \u00bb :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"compilerOptions\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/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\">\n    <\/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\">\n    <\/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\">\n    <\/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\">\n    <\/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\">\n    <\/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\">\n    <\/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\">\n    <\/span><span class=\"nl\">\"noImplicitAny\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/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\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Et enfin avec la commande suivante, vous pouvez convertir vos fichiers&nbsp;<code>.ts<\/code>&nbsp;en&nbsp;<code>.js<\/code><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>tsc <span class=\"nt\">-p<\/span> <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Si vous avez fait attention \u00e0 la derni\u00e8re commande, elle s\u2019arr\u00eate apr\u00e8s son ex\u00e9cution. Cela signifie que pour chaque changement, on force l'ex\u00e9cution de cette commande pour convertir nos fichiers <code>.ts<\/code> en <code>.js<\/code> . Il existe cependant une meilleure solution qui consiste \u00e0 ajouter le flag <code>\u2014watch<\/code> \u00e0 la fin de la commande, pour que la compilation ne s\u2019arr\u00eate pas et que chaque changement soit automatiquement converti lorsque vous enregistrez vos&nbsp;fichiers&nbsp;<code>.ts<\/code> .<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx tsc <span class=\"nt\">-p<\/span> <span class=\"nb\">.<\/span> <span class=\"nt\">--watch<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Pour terminer, vous devez ajouter l\u2019entr\u00e9e suivante sur la propri\u00e9t\u00e9 <code>scripts<\/code> dans le fichier&nbsp;<code>package.json<\/code> et ex\u00e9cuter la commande <code>npm start<\/code> dans votre terminal :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n    <\/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\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>\ud83c\udf10 Plus de d\u00e9tails : <a href=\"https:\/\/www.typescriptlang.org\/docs\/\" rel=\"noopener noreferrer\">Docs<\/a><\/p>\n\n<h2>\n  \n  \n  2- nodemon\n<\/h2>\n\n<p>La deuxi\u00e8me solution est d\u2019utiliser l\u2019outil <code>nodemon<\/code>. Pour cela vous devez installer les packages suivants :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i <span class=\"nt\">-D<\/span> nodemon @types\/node ts-node typescript\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Ensuite, ajouter l\u2019entr\u00e9e suivante sur la propri\u00e9t\u00e9 <code>scripts<\/code> dans le fichier&nbsp;<code>package.json<\/code> et ex\u00e9cuter la commande <code>npm start<\/code> dans votre terminal :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n    <\/span><span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"nodemon index.ts\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Avec <code>nodemon<\/code> vous n\u2019avez pas besoin d\u2019arr\u00eater votre projet. Il red\u00e9marre automatiquement lorsque que vous enregistrez vos&nbsp;changements.<\/p>\n\n<p>\ud83c\udf10 Plus de d\u00e9tails : <strong><a href=\"https:\/\/github.com\/remy\/nodemon\" rel=\"noopener noreferrer\">GitHub<\/a><\/strong><\/p>\n\n<h2>\n  \n  \n  3- tsx\n<\/h2>\n\n<p>La troisi\u00e8me solution est d\u2019utiliser <code>tsx<\/code> . Pour cela vous devez installer ce package avec la commande suivante :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i <span class=\"nt\">-D<\/span> tsx\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Puis ajouter l\u2019entr\u00e9e suivante sur la propri\u00e9t\u00e9 <code>\"scripts\"<\/code> dans le fichier&nbsp;<code>package.json<\/code> et ex\u00e9cuter la commande <code>npm start<\/code> dans votre terminal :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n    <\/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\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>\ud83c\udf10 Plus de d\u00e9tails : <a href=\"https:\/\/github.com\/esbuild-kit\/tsx\" rel=\"noopener noreferrer\"><strong>GitHub<\/strong><\/a><\/p>\n\n<h2>\n  \n  \n  4- tsc-node-env\n<\/h2>\n\n<p>La derni\u00e8re solution que j\u2019ai trouv\u00e9e, est d\u2019utiliser le package <code>\u201ctsc-node-env\u201d<\/code> . Pour cela vous devez installer les packages suivants :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Pour la surveillance de vos changements, vous devez ajouter l\u2019entr\u00e9e suivante pour la propri\u00e9t\u00e9 <code>\u201cscripts\u201d<\/code> dans le fichier <code>package.json<\/code> et ex\u00e9cuter la commande <code>npm start<\/code> dans votre terminal :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<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\">\n    <\/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\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>\ud83c\udf10 Plus de d\u00e9tails : <strong><a href=\"https:\/\/github.com\/wclr\/ts-node-dev\" rel=\"noopener noreferrer\">GitHub<\/a><\/strong><\/p>\n\n","category":["cryptocurrency","blockchain","web3","offers"]},{"title":"Faites attention en utilisant google fonts","pubDate":"Thu, 25 Aug 2022 20:36:00 +0000","link":"https:\/\/dev.to\/mrahdev\/faites-attention-en-utilisant-google-fonts-27gj","guid":"https:\/\/dev.to\/mrahdev\/faites-attention-en-utilisant-google-fonts-27gj","description":"<p>J\u2019adore la police \u00ab <a href=\"https:\/\/fonts.google.com\/specimen\/Poppins\">Poppins<\/a> \u00bb et je l\u2019utilise habituellement dans mes projets. Pour concevoir mon site, j\u2019ai utilis\u00e9 l\u2019outil <a href=\"http:\/\/fonts.google.com\/\">fonts.google.com<\/a> pour l'obtenir, ainsi que l'autre police \u00ab <a href=\"https:\/\/fonts.google.com\/specimen\/Space+Mono\">Space Mono<\/a> \u00bb. Je les ai utilis\u00e9es et je les ai choisies avec plusieurs graisses diff\u00e9rentes. Je les ai import\u00e9s gr\u00e2ce au lien que le site&nbsp;m\u2019a&nbsp;fourni.<\/p>\n\n<p>Lorsque j'ai cr\u00e9\u00e9 la premi\u00e8re version du site, j'ai utilis\u00e9 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 \u00e0 10 %, \u00e9tait due \u00e0 l'utilisation des polices que j'avais ajout\u00e9es&nbsp;dans&nbsp;le&nbsp;projet.<\/p>\n\n<p>Au d\u00e9but, j'ai essay\u00e9 de r\u00e9duire le nombre de graisse de police, mais cela ne changeait pas beaucoup les r\u00e9sultats. J'ai recherch\u00e9 sur Internet s'il existait de meilleures fa\u00e7ons d'importer des polices personnalis\u00e9es dans le projet, mais je ne trouvais pas de r\u00e9ponse satisfaisante. J'ai commenc\u00e9 \u00e0 oublier ce probl\u00e8me jusqu'\u00e0 ce que je trouve une explication sur l'utilisation des polices dans la documentation&nbsp;du&nbsp;site&nbsp;<a href=\"https:\/\/docs.astro.build\/fr\/guides\/fonts\/\">Astro<\/a>.<\/p>\n\n<p>Cette page donne plusieurs solutions pour importer des polices personnalis\u00e9es, 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&nbsp;nos&nbsp;projets.<\/p>\n\n<p>Par exemple, j'ai install\u00e9 les deux polices que j'ai mentionn\u00e9es ci-dessus comme suit :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @fontsource\/poppins\nnpm <span class=\"nb\">install<\/span> @fontsource\/space-mono\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Ensuite, j'ai ajout\u00e9 ces polices dans la couche d'en-t\u00eate&nbsp;principal (ci-dessous) :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>import <span class=\"s2\">\"@fontsource\/poppins\"<\/span>\nimport <span class=\"s2\">\"@fontsource\/poppins\/500.css\"<\/span>\nimport <span class=\"s2\">\"@fontsource\/poppins\/700.css\"<\/span>\nimport <span class=\"s2\">\"@fontsource\/space-mono\"<\/span>\nimport <span class=\"s2\">\"@fontsource\/space-mono\/700.css\"<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Bien s\u00fbr, le fichier de style contenait d\u00e9j\u00e0 les polices utilis\u00e9es pour chaque balise et chaque classe, il n'\u00e9tait pas n\u00e9cessaire&nbsp;de&nbsp;le&nbsp;modifier.<\/p>\n\n<p>Apr\u00e8s avoir red\u00e9ploy\u00e9 le site et check\u00e9 ses performances avec PageSpeed et Lighthouse, j'ai constat\u00e9 que le score du site avait atteint 98 et 100 %. Autrement dit, avec ce petit changement dans l'utilisation des polices personnalis\u00e9es, ces deux outils ont d\u00e9montr\u00e9 que le score \u00e9t\u00e9 plus \u00e9lev\u00e9&nbsp;de&nbsp;8&nbsp;et&nbsp;10&nbsp;%.<\/p>\n\n<p>J\u2019ai cr\u00e9\u00e9 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=\"http:\/\/fonts.google.com\/\">fonts.google.com<\/a>. J'ai utilis\u00e9 en moyenne 18 polices \u201cPoppins\" avec des graisses diff\u00e9rentes et j'ai check\u00e9 par la suite ses&nbsp;performances.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Lorsque j'ai import\u00e9 des polices par <a href=\"http:\/\/fonts.google.com\/\">fonts.google.com<\/a>, le score&nbsp;\u00e9tait&nbsp;de&nbsp;79%.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Le score obtenu dans le cas o\u00f9 j'utilisais la police self-host, \u00e9tait entre 94 et 97%, soit une augmentation minimum de 15% de plus que&nbsp;le&nbsp;pr\u00e9c\u00e9dent. <\/p>\n\n<p><a href=\"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=\"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>\n\n<p><strong>Conclusion :<\/strong><br>\nL'un des avantages de l'outil Fontsource est de pouvoir utiliser des polices qui sont dans la gamme des lettres latines, ce qui r\u00e9duit consid\u00e9rablement la taille des fichiers de police et acc\u00e9l\u00e8re 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\u00e8res s'y trouvent, mais seulement 11 Ko dans le domaine des lettres&nbsp;latines.<\/p>\n\n<p><a href=\"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=\"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>\n\n<p>Il existe s\u00fbrement de meilleures solutions d'utiliser des polices personnalis\u00e9es que je ne connais pas encore, mais je voulais partager cette exp\u00e9rience avec vous. <\/p>\n\n<p>Bonne&nbsp;journ\u00e9e&nbsp;\u00e0&nbsp;tous.<\/p>\n\n","category":["webdev","html","seo","french"]}]}}