Les News Web Dev pour Noël 2023

Durée: 21m35s

Date de sortie: 21/12/2023

Un épisode de news pour Noël 2023. Nous évoquons dans cet épisode plus court que d'habitude. La version 3.4 de Tailwind CSS. Storybook qui prend en charge les RSC dans sa version 8 alpha. Tastejs, une app développée sous différents frameworks. Enhance, un framework méconnu tout mignon ! Et json Hero, un outil pour visualiser les données JSON. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/newsnoel23/

Bienvenue sur Double Slash, bonjour à tous et à tous et à D&D, bienvenue sur ce
épisode de Double Slash, bah oui effectivement le dernier épisode de News on avait dit que
c'était le dernier d'année et puis ah, eh bah non, nous revoilà ! Salut Alex, comment
ça va ? Salut Patrick, salut tout le monde, bah ouais
et il y a quand même des trucs sympas pour Noël qui sortent, même s'il y a encore
une hype au moment où on enregistre avec, avec Talwin et son système de catalys avec
sa librairie de composants, on va en parler, on va parler aussi de Test.js Taste du Goût
pour, qui est en fait un site qui a repris plein de, qui a fait le même site en fait
avec tout plein de frameworks différents donc on va regarder ça, on va regarder aussi
un petit utilitaire de Dyson et puis un petit framework.js aussi, enfin pas tout à fait,
on va en parler.
Ouais, pas tout à fait, ouais en fait bah pourquoi on est de retour cette semaine en fait tout
simplement parce qu'on aimerait tester un petit format en fait, un format un peu plus
court de News, voilà.
Mais plus récent, enfin plus fréquemment on viendra, plus fréquent.
Voilà, la News plus fraîche mais plus fréquent et un peu plus court donc on sait pas si ça
vous plaire tout ça donc c'est un test donc du coup on verra suivant vos retours.
Évidemment les retours c'est un petit pouce, un petit commentaire et c'est toujours sympa
de voir si vous êtes plutôt adeptes de ces formats courts, on verra en tout cas.
On attaque Patrick ?
Yes, carrément.
19 décembre, sorti de Tailwind n°3.4, alors il n'y a pas de révolution majeure, si
ce n'est quand même une intégration de toutes les nouvelles propriétés CSS qui sont devenues
natives, on va dire sur les 6 derniers mois, ça a pas mal bougé, on a je pense quand même
couvert assez toute l'actualité sur le CSS et là maintenant avec cette version tout
est intégré directement dans Tailwind.
Oui, je pense que c'est quand même une version majeure, ça a du coup de news super fraîche
c'était hier donc.
Non, pour moi c'est vraiment une version majeure parce que ça intégré énormément de fonctions
natives qui sont intégrées dans le CSS et donc ils ont toutes intégrées comme ça
dans Tailwind, le As, le text wrap balance, enfin il y a plein de choses comme ça, subgrid,
donc plein de choses.
À noter, nous, news encore plus fraîche que j'ai vu tout à l'heure, il n'y a même
pas une heure en suite comme quoi Firefox enfin ça y est, intégrer le As, c'était
le dernier browser qui n'avait pas encore intégré.
Donc officiellement on a tous les browsers qui prennent en charge As.
Et pour le coup si vous faites du CSS, on va dire un peu pousser, si vous êtes developer
front, en même temps, je vous invite, on vous invite fortement à regarder la propriété
CSS As si vous n'avez pas encore fait parce que ça va vous simplifier la vie de ma boule,
de ma boule, clairement.
Bah complètement parce que tu peux contrôler en fonction ce que contient l'élément en
fait.
Donc à partir de là, ça t'ouvre des possibilités incroyables, tu n'as même plus besoin de
faire du JS tout ça pour contrôler si tu veux.
Tu veux vir taquer JS et ça c'est bien.
Ouais, voilà, donc il y a plein de nouveautés, subgrid, il y a les nouvelles propriétés
aussi de hauteur, tout ça, DBH, tout ça.
Donc il y a vraiment, enfin c'est quand même une version qui apporte beaucoup de choses.
Text wrap, très intéressant.
Ouais, ouais, ouais, text wrap balance, même si dans un temps, j'ai l'impression qu'il
déconne un peu, mais je ne sais pas.
Peut-être que j'utilise mal.
Peut-être qu'il n'y avait pas encore une implémentation partout sur tous les navigateurs.
Ouais, ouais.
Je pense que c'est peut-être aussi l'allemand avec ces textes à rallonge.
Ah, peut-être.
Le WAP n'est pas fait pour des mots trop longs.
Ouais, ne fait jamais d'allemand, c'est horrible.
C'est pas des mots, ça dépasse toujours de toute façon.
Par contre, moi je suis super content sur ces hauteurs de DBH, tout ça, ce qui nous
évite de faire plein, qui nous supprime en fait le calcul qu'on était obligé de
faire, tout.
Là, c'est vraiment super, super sympa.
Ouais, DBH, donc Dynamics Viewport, essentiellement aussi en mobile.
Par exemple sur iPhone, nous avez, temps en temps, la barre avec l'URL, tout ça qui
disparaît, donc ça s'adapte en fait.
La hauteur change forcément quand vous scroller tout ça, donc ça s'adapte.
Donc Dynamics Viewport.
Excellent.
Excellent.
Ça c'est cool.
Allez, Storybook qui vient intégrer.
Attends, on a pas oublié un truc là.
Ah, j'ai oublié un truc.
Catalyst.
Catalyst, eh ben oui, parce qu'il faut qu'on reste dans l'univers de Tailwind avec Catalyst.
Toc.
Attends, est-ce qu'il n'a pas annoncé encore, parce que non toujours pas, il n'y a...
Il n'a rien.
En fait, pour que Catalyst, d'après Adam Watan, il y a 13 heures, il a tweeté que ça sortait
aujourd'hui là, donc la version 0.1.0.
Alors moi, je n'ai pas trop fouillé ce que c'était.
J'ai vu que c'était des components en fait, basés sur Tailwind et sur, je pense, React,
où j'ai pas bien suivi.
Oui.
T'as rué un peu ou...
Je vais redire ce que j'avais déjà dit sur Catalyst, je pense que c'est un projet qui
arrive peut-être un petit peu trop tard.
Dans la mesure où il y a pléthor de librairies de composants qui ont fleuri après les pionniers.
Les pionniers, c'était Tailwind UI.
Par contre, c'était quelque chose de très orienté React V.
Derrière, il y a plein d'autres librairies payantes qui se sont développées, qui ont
l'accessibilité sur l'intégration, sur vraiment la configuration ou malgré le fait que la
librairie de composants soit vraiment agnostique et en termes de design, on peut tout customiser.
Là, il y en a plein d'autres.
Donc vraiment, le niveau a vraiment monté et je ne sais pas ce qu'ils vont amener de plus en fait.
C'est clair.
Donc je suis assez curieux, mais je ne suis pas complètement hyper en mode,
« wow, il y a ce nouveau truc qui va sortir », parce que j'ai peur d'être un petit peu déçu.
Et on va dire que c'est devenu un peu un standard.
Il y a des librairies de composants qui font ça super bien, qui sont open source.
Pourquoi je vais payer ?
Alors, ce n'est pas que je ne veux pas payer, mais quelle va être la réelle plus-value de cette librairie de composants ?
Pour le coup, je serai curieux, je regarderai quand ça va sortir, mais je suis un peu sceptique.
Quelques heures.
Je suis un peu sceptique.
Quand vous écouterez l'épisode, normalement ça sera sorti.
On va en mettre, il va apporter des grosses nouveautés.
On n'a jamais curieux.
Dans tous les cas, on mettra les liens et on en reparlera dans un prochain épisode,
où on aura pu tester et on verra si c'est breaking change ou pas.
Ouais, carrément.
Allez, on parle cette fois-ci de Storybook et son intégration avec les React Server Component.
Yes, version 8 qui est en alpha, donc prochaine version est sur la 7,
qui avait beaucoup évolué, qui s'était énormément simplifié.
Depuis de début, Storybook s'est beaucoup simplifié.
Au début, c'était beaucoup d'écriture, pour faire des components et tout, des stories.
Et puis, petit à petit, c'est devenu de plus en plus automatique, de plus en plus simple.
Et là, la version 8 arrive bientôt, et on a les serveurs component qui seront pris en charge.
Et c'est important puisque ça fait partie maintenant de l'écosystème React et ça fait partie du code, donc c'est natif.
Donc, il faut les prendre en charge pour pouvoir afficher les components.
Donc, c'est une bonne nouvelle pour ceux qui font des Storybooks,
de pouvoir continuer à afficher votre Libre-Rect Component avec les serveurs component.
Après, je ne sais pas quelle est la bonne taille pour utiliser cette Storybook, en fait.
La taille d'équipe, je veux dire.
C'était tout seul, 2-3 équipes, 2-3 développeurs sur le projet.
À partir de quand, en fait, c'est vraiment intéressant de basculer sur un outil comme ça
pour centraliser et administrer tous les composants.
Je ne sais pas trop.
C'est pas facile à répondre, mais sur certains projets, dont un qui tourne encore aujourd'hui avec du Next,
on avait implémenté Storybook dès le début, en fait, et on développait les components sur Storybook.
Et après, on les a utilisés dans les pages.
On les a développés complètement sur Storybook.
Donc, ils fonctionnaient vraiment indépendamment.
Et après, tu les impléments dans les pages.
On avait fonctionné comme ça, et c'était intéressant.
Et après, derrière, les chefs de projet, tout ça, vous pouvez contrôler les components.
Donc, ça me donne une sorte de style guide de tout, toute la Libre-Rect.
Non, ce n'est pas mal.
Après, je ne sais pas.
Même tout seul, je pense que ça peut être intéressant.
Même tout seul.
Sur un projet à long terme, ou tu veux avoir un truc solide,
c'est vraiment intéressant, Storybook.
Et surtout qu'aujourd'hui, c'est plus en plus simple.
Donc, le coût d'implémentation est de moins en moins compliqué.
La barrière à entrée.
Oui.
Donc, non, c'est un super projet.
Franchement.
À tester quoi ?
Enfin, oui, à tester.
Mais Storybook, c'est cool, franchement.
Storybook, c'est cool.
Et donc, comme on parle de serveurs-component,
j'ai passé ce tweet de Sébastien Lorber qui me faisait bien marrer, en fait.
Alors, pour ceux qui n'ont que le son, vous ne pouvez pas voir,
mais en fait, c'est quelqu'un qui tient un chat.
Et à la place de la tête du chat, c'est React-Serveurs-Component.
Et là, personne est toute griffette partout, en fait.
Oh my god, so cute.
En fait, les serveurs-component.
Donc, voilà.
Les personnes sont complètement fans des serveurs-component,
alors qu'en fait, c'est un calvaire.
C'est ça, quoi.
En fait, c'est cool, mais ça coupe, quoi.
Ça pique un peu.
Oui, ça pique un peu.
Après, je pense, c'est vraiment le passé du paradigme de l'un à l'autre, en fait.
C'est là où c'est compliqué.
C'est peut-être...
Oui, ça demande une nouvelle manière de penser.
Je pense que c'est ça le plus dur, en fait.
C'est psychologique.
Hum, le modèle mental, en fait.
Et en parlant de changements de prismes de mental,
en fait, il y a un projet qui est plutôt intéressant.
Il y a quelqu'un qui s'est infligé de coder le même site
avec tous les frameworks modernes.
Next, Angular, Nuxt, Astro, Solide, Zvelt et NNSquick.
C'est un projet de titanais, ce que ce truc-là, en fait.
J'ai sorti le tweet d'Adi Osmani,
donc je pense que c'est l'équipe Google qui a sorti ça.
Excellent.
Enfin, je suppose, je ne sais pas si il y a les crédits à un endroit.
Donc, ils ont fait un truc avec un système,
une app Movie, où tu as les films et tu as les acteurs,
tu as quelques relations au niveau des pages, tout ça.
Et donc, c'est fait dans toutes les techniques qu'on utilise aujourd'hui,
les différents frameworks et voilà, et t'as le code source.
Donc, pour voir comment ça a été fait, donc c'est vraiment pas mal.
Excellent.
Donc, tu peux tester tous les frameworks,
ce qui est top, c'est que tu peux vraiment voir la différence
avec le même résultat, comment ça a été implémenté dans chaque framework.
Après, les apps sont un petit peu différentes en fonction des frameworks.
C'est aussi le fait du fonctionnement, aussi des frameworks qui sont différents.
Ils ont des aspects un petit peu différents, certaines,
mais dans l'ensemble, c'est vraiment à peu près la même principe,
en tout cas, les mêmes datas.
C'est surtout d'avoir les deux, le démo et puis la source,
surtout pour vraiment avoir une idée de comment ça a été construit.
Et voilà, donc il y a vraiment les principaux frameworks.
Et du coup, je suis tombé sur, comme tu peux le voir aussi,
c'est qu'il y a un framework que je suis tombé dessus,
j'ai ennance et je me suis dit, mais c'est quoi ce truc, je ne connais pas,
avec le petit bonhomme là.
Et c'est quoi ennance ?
A priori, c'est un framework qui est basé sur tout ce qui est natif,
un petit peu du Web, donc HTML, Web Component, tout ça.
C'est HTML First, comme ils le disent, sur la page.
Il n'y a pas forcément de JS intégré dans les pages.
Après, je n'ai pas creusé encore,
mais voilà, acteur que je ne connaissais pas personnellement.
Et je me l'a l'air pas mal.
Et surtout, moi, je suis totalement fan du site.
Des petits bonhommes, je ne sais pas si c'est un mouton avec des ailes.
C'est quand même très, très Hello Kitty World, je trouve,
c'est violet avec des petits nuages, des petits bonhommes,
des petits moutons volants.
Après, c'est assez récent, je pense.
Et eux, ils vendent dans la tendance
pas de JavaScript, que du HTML, du SCR.
Et surtout, ce qui est marqué à un endroit,
c'est qu'en fait, ils disent que ton projet va durer dans le temps,
puisque c'est tout ce qui est natif.
Voilà, c'est des Web Component,
donc c'est des éléments qui sont directement dans le navigateur.
Donc pour eux, c'est...
À durer de venir.
À de vitames, quoi.
C'est mesli, il marque juste un petit peu plus haut, là,
upgrade, tout interactif.
Enfin voilà, c'est...
Ça a l'air...
Je ne sais pas, il faudrait tester, mais ça m'a vraiment intrigué.
C'est framework très peu connu.
Non, complète, même petit mouton.
Pas du tout connu, mais par contre, ils ont fait un super site,
super glamour, super propre, tout.
Et tu construis tout en HTML.
On gardera de toute façon, on gardera un œil dessus.
Moi, j'essaierai de prendre le temps pour tester un petit peu,
pour avoir l'idée du concept.
Oui, ça peut être intéressant.
Par contre, moi, je n'ai pas du tout compris à quoi ça servait SSHX.
Je ne vous ai pas compris l'intérêt.
Moi non plus.
Je n'ai pas trop compris concept, parce que c'est un terminal
avec collaboratif, où tu peux avoir des multi-players,
donc multi-utilisateurs, avec le fameux curseur, avec les noms, tout ça.
Donc moi, le seul cas où je peux imaginer, c'est quand tu fais des profs en ligne,
tu fais des tutos, tu vas montrer des choses dans un terminal,
et tu as des gens qui vont suivre en même temps.
Après, je ne vois pas trop à quoi ça peut servir.
Un terminal multi-player.
Je ne vois pas.
Après, c'est joli, c'est bien, c'est cool.
Technologiquement, ça doit être super intéressant.
Évidemment, c'est fait en reste.
Ah ben oui.
Ok, mais j'ai du mal à voir l'usage,
même si technologiquement, ça doit être super cool.
Ça, c'est indéniable.
Si quelqu'un trouve un usage hyper intéressant,
faites-le savoir parce que là...
Use it for, à tant qu'ici, mark teaching,
debugging or cloud access.
Ok, je ne sais pas.
Après, pour l'enseignement, ça peut être pas mal.
Pour l'enseignement, je pense que c'est...
Survoient le terminal, ce n'est pas quelque chose qui est facile à appréhender,
donc ça peut être pas mal d'être accompagné.
Voilà, des termes, et tout ça pour dire quand même.
Ceux-là, il est cool.
Après, warp aussi, quand on l'utilise, je pense que tu l'utilises aussi.
Aujourd'hui, il y a pas mal de choses au niveau de tout ce qui est terminal.
On n'a plus uniquement le fameux high-term,
ou la console par défaut de Mac, pour ceux qui utilisent des Mac.
C'est cool d'avoir plein de trucs innovants comme ça au niveau du terminal.
Oui, vraiment, le terminal, ça a vachement évolué.
Il y a beaucoup de choses sur l'autocompression,
sur des stratégies, sur des snippets que tu peux garder,
des scripts que tu lances, tout.
C'est vachement plus intéressant.
Petit service aussi utilitaire,
Json Hero, qui nous permet de visualiser le format Json,
mais dans son intégralité, au lieu d'avoir quelque chose de hyper-hostère,
il va automatiquement interpréter les images, les dates, les couleurs,
les URL, évidemment.
Avec une preview.
Et en fait, il va faire des previews de tout ça.
C'est assez intéressant, je pense, pour des clients,
pour vraiment permettre de visualiser le contenu,
parce que c'est vrai que parfois, le Json, c'est assez austère.
On n'arrive pas toujours à visualiser de manière correcte la data,
et le fait d'avoir quelque chose d'un petit peu plus user-friendly
et un peu plus graphique, ça prend quand même son sens.
Oui, c'est visuel.
Pareil, c'est comme le terminal que tu as utilisé.
Peut-être pour l'utilisateur lambda,
qui tu vas filer un fichier Json et qui aura besoin de le visualiser,
c'est sûr que dans VS Code, ça n'est pas terrible.
Et ce que tu mets là-dedans, c'est un peu plus classe.
Après, je pense aussi, pour les non-techs,
pour les non-devs, je pense à un fichier de config, par exemple,
le développeur va faire une extraction du fichier de config
et va l'envoyer ça au chef de projet, à l'équipe marketing et tout ça.
Et l'équipe marketing peut checker que tout soit correctement,
ce qui évite de développer une interface complexe
qui va prendre du temps pour juste de la validation de données,
pour visualiser les données si tout est juste, si tout est correct.
Et si, en plus derrière, il y a possibilité de modifier le Json
et de l'exporter la version modifiée,
je pense qu'il y a peut-être un truc.
Mais pour favoriser et simplifier,
fluidifier le travail en équipe,
avec toutes les fonctions qu'ils ont de recherche, de visualisation,
ça peut être intéressant.
Après, j'ai pas testé, mais tu vois,
quand tu embattes la page, il marque qu'il y a un VS Code plugin.
Donc peut-être que...
Tu peux tester directement le...
VS Code plugin.
Est-ce que tu peux implémenter directement le viewer dans VS Code ?
Là, ça peut devenir intéressant, par contre.
Parce que là, effectivement, comme tu...
Enfin, on va pas le cacher, mais tu vas tester un petit peu avant qu'on enregistre.
Et tu lui dis à trouper...
En fait, on ne veut pas éditer le Json directement dans le viewer.
Donc, ce qui est plutôt dommage, comme tu disais.
Et donc, effectivement, si le plugin permet de faire ça,
ça peut être là, du coup, très intéressant.
Carément.
Parce que même quelqu'un de non-tech pourrait utiliser
et avoir un visuel retour tout de suite.
Oui.
Et d'autant que, imaginez-vous que tu fais une faute
ou que tu oublines virgule ou un truc comme ça.
Le vieux veur va te le indiquer, qui est nérable.
Donc ça peut être...
Exactement.
C'est dommage, on n'a pas testé le plugin.
On aurait dû tester le.
Exactement.
Testé le.
Yes.
Top.
Voilà.
Patrick, écoute.
C'est déjà fini.
Mais c'est un petit épisode.
C'est un petit épisode de news.
Sur toute l'actualité, sur les services qu'on a découverts et trouvés.
Yes.
Et ben, on vous souhaite un bon Noël.
Et on vous dit à très vite pour d'autres petits épisodes news.
Ouais.
Carément, bientôt.
Bonne fête.
Et n'oubliez pas, il y a aussi une vidéo
combien de sortir sur Astro les modes de rendu.
Donc allez voir sur YouTube.
Voilà.
Et bonne fête à tous et bonne vacances.
Ciao ciao, merci à vous.

Retrouvez Double Slash sur le plateforme de podcasts préférés.
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 évoquées 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