Jules 👨‍💻

🧠 TypeScript | ⚛️ React | 💻 Frontend Lead 🎮 Code & gaming fuel my days 📢 I share tech takes, UI gems & spicy combos

[Jules 👨‍💻 @devbyjules]

⚡ TL;DR
•CommonJS = require
•ESM = import
•Node peut faire les deux, mais faut choisir ton camp
•Et lire la doc des libs que tu installes 😬

[Jules 👨‍💻 @devbyjules]

🧵 Pourquoi import et require te donnent l’impression de forcer une prise anglaise dans une multiprise française ?

Un jour tu require, un autre tu import, et parfois… rien ne marche.
Voici le thread qui t’explique les modules JS, version bricolo 🪛⚡

⬇️

[Jules 👨‍💻 @devbyjules]

🪛 Pourquoi c’est encore le bazar ?
•npm est rempli de libs en CommonJS
•Node a longtemps tourné QUE là-dessus
•Tout migrer, c’est recâbler un appart 🧯

Résultat ?
On vit dans une phase de transition… qui dure 😅

[Jules 👨‍💻 @devbyjules]

6. TL;DR 🧤
•Les key, c’est les tickets du vestiaire pour React
•Elles permettent de matcher les bons éléments
•Mal choisies ou absentes → comportement WTF garanti
•index ? ⚠️ Pas toujours safe

Et maintenant tu sauras pourquoi ton input garde l’ancienne valeur 🫣

[Jules 👨‍💻 @devbyjules]

🧵 “Pourquoi React flippe quand t’oublies les key dans une liste ?”

Imagine un vestiaire.

Tu laisses ton manteau, on te donne un ticket numéroté.

Plus tard 👉 tu montres ton ticket 👉 tu récupères ton manteau.

Eh ben React fait pareil… quand tu lui donnes les key.

⬇️ Thread

[Jules 👨‍💻 @devbyjules]

5. La règle d’or

Utilise une key stable, unique et prévisible.

✅ https://t.co/dc8Sn24o6t
✅ product.sku
❌ Math.random()
❌ index (sauf liste figée et jamais modifiée)

Si tu ne peux pas garantir ça… prépare-toi à un vestiaire chaotique 👀

[Jules 👨‍💻 @devbyjules]

En résumé :
🧠 Les CORS, c’est pas un bug, c’est une feature.
C’est le navigateur qui joue au gendarme pour éviter les abus.
Si t’es bloqué → c’est que le serveur distant doit t’autoriser.
Sinon, t’es juste en train de parler à une API qui veut pas de toi 😅

[Jules 👨‍💻 @devbyjules]

Mais pourquoi ce videur est si relou ?
🛡️ Parce qu’il protège les gens (les utilisateurs) contre les sites chelous qui voudraient faire des requêtes à leur place sans qu’ils le sachent.
Donc, par défaut :
Pas d’autorisation ? Pas d’entrée. ❌

[Jules 👨‍💻 @devbyjules]

Donc :
👎 Pas d’autorisation → navigateur bloque
👍 API envoie les bons headers → navigateur dit OK
Les CORS, c’est juste une discussion entre le navigateur et le serveur distant pour dire :
"Tu connais cette personne ? Elle peut accéder à tes infos ?"

[Jules 👨‍💻 @devbyjules]

Imagine que ton navigateur est une boîte de nuit. 🕺
Ton site web, c’est toi.
Tu veux aller parler à quelqu’un dans une autre salle (une API d’un autre domaine).
💂‍♂️ Le videur (le navigateur) t’arrête direct :
"T'es pas sur la liste. Tu rentres pas."
C’est ça, les CORS.

[Jules 👨‍💻 @devbyjules]

Franchement, j’aurais aimé qu’on m’explique les CORS comme si j’étais en boîte de nuit avec un videur un peu trop zélé.
Du coup, voilà le thread que j’aurais voulu lire quand j’ai découvert cette galère. 😅👇
#Dev #CORS #Web

[Jules 👨‍💻 @devbyjules]

🎭 Tu codes un super site, tout fonctionne en local, tu fais une requête vers une API externe… et là :
"Access to fetch at '...' from origin '...' has been blocked by CORS policy."
💥 PAN.
C’est quoi ce délire ? Thread sur les CORS, ces gardes du corps du web. 🧵