Frontend
Is it Time to Regulate React?
#Frontend #React #JavaScript #Web
Dans cet article on revient sur l'echec qu'est React pour l'écosystème web d'aujourd'hui : le ralentissement des pages, les performances désastreuses, l'accessibilité catastrophique, l'empilement de lib diversent qui rendent les projets compliqués à gérer, la mauvaise expérience des utilisateurs, alors qu'on pourrait simplement faire du web natif, faire des choses simples, qui marcheront dans le temps.
Je suis 100% d'accord avec ça. On utilise beaucoup trop de JavaScript sur le web là où on en a pas besoin. Je ne suis pas anti-JS ou anti-React, mais on les a tellement utilisés par défaut à tort et à travers, on a tellement fait n'importe quoi, que c'est devenu un enfer.
On peut complètement englober les autres frameworks JS.
On pourrait me dire qu'on peut faire du React bien, qu'on peut avoir des apps React accessibles et performants, que les Server Component peuvent aider, etc. C'est faux à mon sens.
À mon avis on devrait faire beaucoup plus de vanilla, au pire avec juste TypeScript pour avoir une meilleure DX, faire d'abord du HTML et du CSS et ensuite se poser la question de faire du JS, arrêter de chercher compliqué quand on peut faire simple.
Et aussi arrêter de dire que faire du Frontend tout le monde peut le faire. Je vois trop de projet front mené par des devs plutôt back. J'ai rien contre les devs back, c'est des compétences et un mindset différents c'est tout. Faire du front ça demande des compétences spécifiques, des connaissances larges, une rigueur particulière, des outils particuliers, qu'à mon avis la plupart des gens qui font "du Front" n'ont pas
4 Unconventional Ways to Cast in Typescript
#TypeScript #Frontend
Petit rappel sur le fait que les typings de TypeScript peuvent être abusés pour faire n'importe quoi, y compris des casts forcés (même sans as) qui contournent toutes les vérifications standards. Et c'est normal. C'est un système de typage compile-time.
Je cite les quatre exemples (et je serais pas étonné qu'il y en ait d'autres) :
- The is Operator
const badDetector = <A, B,>(a: A): B => {
const detector = (_ab: A | B): _ab is B => true;
if (detector(a)) return a;
throw new Error("unreachable");
};
- Mutation Across Boundaries
const mutation = <A, B,>(a: A, b: B): B => {
const mutate = (obj: { field: A | B }): void => {
obj.field = a;
};
const obj = { field: b };
mutate(obj);
return obj.field;
};
- Smuggling Through Structural Typing
const loopSmuggling = <A, B,>(a: A, b: B): B => {
const objAB = { fieldA: a, fieldB: b };
const objB: { fieldB: B } = objAB;
for (const field of Object.values(objB)) {
// Object.values believes all fields have type `B`,
// but actually `fieldA` is first in iteration order.
return field;
}
throw new Error("unreachable");
};
const spreadSmuggling = <A, B,>(a: A, b: B): B => {
const objA = { field: a };
const obj: {} = objA;
const objB = { field: b, ...obj };
// `objB.field` has been overwritten by the spread,
// but Typescript doesn't know that.
return objB.field;
};
|void is Very Bad
const orVoid = <A, B,>(a: A): B => {
const outer = (inner: () => B | void): B => {
const b = inner();
if (b) return b;
throw new Error("falsy");
};
const returnsA = (): A => a;
const voidSmuggled: () => void = returnsA;
return outer(voidSmuggled);
};
Les quatre se basent sur des éléments parfaitement valident, mais détournés de leurs usages pour arriver aux limites de TypeScript.
Par contre, l'auteur encourage à l'utilisation de règles eslint qui permettent de se protéger de ces erreurs. Donc ce n'est pas impossible à solutionner !
Don’t Forget These Tags to Make HTML Work Like You Expect
#Frontend #HTML
L'auteur explique qu'il faut toujours avoir ces éléments dans un fichier HTML :
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Le <!doctype html> est obligatoire pour une interprétation correcte selon la spécification.
Le <html lang="en"> va s'assurer que bien indiquer la langue de votre page au navigateur, c'est particulièrement important pour les outils d'accessibilités.
Le <meta charset="utf-8"> vous assure que l'encodage sera correctement pris en compte dans tous les contextes.
Le <meta name="viewport" content="width=device-width,initial-scale=1.0"> vous assure que l'affiche sera à une taille correcte sur desktop, tablette et mobile.
Autant je pense au 3 premiers, rarement au dernier. Pour moi ça devrait être le comportement par défaut…
Your URL Is Your State
#Frontend #UI #Web
Je cite la conclusion qui résume vraiment bien l'article :
That PrismJS URL reminded me of something important: good URLs don’t just point to content. They describe a conversation between the user and the application. They capture intent, preserve context, and enable sharing in ways that no other state management solution can match.
We’ve built increasingly sophisticated state management libraries like Redux, MobX, Zustand, Recoil and others. They all have their place but sometimes the best solution is the one that’s been there all along.
In my previous article, I wrote about the hidden costs of bad URL design. Today, we’ve explored the flip side: the immense value of good URL design. URLs aren’t just addresses. They’re state containers, user interfaces, and contracts all rolled into one.
If your app forgets its state when you hit refresh, you’re missing one of the web’s oldest and most elegant features.
Je vous encourage vraiment à aller lire l'article, l'auteur montre beaucoup de manière d'utiliser l'URL pour gérer un état. Il montre aussi du code (vanilla et React) pour manipuler cet état côté client.
Il explique aussi un point fondamental :
When deciding between pushState and replaceState, think about how you want the browser history to behave. pushState creates a new history entry, which makes sense for distinct navigation actions like changing filters, pagination, or navigating to a new view — users can then use the Back button to return to the previous state. On the other hand, replaceState updates the current entry without adding a new one, making it ideal for refinements such as search-as-you-type or minor UI adjustments where you don’t want to flood the history with every keystroke.
IA
On ne l'avait pas dans notre bingo 2025 : Napster fait son grand retour, mais sous la forme d'un appareil IA
#IA #Napster
Napster (historiquement un service de partage de fichier en pair-to-pair) vient d'annoncer un gadget qu'on installe au sommet de certain modèle de Macbook pour avoir un écran "holographique" qui affiche un "assistant" IA qui serait notre "jumeau numérique".
Les visuels sont jolis mais soyons honnêtes : c'est encore un gadget IA qui sera inutile et ne fera que gonfler la montagne de déchet électronique qui existe déjà…
Sécurité
La traque de l'homme le plus cruel d'Internet -- Simon Puech
#Vie-privée #Sécurité #Finlande
Imaginez : vous êtes suivi par un.e psychologue / psychiatre depuis des mois/années ; d'un coup vous découvrez que la plateforme qui est utilisée pour sauvegarder les transcriptions de vos séances et toutes vos données perso associées (nom, prénom, adresse, email, numéro de téléphone, numéro de sécurité sociale, etc.) a été piratée ; toutes les données étaient sauvegardées en claire et sont maintenant en attente d'une rançon auprès du boss de la boite qui gère ça ou d'un paiement fait au pirate ; imaginez que toutes ces données finissent librement accessible (à cause d'une bourde absurde) en clair en ligne et qu'il suffit de taper votre nom pour y accéder.
C'est ce qui s'est passé en Finlande en 2020 quand l'entreprise Vastaamo a été piratée.
L'histoire est dingue, mais est représentative de la réalité : nos données sont rarement en sécurité chez les acteurs qui sont censés les protéger. Et parfois on a même pas conscience que nos données partent dans le cloud ou en numérique quelque part.
Quand imposerons-nous à tous les acteurs des audits pour valider que les données des utilisateurs soient chiffrées et inexploitables en cas de fuite ?
Divers
Un incendie détruit complètement un système de stockage cloud du gouvernement sud-coréen et aucune sauvegarde n'est disponible, 647 systèmes critiques du pays ont été mis hors service par l'incendie
#Cloud #Corée-du-Sud #Sauvegarde
Toutes les données du gouvernement Sud coréen au sens large (Assemblée nationale, administrations, données de travail des fonctionnaires, etc.) étaient stockées depuis 2018 dans un seul et unique data center, avec aucune copie pour la grande majorité car "le volume de donnée était trop important".
Et là prévention incendie au niveau d'un système de batterie, et tout est partie en fumée, plus rien ne fonctionne, rien n'est récupérable…
Règle de base pour le stockage : 3-2-1
- 3 copies ;
- 2 types de support ;
- 1 copie hors site ;
Y'a d'autres règles complémentaires, mais rien qu'avec ça : ils auraient pas tout perdu…
Je serai aussi curieux de savoir comment les Coréens ont été conseillés 😅
Je serai curieux de voir un audit de ce qui est fait en France.
Ubuntu 25.10 Fix Pending For Broken Flatpak Support - Phoronix
#Ubuntu #Linux #Gnome
La version 25.10 d'Ubuntu est sortie avec Flatpak qui ne fonctionnait pas… On ne parle pas d'un petit utilitaire qui avait un bug, mais d'un des gestionnaires de paquet qui ne fonctionnait pas…
Pour rappel : Ubuntu fonctionne depuis quelques versions avec 3 gestionnaires de paquets apt (hérité de Debian, qui installe nativement le paquet comme un peu partout), flatpak (qui est un système d'installation sandboxé standard et universelle pour Linux) et snap (qui est un format spécifique à Ubuntu de paquet sandboxé). Aujourd'hui installer un paquet via apt sous Ubuntu peut vous installer sous le manteau un snap ou un flatpak si les équipes de Canonical ont hésité que c'était un meilleur choix. Sur le principe, au fond, pourquoi pas, sauf que pour mettre à jour apt ne suffit plus, il faut aussi lancer les mises à jours snap et flatpak sinon tout ne se met pas correctement à jour.
Certains paquets n'existent que dans une des sources, et dans les paquets disponibles que sous forme de flatpak on trouve des briques Gnome qui est le gestionnaire de bureau par défaut d'Ubuntu…
Vous réalisez à quel point Canonical a déconné ?
Firefox Translator - Pour une traduction 100% offline
#Language #OCR #OpenSource #App
Application de traduction de texte ou d'image via de l'OCR (Optical Character Recognition) 100% offline.
J'avoue que j'ai tendance à utiliser souvent DeepL ou Google Lens parce que je connais pas d'autre outil… J'ai testé rapidement, c'est pas parfait (les solutions cités avant non plus), mais ça fait le travail donc à voir dans le temps.
L'app est dispo sur f-droid (mais pas le play store) sous le nom "Offline Translator", car contrairement à ce que le nom "Firefox Translator" peut laisser penser, le projet n'est pas affilié à Mozilla, mais repose sur du travail de chez Mozilla.
Compilation is communication
#Dev
L'auteur explique que l'interaction avec un compilateur est comme une conversation. Quand on utilise un IDE (IntelliJ par exemple) on va être dans un mode "messagerie instantanée", chaque fois qu'on va taper quelque chose, l'IDE va nous indiquer le résultat de la compilation et ça va continuellement nous envoyer un feedback qui peut nous perturber, en particulier nous couper dans l'action qu'on cherche à réaliser, car notre focus est attiré ailleurs.
À l'inverse utiliser un éditeur de texte et lancer manuellement la compilation va nous permettre de complètement séparer notre travail en deux phases "action" et "réflexion". Dans la phase action on va écrire le code comme on le sent, exprimer ce qu'on a en tête sous forme de code et aller vite là-dessus. Dans la phase réflexion on va s'assurer que ça fonctionne, corriger les erreurs, prendre du recul.
Avec un IDE aussi on a ces deux phases, mais je suis d'accord avec l'auteur : on a tendance à les voir se mélanger ce qui peut nous ralentir.
How I Reversed Amazon's Kindle Web Obfuscation Because Their App Sucked
#Amazon #Ebook
L'auteur montre le niveau d'obfuscation des ebooks provenant d'Amazon quand on les lit depuis "Kindle Cloud Reader".
Pourquoi faire ça ? Il a acheté (comprendre "loué tant qu'Amazon sera ok pour vous laisser lire et uniquement via son système") un ebook, il n'arrivait pas à le lire depuis l'application, le client web fonctionnait lais impossible de lire hors ligne.
L'article est intéressant à lire, et montre des techniques sophistiqués d'obfuscation pour s'assurer qu'on ne télécharge pas facilement les ebook qu'on achète.
Le projet open source LineageOS vient de réaliser quelque chose d'exceptionnel : il a pris les devants et a publié LineageOS 23.0 sur plus de 100 appareils différents ? la première version basée sur Android 16
#Android #Google #Open-source #Open-Source #LineageOS
LineageOS 23.0 sort en étant la première ROM alternative Android 16. Rien de choquant non plus, car c'est sûrement une des équipes de ROM avec le plus de moyen.
Mais quelques bémols :
- Android 16 mais QPR0 (la première version Android 16) pas QPR1 (encore closed source, à peine diffusés aux constructeurs, pas diffusé en open source) ;
- basé sur du reverse Engineering pour les Pixels aussi (alors qu'avant ce n'était pas le cas) ;
Mais en même temps :
- des apps retravaillées / refondues pour améliorer l'experience utilisateur ;
- intégration forte de Jellyfin (cool si on utilise Jellyfin, inutile sinon) ;
- un nouveau launcher pour Android TV ;
En résumé : si vous achetez un Pixel vous n'avez maintenant pas plus la main sur le matériel que chez un autre constructeur (sauf Fairphone je pense). L'âge d'or des Pixels est terminé.
Crédit photo : Générée via Mistral AI avec le prompt suivant :
Create an image of a person deeply absorbed in reading a printed newspaper, seated at a rustic wooden table in a warm, inviting space. The scene is bathed in soft, golden light from a vintage desk lamp, casting gentle shadows across the table. A stack of newspapers and magazines, slightly disheveled, surrounds the reader, with visible headlines and text hinting at current events and stories. A steaming cup of coffee sits nearby, adding to the cozy ambiance.
In the background, a large window frames a dynamic cityscape or the lively atmosphere of a newsroom, suggesting the connection between the reader and the world outside. The focus is on the tactile experience of holding the newspaper—crumpled edges, ink-stained fingers, and the rustle of pages—while the setting feels intimate yet alive with the energy of journalism. The colors are warm and rich, with earthy tones and pops of contrast to draw attention to the act of reading and the immersive world of news.