Cloudflare remplace Google Fonts ! - Actus JS de la semaine (16 octobre 2023) - Vidéo Dailymotion

DevTheory

Cours: Fondamentaux des test unitaires en JS : https://go.devtheory.fr/cours-unit-testing  Actu: Bruno - Client et collections d'APIs : https://www.usebruno.com/  Actu: Cloudflare Fonts : https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/ Lib: Hotkey.js v2.1 : https://github.com/github/hotkey/releases/tag/v2.1.0 Cours: Fondamentaux des test unitaires en JS : https://go.devtheory.fr/cours-unit-testing  -------------------------------------------------------------------- DevTheory   Formations : https://devtheory.fr/?utm_source=youtube&utm_medium=yt_description Discord : https://go.devtheory.fr/discord Twitter: https://go.devtheory.fr/twitter LinkedIn : https://go.devtheory.fr/linkedin  -------------------------------------------------------------------- Informations  00:00 - Introduction 00:26 - Actu: Bruno - Client et collections d'APIs 04:28 - Actu: Cloudflare Fonts 08:34 - Lib: Hotkey.js v2.1 10:39 - Cours: Fondamentaux des test unitaires en JS 11:27 - Conclusion  Contact partenariat : https://go.devtheory.fr/partenariat

Transcript

00:00 man qui se fait menacer par un projet open source ainsi que Google Fonts qui se fait

00:05 remplacer par Cloudflare. Bienvenue dans l'actualité de la semaine du lundi 16 octobre 2023. C'est parti !

00:12 Bonjour à tous, c'est Bryan de Dev Theory, la chaîne pour devenir et rester un bon développeur

00:20 JavaScript. On se retrouve cette semaine et on va parler de Bruno. Bruno est un nouveau

00:26 projet qui fait beaucoup parler de lui depuis une semaine ou deux parce qu'en fait il est très

00:31 intéressant dans ce qu'il va apporter à vos projets, notamment son remplacement à Postman.

00:37 Alors comme vous le savez, Postman c'est un outil qu'on utilise beaucoup, du moins qu'on a

00:43 beaucoup utilisé pour tester des API, mais il est également beaucoup utilisé à l'échelle

00:48 des entreprises pour faire des collections d'API, des collections d'appels en fait. Et cette collection

00:53 là, c'est un peu le guide, c'est un peu la documentation de la manière dont on peut

00:57 utiliser l'API. Et donc c'est le problème avec Postman, c'est que tout est propriétaire, tout

01:04 est sur leur cloud, on ne peut pas avoir les données chez nous. Et bien c'est exactement le

01:09 pain point que va résoudre Bruno. Bruno est un projet 100% open source, il n'y a pas une chose

01:15 de payante en fait dans Bruno et ce qui est intéressant, c'est justement que vous allez

01:20 avoir toute votre collection d'appels à votre API, donc tout votre guide sur comment mon API

01:25 fonctionne, quel type de header il faut, s'il faut un poste, du get, etc. Et bien toute cette

01:30 collection d'API là, vous l'aurez directement sur vos propres fichiers en local et bien sûr,

01:36 et bien tout ça en fait va pouvoir se mettre derrière à travers des repositories Git,

01:40 que ce soit intégré dans votre repository qui est lui-même, qui contient lui-même le code de votre

01:46 API ou alors un repository à part pour toutes vos collections en fait. Et donc ce qui est très

01:51 intéressant, c'est qu'ils ont en plus créé une application desktop qui va pouvoir lire votre

01:57 collection d'appels d'API. Ensuite vous allez avoir également Bruno en CLI et je crois que

02:02 ce n'est pas encore le cas mais que c'est prévu qu'il y ait une extension VS Code. Donc comment

02:07 ça marche un petit peu ? En fait vous allez avoir un nouveau type de fichier, un fichier avec une

02:13 extension .bru, je ne sais pas exactement comment le prononcer, on va dire "bru". Donc ces fichiers

02:18 .bru, et bien en fait ils vont contenir un appel à votre API. Donc si on va un peu plus dans la

02:26 documentation pour voir à quoi ça ressemble, overview, et bien voilà on peut voir qu'il y a

02:30 par exemple certaines métas dans ce fichier là .bru et en fait ces métas c'est simplement la

02:35 description de ce qu'est cet appel là. On voit que le nom de cet appel là, et bien ça s'appelle

02:41 "search repose", c'est du HTTP et là on a sec1, je ne sais plus exactement à quoi ça correspond,

02:45 mais en tout cas derrière on sait que c'est un appel "get" qu'il faut faire et ensuite on a

02:49 l'URL, on a la base URL et ensuite on a l'URL réelle et après on a les paramètres en query par

02:55 exemple. Et ça c'est un exemple vraiment typique parce qu'il peut y avoir par exemple l'ajout de

02:59 headers, vous voyez, l'ajout bien sûr d'un poste, ici on aurait donc le body, encore une fois les

03:05 headers, on a même du scripting, c'est à dire qu'on va pouvoir rajouter l'effet de par exemple

03:09 mettre des tests et ces tests là ils vont pouvoir s'exécuter et bien une fois que vous avez publié,

03:16 vous avez push quelque chose sur votre repository et donc que vos GitHub actions par exemple

03:21 s'exécutent. Et donc dans vos GitHub actions vous pouvez dire d'exécuter tous les appels de Bruno

03:26 et donc ça va faire en sorte qu'à la fois ça va être un répertoire, une documentation pour l'appel

03:30 à vos API, mais en même temps ça va tester si votre API fonctionne bel et bien. Et donc ça c'est

03:35 vraiment bien d'avoir tout ça en un fichier en fait pour voir comment se fait l'appel et la

03:40 manière dont il doit se faire et ça je trouve ça vraiment très intéressant. Après il y a toute

03:44 une gestion également des secrets, comment gérer via dotonfile etc pour avoir justement le base URL

03:51 qui se met en place, pour avoir les différentes clés d'API qui se mettent en place également.

03:54 Et donc derrière je vous disais, on peut faire du testing, du scripting même et voilà en fait

04:00 c'est à peu près tout concernant Bruno et c'est déjà très intéressant en fait, c'est très

04:04 intéressant de pouvoir avoir ça directement dans votre repository GitHub où vous avez votre API et

04:10 non plus à travers un service externe comme Postman qui est une technologie propriétaire dans

04:16 laquelle on n'a pas accès forcément à nos données. Et bien Bruno va totalement répondre à ça et je

04:20 trouve que c'est un super projet qui peut être intéressant pour tout type de développeurs

04:24 développant une API. Voilà tout concernant Bruno. Ensuite nouvelle nouvelle nouvelle cette semaine

04:30 et bien c'est Cloudflare Fonts. Alors Cloudflare Fonts qu'est-ce que c'est ? Et bien en fait il se

04:36 base d'une chose, il se base d'un constat c'est que Google Fonts c'est un super service. Google

04:40 Fonts vous le connaissez très probablement, ça permet et bien gratuitement d'avoir accès à un

04:44 très très grand nombre de fonts, de polices d'écriture donc pour vos sites web et de sélectionner

04:49 exactement ce qu'on veut. Et bien Google Fonts c'est vraiment super mais il y a deux petits

04:54 problèmes du moins, deux petits problèmes pour Cloudflare. Le premier c'est un constat par rapport

04:59 à la vie privée. Effectivement Google va pouvoir récupérer l'adresse IP de vos utilisateurs,

05:04 l'user agent, le referrer et d'autres choses et ça c'est pas forcément une bonne chose que Google

05:09 récupère ces données là. Notamment je crois bien que la dernière version de Google Fonts n'est même

05:13 pas RGPD. Alors on croit qu'elle l'est mais je crois qu'elle ne l'est même pas donc c'est

05:18 intéressant de voir ça par rapport à Google Fonts. Et également un autre constat c'est le fait qu'il

05:23 y a beaucoup trop d'appels de va-et-vient sur la recherche des fonts. Effectivement

05:28 vous allez appeler le domaine fonts.googleapis.com sauf qu'après votre fonte elle n'est pas stockée

05:34 sur ce domaine là, elle est stockée sur un autre sous-domaine qui est fonts.gstatic.com. Ce qui

05:40 fait en sorte qu'en fait il y ait toutes des requêtes qui se font en fait. Vous voyez là il

05:44 y a toute une sorte de cascade de requêtes parce que d'abord on va récupérer votre fonte sur

05:48 Google APIs puis après on va récupérer toutes les fontes de gstatic.com etc. Donc ça fait en sorte

05:53 que c'est pas mal plus long en fait alors que c'est pas forcément nécessaire. Et donc qu'est-ce

05:58 qui se passe ? Qu'est-ce que c'est Cloudflare Fonts ? Cloudflare Fonts c'est vraiment très

06:03 intéressant parce qu'en fait vous allez garder votre ligne de code de Google Fonts. Donc vous

06:07 allez garder cette ligne là, vous allez la garder, vous allez mettre "Fonts Google", je vais récupérer

06:13 mon OpenSort en Roboto soit en italique soit en gras etc. Et en fait ce qui va se passer une fois

06:18 que vous activez Cloudflare Fonts, c'est qu'il va vous remplacer cette ligne là et il va faire en

06:24 sorte que dans votre serveur, dans votre domaine d'ailleurs, il va créer un nouveau dossier,

06:30 un nouveau répertoire /cf/fonts/cloudflare/fonts et dans ce répertoire là il va inclure exactement

06:37 les fontes justement que vous avez appelées de Google. Ce qui va se passer c'est qu'il n'y aura

06:44 plus aucun appel à Google derrière en fait dans votre code réel exécuté par le client et bien en

06:52 fait ce sera simplement /cf/fonts, vous voyez qu'il va être appelé, il n'y aura plus aucun appel à

06:57 Google puisque Cloudflare va intégrer les fonts directement dans votre domaine en fait. Il va lui

07:03 même gérer tout ça et ça c'est beaucoup mieux puisqu'il va y avoir en fait aucun va-et-vient,

07:07 ça va être toujours sur votre domaine que tout va se passer et donc ça va être beaucoup plus

07:10 rapide et en plus Google va n'avoir accès à rien puisque c'est Cloudflare au préalable qui aura

07:15 récupéré les fonts au moment où il détecte justement que vous avez un lien de Google Fonts.

07:21 Et donc qu'est ce qui se passe au niveau des performances ? Au niveau du Google Lighthouse,

07:25 du First Contentful Paint dont la première chose qui s'affiche, on est passé de 0,9 à 0,3 secondes

07:33 en activant cette option. Donc c'est vraiment quelque chose qui est super, qui s'active en un

07:38 toggle et vous avez déjà une optimisation de performance et même de vie privée, de respect

07:43 de la vie privée pour vos utilisateurs. Donc je trouve que c'est une super petite chose qui vient

07:47 d'être lancée, ça y est, cet article là il est sorti il y a un mois ou deux mais je voulais pas

07:51 vous en parler tout de suite parce que c'est pas encore disponible mais ça y est maintenant c'est

07:54 disponible donc si jamais vous allez sur votre tableau de bord Cloudflare, vous allez donc dans

08:01 votre domaine spécifique, ensuite vous allez dans l'onglet Speed, Optimisation et Optimisation de

08:07 contenu ou Content Optimisation si vous êtes en anglais, et bien vous avez juste à activer

08:11 Cloudflare Fonts, à mettre, vous voyez un petit "on" sur ce toggle là et ça y est c'est fait en

08:16 place. Donc moi je l'ai fait sur les différents sites web où j'utilise Cloudflare et j'utilise

08:20 également Google Fonts, je l'ai fait et je trouve que c'est vraiment super d'avoir cette petite

08:23 optimisation gratuite qui fait du mal à personne et qui vraiment permet quelque chose de meilleur

08:28 pour vos utilisateurs. Voilà tout concernant Cloudflare Fonts. Dernière petite chose c'est

08:34 la librairie de la semaine. Librairie de la semaine c'est Hotkey. Alors pour ceux qui ne

08:38 savent pas forcément ce qu'est Hotkey, je crois bien que je vous en avais déjà parlé, c'est en

08:41 fait, oula non c'est pas ça que je voulais faire, tac, c'est en fait une librairie qui permet de

08:45 créer des raccourcis clavier sur vos éléments afin d'exécuter les éléments. Donc par exemple

08:52 vous avez ici un bouton avec un attribut "Data Hotkey" qui vaut Shift + ? donc ça veut dire

08:58 qu'il faut appuyer à la fois sur la bouche Shift et la ? et en fait ça va faire en sorte

09:03 d'activer cet élément, ça va faire en sorte de cliquer sur le bouton et ça fait la même chose

09:07 sur certains éléments comme des "a" par exemple ici Data Hotkey "j" ça veut dire que si on clique

09:12 sur "j" et bien en fait ça va faire en sorte de cliquer sur le lien avec ce href là. La même

09:17 chose pour ce search là, là ça va faire en sorte que soit "s" soit "/" active ce lien ensuite là

09:23 il faut faire "g" puis "c" ensuite là il faut faire ctrl + alt + h etc en même temps pour

09:29 pour activer ce lien là. Et comment ça marche au niveau de javascript ? et bien vous avez juste à

09:33 importer la petite méthode install et ensuite vous récupérez tous vos éléments qui ont et bien cet

09:39 attribut Data Hotkey et vous faites une installation donc sur cet élément là et c'est fini c'est en

09:43 place vous allez pouvoir déclencher vos éléments via des raccourcis clavier. C'est une super librairie

09:47 qui est d'ailleurs créée par Github donc quand on a une librairie qui est créée par Github on sait que c'est

09:50 du sérieux on peut la mettre en place ça sera toujours assez bien maintenue. Et donc pourquoi

09:55 je vous parle de cette V 2.1 ? parce qu'il y a un nouveau modifier qui est super intéressant

10:01 qui s'appelle "mod" et en fait "mod" il va venir remplacer le fait d'être soit la touche ctrl

10:08 sur Windows et Linux ou soit la touche "meta" donc la touche commande sur Mac parce qu'avant il fallait

10:13 faire deux commandes il fallait faire un hotkey sur soit ctrl + s ou meta + s en fait et bien

10:20 maintenant on peut juste faire un Data Hotkey de "mod" + s et selon là où est votre utilisateur

10:27 Mac, Windows ou Linux et bien ça va automatiquement remplacer ce "mod" par un "meta" ou un "control"

10:32 donc c'est en fait encore plus simple de faire des raccourcis clavier via la touche "control" ou la

10:35 touche "commande" sur Mac. Voilà tout donc concernant un hotkey. Dernière chose puisqu'on a parlé

10:40 rapidement de tests unitaires je voulais quand même vous représenter un cours que j'avais fait

10:44 un petit cours en ligne de 2h15 qui vous permet d'avoir les fondamentaux sur les tests unitaires

10:49 appliqués au javascript donc si jamais vous savez pas vraiment comment faire les tests unitaires

10:53 comment ça marche etc et bien vous suivez ce petit cours de 2h15 et vous allez comprendre

10:57 tous les tests unitaires c'est à dire que vous allez comprendre comment on les met en place qu'est

11:01 ce que c'est à quoi ça sert, quelle librairie utiliser, geste, vitesse etc comment les mettre en

11:05 place bien sûr mais aussi comment faire une simulation du DOM, comment gérer la synchrone

11:10 et ça ça marchera à la fois sur un LGS et sur un navigateur donc c'est assez rapide mais ça permet

11:15 voilà de bien comprendre comment les tests unitaires fonctionnent et donc je pense que ça

11:19 peut intéresser pas mal d'entre nous qui n'ont pas forcément fait beaucoup de tests unitaires

11:22 ou qui commencent tout juste avec le javascript de faire des tests unitaires. Voilà tout cette

11:27 semaine je vous mets le lien de toutes ces petites actualités juste en dessous en description je

11:32 vous souhaite une excellente semaine et bien sûr on se retrouve dès lundi prochain très bon codage à tous

11:37 [Musique]

Cloudflare remplace Google Fonts ! - Actus JS de la semaine (16 octobre 2023)

Category

Transcription

Recommandations