Les news web dev pour Mai 2024 - partie 2

Durée: 19m52s

Date de sortie: 18/05/2024

Dans cet épisode, nous revenons sur une sélection de conférences en vidéo de l'évènement Devoxx France. Nous parlons également de Tabby, une IA open-source pour coder. Nous discuterons d’un retour sur WordPress headless couplé à NextJS. Nous allons aussi jouer à Doom dans le navigateur. Et nous finirons par quelques outils de développement. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/news05-2-24/

Bonjour à tous, bienvenue sur ce nouvel épisode de Double Slash, bienvenue dans ce super
épisode de podcast.
Comme d'habitude, nous sommes avec Alex, salut Alex !
Salut Pat, salut tout le monde ! J'ai failli dire, épisode de news mais en fait,
comme on fait quasiment que des épisodes comme ça, maintenant je ne sais plus ce que je
dois dire donc.
Ouais, c'est pas faux, c'est pas faux.
Mais on va revenir avec des épisodes plus dédiés et spécifiques, c'est vrai que
tous les deux, on a été un peu surchargés, on s'est concentrés plus sur les news, sur
les derniers mois de l'hiver.
On va revenir avec autre chose, avec du contenu et des news évidemment mais aussi des sujets
un peu plus profonds.
C'est vrai qu'on fait plus de news en ce moment.
Ouais, mais après, je sais qu'on a vu que les auditeurs aimaient les épisodes de news
en fait plus que les auditeurs.
Ouais, ouais.
Mais ce qui est important, c'est aussi que nous, on continue et on aime faire ça parce
que faire des épisodes de news c'est bien mais on aime aussi faire des sujets un petit
peu plus profonds et inviter du monde, c'est aussi toujours super sympa aussi.
Ouais, carrément.
On peut déjà annoncer le futur épisode.
Il y a eu le state of HTML qui est sorti cette semaine et puis la Google Io qui était
hier ou avant hier.
Donc le prochain épisode sera certainement basé là-dessus.
Donc restez à l'écoute comme de l'utilisation.
Avec toutes les évolutions des navigateurs, les nouvelles implementations, des nouvelles
APIs, qu'est-ce que ça va changer ?
De quoi on avait parlé l'année dernière ? Est-ce que c'est toujours en suspens ou ça
a été validé ? C'est déjà intégré.
Et le futur évidemment, what's next sur du HTML, CSS ? La base du web quoi en fait.
La base, c'est clair.
C'est la base du web.
Petit sommaire ?
Allez petit sommaire, on va faire un retour de la conférence française, de plein de vidéos
qui sont sorties de DevOps France qui est venue avec une batterie de vidéos.
Toi tu les as quasiment toutes regardées ou en tout cas beaucoup et t'en as sélectionné
quelques-unes qu'on va pouvoir regarder.
On va parler de copilot installé en open source et en local.
Qu'est-ce que c'est ?
On va faire un petit retour sur Next avec Next.js et WordPress.
Comment on couple tout ça ?
On va parler aussi de Doom qui s'installe dans le navigateur ou sur des WordPress.
CSS, en CSS.
En CSS, c'est juste énorme.
On va parler de CSS query pour voir en fait comment on fait pour faire du support, du refactoring de PHP,
du documentation, comment on fait pour bien documenter tout ça.
C'est le programme du nouvel épisode de Double Slash.
On attaque ?
Allez go, c'est parti.
Retour sur DevOps.
Donc DevOps pour ceux qui ne connaissent pas, c'est une des grosses conférences qu'on a à Paris,
qui a déjà une seniorité, ça fait déjà plus de dix ans que ça existe.
Il y a beaucoup de présentations, des vidéos et l'avantage c'est que beaucoup sont filmés et disponibles sur le web.
Donc si vous n'êtes pas dans l'effervescence de cette conférence et vous participez à toutes les conférences en live,
vous pouvez les voir quand même sur YouTube.
Donc tout est accessible, super intéressant.
Et toi, t'en as noté quelques-unes de conférences qui sont vraiment intéressantes ?
Oui, comme tu dis, c'est énormément de conférences.
Je suis abonné à la chaîne YouTube et ça arrivait d'un coup un gros bloc de vidéos,
ça t'envahit ton flux.
J'ai quand même sélectionné quelques vidéos et je les ai regardées évidemment.
Alors il y a un peu de tours en vidéo sur du Java, tout ça.
Alors ça de suite, j'ai carte.
Non merci.
Mais soit pas dur.
C'est que tu n'as pas la culture de ce langage-là parce que tu n'utilises pas au quotidien.
Après, tu peux panier aussi qu'il y a des boîtes qui sont avec Java.
Et donc le langage évolue et donc il faut de l'actualité aussi de ça.
Oui, oui, oui.
Donc j'ai sélectionné, je ne sais pas combien de vidéos, je les ai vraiment regardées.
C'est une sélection de vidéos vraiment intéressantes à regarder.
Donc je vous recommande de les regarder.
Par désorateur, comme la première, c'est la compression web.
Donc c'est avec Hubert Sabenair et Antoine Caron.
Hubert Sabenair, quand il fait des conférences, il est hyper précis, hyper didactique, etc.
Il fait toujours des super conférences.
Donc si vous vous encouragez même à regarder d'autres conférences de Hubert,
c'est là et sur la compression, il explique vraiment comment fonctionne la compression,
comment ça a été inventé, tout ça.
Et après évidemment, comment on l'utilise sur le web, qu'est-ce qui est mieux,
qu'est-ce qui est plus éperformant, etc.
Donc il est vraiment hyper intéressant.
Je la recommande vraiment beaucoup, beaucoup, c'est là.
Fortement, fortement.
Oui, fortement parce qu'en plus, il est agréable à regarder.
Tu vois, ils sont très bons orateurs et tout.
Super.
Nice.
Vraiment.
On a aussi Julien Dénio qui est sur Lyon, je crois.
Je discute tant et tant avec lui sur Twitter.
Il parle des fuseaux horaires.
Donc super intéressant aussi au début, parce qu'il parle de fuseaux horaires,
comment ça a été créé, pourquoi, comment, etc.
Savais-tu que la France a 12 fuseaux horaires et c'est le pays qui a le plus de fuseaux horaires.
Avec le Dome-TOP.
Exactement.
Et donc il faut gérer ces fuseaux horaires.
Après, en fait, quand tu le dis, tu dis, c'est évident,
mais comme ça, c'est vrai qu'au premier abord,
la Chine n'a pas de fuseaux horaires.
Donc un grand pays comme ça.
Il y a plein de trucs comme ça qui te racontent au début, c'est super intéressant.
Et puis après, ils parlent un peu des librairies disponibles dans les langages,
PHP, JS, tout ça.
Comment s'est utilisé, leurs points FELB, etc.
Donc ce part est super intéressant.
Après, les dates, c'est toujours la merde quand même.
On sait que...
On peut le dire.
Surtout en JS.
JS, langage codé en 10 jours, qui a été super malmédiaux à la base.
Mais qui a évolué, Patrick.
Il faut le dire.
Heureusement.
Une autre confe sur Angulars.
Oui, c'est là, elle est beaucoup plus longue,
mais je l'ai regardé entièrement,
je l'ai regardé en deux fois, 2h46 quand même.
C'est une sorte d'atelier quand même,
parce qu'il fait pas mal de démos.
C'est un Madous Sal qui nous fait un retour sur Angulars.
Donc la nouvelle version 17,
qu'est-ce qui a changé par rapport à la version d'avant?
Et les nouveautés, etc.
Les évolutions.
Donc hyper intéressantes, pour moi,
qui n'utilise pas Angulars au quotidien,
ça permet de voir les nouvelles systèmes de template,
il y a les forts,
ils ont simplifié énormément de choses.
Par contre, tu sens qu'on est entre deux versions.
Il y a les nouveautés
qui cohabitent encore avec les anciens trucs.
Je pense que la prochaine version
sera encore plus clean.
Mais il y a vraiment un changement
au niveau d'Angulars.
Réel, qui est beaucoup plus simple
à utiliser.
Il devient presque sexy,
en dire.
C'est méchant de dire ça.
Non, je déconne pas.
Je trouve que Angulars, ça devient pas mal.
J'ai presque envie d'utiliser.
Ok.
Ça marche.
On avait...
Ah oui, celle-là, oui.
C'est là super intéressante aussi,
si LIA vous intéresse.
De toute façon, c'est un peu de l'actualité,
on n'a pas trop le choix.
C'est Arnaud, Pichery et Aurélien Coquart
qui nous expliquent vraiment comment fonctionne
LIA generative, comment elle crée les tokens,
comment elle calcule les tokens,
ça va toujours assez loin
dans les explications.
C'est pas juste en surface,
c'est vraiment profondeur, il t'explique en détail.
Pareil, super intéressante.
J'ai appris plein de choses sur cette vidéo,
puisque je ne suis pas spécialiste de LIA encore.
Ça m'intéresse de savoir comment ça fonctionne,
comment elle calcule.
Qu'est-ce que ça veut dire ?
Tu as un souhait
de plonger dedans.
Non, je ne veux pas être développeur LIA,
mais il faut,
en tant que développeur, on est obligé
de s'intéresser
parce qu'on va devoir l'utiliser,
on n'a pas le choix.
C'est clair que ça va changer nos façons de travailler.
De toute façon, à mon avis,
soit tu prends le train en marche,
soit tu restes sur le bord du quai.
On est complètement d'accord.
De toute façon,
comme on le dit souvent,
utiliser la magie c'est bien, mais comprendre la magie
c'est quand même vachement bien,
c'est vachement mieux et beaucoup plus intéressant.
Et même intellectuellement,
de savoir comment ça fonctionne,
même si tu ne vas pas le faire toi-même.
Tu sais
pourquoi, par exemple,
tu as ton prompt ou ta requête,
elle a croqué je ne sais pas combien de tokens.
Pourquoi ? Parce que telle raison
et tout ça.
Ça explique justement là-dedans.
C'est que les tokens, comment il les fait.
Excellent.
Autre
conférence sur LIA et la médecine.
Oui, ça c'est un peu plus.
Moi, j'ai trouvé intéressant aussi
ces gens Emmanuel Bibo qui expliquent
alors le mec déjà il est surdiplômé,
je ne sais pas comment il fait, il doit avoir des clones
quoi.
Au début, il explique son CV,
je lui dis mais c'est quoi ce mec.
Donc il explique en fait l'utilisation
de LIA en médecine
pour en fait, il donne un cas vraiment
précis, c'est comment
faire des diagnostics de maladies etc.
Et il explique en fait tout le process
et les biens en fait de LIA.
En fait, comment LIA peut
avoir des biens, te donner des mauvais diagnostics etc.
Comment il valide aussi le diagnostic
parce qu'il faut que quelqu'un
dit ok, elle a raison, elle a pas raison etc.
Donc ça c'est pareil, c'est un peu plus
théorique mais hyper intéressant
aussi parce que ça t'indique
aussi comment LIA fonctionne.
J'allais dire dans sa tête mais non.
Comment
tu peux avoir des biens et tout ça.
C'est hyper intéressant, pareil ça s'approche un peu du code
et de ce qu'on peut avoir.
Très intéressant.
Nice.
Nice, nice.
Et il y avait une conférence
sur Tabi.
Ouais, une conférence courte en fait
parce qu'ils ont des conférences qui sont
à 45 minutes et puis d'autres qui sont plus courtes de 15 minutes
et il y a Raffik
qui nous a fait une petite confre de 15 minutes sur Tabi
pour expliquer ce
copilot qui est open source
et que tu peux installer
sur ton
Nordic. Voilà.
Nice.
Donc moi ça fait 3 jours je crois, je l'ai installé
et j'essaye.
Et tu vois une différence avec copilot ou pas ?
Ah ouais.
Mais en mieux, en pas bien
en quoi ?
Alors
déjà pour
installer c'est pas très compliqué
en tout cas sur Mac c'est pas compliqué, après il y a les versions
Docker tout ça. Moi je vais installer sur Mac
avec Homebrew
donc c'est facile à installer, tu installes
et tu choisis un modèle, tu as différents modèles
donc tu ne l'as pas
il va te télécharger automatiquement, tu lances la machine
et tu as Tabi qui est disponible
donc sur le 8080
et tu as aussi une interface
où tu te connectes
pour rentrer 2-3 infos
choisir, peut-être changer le modèle et tu as aussi des stats
sur combien de propositions
que tu as fait, combien tu en as accepté tout ça
et tu as des, voilà, tu es sur la page
là il y a aussi des extensions pour VS Code
que tu dois installer
de la même manière que tu installes celle de copilot
et après tu connectes
en fait
tu as ton extension et ton serveur Tabi
Ouais il se connecte automatiquement
parce que par défaut c'est 8080
donc comme tu l'as lancé il va se connecte automatiquement
tu rentres un token que tu vas chercher
justement sur l'interface web
de son install que tu rentres
dans VS Code et à partir de là ça fonctionne
donc ça fonctionne
pareil que copilot
une fois qu'il est dans
et je vois que
tu as aussi un chat
donc tu peux lui poser des questions en mode chat
et il va répondre
ça j'ai pas encore essayé
moi je suis gros fan de ça
avec copilot tu vois
Vas-y comment tu fais ça
en SQL
comment ça marche les triggers
en Postgres
et en fait il te donne des informations
pour l'instant je suis pas en mode confiance aveugle
je regarde quand même la doc
et pour le coup
non c'est quand même super
c'est quand même top
parce que pour l'exemple
de Postgres et des triggers
c'est pas un truc que tu fais tous les jours
donc de tête
c'est difficile de te rappeler comment tu crées
un trigger et tu vas déclencher
telle fonction
donc voilà c'est un peu
en tout cas moi j'étais pas en capacité de le faire de tête
et donc je dis à taire je vais utiliser
copilot en mode chat
pour poser la question
néanmoins je vais quand même
checker la réponse
et pour le coup c'était vraiment exact
et là je vois il y a chat completion
donc ça veut dire qu'il y aurait potentiellement
aussi un chat dedans
je n'ai pas essayé celui là
trois jours que j'essaye
j'ai essayé un modèle
j'ai un modèle que j'ai principalement
en ce moment
j'en ai essayé un autre mais il déconne un petit peu tout ça
donc je n'ai pas encore essayé tous les modèles
celui que j'ai essayé en ce moment il est un petit peu
comment dire
c'est un petit peu un copilot con con
tu vois
il est pas très intelligent
il me sort des trucs
il est pratique pour
des fois il devine des choses donc ça m'évite de dupliquer
le code machin tout ça il le complète tout seul
mais il est pas
top top quoi
après est-ce que ce modèle il y a des gens
qui le font évoluer
est-ce qu'il est activement entraîné
ou pour l'instant il est posé au milieu de la table
et chacun peut
je sais pas en fait
parce que tu le télécharges est-ce qu'après il y a des mises à jour du modèle
ça je ne sais pas
après je te dis il y a des modèles il y en a peut-être
j'sais pas 8 ou un truc comme ça
donc si tu vas dans le menu
des modèles tu vois
il faudrait voir aussi
l'activité des modèles
est-ce qu'ils sont entraînés, est-ce qu'ils sont poussés, ils sont mis à jour
bien sûr
ça dépend le puissance de ta machine
parce que moi j'en ai c'est un
celui qui est meilleur parce qu'il y a un tableau de comparaison
des modèles tout ça ils en ont fait un
j'ai mis le meilleur du coup et je pense que ma machine
était pas si puissante
ah ouais à ce point-là
ça fonctionne en local donc tu vois t'as les modèles
il y a plusieurs modèles
il y a la MA2 aussi
voilà c'est attesté
mais alors avantage c'est que déjà c'est en local
donc même en offline
ça fonctionne
parce que tu vois que au pilote quand t'es dans la vie
tu l'as pas
voilà
dernièrement j'ai pris l'avion
tu sais t'as l'habitude de copilote
et là tu fais c'est vrai
ouais bien sûr
mais
ça ça m'est arrivé aussi sur le train
où j'ai été bloqué à ça et je fais
ah ouais j'avais
ah bon tiens t'as vu
exactement et
après l'idéal c'est toujours de lui donner
un contexte
tu sais si t'as tes deux panneaux par exemple
tu as un exemple c'était
un store et un composant
en fait tu refactos
et tu déplaces toute la logique
dans le store
et au moment où tu crées ta fonction
bah il te la recolle
directement parce qu'en fait bah c'est ouais tu la déplace
donc il te fait tous
les transferts qui va c'était bluffant
donc ok
bon ce qui est cool au moins c'est que
potentiellement ça tourne
en local et
ouais et donc
au moins il n'y a pas de
à tester de voir comment les
modèles évoluent
à voir mais il le présente
bah graphique là je suis café la con
il le présente aussi comme un outil
qui peut être utilisé en entreprise
si t'es dans une entreprise qui
ne veut pas utiliser Microsoft
et bah en fait
tu peux installer ta bille pour le avoir
un truc partagé en fait dans l'entreprise
alors après il y a peut-être un truc à payer
parce qu'il est open source mais si jamais tu utilises
en entreprise tu dois peut-être payer un truc
une licence ou quelque chose comme ça
ça reste raisonnable
mais voilà ça peut être intéressant aussi pour une entreprise
ouais sur un petit serveur local
et voilà
c'est l'instance en local en fait
et tous les devs
en fait se mettent
dessus et peut-être après est-ce que tu peux entrenais
ton
peut-être qu'elle apprend au fur et à mesure
de ton modèle
tu peux entrenais ton modèle par rapport
à ton propre
ton propre code quoi par exemple
si ton projet est en Rails
tu lui fil a bouffer la doc
de Rails
et peut-être qu'il va être plus pertinent
tu lui donnes à bouffer tout ta code base
enfin tu vois
il faut aller explorer
c'est pas mal hein
intéressant
super intéressant
allez on déroule
retour de conférence
encore sur
du headless
ouais il y a beaucoup de vidéos
mais en même temps on est dans l'air de la vidéo
même si on est encore sur le podcast
exactement
alors pour ceux qui nous écoutent sur le podcast
tant mieux sachez aussi que vous pouvez
nous suivre sur youtube
retour
sur du headless
on vous invite à écouter l'épisode
justement sur les cms headless
et comment utiliser
wordpress aussi
en mode headless
et donc là il y avait un retour d'expérience
de quelqu'un qui a utilisé wordpress
en headless avec un next
en front
et depuis un certain temps
et donc toi tu l'as vu ou tu y étais
à cette conférence ?
j'ai regardé la vidéo
web mardi c'est sur lozan
donc en suisse
c'est tous les premiers mardi du mois
si je me trompe pas
ils ont une conférence
ils sont assez sérieux parce qu'ils ont déjà
la conférence programmée à l'avant
ils sont carré
c'est suissant
ils ont même des sponsors
toujours super intéressant
la conférence est en anglais mais elle n'est pas très compliquée
c'est super huide
c'est une agence de lozan
qui fait des sites assez
intéressants comme jazz, montreux, festival
des choses comme ça
voilà des vraies sites
et donc
leur process interne
c'est qu'ils utilisent wordpress en headless
et en front ils utilisent next
et ils ont développé une librairie
qui utilise
en interne et ils l'ont mis en open source
donc ils l'ont distribué
maintenant elle est accessible directement
j'ai mis le lien dans les notes
et le concept
c'est que, alors je vais réexpliquer
guttenberg utilise
react pour développer les blocs
de l'éditeur en admin
par contre en front
c'est du rendu html, c'est pas du react ou du js
et eux en fait
ils ont voulu faire un truc qui
leur permet de développer
un bloc guttenberg en react
qui soit réutilisable
également en react dans le next
c'est à dire
qui ne code le bloc qu'une fois
et il l'utilisait dans le wordpress
et dans le next.js
en même temps
et donc ça leur permet d'avoir des composants
en fait développés en même temps pour
guttenberg, pour l'éditeur et pour le next
donc ils ont un gain de temps parce qu'ils peuvent
faire ce qu'ils veulent
et voilà il y a tout le process
tout est disponible sur repo
plutôt intéressant, alors il y a des limitations évidemment
mais voilà ils sortent des sites
ils shipent des sites comme ça et ça fonctionne
donc tu as du next qui est hyper
hyper rapide et en même temps derrière
pour l'édition c'est hyper pratique pour
l'éditeur parce que guttenberg est vraiment agréable
à utiliser
le même composant
pour l'éditeur et pour le front
c'est smart
bien wesh les gars
donc petite conférence
de 40 minutes où il explique
en théorie
où il montre aussi comment ils ont fait
il y a pas mal de démo
elle édite des components
et ça on voit que ça m'adjoure le front
et c'est une librairie open source
ils l'ont rendu
enfin ils l'ont ouverte
en tout cas c'est des expos on peut l'utiliser
faire des requêtes tout ça, après ils disent qu'ils ont pas
forcément le temps de
répondre à toutes les issues mais
après c'est plus bon
si ils l'ouvrent aussi en open source
c'est que la communauté peut aussi s'en emparer
on va dire et contribuer
et faire évoluer
et entre gérer toutes les issues
et faire de la review
ou de poule request c'est pas le même job non plus
parce qu'entre
moi je veux ça
mais en fait ils ouvrent une issue
pour faire une feature request
mais ils la codent pas et ils font pas de poule request
bon bah ouais c'est pas le même job
que en mode ok j'ai besoin
d'une nouvelle fonctionnalité j'ai codé
une nouvelle fonctionnalité j'ai publié la poule request
j'ai fait les tests
j'ai tout fait tout nickel et la personne
qui valide le projet ou en tout cas
qui est la maintenance du projet
n'a plus qu'à relire
à peut-être ajuster
ou à faire des retours c'est pas le même job
non c'est du boulot ou l'open source
c'est clair c'est vraiment du boulot
yes
on déroule
Superstack
c'est le
c'est le repo
qui est open source qu'on peut directement utiliser
c'est ça
ils l'ont appelé Superstack
parce que l'agence elle s'appelle Super 8
c'est ça
facile
facile
on passe sur un truc un peu léger
et plutôt intéressant
marrant en tout cas
un Doom qui a été fait en CSS
uniquement
oui t'as vu ça
regarde l'onglet js y'a rien
et nada il y a marqué dans le js
j'aime bien le
pour avancer
tu te tires je sais plus à quel spas
tu scroll
non non
tout se fait
à la souris
au scroll
et
tu contrôles pas du tout
où est ce que tu vas
mais c'est
pas évident en malheur
oui
la performance de faire ça qu'avec du CSS
franchement
parce que là c'est nada nada
la limonada
là clairement on voit bien
donc c'est un code pen
on voit qu'il y a un code pen
et il y a rien dans le js
c'est que
c'est que en
comment ? que en CSS
c'est beau c'est beau c'est complètement useless
c'est IRE
on ne va jamais utiliser ça
mais juste pour
on va dire
l'expérience et pour
la beauté du gest
c'est top
c'est top
et on a la même par contre
là ils ont fait ça sur WordPress
c'est ça ?
c'est un plugin que tu peux installer
donc si tu lances la machine
le playground

non c'est pas celui-là
normalement il y a un lien qui te permet
de lancer la machine
il est un peu plus bas
il est marqué play
et voilà
WordPress Playground
non c'est peut-être pas ça
encore on va y arriver
on va y arriver
ça va être vers le bas je pense
et en fait c'est un plugin
et ça te lance un Doom
donc dans le navigateur
et là par contre c'est autre chose que celui de CSS
parce que tu peux vraiment jouer
play Doom tu l'as juste en bas
play Doom in WordPress
alors déjà ça c'est
Playground c'est un WordPress
qui se lance dans le navigateur en fait
sans install tout ça
via wasm
tu fais skip
mais en fait au-delà
de la news où on peut jouer à Doom
moi qui suis plutôt
extérieur à WordPress
le fait qu'on puisse
lancer un WordPress
et on va dire tester, administrer directement
pour faire des tests
ça c'est super bien non ?
oui oui on avait déjà parlé
en fait ils ont lancé
un système de Playground
ça fait un moment
en fait ça petit à petit
il utilise de plus en plus
c'est un système qui marche
avec wasm qui fait tourner un PHP
et un SQLite
et ça te lance un install
de WordPress c'est une vraie quoi
nice
là il est en train de loader
skip le loading save
et ça devrait marcher
et après tu fais play
le bouton qui est pop
juste un petit gros bouton
c'est très clair
et là ton Doom il fonctionne
et tu as un vrai Doom
en mode
quand tu as joué à l'époque
bien sûr que tu as joué à Doom
et là c'est le vrai
tu tires et tout machin
tu récupères des armes et tout
par contre
excellent
et ça tourne
là on est dans le vrai
vrai Doom
c'est le jeune
les jeunes qui regardent le podcast
ils deviennent
c'est quoi ce truc tout souri
ce jeu est nul
ce jeu est complètement nul
mais après
ce qu'il faut
il faut se rappeler qu'à l'époque
c'était le jeu
trop bien
et après il y avait Duke Nukem
tout ça
toute la clique
et après
pareil il n'y a pas grand intérêt
de jouer à Doom
à part le fait de faire tourner ça
sur un WordPress et ce qui est intéressant
c'est de voir la technologie
qui est utilisée pour justement
mettre ça en place
et aujourd'hui
on fait ça, on fait tourner un Doom
mais demain on fait tourner
autre chose dessus et c'est là
vraiment c'est vraiment intéressant
ouais carrément
on fait tourner un WordPress sans rien installer
on fait tourner un Doom
bientôt on fera tourner une IA directement dans le browser
j'en sais rien
jusqu'où ça va aller
intéressant
intéressant
yes
comment on peut
utiliser
les nouvelles features de CSS
dans le navigateur
et en fait
vas-y je te laisse présenter le truc
parce que c'est un peu touchy
en fait c'est une query classique
comme les tailles d'écran tout ça
sauf que tu vas faire une query
pour demander si JavaScript est activée ou pas
en fait l'intérêt
c'est qu'en fonction de si JavaScript est activée ou pas
si par exemple tu n'as pas de JavaScript
peut-être que
ça ne s'affiche pas sans JavaScript
si tu ne l'as pas activée tu vas faire un CSS
qui va faire afficher
quelque chose à la place ou afficher directement
ça te permet de détecter les features
si tu te dis
des animations
tu vas détecter les animations
enfin tu sais que ça ne va pas marcher
donc tu vas mettre directement l'élément
tu ne vas pas faire de fading
ou un truc comme ça
donc c'est une query
si j'ai bien compris
je ne suis pas sûr de tout avoir compris
c'est mon site qui va faire une requête
à genre can I use
machin qui va
regarder en fait
si toutes les fonctions
dans mon navigateur sont disponibles
et si c'est
bon il va charger
il va faire un chargement conditionnel
c'est beaucoup plus simple que ça
beaucoup plus simple
non ça va pas aussi
non regarde dessin un petit peu
en fait c'est tout simplement
média, scripting, enable
est-ce que JavaScript
est activé ou pas
d'accord tu viens juste tester
mais quel est l'usage ?
parce que la majorité de nos navigateurs
aujourd'hui supportent le JavaScript
mais
je sais pas
il y a peut-être
des lecteurs d'écran
ou des choses
de la accessibility
ou des gens qui des active le JavaScript
sans savoir pourquoi ils le font
mais je sais pas il y a peut-être différentes cas de figure
je sais pas
à un moment on va dire
je sais pas si ça existe des gens qui n'utilisent pas le JavaScript
je pense que oui
mais en tout cas si tu as une animation
qui va afficher tes textes
qui du coup ne va pas fonctionner
sans JavaScript
donc la personne va arriver sur le site
et il n'y aura rien, ça sera vide
il n'y aura pas de technologie
tu as une sorte de fallback
c'est un fallback
en fait ça fonctionne
maintenant on a beaucoup de sites
avec des scroll animations
même si on tourne le franc CSS
mais
il y en a beaucoup
avec jazap tout ça
tu pourras détecter
il y a un exemple
où il y a une animation
et sans animation si tu n'as pas JavaScript
donc
je comprend
c'est beaucoup
effectivement c'est beaucoup
beaucoup plus simple
que faire des requêtes
pour voir si ça supporte
tout
et en fait
toutes ces préférences
d'animation qui peuvent être gérées
dans le système d'OS
souvent on peut désactiver
les animations volontairement
là on a un moyen
de détecter
dans notre CSS
si ces animations
sont activées ou pas
et donc on peut gérer ça
directement dans notre code
c'est ça ?
oui oui, la cohérie
parce que il y a des personnes qui désactivent les animations
qui ont des problèmes de dépit et psy
c'est plutôt préférable de désactiver
les choses qui bougent dans tous les sens
donc ça il faut le respecter
quand vous faites des animations c'est de respecter
les personnes qui désactivent
les choix volontaires
ça c'est uniquement CSS
ce qu'il nous faut voir
et c'est pris en charge
donc pas mal de navigateurs en fait
pour ceux qui ont besoin de cette
cette fonction
en bas je crois qu'il y a les brosers
elle est plutôt disponible
non c'est pas marqué les brosers
non c'est pas, mais on pourrait aller voir
sur
Can I use le site
référence de toutes les API de tous les navigateurs
yes
nice, parfait
et
petite librairie
qui s'appelle Rector
et qui nous permet de faire du
refacto PHP
oui alors c'est un
ils ont sorti, il y a pas très longtemps la version 1
officielle
et donc c'est un
système, un tool
un peu comme un linter
qui va te
regarder si tu as fait des erreurs de code
si il manque des points de rigolos
c'est un peu le même principe, tu vas lancer le script
et il va te refactoriser
en fait ton code PHP
le rendre un petit peu plus efficient
plus clair tout ça
mais par contre, il va refactorer
il le fait vraiment
où il te fait une suggestion
et après que tu peux accepter
bonne question, j'ai pas testé alors peut-être qu'il y a
une version avec un
tiraire W qui fait vraiment qui réécrit
où il y a peut-être une version
et une version qui te suggère
il y a absolument les deux, j'imagine
qu'est-ce que la plupart font ça
au niveau des linters tout ça
mais voilà, il réécrit vraiment le
en tout cas il te
prend une fonction, il va te la dire, ça c'est mieux comme ça
machin c'est plus clair
c'est pas mal
c'est pas mal et c'est open source
top
par contre tu dois avoir
une version PHP assez évoluée je suppose
non ?
oui après les versions la plupart
des gens ont utilisé la 8 donc
il n'y a pas trop de soucis
à part Jean René
qui a codé son framework
en PHP 3
à l'époque
oui il ne peut pas faire ton nez
oui, oui de toute façon on ne pourra pas faire grand chose
mais oui, on va dire sur du PHP
dits moderne on pourra
utiliser ce type
est-ce que c'est
intrinsèquement lié à la Ravel ou rien à voir
c'est vraiment du PHP pure
pure quoi donc j'ai une page
en PHP je peux quand même l'utiliser
pour faire du refacto
et peut-être aussi je peux juste l'utiliser
aussi à des fins pédagogiques
de voir, on va dire peut-être
un junior pourrait
voir comment il pourrait améliorer son code
et
ça peut être super intéressant de voir
enfin même un junior mais même tout le monde
en fait
pourrait voir comment on pourrait refacto
et quelles sont les paternes
que j'ai utilisées sans le savoir
ou justement je devrais utiliser
un espèce de paterne pour faire ça
en plus propre
top
parce que même personnellement j'ai tendance
à refactoriser souvent les
2e fois le code que j'ai écrit ou même des fois une 3e fois
mais il faut
enfin après
je rêve du moment
où tu arrives à faire un truc propre du premier coup
j'ai perso je n'y crois pas
j'y crois pas du tout
tu es obligé
pour le faire évoluer tu dis ok là
ça sera plus facile dans le futur pour le
faire maintenir et tout ça
et justement ça peut être super intéressant
aussi de voir comment on peut
documenter
nos packages
et là on a un article
de Deno
donc Deno qui est
un autre runtime
où on va pouvoir exécuter du code JavaScript
côté serveur
et ils viennent avec
un article
sur comment documenter
les packages
on va dire à quelle seraient les bonnes pratiques
et justement ils font un lien
aussi avec
JSR
qu'on a parlé
de dernier épisode
exactement sur le dernier épisode on était un peu sceptique
on comprenait pas
et au final tout ça
tout concorde
donc
article assez
intéressant où justement il nous explique
comment
documenter toutes les fonctions
comment écrire
la doc du jsdoc
du html
du
du markdown
pour les personnes
qui ont envie
de rendre
exploitable leur code
aussi bien pour leurs collègues
que pour aussi s'ils ont un projet
de publier ce package en open source
ça peut être super intéressant
de regarder en fait
des gens qui travaillent et qui font ça toute la journée
qui partagent en fait
les bonnes pratiques pour justement documenter
ce code là
et pourquoi en fait
il faut le mettre en jsdoc
on dit ça sert à rien
tout mais en fait si vous avez
du type script
dans l'auto complétion
on va avoir plein de choses qui vont se faire tout seul
mais non
oui mais non
mais ouais
déjà
jsdoc
on va expliquer vite fait c'est que tu mets les commentaires
au dessus des fonctions tout ça et automatiquement
c'est jsdoc capable de
générer une doc pour les fonctions
après les commentaires
au dessus des fonctions c'est aussi important
pour toi dans 6 mois
quand tu vas revenir sur ton code
et tu veux dire attends ça fait quoi ça merde je sais plus
déjà d'un
au début ce qu'ils expliquent c'est que
ils ont fait un mix entre jsdoc
donc génération
doc automatique avec les commentaires
et jsr qui a l'air d'avoir dans son flow
en fait un système qui
comme on avait dit dans le dernier épisode
qu'ils ajoutaient automatiquement
les types pour taïscript tout ça
la priori ça prend
les commentaires de jsdoc et ça doit générer aussi une doc
automatique donc comme quoi jsr
ça a l'air pas mal finalement
encore plus de
on voyait pas
l'usage la dernière fois
et en fait on le découvre au fur et à mesure
qu'on explore
ils ont déjà
tu vois et exactement
je suis étonné qu'ils aient déjà sorti un article d'ailleurs là dessus
qu'ils aient déjà utilisé tout ça
donc hyper rapide
top top top
et si on parle
de documentation
on se devait
de montrer encore
un framework pour
éditer notre documentation
par contre là il se veut minimal
et il est fait en réact
avec vit
il est en alpha
autant dire
c'est vraiment le début
peut-être pas
utiliser tout de suite mais
à regarder en fait quel est son prisme
et pourquoi il est intéressant
ça s'appelle
Vox
avec vocs
un de plus
un de plus ouais
il y en a
des générateurs de docs
j'ai peur qu'en fait
qu'on soit un peu
dans un truc un peu sans fin
et j'ai du mal
à faire avoir la distinction entre
tous ces outils là
à force ils se ressemblent tous
ils font à peu près tout ça même chose
markdown
t'as l'impression qu'il y a un truc
d'un générateur de doc qui sort toutes les semaines
donc je sais pas trop mais ça m'a fait marrer alors
j'ai dit tiens un de plus
on va le mettre
mais clairement
à tester au pire
y'a rien de si vous êtes plutôt
facile avec le react
avec le mdx
vous avez cette nouvelle possibilité

yes mais écoute patrick
on en reste là pour cet épisode
et on fait
un petit spoiler
sur le prochain épisode c'est quoi
State of HTML
le retour du sondage
majoritairement répondu par des américains
je vais regarder un petit peu les stats
et puis la google io
qui va les nouveautés
cssjs
navigateur chrome
même si c'est chrome bon
c'est chrome
c'est autre chose que chrome mais bon
chacun fait ce qu'il veut
yes ça marche un grand merci à tout le monde
à tester jusqu'au bout de l'épisode
pensez à mettre un petit pouce, un petit like
ça fait toujours plaisir
un grand merci pour toutes les personnes
qui nous sponsorisent
via le github sponsor
un grand merci
à vous
et on vous dit à très bientôt pour un nouvel épisode
ciao ciao
retrouvez double slash sur le platforme
de podcast préféré
et sur le site internet du podcast
www.slash-podcast.fr
sur le site vous allez retrouver tous les liens
de l'épisode, les références, évoquer
durant l'émission

Les infos glanées

Je suis une fonctionnalité encore en dévelopement

Signaler une erreur

DoubleSlashPodcast

Double Slash, un podcast sur le développement web. Retrouvez-nous régulièrement pour parler de sujets variés tels que la JAMStack, l’accessibilité, l’écoconception, React.js, Vue.js, Next.js, Nuxt.js, le CSS et des retours d’expériences sur des implémentations.
Tags
Card title

Lien du podcast

[{'term': 'Technology', 'label': None, 'scheme': None}, {'term': 'Technology', 'label': None, 'scheme': 'http://www.itunes.com/'}]

Go somewhere