Frontend
Understanding and avoiding visually ambiguous characters in IDs
#UI #Frontend #Accessibilité #Web #UX
Avoir des identifiants avec des caractères ambigus peut créer des erreurs humaines quand il s'agit de communiquer. Je suis complètement d'accord avec la vision de l'article, en prenant en plus en compte l'accessibilité !
J'ajoute juste un autre exemple : Nintendo ne génère des clés d'activation ou d'addon assez long mais en bannissant pas mal de caractères, ces caractères sont désactivés sur le clavier virtuel de la switch quand il faut saisir ces codes, mais comme on a pas de doute sur les caractères, on les saisit super vite !
A brief history of web development. And why your framework doesn't matter.
#Frontend #Web
Résumé simplifié de l'histoire du développement front et son éternel recommencement.
Je suis d'accord avec la conclusion : la manière n'est pas importante ce qui compte c'est l'expérience utilisateur.
Meta publie React Compiler, un compilateur open source pour React, afin d'optimiser le code pour la performance, Meta a déjà utilisé le compilateur depuis plus d'un an
#Frontend #React
Alors que c'était un point très critiqué de la part de la communauté React envers Angular ou Svelte, React se dote aussi d'un compilateur pour auto-magiquement améliorer les perfs de re-rendu de composants et des hooks
À voir si le compilateur va changer la donne et rendre plus clair et simple l'utilisation de React
Empêcher la scrollbar de modifier de layout d’une page web - Blog - Code-Garage
#Frontend #CSS #SEO
Technique toute simple pour améliorer l'intégration des scrollbar dans vos frontend avec une ligne de CSS :
scrollbar-gutter: stable both-edges;
Ça va permettre de réserver l'espace de la scrollbar à droite de la page pour qu'il n'y ait pas de layout shift (bon pour le SEO), et both-edges va permettre d'avoir le même espace de réserver sur le côté opposé pour éviter un déséquilibre !
C'est magique, ça coûte rien, donc autant l'utiliser non ?
Safari ne supporte pas cette propriété 🤷 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
State of HTML 2023
#Frontend #HTML #Web
Résultat du State of HTML 2023. Comme d'habitude quelques éléments intéressant à découvrir !
Automatic Query Invalidation after Mutations
#React #Frontend #React-Query
Article donnant quelques éléments sur le fonctionnement du cache et de l'invalidation de cache dans React Query.
On y trouve aussi des exemples de configuration d'invalidation automatiques à base de tag !
Super intéressant comme manière de faire, car ça rend assez déclarative au niveau de la query / mutation toute la partie invalidation !
Welcome to the Dillo Website
#Frontend #UI #Navigateur #CSS #HTML #Web
J'ai pas pris quelques minutes pour tester Dillo (ce navigateur n'est pas tout jeune, car il date d'au moins 1999 au vu des news sur le site)… C'est différent…
En fait il "manque" toutes les nouveautés JS et CSS : pas de flexbox, les images sont vites déformées, je ne suis même pas sûr que le JS soit exécuté, les pages sont déformées mais hey ça va diablement vite !!
En fait c'est un navigateur qui vise à maintenir un outil d'exploration du web pour les machine à très faible puissance et/ou ancienne. Ça fonctionne mais c'est pas le web auquel on est habitué avec Firefox ou Chrome. C'est différent, ce n'est pas mal, et c'est aussi ça le web : un standard qui fonctionne depuis plus de 25 ans avec un socle sémantique qui se perd de plus en plus (je vous vois les devs qui mettez des div clickable pour créer des liens 😬)...
Testez, même 10-15min pour voir tout ce qui a évolué, tout ce qui a changé, tout ce qui s'est perdu et à quel point on ne sait plus faire un site sans tout le bardum de trucs "modernes" alors qu'on devrait toujours être à minima compatible avec du plain HTML...
Thème sombre (dark mode) et mythe d’accessibilité - par Stéphanie Walter - UX Researcher & Designer
#UI #UX #Frontend #Dark-Mode #Accessibilité
Plein d'infos et liens sur l'accessibilité des thèmes sombres !
Comme toujours avec Stéphanie, l'article est top, elle pointe les infos importantes, donne quelques astuces, elle met en avant d'autres articles qui aident à construire un bon thème sombre !
Table ronde sortie Angular 18 - YouTube
#Angular #Frontend #Angular-Devs-France
Avec Angular Devs France on a organisé le 4 juin à 19h une table ronde en ligne pour parler de la version 18 d'Angular. En fonction de quand vous lisez ça, le lien pointe vers le live à venir ou le replay !
3 invites pour cette table ronde :
- Alain Chautard (Angular Training, GDE)
- Denis Souron (Front-End Chronicles)
- Arthur Lannelucq (Expert Angular & RxJS)
N'hésitez pas à partager en masse autour de vous ! 🤓
Backend
10 modern Node.js runtime features to start using in 2024 - DEV Community
#JavaScript #Backend #Node.JS
Article intéressant que les ajouts récents à Node :
- test Runner (plus forcément besoin de Jest, Karma, Mocha, etc.)
- test assertion (plus forcément besoin de Jasmine, Chai, etc.)
- test mock
- test coverage
- watch mode (donc plus besoin de nodemon)
- corepack (wrapper expérimental autour de npm, yarn et pnpm qui unifie les commandes pour ne pas avoir à s'occuper de ce qui est utilisé sur un projet donné)
- support des .env
- ajout de
import.meta.filenameetimport.meta.dirname - timer promise (setTimeout et setInterval renvoie une promesse si on passe les bons paramètres : pas du tout standard, rien côté TC39, en tout cas j'ai rien trouvé)
- permission model "à la Deno" (expérimental)
Il y'a quelques point qui sont "bizarres", typiquement dès le début de l'article ait évoqué Node 21.6.1 comme LTS : c'est impossible qu'une version impaire soit une LTS de par la manière dont sont pensés les numérotations de Node… À mon avis l'article vient d'être publié mais a été écrit il y a quelques mois alors que la 21.6.1 était la Current et l'auteur s'est trompé. Modulo ça : l'article est clair et bien détaillé !
On sent aussi l'influence de Deno sur Node, même si il manque toujours un support natif de TypeScript à Node à mon sens 😢
Node.js — Node.js 22 is now available!
#Backend #JavaScript #TypeScript #Node.JS
Sortie Node 22 !
Au programme :
- amélioration de perf sur les CLI
- amélioration en expérimental de require pour charger de manière synchrone les ES Module
- introduction de
node --run <package.json script>comme alternative ànpm run <script>plus performante - watch mode
- le package
node:fspropose maintenant les fonctionsglobetglobSyncpour faire du pattern matching sans lib !
Pas mal d'amélioration sur cette version 22 qui est une LTS (version paire oblige selon les principes de Node !)
Front-End Chronicles #21 - Bun
#Bun #Backend #Front-End-Chronicles #JavaScript #TypeScript #Web
Le dernier épisode de Front-End Chronicles est sorti en début de mois ! Un épisode sur Bun, encore un très bon épisode !
Perso ça m'a donné envie d'aller toucher un peu Bun, alors que je suis plutôt Deno ! Donc allez écouter ça !
Pour ceux qui boudent Spotify, y'a d'autres plateformes possible : https://bento.me/fec
IA
Windows 11 : cette nouvelle fonctionnalité va enregistrer tout ce que vous faites sur votre PC
#IA #Microsoft #Recall #Sécurité #Windows
Microsoft vient de présenter Recall : une nouvelle fonctionnalité qui va arriver sous Windows 11 (pour certaines machines avec Qualcomm Snapdragon X, donc clairement pas tout le monde !) qui va enregistrer tout l'historique des actions de l'utilisateur via des "clichés de [l']activités à l'écran" (vu le rendu, on peut supposer un screenshot et un lot de métadonnée), tout sera analysé en local par une IA pour ensuite offrir la possibilité de rechercher dans cette historique via du langage naturel. Microsoft assure que tout fonctionnera en local et sans transmettre de donnée.
Personnellement je suis à la fois curieux de voir quels usages peuvent émerger de ça, mais aussi curieux de voir l'espace disque qui sera pris par toutes les données nécessaires à Recall (que ce soit le modèle d'IA ou les métadonnées collectés), la consommation en énergie (et donc la réduction d'autonomie qui en découle sur les laptop). Évidemment le "tout local" n'empêche pas de s'inquiéter de ce qu'il va se passer en cas de piratage de la machine en fonction de comment seront stockés les données de Recall (imaginons qu'il y ait une extraction du texte à l'écran, et que ça tombe pile quand vos mots de passes sont affichés, est-ce que ce sera stocké ?)
Bref à voir !
Faille RCE critique dans llama-cpp-python – Plus de 6000 modèles d’IA affectés
#Sécurité #IA #Ollama
Toujours se méfier quand on exécute le code d'autres gens ! Là on a au moins 6000 modèles basés sur llama-cpp-python qui vulnérable à une RCE (Remote Code Execution), et c'est même pas le modèle qui est impacté, c'est le moteur de templating jinja2 qui vient avec qui est simplement mal configuré…
Un casque antibruit dopé à l'IA permet à son utilisateur de se concentrer sur la voix d'une personne dans un environnement bruyant en la regardant Le système est baptisé « Target Speech Hearing »
#Appareils-auditifs #IA
Démonstration très impressionnante avec un usage super intéressant de l'IA : filter une voix parmis tous les bruits ambiants simplement en portant un casque anti-bruit puis en regardant la personne qu'on veut écouter tout en appuyant sur un bouton. Automatiquement l'IA va filtrer le bruit ambiant pour ne garder que la voix de la personne ! 🤯
Il doit y avoir des ratés, etc. mais ce n'est pas critique non plus ! Par contre je pense aussi à l'avenir et aux appareils de corrections auditifs qui saturent très vite avec le bruit ambiant, ça pourrait être une révolution pour les porteurs !
Sécurité
Chip and PIN card, phone passcode, hotel safe – how predictable is your chosen PIN number?
#Sécurité #Code-PIN #Cryptographie
La description indiquée est :
3.4 million data points visualized from several data breaches.
Plutôt intéressant ce graphique : il montre à partir de fuite de donnée comment se répartissent les codes pins à 4 chiffres utilisés par les gens. Très souvent des codes bidons : répétition de chiffre (0000, 9999, 6655, etc.), des séquences (4321, 1234), des années de naissance (19XX) ou des dates de naissances (au format MMDD car sans doute beaucoup de donnée d'américain dans les leaks, mais on trouverait sûrement la même chose en Europe), et aussi des formes sur un pavé numérique (7410, 2580)
Ça confirme une chose : on est très mauvais pour choisir un code pin !
Image venant d'ici : https://informationisbeautiful.net/visualizations/most-common-pin-codes/
Votre lecteur PDF.js préféré peut exécuter du code malveillant !
#Sécurité #PDF.js #Mozilla #Firefox #Thunderbird #Electron
Faille de sécurité dans la lib PDF.js de Mozila (utilisée un peu partout : Firefox, Thunderbird, Electron (donc Teams, Slack, Discord, etc.)). La faille est dans la partie interprétation des fonts…
Cette faille est une RCE donc mettez à jour !
Jeux-videos
In 1985, I asked my brother David (age 15) to be the rotoscope model for my new game, Prince of Persia. -- @jmechner
#Jeux-videos
Je connaissais déjà l'histoire, mais je trouve toujours ça impressionnant de voir comment a été créé Prince of Persia (le premier en 1985) en particulier le personnage : tout a été fait en rotoscopie donc prise de vue vidéo, extraction des frames puis redessiner frame à frame en calquant les mouvements. Et la personne filmée n'est autre que le frère du créateur du jeu 😃
In 1985, I asked my brother David (age 15) to be the rotoscope model for my new game, Prince of Persia. 38 years later, I've made him a (present day) cartoon character in my new graphic novel memoir REPLAY.https://www.jordanmechner.com/en/books/replay/Thanks, bro!@01FirstSecond @stripepress @princeofpersia
@jmechner
Divers
Démystifier l'Open Source avec Gérôme Grignon - YouTube
#OSS #Dev
Interview très intéressante de Gérôme Grignon sur l'Open Source, et même plus largement le développement ! Je vous recommande très fortement d'aller jeter une oreille sur cette interview qui regorge de conseils !
Direction Soleil
Idée intéressante : à partir d'un trajet déterminer où le soleil va frapper la voiture ! Je vois un cas d'usage tout trouvé : savoir où placer les par-soleil pour protéger les enfants le plus gros du trajet !
Merci Yvan !
L’ASN autorise la mise en service du réacteur EPR de Flamanville - 07/05/2024 - ASN
#Nucléaire #Flamanville
L'ASN (Agence de Sûreté Nucléaire) vient d'autoriser l'activation de l'EPR de flamanville !
Bon pour l'instant c'est une phase de test mais ce réacteur va enfin partir en production !
No Web Without Women
#Web #Femme
Une liste d'inventions liée au Web qu'on peut associer à des femmes mais dont les noms restent largement inconnus à part Ada Lovelace et Grace hooper…
Save the Web by Being Nice
#Web #Réseaux-sociaux #Divers #Internet
Je suis assez d'accord : Internet manque de message gentil envers les gens qui crée du contenu. Je ne dis pas ça pour moi, j'ai de temps en temps des gens qui disent lire ce que je raconte et aimer mon contenu (merci à vous de lire les conneries que j'écris !), mais parler du contenu de manière positive entrainerait de facto plus de lecture, plus de message vers les créateurs entrainerait de facto plus de motivation à continuer, donc : soyons gentils pour préserver le Web hors des réseaux sociaux !
Très belle expérience chez Leroy Merlin entre l’app et le magasin. -- bastiii
#UX #Magasin #Tech #Divers #Amélioration-de-l'expérience-client
Idée géniale de la part de LeRoy Merlin : proposer de faire clignoter l'étiquette d'un produit depuis l'app pour le retrouver plus facilement en magasin !
J'imagine que ça ne marche que si on est dans le magasin physiquement pout eviter les dérives. En tout cas j'aime l'idée !
Boostez votre carrière dans le développement de logiciels grâce à ces 10 compétences essentielles, par Mensur Durakovic
#Divers #Métier-de-dev #Dev #Culture-d'équipe #Collaboration #Communication
Je suis complètement d'accord avec cet article qui liste 10 compétences non technique indispensable pour être un bon développeur et rechercher pour construire une équipe qui fonctionne bien !
Je reprends la liste mais je vous laisse aller voir l'explication détaillée :
- La communication
- Le travail d'équipe
- L'esprit d'apprentissage
- L'éthique du travail
- Organisation et gestion du temps
- Intelligence émotionnelle/empathie
- Conscience de soi
- Accessibilité
- Persistance/patience
- La confiance
Développez ces 10 compétences et vous serez toujours dans une bonne position pour avancer et travailler sereinement !
Cartes IGN, une application pour découvrir la France autrement - Institut - IGN
#Open-Street-Map #Tourisme #IGN
Très cool de voir une belle application de carte ouverte venant de l'IGN !
Faut prendre le temps de manipuler les options mais c'est propre et très réactif, c'est basé sur Open Street Map, c'est vraiment pas mal !
Vous vous demandez à quoi ressemble le bulletin de salaire d’un président 🇫🇷 ? -- @Xberne
#Open-Data #Transparence #Emmanuel-Macron #France
Le lien en direct : https://madada.fr/demande/bulletins_de_salaire_du_presiden
Je ne savais pas, mais on peut demander l'accès à beaucoup de documents administratifs qui concerne des entrées/sorties d'argent pour l'État, donc les bulletins de paies, et là par exemple ceux de décembre et janvier du Président Emmanuel Macron (pour ceux qui sont curieux : il est "indemnisé" à auteur de 14523,94€ / mois). Évidemment il a droit à une certaine protection de sa vie privée : pas d'adresse, numéro de compte, ou autres infos purement perso (normal !).
On peut demander mais pour moi ça devrait juste être publié au fil de l'eau (avec un délai au besoin ça me va), mais on ne devrait pas avoir à demander, ça devrait être purement de l'Open Data !
Can You 3D Print Cassettes? - Chris Borge
#Retro #3DPrinting #DIY #Divers
Chris Borge a fabriqué une cassette custom : il a imprimé en 3D un boîtier sur-mesure avec un design un peu personnalisé, transféré la bande magnétique d'une ancienne cassette pour y copier l'OST de Minecraft (un jeu dont il aime beaucoup l'OST).
J'aime ce genre de projet "inutile" mais intéressant, rétro mais utilisable aujourd'hui, et qui permet en théorie la préservation du matériel !
L'aventurier du casque Bluetooth maudit
#iPhone #Apple #Bluetooth #Lightning
Histoire incroyable : une quantité énorme d'accessoires audio filaire pour iPhone sont en fait des appareils Bluetooth alimenté par le port lightning pour éviter le coût des batteries pour faire des services sans-fils et en même temps le coût des puces pour se conformer à la norme Lightning (et sans doute les licences qui vont avec…). Apple a tellement fermé son écosystème que les constructeurs low-cost ont trouvé le raccourci le moins cher à la production d'accessoire 🤣
Bulletin Board System (BBS) - The Internet's First Community - YouTube
#Internet
BBS pour Bulletin Board System… C'est la première fois que j'entendais parler de ça pourtant c'est fondateur : c'est ce système qui a donné naissance aux premières communautés en ligne. Si j'ai bien compris c'est un réseau qui a permis la création de l'ancêtre des forums (Discord en mode 100% public et sans compte pour lire pour les plus jeunes 😉)!. La vidéo est sympa à regarder et ça permet de découvrir une brique oubliée de l'histoire d'Internet 😃
Crédit photo : Générée via Microsoft Designer avec le prompt suivant (+ Phot.AI pour étendre l'arrière-plan)
newspaper, reading, press, news