Frontend
Front-End Chronicles #24 - NG Baguette Conf - Front-End Chronicles | podCloud
#NG-Baguette-Conf #Frontend #Front-End-Chronicles
Encore un retour sur NG Baguette Conf 2025 et ce coup-ci par les incroyables Benjamin et Denis !
Ça fait toujours plaisir d'avoir des retours, mais pour le coup c'est avec un vrai regard critique (au sens noble du terme) et bienveillant !
Merci les gars pour les retours, et mêmes vos podcasts, j'aime les moments à écouter vos podcasts, j'ai vraiment l'impression de passer des moments entre copains à parler tech ! 😁
feat(@schematics/angular): Applications are zoneless by default by atscott · Pull Request #30718 · angular/angular-cli · GitHub
#Angular #Frontend #Signals
C'est maintenant officiel : Angular passe en Zoneless par défaut !
Donc il est plus que temps de passer aux Signals, plus que temps de passer aux pratiques modernes, vos prochaines applications n'utiliseront plus Zone.js à moins d'explicitement faire une configuration pour ça, et on sera encouragé à basculer en Zoneless sur les applications existantes assez vite je pense !
Kelp is the HTML-first UI library
#HTML #CSS #Frontend #JavaScript #Web
C'est ça que j'aime :
A UI library for people who love HTML, powered by modern CSS and Web Components.
Et le code 🥰
<h1>Hey there!</h1>
<p>How are you?</p>
<button class="primary muted">
👋 Say Hi
</button>
<label for="bio">Bio</label>
<kelp-autoexpand>
<textarea id="bio">
</textarea>
</kelp-autoexpand>
Pas de magie, pas de build, pas de bidouille, juste du HTML, du CSS et un peu JavaScript pour les Web Component (composants natifs) quand y'a besoin.
En résumé : comment on devrait toujours travailler !
It's time for modern CSS to kill the SPA - Jono Alderson
#CSS #Frontend #HTML
Toujours préférer du standard web (HTML et CSS) à du JavaScript : ce sera toujours plus performant, plus stable, aura un meilleur rendu pour l'utilisateur, peu importe qu'il soit sur bureau ou mobile, peu importe son navigateur.
Ici l'exemple de la View Transition API qui permet d'avoir une navigation propre, sans aucun JavaScript, avec des transitions fluide et dynamique, complètement déclarative et 100% gérées par le navigateur.
C'est supporté par tous les navigateurs à base de Chromium (Chrome, Edge, Brave, etc.), j'espère que ça arrivera bientôt sur Firefox !
font-size-adjust Is Useful
#CSS #Frontend #Web #UI #Font
Pas mal d'info sur comment fonctionnent le tailles de police :
font-size
va ajuster la taille de la "case" qui contient le glyphe (= lettre, chiffre, symbole, etc.) pas la lettre elle-même ;- on ne peut pas contrôler la taille du glyphe historiquement, seulement faire des proportions à partir des glyphes (ex = hauteur du x dans la police courante, em = largeur du m dans la police courante, etc.) ;
font-size-adjust
permet de forcer un ratio unique sur la taille des glyphes par rapport à la case qui contient le glyphe pour qu'il soit uniforme peu importe la police ;
Je vous encourage à aller voir l'article qui donne des éléments visuels pour comprendre les différents éléments.
Backend
Serving 200 million requests per day with a cgi-bin | Jake Gold
#Web #Backend #CGI
L'article montre comment un script CGI peut être viable aujourd'hui avec les machines qu'on a disposition.
Pour rappel, un script CGI c'est un script (ou un programme, dans son exemple c'est un binaire golang) qui va lire les infos d'une requête HTTP via des variables d'environnements, y répondre puis s'éteindre (libérant les ressources RAM et CPU consommés). Chaque requête est géré par une instance du script / programme, et Apache typiquement va créer un fork process du daemon httpd.
Avec son test, il arrive à tenir une charge de 2400 req/s sur une machine avec 4 cœurs. C'est assez impressionnant. Même si en vrai, avec nos méthodes modernes, on pourrait gérer encore plus de requêtes du fait qu'on ne perdrait pas de temps à démarrer / éteindre des process à chaque requête.
Mais pour le coup ça reste intéressant pour justement les cas où on n'a pas besoin de tenir une très grande charge mais plutôt une grande diversité de site peu utilisé, car on peut mutualiser très fortement les ressources !
C'est d'ailleurs exactement la logique qu'on applique quand on utilise une plateforme de FaaS (Function as a Service) : une requête arrive, la plateforme met en forme la requête pour faciliter son traitement, on instancie la fonction, la fonction traite la requête, la fonction s'éteint, on libère les ressources.
En tout cas, ça me rappelle mes débuts avec les technos web : PHP 4, mySQL, xHTML 4, CSS2 (et pas de JS), des bons souvenirs de 2008 🥰
Programmation Fonctionnelle en Java : Partie 1 - Fondamentaux
#Java #Backend
Retour aux fondamentaux, souvent mal maîtrisés de Java 8+ : les lambdas, les Streams et l'immutabilité.
Je cite directement le changement de mindset à partir de Java 8 :
Avant Java 8, nous étions des architectes de processus : nous décrivions chaque étape, chaque boucle, chaque condition. Depuis Java 8, nous pouvons devenir des architectes d'intentions : nous exprimons le résultat souhaité.
Je trouve cette phrase pertinente !
IA
Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity - METR
#IA #Dev
Les résultats d'une étude sur l'impact de l'efficacité de développeur expérimentés utilisant ou non de l'IA (ici en mode agent avec Cursor Pro en se reposant sur Claude 3.5/3.7 Sonnet) montrent qu'ils se sentent 20% plus efficace avec Claude mais les chiffres montrent qu'ils ont été 19% moins rapide… 🤷♂️
Déjà on voit qu'il y a un écart entre le gain attendu (+24% d'efficacité en moyenne), le gain perçu (+20%) et le gain réel (-19%). C'est assez logique je pense car notre cerveau ne perçoit pas le temps de façon linéaire, et le temps passé à utiliser une IA est perçue comme plus courte que le temps passé à coder en solo (c'est vrai pour beaucoup d'activité cet écart entre temps réel et temps perçu).
En parallèle, l'étude est incomplète car elle ne prend qu'un panel restreint de développeurs, seulement des développeurs à la fois expérimentés, et expérimentés sur le projet, sur des projets assez gros (> 1 million de ligne de code). Donc il faut bien nuancer les résultats comme c'est fait dans la publication. Par contre il ne faut pas non plus nier ces résultats.
Pour moi, l'IA peut être un super outil pour certains cas d'usages :
- transformer des modèles (JSON => TypeScript, JSON => Java, Java => JSON, Java => TypeScript, etc.) ;
- générer des données de tests ;
- suggérer des pistes de réflexion ;
- paraphraser du code qu'on découvre pour l'explorer plus vite ;
- etc.
Mais aussi une sacrée perte de temps pour d'autres :
- débloquer une configuration compliquée : si vous n'y arrivez pas vous, c'est rare que l'IA vous trouve une solution magique ;
- produire des gros volumes de code : c'est super difficile de digérer en tant qu'humain un gros volume de code (vous avez déjà relu des MRs/PRs super grosses ?), surtout si c'est fait par une machine qui ne cherche pas à être forcément relue ;
- itérer sur code existant : l'IA à tendance à pourrir tout doucement le code, créer de la duplication, etc. ;
- traiter avec une base de code assez conséquente ;
- etc.
En fait il faut clairement accepter que l'IA actuelle n'est rien de plus qu'une autocomplétion un peu plus intelligente, pas une vraie IA magique. Seuls des gens qui comprennent ce qu'ils font, sont capables de produire avec de l'IA du code qui vivra dans les prochaines années. Ceux qui prétendent le contraire sont pour moi des charlatants 🤷♂️
Mistral présente Voxtral, sa première famille de modèles d'IA de compréhension de la parole en open source, publiée sous la licence Apache 2.0
#Mistral #IA #Open-Source
Pas encore testé moi-même pas mais un modèle d'IA signé Mistral pour du speetch-to-texte avec capacité à traiter en live, avec une bonne performance, en open source en Apache 2.0 et un prix moitié moins cher que la concurrence : ça vaut le coup de tester !
Par contre attention : il faut compter 55Go de RAM sur le GPU, donc clairement pas accessible à tout le monde !
Our contribution to a global environmental standard for AI | Mistral AI
#Mistral #IA #LLM #Ecologie
Très bonne initiative de Mistral : publier des indicateurs, et une méthodologie de calcul pour l'impact écologique (gaz à effet de serre, eau, matériaux) des LLMs sur tout le cycle de vie (de l'entraînement à l'inférence (= l'utilisation)).
Les chiffres sont assez effrayants au global, soyons très honnêtes là-dessus (et quiconque cherchera à minimiser l'impact écologique actuel des IA / LLMs vous mentira ouvertement). Par contre, il faut saluer l'effort de faire tout ce travail de mesure (même s'ils avouent eux-mêmes que c'est imprécis du fait que certains acteurs ne fournissent pas les données typiquement), qu'il y a une prise de recul, qu'il a une recherche d'améliorer l'impact et d'amortir l'impact écologique de l'entrainement (le moment du cycle de vie le plus impactant écologiquement parlant).
À noter aussi que Mistral s'en sort plutôt correctement grâce à l'énergie bas carbone qu'on a en France, et que ce serait clairement différent ailleurs !
Real Or Not
#IA #Microsoft #Images
Ce test venant de Microsoft vous propose d'essayer de deviner si 15 images sont vraies ou fausses. Avec l'augmentation du nombre d'image IA et la qualité qui s'améliore continuellement c'est de plus en plus facile de se faire avoir…
Personnellement j'ai identifié 47% des images correctement ce qui m'a placé dans le top 10%. Je suis assez surpris déjà de m'être autant trompé (en pensant vraies des images IAs essentiellement) et aussi d'être aussi haut dans le classement avec un score aussi bas…
Sécurité
Double authentification, ma gestion - Le blog de Genma
#2FA #Sécurité
Article qui résume la pratique de Genma autour de la double authentification.
J'aime bien Genma pour ce genre d'article : pas trop long, directement dans les faits, un petit rappel du contexte quand même, pas de jugement ni rien (vis-à-vis de comment on fait en tant que lecteur), juste l'exposition de ses choix et pourquoi ces choix. Merci Genma !
Et il ouvre à la fin la question du partage de compte, en particulier après un décès. Car on pense rarement à ça mais si vous êtes en couple, c'est sûrement l'un de vous qui gère tel ou tel contrat, si vous avez un gestionnaire de mot de passe et un MFA/2FA c'est pas simple pour l'autre personne de reprendre la main au besoin (mais en même temps, si c'était simple, ça voudrait dire que n'importe qui pourrait potentiellement aussi…)
Vous pensez que votre mot de passe est sécurisé ? Vous avez tort selon cette étude
#Mot-de-passe #Sécurité #Vie-privée
sur les 10 millions de mots de passe étudiés, 98,5 % ne sont pas assez robustes pour résister en cas d'attaque automatisée. Cela veut dire que seuls 1,5 % sont considérés comme “forts“. Specops Software rappelle qu'il faut pour cela une combinaison d'au moins 15 caractères mélangeant 2 types différents minimum (chiffres et lettres par exemple).
La raison est purement mathématique : “Chaque caractère supplémentaire augmente exponentiellement le nombre de combinaisons possibles, rendant les attaques par force brute pratiquement impossibles, même avec des équipements très puissants“.
La firme note également que “les formats les plus courants restent des mots de passe de 8 caractères, avec ou sans chiffres“.
On se demande pourquoi j'utilise des mots de passe de 120 caractères, aléatoires (composés de lettres majuscules et minuscules, de chiffre et de caractères spéciaux), uniques pour chaque service, et que je râle à chaque fois que je ne peux pas en mettre plus de 40 (coucou Amazon et tous ceux qui utilisent AWS Cognito 👋), même moins…
Pour rappel : il existe des gestionnaires de mots de passes gratuit et open source, qui vous permettent de gérer tous vos mots de passes simplement (si vous ne voulez pas réfléchir : aller voir Bitwarden ou Proton pass). Non l'outil intégré à Chrome n'est pas un bon outil car c'est synchro chez Google, lié à votre compte Google, et vous n'avez aucune garantie que la qualité du chiffrement de vos mots de passes (= je pars du principe qu'utiliser le gestionnaire de mot de passe de Chrome c'est comme avoir un post-it virtuel collé sur votre écran que tout le monde pourrait lire : ça ne sert à rien). Avoir un mot de passe PAR SERVICE c'est vous garantir que si un mot de passe fuite personne ne peut vous voler un autre compte, pour par exemple commander à votre place sur Amazon, prendre le contrôle sur votre compte bancaire, se connecter à vos mails (donc tous vos comptes), se faire passer pour vous pour extorquer votre famille / vos amis, etc.
L'algorithme de Shor vient de casser sa première clé cryptographique sur un ordinateur quantique
#Sécurité #Quantique #IBM
La première clé cryptographique elliptique a été cassée par l'algorithme de Shor sur une machine quantique d'IBM.
Bon relativisons, car c'est une clé de 5bits (bitcoin c'est du 256bits par exemple) et il a fallu 133qbits pour ça. Aussi à noter que c'est extrêmement difficile de maintenir un système quantique stable plus de quelques secondes aujourd'hui pour un même traitement. On a donc encore de la marge pour nos clés actuelles, mais il est vraiment temps de passer à des algorithmes cryptographiques post quantique !
Jeux-videos
« Le matériel Xbox est mort. Il semble que Xbox n'ait plus envie - ou littéralement plus la capacité - de développer et de lancer un nouveau matériel », déclare une membre fondatrice de l'équipe Xbox
#Jeux-videos #Microsoft #Xbox
C'est quand même fou de voir que la Xbox 360 (donc y'a 2 générations) était au coude à coude avec la PS3 (88 millions d'unités vendu pour la PS3 contre 85 millions pour la 360) et que tout s'est effondré...
Mais je suis plutôt d'accord les problèmes cités par Laura Fryer (ancienne directrice Xbox) et Mike Ybarra (ex vice président Activision-Blizzard, branche de Microsoft via Xbox depuis quelques années) : la Xbox ne propose plus rien de vraiment différencient ou intéressant, même le catalogue est disponible partout.
Par contre, qu'on soit très clair, si la PS4 et la PS5 sont d'aussi bonnes consoles c'est aussi parce que Xbox étaient en face à proposer quelque chose, si la Xbox meurt les futures playstations seront sûrement beaucoup moins intéressantes, Sony n'ayant aucun besoin de performer car il dominera seul le marché des consoles, Nintendo n'étant pas vraiment un concurrent vu le positionnement "familial" (même si le tarif de la Switch 2 questionne ce positionnement). On risque aussi fortement d'y perdre au niveau des tarifs, sans concurrence pourquoi ne pas mettre la PS6 ou PS7 à 1000€ ?
Animal Crossing: City Folk Deluxe
#Animal-Crossing #GamingMods #Wii #Jeux-videos
Un mod qui a l'air incroyable pour "Animal Crossing: City Folk" (en Amérique du Nord) ou "Animal Crossing: Let's Go to the City" (reste du monde). C'est un patch à appliquer sur une ROM qui n'empêche pas le jeu sur console originale (la Wii) mais qui peut aussi se jouer sur émulateur.
Je suis toujours admiratif de voir ce genre de travail qui fait vivre un jeu qui est sortie il y a presque 17 ans !
Divers
Caching — PlanetScale
#Performance #CPU #SSD
L'article montre visuellement avec des graphiques pour certains interactifs comment fonctionne un cache, l'impact sur les requêtes, et surtout l'écart de vitesse entre les différents niveaux de cache y compris au niveau CPU (L1, L2, L3, RAM, SSD). On voit visuellement la différence colossale entre une nanoseconde et un microseconde, à quel point gérer correctement tout ça c'est important pour des bonnes performances !
Petit manifeste low-tech -- Plum
#Low-Tech
L'article explique l'importance du low tech et le fait que ça n'implique pas de vivre au Moyen Âge, juste de rendre compréhensible et durable la technologie.
Je cite les deux définitions qu'il donne de Low-Tech, car elles sont complémentaires.
Une technologie est dite « low-tech » si les personnes interagissant avec cette technologie savent et peuvent en comprendre son fonctionnement.
Une technologie est dite « low-tech » si elle expose sa complexité de manière simple, ouverte, transparente et durable tout en appartenant aux communs.
Je vais aussi citer son exemple du lave-linge :
Prenons l’exemple d’une machine à laver le linge. Nous comprenons tous qu’une machine de base est un tambour qui tourne dans lequel est injecté de l’eau et du savon. C’est très simple et low-tech.
On pourrait arguer que l’ajout de capteurs et de contrôleurs électroniques permet de laver le linge plus efficacement et plus écologiquement en le pesant et adaptant la vitesse de rotation en fonction du type de linge.
Dans une optique low-tech, un boitier électronique est ajouté à la machine pour faire exactement cela. Si le boitier est retiré ou tombe en panne, la machine continue à fonctionner simplement. L’utilisateur peut choisir de débrancher le boitier ou de le remplacer. Il en comprend l’utilité et la justification. Il construit un modèle mental dans lequel le boitier ne fait qu’appuyer sur les boutons de réglage au bon moment. Et, surtout, il ne doit pas envoyer toute la machine à la casse parce que la puce wifi ne fonctionne plus et n’est plus mis à jour ce qui a bloqué le firmware (quoi ? Ma machine à laver dispose d’une puce wifi ?).
NIH Is Far Cheaper Than The Wrong Dependency
Je suis assez d'accord avec l'article : dans la vaste majorité des cas, chaque dépendance à un coût supérieur à celui de recoder soi-même.
Je note le framework d'évaluation qui lui permet de déterminer si la dépendance est nécessaire ou s'il vaut mieux la recoder. Ici l'exemple pour la plateforme web :
The Web Platform (Web APIs, HTML, JS, CSS etc)
- Ubiquity : The web browser is the most widely deployed document rendered/app platform/virtual machine on earth. They're everywhere and these days largely evergreen.
Stability- Fairly : big commitment to backwards compatibility.
- Depth : Very deep, writing your own browser to render your page or website is not feasible.
- Ergonomics : They're alright. Some cruft, but the documentation and developer tooling is excellent.
- Watertightness : Outside of maybe interacting with files, audio, video, it's a pretty water tight abstraction.
J'ai fait un article sur mon blog pour parler du sujet des dépendances Ce framework n'est pas votre framework !
I was wrong about robots.txt | Evgenii Pendragon
#LinkedIn #Robots.txt #SEO #Web
L'auteur a récemment publié un article expliquant comment et pourquoi bloquer tous les crawlers. Essentiellement via un fichier robots.txt
. On peut discuter de ce choix, mais c'est un choix comme un autre.
Il a aussi appris à ses dépens que bloquer tous les crawlers veut aussi dire que LinkedIn ne lit plus votre contenu, car LinkedIn respecte les choix que vous indiquez dans le fichier robots.txt
(en tout cas pour ce qui est des liens associés à des posts LinkedIn). Donc si vous voulez que votre contenu puisse être diffusé sur LinkedIn, pensez à autoriser LinkedInBot
à accéder à votre contenu. Dites-vous que même si vous ne partagez pas sur LinkedIn, d'autres peuvent vouloir mettre votre contenu en avant 🤷♂️
マリウス . Giving Up on Element & Matrix.org
#Matrix #Matrix.org #Messagerie #XMPP
À priori l'expérience avec Matrix est plutôt décevante : manque de fonctionnalités, beaucoup de lenteur (jusqu'à 40s de synchronisation à la connexion de certains clients, liés au serveur qui ne tient pas), beaucoup d'erreurs en tout genre, beaucoup de mal à avoir de l'aide sur le serveur officiel pour aider, des clients officiels pas terribles, etc.
Après 5 ans à essayer, l'auteur a décidé d'abandonner et de revenir à XMPP…
J'avais en tête de peut-être essayer de migrer vers Matrix ou XMPP, après ce retour d'expérience (et d'autres) et pas mal d'incompréhension, je vais exclure la piste Matrix…
Interrogé sur ses prix « trop bas », Xavier Niel a légèrement perdu son calme -- Les Echos
#Free #Free-Mobile #France

Sans être un fanboy de Xavier Niel, je trouve ça anormal qu'on lui demande continuellement de justifier ses prix bas alors qu'on ne demande pas à ses concurrents de justifier leur prix plus haut (voir beaucoup plus haut).
Free a un positionnement très bien défini, très bien réfléchi (comme ses concurrents qu'on soit clair), qui a permis de faire chuter très fortement le coût des forfaits internet et mobile des Français (si vous en douter, regardez l'historique des prix de forfait mobile en France et la rupture de prix en 2012 à l'arrivée de Free Mobile). Je suis complètement d'accord avec Xavier Niel on ne devrait pas le questionner là-dessus, mais le féliciter d'aider les Français à maintenir un certain pouvoir d'achat
Par contre, en tout cas dans l'extrait, on voit un bon jeu politique pour ne pas vraiment répondre à la question
Why we made an open-source developer toy - DeskHog
#DeskHog #ESP32 #Open-source #Open-Source

Cette vidéo montre un petit gadget à poser sur le bureau : une sorte de tamagotchi avec un petit écran, 3 boutons, basé sur un ESP32, un boîtier en impression 3D, open source. L'idée c'est que pas mal de choses sont déjà prémâchés et il y a plus qu'à jouer avec.
Je vois beaucoup d'appareil comme ça. Je trouve l'idée marrante, mais je ne vois pas qui utilise vraiment ce genre d'objet et si oui pour quoi… 🤔
Coding Font by Typogram
#Dev
Idée intéressante : un genre de "jeu" où on va choisir la police qu'on préfère entre deux polices dans un genre de tournois. L'idée étant de comparer facilement 28 polices en les comparants deux à deux pour choisir la police qu'on préfère au final pour du code.
Je ne suis pas surpris du résultat me concernant avec JetBrains Mono première place et Fira Code en seconde place, avec vraiment du pif total pour les départager, car les deux me paraissent vraiment très lisibles et pratiques à l'usage au quotidien. Fira Code c'est la font que j'installe pour mon usage en terminal, JetBrains Mono j'y suis habitué comme je fais aussi pas mal de Java avec IntelliJ.
Par contre pour moi il manque quelques polices, à commencer par Droid Sans Mono, la police par défaut de Visual Studio Code, que je trouve très bien aussi alors qu'elle est très différente de celle que j'ai citée plus haut, car elle n'a par exemple aucune ligature pour les == ou <= par exemple.
En tout cas si vous vous posez des questions sur un changement de police pour être plus à l'aise, jetez un coup d'œil je trouve l'outil intéressant.
Crédit photo : Générée via Mistral AI avec le prompt suivant :
Illustrate a vibrant scene in a cartoon drawing style of a person engrossed in reading a newspaper on a sunny beach. The person is surrounded by a few scattered newspapers and magazines. The setting should be warm and relaxing, with elements like a beach towel, a sun hat, and a refreshing drink with an umbrella. Include a beach chair and an open parasol for shade. The background should feature a beautiful ocean view with gentle waves, a clear blue sky, and perhaps a few people enjoying their day in the distance. The focus should be on the act of reading and the relaxing experience of being at the beach, with headlines and text subtly visible to emphasize the theme of leisure and news.