La fin des cookies tiers sur Chrome ! - Actus JS de la semaine (23 octobre 2023) - Vidéo Dailymotion

DevTheory

20% de réduction sur LunarUI avec le code "DEVTHEORY" : https://go.devtheory.fr/lunarui  Node.js v21 : https://nodejs.org/en/blog/announcements/v21-release-announce La fin des cookies tiers sur Chrome : https://developer.chrome.com/blog/cookie-countdown-2023oct Lib: LunarUI pour React & Vue.js : https://go.devtheory.fr/lunarui  -------------------------------------------------------------------- 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 - Node.js v21 02:06 - La fin des cookies tiers sur Chrome 05:37 - Lib: LunarUI pour React & Vue.js 09:16 - Conclusion  Contact partenariat : https://go.devtheory.fr/partenariat

Transcript

00:00 Démarrer l'enregistrement...

00:02 En 2024...

00:24 En 2024, il ne sera plus possible de consulter des cookies de tierce partie sur Google Chrome.

00:31 En 2024, plus aucun utilisateur de Google Chrome n'aura accès à des cookies de tierce partie.

00:52 Google Chrome qui va arrêter...

00:54 Google Chrome qui va supprimer l'accès à tous les tiers parties...

01:00 Google Chrome qui va arrêter l'accès à tous les third-party cookies dès 2024,

01:07 ainsi qu'une librairie de componentes très moderne pour React et Vue.js

01:12 afin de créer vos landing pages très simplement.

01:14 C'est parti pour les actualités de la semaine du lundi 23 octobre 2023.

01:20 Bonjour à tous, c'est Bryan de DevTheory, la chaîne pour devenir et rester un bon développeur JavaScript.

01:27 On va tout de suite commencer par la version 21 de Node.js,

01:31 avant de parler des deux actualités dont j'ai parlé précédemment.

01:34 Alors, la version 21, en quoi elle consiste ?

01:37 C'est surtout un peu une uniformisation...

01:41 Aïe aïe...

01:42 Alors, on va commencer par parler de Node.js version 21,

02:01 la nouvelle version de Node qui est sortie la semaine dernière.

02:04 Ça veut dire que maintenant, la version 21, c'est la version qui est actuellement en current,

02:08 et donc la version 20 passe en LTS, long time support.

02:12 Donc si vous êtes sur une version inférieure à la version 20,

02:15 c'est maintenant le moment de passer à la version 20,

02:18 puisque justement, elle est en long time support,

02:20 donc c'est le moment de la mettre normalement en production.

02:23 Et donc cette version, qu'est-ce qu'elle apporte ?

02:25 Elle apporte surtout une sorte d'uniformisation par rapport aux standards d'API.

02:30 Ici, par exemple, on a maintenant la version stable des web streams.

02:35 Alors les web streams, c'est le fait de, quand on a un serveur, justement HTTP,

02:39 d'envoyer une réponse, mais petit à petit, à l'utilisateur, sous forme de stream, de streaming.

02:43 Donc ça peut être une vidéo qu'on envoie petit à petit,

02:46 mais ça peut être également un message texte qu'on envoie petit à petit,

02:48 et c'est notamment de plus en plus le cas par rapport aux applications d'IA.

02:52 Vous savez, par exemple, comme par exemple ChatGPT,

02:54 le texte va apparaître petit à petit,

02:56 c'est justement parce que le serveur va envoyer un stream,

02:59 donc une réponse en streaming du texte,

03:01 et qui va se générer petit à petit.

03:02 Donc ça, c'est maintenant stable sous Node.js,

03:04 c'est une superbe chose, parce que sous d'autres exécutions de JavaScript,

03:09 environnement d'exécution de JavaScript, c'était déjà le cas.

03:11 Donc maintenant, Node.js a ça.

03:13 Et on a également la version expérimentale des web sockets.

03:16 Donc les web sockets, qui permettent de faire des sockets, justement,

03:19 entre clients et serveurs, et d'autres clients derrière.

03:22 Eh bien, d'avoir cette version expérimentale-là,

03:25 directement implémentée sous Node.js.

03:27 Encore une fois, c'est une preuve que Node.js va justement vers la standardisation de ses API,

03:32 et c'est vraiment super afin d'avoir un code qui fonctionne un peu partout,

03:34 sur le navigateur, sur Node.js, ou sur d'autres environnements d'exécution.

03:38 Donc, parlons des cookies.

03:40 Car effectivement, c'était le sujet principal de cette vidéo.

03:43 Alors, donc, il y a une semaine ou deux semaines,

03:46 Google, Google Chrome a fait donc un article spécial,

03:49 concernant donc la fin des cookies de third party,

03:53 sur tous les sites web, et ça d'ici 2024.

03:56 Donc, comment ça va se passer ?

03:57 En 2000, en 2024, donc le premier trimestre,

04:00 seulement 1% des utilisateurs se verront,

04:03 disables, donc n'auront plus accès aux third parties.

04:07 Donc, comment ça marche ?

04:13 Eh bien, dès le premier trimestre 2024,

04:16 1% des utilisateurs de Google Chrome n'auront plus accès du tout,

04:20 donc, aux third party cookies.

04:22 Et d'ici le troisième trimestre 2024,

04:24 eh bien, ce sera accéléré jusqu'à 100%.

04:27 Donc, en gros, il n'y aura plus aucun utilisateur

04:29 qui aura accès à des cookies de third party.

04:32 Pour rappel, qu'est-ce que c'est que ces cookies-là ?

04:33 C'est quand, en fait, un site web,

04:35 qui n'est pas celui que l'utilisateur actuel visite,

04:38 eh bien, va avoir tout un tas de cookies

04:40 qu'il va pouvoir mettre en place,

04:42 selon le comportement de l'utilisateur sur le site actuellement.

04:45 Et donc, en fait, ces cookies-là vont être partagés

04:47 à travers tous les sites web

04:48 qui vont utiliser justement cet autre site web-là.

04:50 Et donc, ça permet de faire pas mal de systèmes,

04:52 notamment, eh bien, de la publicité personnalisée.

04:57 Et c'est surtout pour éviter ça,

04:59 donc, pour éviter ça, parce qu'il y a pas mal de nouvelles règles

05:01 maintenant qui sont en place,

05:03 que maintenant, Google Chrome va désactiver ça.

05:06 Alors, dans cet article-là, ils indiquent pas mal de choses,

05:08 notamment, par exemple, comment faire un audit

05:10 sur votre site web pour voir quel est votre usage

05:13 des third party cookies.

05:15 Donc, notamment, dans la console, en fait,

05:18 de votre site web,

05:19 eh bien, vous pouvez aller dans "Issues"

05:21 et vous aurez notamment une petite règle

05:23 qui vous dit que certains de vos cookies sont "cross-site"

05:25 et qui seront bloqués, justement,

05:27 dans les futures versions de Chrome.

05:28 Donc, si vous utilisez ces cookies-là,

05:30 eh bien, en fait, en 2024, ça ne marchera plus.

05:33 Votre fonctionnement basé sur l'utilisation de ces cookies-là

05:35 ne fonctionnera plus.

05:37 Ensuite, on nous donne également certaines commandes

05:41 pour, en fait, exécuter Chrome avec certains flags.

05:43 Donc, par exemple, on peut activer ce flag-là

05:45 pour tester le fait de ne plus avoir de cookies third party

05:48 qui soient accessibles sur tous les sites web.

05:50 Donc, vous allez pouvoir tester votre site web

05:52 avec cette version de Chrome-là

05:54 et voir donc si votre site web fonctionne toujours

05:56 de la même manière ou non.

05:57 Et enfin, dans cette partie 3, dans cette partie 4 également,

06:01 et même la partie 5 où ils donnent vraiment beaucoup de choses,

06:03 eh bien, ils donnent toutes les alternatives possibles

06:05 selon vos différents sites web,

06:07 enfin, selon vos différents use cases.

06:09 Donc, selon vos use cases, il peut y avoir des cookies

06:12 qui seront ce qui s'appelle "partitioned".

06:15 Ça veut dire que ce sera un cookie

06:16 qui sera à la fois sur votre site,

06:18 mais également sur le site externe,

06:20 et ce ne sera pas totalement synchronisé,

06:21 mais en fait, ça pourra l'être de temps en temps

06:23 quand l'utilisateur fera une action.

06:25 Et ça s'appelle un système de chips,

06:27 j'en sais pas plus, donc je ne vais pas plus en parler que ça,

06:29 mais c'est une alternative.

06:30 Il y a d'autres alternatives,

06:31 notamment par rapport à une API qui s'appelle

06:34 la "Storage Access API"

06:36 qui permet d'avoir un storage qui soit partagé

06:37 entre plusieurs sites web,

06:39 et ça, c'est quelque chose qui est déjà en place,

06:42 supporté sur Edge, Firefox, Safari et Chrome.

06:45 Donc, c'est une alternative assez bonne par rapport à tout ça.

06:47 Après, il faut savoir que ce ne concerne pas forcément

06:49 tous les sites web,

06:50 d'avoir un fonctionnement basé sur un cookie

06:53 qui est donc partagé avec un third party.

06:56 Ce n'est pas quelque chose qui va être présent

06:58 sur beaucoup de sites web,

06:59 donc je vous conseille quand même

07:00 de tester votre site web

07:02 avec justement le fait d'avoir ces cookies-là désactivés

07:05 pour être sûr que tout marche bien.

07:07 Et donc, dans le cas où il y a quelque chose

07:08 qui ne marche pas,

07:09 je vous mets bien sûr le lien à cet article-là

07:11 juste en dessous en description

07:12 pour que vous ayez voir

07:13 comment avoir une solution pour votre site web.

07:17 [Silence]

07:31 Je vous mets le lien juste en dessous en description

07:33 pour que vous ayez justement le visu

07:36 sur toutes les solutions possibles pour votre cas,

07:38 mais généralement,

07:39 votre site web ou des fonctionnalités

07:41 ne vont pas forcément dépendre des third party cookies.

07:43 C'est plutôt par rapport aux ads

07:45 que ça va se jouer.

07:47 Ensuite, je vous parle d'une...

07:49 [Silence]

07:57 [Tousse]

07:58 [Silence]

08:00 Pour finir, je vous présente une superbe,

08:02 pas librairie,

08:03 mais une superbe collection de components

08:05 que vous pouvez copier-coller sur vos sites web

08:07 qui sont à la fois sur React et sur Vue.js,

08:10 qui sont liés à Talwind CSS

08:12 et qui vous permettent vraiment

08:13 d'avoir des components ultra modernes.

08:16 J'adore cette librairie de components.

08:17 Je l'ai découverte la semaine dernière.

08:19 Et donc, pour vous présenter un petit peu rapidement

08:21 comment ça marche,

08:22 vous voyez que vous avez certains components

08:23 qui sont justement ces Spotlight Cards.

08:26 En fait, avec votre souris,

08:27 ça va créer une sorte de petite...

08:29 Vous voyez, la bordure va dépendre en fait

08:31 de là où est votre souris.

08:33 Et c'est intéressant pour faire ce genre de fonctionnement.

08:35 Il y a également ce genre de testimonials là

08:36 qui vont scroller, qui sont intéressants.

08:38 Il y a tout un tas de fonctionnements

08:40 par rapport au texte également.

08:41 Magnetic Text, c'est également le fait

08:43 que vous allez avoir votre souris

08:44 et en fait, ça va mettre du gras là où vous êtes.

08:47 Pareil pour le Text Reveal,

08:48 ça va être en fonction du scroll.

08:49 Ça, ça va être une petite animation

08:50 que vous allez pouvoir mettre en place

08:51 très simplement avec un seul component.

08:53 De la même manière ici,

08:54 vous avez des animations de scroll

08:56 que vous allez pouvoir faire super simplement

08:58 sur vos pages.

08:59 Ça va donner vraiment un bon effet

09:00 moderne et très, très sympa.

09:02 Et ce que je préfère personnellement,

09:04 c'est les components de navigation.

09:06 Je les trouve magnifiques,

09:07 notamment celui-là, le Navigation Tabs,

09:09 où il y a justement cette box là

09:11 qui va venir changer de texte

09:14 pour voir où on est.

09:15 Et je trouve ça magnifique.

09:16 C'est également présent sur le Dashboard de Vercel.

09:19 Et je trouve ça super beau.

09:21 Vraiment au niveau du code,

09:22 vous avez juste à, là c'est sur React justement,

09:24 donc vous avez juste à récupérer navigation ici,

09:27 ou sur Tac Vue.js,

09:29 vous avez juste à récupérer navgroup,

09:31 navitem et navlist.

09:32 Ensuite, vous copiez et collez ce petit bout de code là

09:34 et c'est fini.

09:35 Vous avez votre navigation avec ici

09:38 donc tous les petits navigateurs,

09:39 enfin tous les petits liens qu'il y a.

09:41 Et il y a également la version verticale bien sûr,

09:43 qui est juste là, qui est magnifique aussi.

09:45 Et une autre version qui est intéressante,

09:47 c'est le Spotlight Tab.

09:48 Donc en gros, en fait, ça va mettre un spotlight

09:50 un peu sur votre lien actuel.

09:52 Et ça va avec le Spotlight Button,

09:54 qui est un peu un CTA,

09:56 donc un Call to Action,

09:57 qui est également super joli, vous voyez,

09:59 et qui va vraiment s'animer à l'instant où on va dessus.

10:01 Donc c'est vraiment une collection de components

10:04 qui est fait pour le landing page,

10:08 pour avoir un effet "Waouh".

10:10 Après, ça peut être également sur des dashboards,

10:12 mais c'est peut-être un peu trop pour des dashboards,

10:14 il y a beaucoup de choses assez modernes.

10:16 Mais pour le landing page, je trouve ça magnifique.

10:17 Et vous voyez, c'est ça la Spotlight Card.

10:19 Vous pouvez mettre votre souris

10:20 et ça va faire un spotlight.

10:21 Et c'est également géré à travers un overlay

10:24 pour plusieurs cardes à la fois.

10:25 Vous voyez que ça impacte l'autre carte d'à côté,

10:27 même si je suis toujours sur celle-ci.

10:28 Donc c'est très sympa d'avoir ce genre d'effet là.

10:30 Alors oui, c'est quelque chose qui est payant.

10:32 C'est quelque chose qui est payant

10:34 si on va dans "Get Lifetime Access".

10:36 On a accès à cette collection de components,

10:39 mais également à un template de landing page

10:42 qui est fait avec ça,

10:43 soit sous Revu, soit sous React.

10:45 C'est 49 dollars,

10:46 mais j'ai pu négocier avec la personne

10:48 pour que si vous mettez le code "Dev Theory",

10:52 vous ayez une réduction de 10 dollars.

10:55 Donc une réduction de 10 dollars se fait

10:56 quand vous avez le code "Dev Theory".

10:58 Alors pourquoi j'ai mis en place cette réduction ?

11:00 Parce qu'en fait, en passant par mon lien

11:02 via Lunar de Lunary UI,

11:05 qui est juste en dessous en description,

11:06 je touche une petite affiliation

11:08 par rapport à votre achat.

11:10 Donc si jamais vous souhaitez soutenir

11:12 le format des actualités de la semaine

11:13 et que cette librairie de components vous intéresse,

11:16 alors passez par le lien juste en dessous

11:18 et en plus, appliquez le coupon "Dev Theory"

11:20 pour avoir une réduction.

11:21 Donc vous pouvez acheter directement

11:23 cette librairie de components

11:25 ou alors juste le template.

11:26 Il y a également le template Recharger

11:28 qui est à 39 dollars

11:30 mais dont vous avez accès

11:31 si jamais vous achetez le bundle.

11:33 Voilà concernant cette petite librairie de components

11:36 que je trouve très intéressante

11:38 pour des landing page surtout.

11:40 Et c'est tout pour cette semaine.

11:41 Écoutez, je vous mets le lien

11:42 de toutes ces petites actualités

11:43 juste en dessous en description.

11:45 Quant à nous, on se retrouve bien sûr

11:46 dès lundi prochain

11:48 et je vous souhaite un très très bon codage

11:50 et une bonne semaine.

11:52 Merci d'avoir regardé cette vidéo !

La fin des cookies tiers sur Chrome ! - Actus JS de la semaine (23 octobre 2023)

Category

Transcription

Recommandations