⚡ ASTUCE JavaScript — ARRAY.FROM : LE COUTEAU SUISSE OUBLIÉ

1️⃣ Transformer un objet en array proprement

// Le piège : length-only ne suffit pas
const obj = { 0: 'a', 1: 'b', length: 2 };
[...obj];  // ❌ TypeError: object is not iterable

// La solution : Array.from avec mapping direct
const arr = Array.from(obj, (v, i) => `item-{i}:{v}`);
// ['item-0:a', 'item-1:b']

2️⃣ Générer une séquence numérique (remplace les boucles)

// 0..4 en une ligne
const range = Array.from({ length: 5 }, (_, i) => i);
// [0, 1, 2, 3, 4]

// Avec une fonction
const squares = Array.from({ length: 5 }, (_, i) => i * i);
// [0, 1, 4, 9, 16]

3️⃣ Bonus : Array.fromAsync pour itérer sur des promesses

const urls = ['/api/users', '/api/posts', '/api/comments'];
const results = await Promise.all(
  urls.map(url => fetch(url).then(r => r.json()))
);

// Ou plus élégant avec Array.fromAsync (ES2024)
const responses = await Array.fromAsync(
  urls.map(url => fetch(url).then(r => r.json()))
);

✅ Plus concis que les boucles, plus lisible que les hacks. Un outil à toujours avoir sous la main.

💾 Enregistre ce post pour ne pas l'oublier.

#JavaScript #JavaScript #WebDev #DevTips #MetaCodeLearn

⚡ ASTUCE JavaScript — STRUCTUREDCLONE : COPIER PROFOND EN 1 LIGNE

1️⃣ Le piège classique : la fausse copie

// ❌ Référence partagée, pas une copie
const original = { user: { name: 'Aliou', score: 10 } };
const copy = { ...original };

copy.user.score = 99;
console.log(original.user.score); // 99 ! mutation inattendue

2️⃣ La solution native : structuredClone() (Node 17+, tous navigateurs modernes)

// ✅ Copie profonde native, zéro dépendance
const original = { user: { name: 'Aliou', score: 10 } };
const copy = structuredClone(original);

copy.user.score = 99;
console.log(original.user.score); // 10 ✅ intact
console.log(copy.user.score);     // 99 ✅ vraiment copié

# Supporte : Date, Map, Set, ArrayBuffer, RegExp...
const data = structuredClone({
  date: new Date(),
  tags: new Set(['js', 'web']),
  items: [1, 2, 3]
});

3️⃣ Bonus : l'astuce de l'objet gelé pour forcer l'immutabilité

const state = Object.freeze({
  user: Object.freeze({ name: 'Aliou' })
};

// Lance TypeError en mode strict, échoue en sloppy
state.user.name = 'Bob'; // silencieux en sloppy, erreur en strict

✅ Native, rapide, et plus safe que JSON.parse(JSON.stringify() qui perd les Dates et les undefined.

💾 Enregistre ce post pour ne pas l'oublier.

#JavaScript #JavaScript #WebDev #DevTips #MetaCodeLearn

⚡ ASTUCE JavaScript — STRUCTUREDCLONE : COPIER EN PROFONDEUR, PROPREMENT

1️⃣ Le problème : la shallow copy et le piège de la mutation

// ❌ {...original} ne copie que le 1er niveau
const user = { name: "Aliou", tags: ["dev", "crypto"] };
const clone = { ...user };
clone.tags.push("design");
console.log(user.tags); // ["dev", "crypto", "design"] 💀

// JSON.parse(JSON.stringify(x)) perd les fonctions, Date, Map, etc.

2️⃣ La solution : structuredClone() (natif depuis 2022)

// ✅ Copie profonde, native, performante
const user = {
  name: "Aliou",
  tags: ["dev", "crypto"],
  meta: { lastLogin: new Date(), level: 42 }
};
const clone = structuredClone(user);

clone.tags.push("design");
clone.meta.level = 99;

console.log(user.tags);      // ["dev", "crypto"] ✅
console.log(user.meta.level); // 42 ✅

3️⃣ Bonus : disponible aussi pour les transfert d'objets

// 🎯 Bonus : dans un postMessage entre fenêtres/Web Workers
worker.postMessage(structuredClone(hugeState));

// 🎯 Bonus : copie profonde d'un FormData
const formCopy = structuredClone(originalFormData);

// 🎯 Bonus : snapshot d'un état avant mutation (Redux-like)
const prevState = structuredClone(currentState);
updateState(newPartial);
if (error) rollbackTo(prevState);

⚠️ Limites connues : ne copie pas les fonctions (lance DataCloneError), ni les Symbols en clés. Pour 99% des cas (state, API responses, undo/redo), c'est parfait.

✅ Plus de lodash.clonedeep, plus de JSON hack. Une fonction native, rapide, moderne.

💾 Enregistre ce post pour ne pas l'oublier.

#JavaScript #JavaScript #WebDev #DevTips #MetaCodeLearn

⚡ ASTUCE JAVASCRIPT — Promise.all vs Promise.allSettled vs Promise.any

T'as 3 URLs à fetch en parallèle. Tu prends laquelle ?

1️⃣ Promise.all — "toutes ou rien"

const results = await Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
]);
// Si 1 échoue → TOUT échoue (reject immédiat)
// results = [users, posts, comments]

Cas d'usage : tu as besoin des 3 pour avancer (sinon ta feature est cassée).

2️⃣ Promise.allSettled — "toutes, peu importe le résultat"

const results = await Promise.allSettled([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
]);
// Aucune reject globale, même si tout plante
// results = [
//   { status: 'fulfilled', value: ... },
//   { status: 'rejected', reason: ... },
//   { status: 'fulfilled', value: ... }
// ]

Cas d'usage : dashboard, logs, batch jobs. Tu veux savoir ce qui a marché et ce qui a planté.

3️⃣ Promise.any — "la première qui réussit"

const result = await Promise.any([
  fetch('https://cdn1.example.com/data'),
  fetch('https://cdn2.example.com/data'),
  fetch('https://cdn3.example.com/data')
]);
// Prend le PREMIER fulfilled, ignore les autres
// Si TOUS échouent → AggregateError

Cas d'usage : retry multi-sources (mirror CDN, fallback API).

Le piège classique :

Écrire Promise.all sur 50 appels indépendants. Si 1 seul timeout, les 49 autres résultats sont JETÉS — alors que tu pourrais afficher 49 widgets et 1 message d'erreur. C'est du gâchis. allSettledSolved ce problème.

✅ Résumé simple :
- Besoin de tout ? → Promise.all
- Besoin de savoir ce qui marche ? → Promise.allSettled
- Besoin du premier qui répond ? → Promise.any

💾 Enregistre ce post pour ne pas l'oublier.

#JavaScript #Promise #WebDev #DevTips #MetaCodeLearn

⚡ ASTUCE WEB — CORS, enfin compris en 3 minutes

Tu ouvres la console : "Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy". Tu fixes ça comment ? Tu copies-colles un snippet StackOverflow. Mais qu'est-ce que ça veut dire, vraiment ?

Le problème :

Ton navigateur charge https://myapp.com. Ton JS essaie de faire un fetch('https://api.example.com/users'). Pour des raisons de sécurité, le navigateur BLOQUE la requête par défaut. Pourquoi ?

Parce que si je vais sur https://mauvais-site.com et que mon JS peut faire un fetch('https://banque.com/compte/virements') avec mes cookies de session attachés automatiquement, c'est la catastrophe. C'est ce qu'on appelle une attaque CSRF.

CORS = Cross-Origin Resource Sharing. C'est LE mécanisme qui dit : "OK, le navigateur, toi https://mon-app.com, je t'autorise à me lire."

Comment ça marche :

Quand ton frontend fait un fetch, le navigateur envoie une preflight request (OPTIONS) :

OPTIONS /users HTTP/1.1
Origin: https://mon-app.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Authorization

Le serveur répond :

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://mon-app.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 86400

Si Access-Control-Allow-Origin matche l'origine du frontend, le navigateur laisse passer la vraie requête. Sinon, bloqué.

Les 3 erreurs classiques et leurs fixes :

1️⃣ "No 'Access-Control-Allow-Origin' header is present"

Le serveur ne renvoie pas le header. Côté backend, ajoute :

# Express.js
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://mon-app.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

2️⃣ "The value of the 'Access-Control-Allow-Origin' header is '*, which is not valid when credentials are included"

Tu as mis Access-Control-Allow-Origin: * mais tu envoies des cookies / une Authorization. Le wildcard ne marche pas avec credentials. Tu DOIS spécifier l'origine exacte.

3️⃣ "CORS policy: Method not allowed"

Tu envoies un POST mais le serveur n'autorise que GET. Ajoute la méthode dans Access-Control-Allow-Methods.

⚠️ La règle d'or :

NE JAMAIS désactiver CORS côté navigateur (il y a des extensions pour, mais en prod, jamais). CORS est une protection serveur. Le navigateur ne peut pas le bypass.

Le bon réflexe : configure CORS côté BACKEND. Si tu contrôles pas le backend, passe par un proxy (ex: ton serveur Next.js qui fait fetch côté Node, où CORS n'existe pas).

💾 Enregistre ce post pour ne pas l'oublir.

#WebDev #CORS #JavaScript #DevTips #MetaCodeLearn