Forem: Quentin Merle

🚀 L'IA locale en 2026 : Ma traversée du désert (Du Terminal au GPU)

Quentin Merle — Thu, 26 Mar 2026 18:48:21 +0000

🌐 English version here: Local AI in 2026: My Journey Through the Desert

Disclaimer & Contexte : Cet article est basé sur mon expérience personnelle avec un MacBook Pro M1 Pro (32 Go de RAM) et VS Code. Si j'utilise Claude comme référence principale pour l'IA Cloud (vu sa domination actuelle sur le code), la même logique s'applique à Gemini ou ChatGPT quand on compare la puissance du Cloud à l'efficacité du local.

**Le point de départ : "L'IA locale, c'est vraiment bien ? C'est compliqué à installer ?"**

Il y a quelques semaines, je n'y connaissais rien à Ollama. Comme beaucoup de devs, je jonglais avec les quotas gratuits des géants du Cloud dans mon IDE. Puis, la curiosité m'a piqué avant que je ne sorte ma carte bleue : est-ce qu'on peut vraiment faire tourner un "cerveau" de classe mondiale sur un MacBook Pro M1 Pro de base en 2026 ?

1. La simplicité de l'installation

Installer Ollama, c'est presque trop facile. Une commande, et boum : vous avez une IA dans votre terminal. Pas de compte, pas de clé API, pas de carte bancaire.

2. DeepSeek, Qwen, Mistral... Quel "cerveau" choisir ?

Avant de lancer mon premier prompt, j'ai dû fouiller dans la bibliothèque. En 2026, trois familles dominent le marché :

Qwen (Alibaba) : L'architecte du "Clean Code". Brillant avec React et Tailwind, il produit un code élégant et suit les meilleures pratiques.
DeepSeek : Le "Sniper" de la logique. Redoutable pour les algorithmes complexes et le pur back-end.
Mistral (France) & Llama (Meta) : Les piliers. Mistral est une superbe alternative européenne polyvalente, tandis que Llama reste le couteau suisse universel de l'Open Source.

2 bis. C’est quoi un "B" ? (Comprendre la taille du cerveau)
On voit des étiquettes partout : 4B, 7B, 32B. Le "B" signifie Billion (milliard).

Le chiffre : C'est le nombre de paramètres (connexions neuronales) de l'IA. Plus il est élevé, plus l'IA est "éduquée".

L'empreinte RAM : En 2026, grâce à la "quantization" (compression), un modèle 1B consomme environ 0,8 Go de RAM. Un 4B prend ~3,5 Go. Un 32B engloutit ~20 Go... juste pour exister dans votre mémoire !

💡 Attendez, comment un modèle 9B tient dans 7,80 Go ? Tout est question de Quantification (précisément le format 4-bit ou Q4_K_M). C'est comme transformer une photo RAW ultra-lourde en un JPEG de haute qualité : on perd un tout petit peu de précision, mais on gagne une vitesse folle et un poids plume en mémoire.

3. ⚠️ Le disclaimer "Claude Code" (Différence Agent VS Modèle)

On le voit partout en ce moment : "Utilisez Claude gratuitement via Ollama !". C'est à moitié vrai. Claude Code est un outil génial (un agent en ligne de commande), mais ce n'est qu'une interface.

Par défaut, il se connecte aux modèles payants d'Anthropic (Sonnet, Opus, Haiku).
On peut le "brancher" sur Ollama (ex: claude --model qwen3-coder). C'est gratuit et privé, vous profitez de l'ergonomie de Claude avec le cerveau de votre modèle local.

4. Le mur de la réalité : Latence "Matrix" 🐌

Pensant bien faire, j'ai chargé un Qwen 3 32B.

Le Crash : Mon Mac a figé. L'IA mettait des minutes pour sortir un seul mot.
Le coupable : Mon système (Chrome, VS Code, Teams) occupait déjà 20 Go.
Le calcul fatal : 20 Go (Système) + 20 Go (IA) = 40 Go. Sur ma machine de 32 Go, le Mac a dû utiliser le SSD (Swap). Résultat : une lenteur insupportable.

J'ai essayé de coupler ça avec Roo Code sur VS Code, mais chaque instruction envoyait trop de tokens de contexte. La RAM a saturé instantanément. C'est frustrant quand on est habitué à la réactivité instantanée du Cloud.

5. L'art du compromis : "Découper" son setup

Après avoir failli perdre patience, j'ai pivoté vers une approche hybride :

Qwen 2.5-coder 1.5B : Pour l'auto-complétion (instantané).
Qwen 3.5 4B : Mon "daily driver". C'est le Sweet Spot pour 32 Go : il laisse assez de place à macOS pour respirer tout en restant très pertinent.

💡 Conseil de pro : Utiliser un petit modèle demande de réapprendre à prompter. Les IA du Cloud "lisent entre les lignes" et devinent vos intentions vagues. En local avec un 4B, cette magie n'existe pas. Il faut redevenir un artisan du prompt : précis, concis et structuré.

📥 UPDATE : La surprise du lendemain (Le test du modèle 9B)

Juste au moment où je pensais m'arrêter sur le 4B, j'ai tenté un démarrage à froid ce matin avec Qwen 3.5 9B. Avec une RAM "propre" (pas de Docker, pas 50 onglets Chrome), la différence était flagrante : des réponses en moins de 10 secondes.

Le 9B semble être le vrai "Sweet Spot Pro" pour une machine de 32 Go (avec 20Go déjà occupés) :

Le calcul RAM : Lors de mon test, le modèle 9B occupe exactement 7,80 Go. Sur un Mac de 32 Go, c'est parfaitement gérable si votre système n'est pas déjà saturé.
L'expérience : On a l'impression d'avoir le Copilot d'il y a quelques années. Il ne va pas encore refactoriser toute votre structure de fichiers tout seul, mais la logique est aiguisée et les blocs de code sont réellement prêts pour la prod.
Le revers de la médaille : Cela demande une certaine discipline. On ne peut pas faire tourner un gros stack de dev et un modèle 9B simultanément sur 32 Go sans que ça commence à chauffer.

Conclusion ? Le 4B est votre "filet de sécurité" pour le multitâche intensif, mais le 9B est votre compagnon de "Deep Work" quand vous pouvez lui donner l'espace nécessaire pour respirer.

6. L'outil indispensable : Can I Run AI

Une découverte qui sauve la vie : canirun.ai. Ce site simule la consommation de RAM d'un modèle en fonction de votre matériel avant même de le télécharger. C'est un passage obligé avant chaque ollama pull.

🦀 L'étape d'après : L'IA "Agentic" (OpenClaw)

Pendant que je rédigeais ce retour d'expérience, j'ai poussé la réflexion jusqu'aux agents autonomes comme OpenClaw, qui promettent d'automatiser vos tâches (mails, calendrier, scripts) directement depuis votre terminal. Mais attention : ici, la "coquille" est vide et le dilemme de la RAM se corse.

Le paradoxe de la vie privée : Jusqu'ici, j'acceptais d'utiliser le Cloud pour des requêtes isolées. Mais donner un accès complet à mon système à un agent distant ? À l'heure où GitHub Copilot annonce utiliser par défaut vos prompts et contextes pour entraîner ses modèles, l'ironie est totale. Confier l'intégralité de son contexte local à un tiers pour gagner dix minutes par jour devient un pari... audacieux.
Le prix de la liberté : L'alternative est d'injecter une IA locale dans l'agent. Mais faire cohabiter l'infrastructure de l'agent + le modèle 9B + votre IDE sur 32 Go de RAM relève de l'exercice d'équilibriste. C'est le prix de la propriété de son code.

🏁 Verdict : L'avenir est-il hybride ?

J'ai réussi à faire coder un composant React complexe par mon petit modèle 9B. C'était fluide, propre et 100% privé. Mais soyons honnêtes un instant :

Si vous avez été bluffés par la vitesse et la capacité de "lecture de pensée" de Claude Sonnet ou Gemini Pro, faire tourner une IA locale sur 32 Go de RAM donne encore un petit sentiment... de retour en arrière.

Intelligence : Un 9B local est un super stagiaire. Claude reste l'Architecte Senior.
Vitesse & Confort : La friction de la gestion de la RAM et les prompts qui doivent être plus "mâchés" font que l'expérience Cloud reste imbattable pour la productivité pure.

Pour pousser le trait : Parfois, je me surprends même à douter de la réponse de l'IA locale. J'ai presque envie de demander à Claude de vérifier la réponse de Qwen pour être sûr 🙃.

Est-ce que je vais continuer à utiliser mon Qwen 3.5 en local ? Oui, mais surtout par curiosité, pour repousser ses limites et voir ce qu'il a dans le ventre. Mais pour mon travail de développement quotidien intensif ? Le confort, la vitesse et la pure intelligence d'une IA Cloud reste imbattable.

📥 Mise à jour depuis le succès du 9B
Est-ce que je vais continuer à utiliser mon Qwen 3.5 en local ? Absolument. Depuis que j'ai vu à quel point le modèle 9B tourne bien, je suis bien plus tenté de l'utiliser pour les tâches routinières du quotidien. C'est parfait pour des checks de logique rapides ou du code boilerplate. Cependant, pour les sessions de "Gros Dev" qui demandent un raisonnement profond et une vision architecturale massive, je repasserai sur le Cloud.

En 2026, la RAM est la nouvelle puissance CPU. Tant que je n'aurai pas 128 Go de mémoire unifiée sur mon bureau, les modèles massifs du Cloud restent indétrônables.

Et vous ? C’est quoi votre "Sweet Spot" ? Vous jouez la carte du local pour la vie privée, ou le Cloud reste votre seul co-pilote ?

🚀 Local AI in 2026: My Journey Through the Desert (From Terminal to GPU)

Quentin Merle — Mon, 23 Mar 2026 15:37:05 +0000

🌐 Version française ici : L'IA locale en 2026 : Ma traversée du désert

Disclaimer & Context: This article is based on my personal experience using a MacBook Pro M1 Pro with 32GB of RAM and VS Code. While I use Claude as the primary reference for Cloud AI (given its current leadership in coding tasks), the same logic applies to other giants like Gemini or ChatGPT when comparing Cloud performance vs. Local efficiency.

The Starting Point: "Is Local AI actually good? And is it a pain to set up?"
A few weeks ago, I knew nothing about Ollama. Like many devs, I was just juggling free quotas from the cloud giants in my IDE. Then, curiosity hit me before I reached for my credit card: can you actually run a world-class "brain" on a base MacBook Pro M1 Pro (32GB) in 2026?

1. The Installation Shock (Pure Euphoria)

Installing Ollama is almost too easy. One command, and boom: you have an AI in your terminal. No account, no API key, no credit card.

2. DeepSeek, Qwen, Mistral... Which "Brain" Should You Pick?

Before hitting my first prompt, I had to dig through the library. In 2026, three families dominate the game:

Qwen (Alibaba): The "Clean Code" architect. Brilliant with React and Tailwind, it produces elegant code and follows best practices.
DeepSeek: The logic "Sniper." Formidable for complex algorithms and pure backend tasks.
Mistral (France) & Llama (Meta): The pillars. Mistral is a superb, versatile European alternative, while Llama remains the universal Swiss Army knife of Open Source.

2 bis. What’s a "B"? (Understanding Brain Size)
You see labels everywhere like 4B, 7B, 32B. The "B" stands for Billion.

The Number: It’s the number of parameters (neural connections) in the AI. The higher the number, the more "educated" the AI is.

The RAM Footprint: In 2026, thanks to "quantization", a 1B model consumes about 0.8GB of RAM.

A 4B model takes up ~3.5GB.

A 32B model eats ~20GB... just to exist in your memory!

💡 Wait, how does a 9B model fit into 7.80GB? It’s all about Quantization (specifically 4-bit or Q4_K_M). It’s like turning a heavy RAW image into a high-quality JPEG: you lose a tiny bit of precision, but you gain massive speed and a much smaller memory footprint.

3. ⚠️ The "Claude Code" Disclaimer (Don’t Get Fooled)

You see it everywhere right now: "Use Claude for free via Ollama!". That's only half true. Claude Code is a great tool (an agentic CLI), but it's just an interface.

By default, it connects to Anthropic's paid models (Sonnet, Opus, Haiku).
You can "plug" it into Ollama (e.g., claude --model qwen3-coder). It’s free and private, but you get the Claude UX with your local model's brain.

4. The Reality Wall: "Matrix" Latency 🐌

Thinking I was doing the right thing, I loaded a Qwen 3 32B.

The Crash: My Mac froze. The AI took minutes to output a single word.
The Culprit: My system (Chrome, VS Code, Teams) was already hogging 20GB.
The Fatal Math: 20GB (System) + 20GB (AI) = 40GB. On my 32GB RAM machine, the Mac had to use the SSD (Swap). Result: unbearable slowness.

I tried pairing this with Roo Code (an open-source, AI-powered coding assistant) on VS Code, but every instruction sent too many context tokens. The RAM saturated instantly. It’s frustrating when you're used to the instant reactivity of the Cloud.

5. The Art of Compromise: "Slicing" Your Setup

After nearly losing my mind, I pivoted to a hybrid approach:

Qwen 2.5-coder 1.5B: For autocomplete (instant).
Qwen 3.5 4B: My "daily driver." This is the Sweet Spot for 32GB: it leaves enough room for macOS to breathe while remaining highly relevant.

💡 Pro Tip: Using a smaller model requires re-learning how to prompt. Cloud AIs "read between the lines" and guess your vague intentions. In local with a 4B, that magic doesn't exist. You have to become a prompt craftsman again: be precise, concise, and structured.

📥 UPDATE: The "Morning Surprise" (Testing the 9B Model)

Just when I thought I was settled on the 4B model, I tried a fresh boot this morning with Qwen 3.5 9B. With "clean" RAM (no Docker, no 50 Chrome tabs), the difference was night and day: Responses in under 10 seconds.

The 9B feels like the true "Pro" sweet spot for a 32GB machine:

The RAM Math: In my test, the 9B model takes up exactly 7.80GB of RAM. On a 32GB Mac, this is perfectly manageable if your system isn't already saturated.
The Experience: It feels like the high-end Copilot we had a few years ago. It won’t automatically refactor your entire file structure yet, but the logic is sharp, and the code blocks are actually production-ready.
The Catch: It requires a disciplined environment. You can't run a heavy dev stack and a 9B model simultaneously on 32GB without feeling the heat.

Final takeaway? The 4B is your "safety net" for heavy multitasking, but the 9B is your "deep work" companion when you can afford to give it the room it needs to breathe.

6. The Essential Tool: Can I Run AI

A life-saving discovery: canirun.ai. This site simulates the RAM consumption of a model based on your hardware before you download it. It’s a mandatory stop before every ollama pull.

🦀 The Next Frontier: "Agentic" AI (OpenClaw)

While I was writing this review, I pushed my research into autonomous agents like OpenClaw, which promise to automate your tasks (emails, calendar, scripts) directly from your terminal. But beware: here, the "shell" is empty, and the RAM dilemma gets even tougher.

The Privacy Paradox: Until now, I was okay with using the Cloud for isolated queries. But giving full system access to a remote agent? At a time when GitHub Copilot has just announced that, starting April 24, your prompts and contexts will be used by default to train their models, the irony is peak. Handing over your entire local context to a third party just to save ten minutes a day is... a bold bet.
The Price of Freedom: The alternative is to inject a Local AI into the agent. This is total sovereignty: what happens on the Mac stays on the Mac.
The Balancing Act: But freedom comes at a hardware cost. Running the agent infrastructure (Node.js/Docker) + the 9B model + your IDE on 32GB of RAM is a high-wire act. That's the literal price of owning your code.

🏁 Verdict: Is the Future Hybrid?

I managed to have my little 9B model code a complex React component. It was smooth, clean, and 100% private. But let’s be honest for a second:

If you’ve been spoiled by the speed and "mind-reading" capabilities of Claude Sonnet or Gemini Pro, running local AI on a 32GB machine still feels a bit... outdated. It’s like switching back to a manual car after years of driving an automatic.

Intelligence: A local 9B is a great intern. Claude remains the Senior Architect.
Speed & Comfort: The sheer friction of managing your RAM and dealing with slightly "dumber" prompts makes the Cloud experience unbeatable for pure productivity.

To put it bluntly: Sometimes, I even find myself doubting the local AI's output. To stretch the point, I almost feel the urge to ask Claude to double-check Qwen's answer just to be sure 🙃.

Will I keep using my local Qwen 3.5? Yes, but mostly out of curiosity—to push its limits and see what it has in its gut. But for my heavy-duty daily dev work? The comfort, speed, and sheer brilliance of a Cloud AI aren't going anywhere.

📥 Update since 9b run well
Will I keep using my local Qwen 3.5? Definitely. Since discovering how well the 9B model runs, I’m much more tempted to use it for everyday, routine tasks. It’s perfect for quick logic checks or boilerplate code. However, for "Heavy Dev" sessions that require deep reasoning and a massive architectural vision, I’ll still switch back to Cloud AI.

In 2026, RAM is the new CPU power. Until I have 128GB of Unified Memory on my desk, the giants still own the crown.

What about you? What’s your "Sweet Spot"? Are you playing the local card for privacy, or is the Cloud still your only co-pilot?

Cabin Analytics: Ditch the Cookie Banner and Embrace Ethical Tracking

Quentin Merle — Fri, 20 Feb 2026 15:26:42 +0000

While browsing the website of MightyBytes—the agency behind the famous Ecograder and a true authority in digital sustainability—I noticed an interesting detail in their stack: they use Cabin Analytics.

Intrigued by this choice from Green IT experts, I decided to give it a spin. Here’s why I believe it’s a serious contender for your next projects, especially if you’re tired of forcing intrusive consent banners on your users.

1. Privacy First: Ending "Consent Fatigue"

Cabin’s core strength is being privacy-first by design. Unlike traditional tracking methods, Cabin uses zero cookies and collects no Personally Identifiable Information (PII).
Why is this a game-changer? Because according to their documentation and GDPR (CCPA, PIPEDA etc…) frameworks, the absence of individual tracking means you can completely remove your cookie consent banner.

VS Google Analytics (GA4): GA4 remains a complex "black box" that frequently faces scrutiny from data protection authorities (like the CNIL in France) due to transatlantic data transfers.
VS Matomo: While Matomo is a great alternative, it requires very specific and rigorous configuration to be legally exempt from consent.

With Cabin, compliance is the starting point, not a configuration option. The result? A cleaner UX and higher data accuracy, as you no longer lose stats from users who (rightfully) block or decline tracking.

2. Performance & Sustainability: 1.5 KB for your Web Vitals

In a world where page weight is exploding, every kilobyte counts. This is where Cabin shines through digital sobriety. Its script is ultra-lightweight: approximately 1.5 KB.
To put that in perspective, that’s practically the weight of a favicon. Cabin doesn't just stay light; it actively helps you measure your site's carbon footprint directly from its dashboard.

Google Analytics: Often exceeds 50 KB. That’s significant dead weight that can negatively impact your LCP (Largest Contentful Paint) score.
Matomo: Expect between 20 and 30 KB. Better, but still nowhere near Cabin’s featherweight status.

By choosing such a lean tool, you’re not only boosting your SEO performance but also reducing the energy consumed by your visitors' devices.

3. Simplicity vs. Complexity: Getting Back to Basics

We often install Google Analytics out of habit, only to use 5% of its features. GA4 has become a "bloatware" ecosystem filled with AI and complex predictive reports. Matomo, on the other hand, offers impressive power (Heatmaps, A/B Testing) that can feel intimidating for a simple project.

Cabin takes a radically different approach: a single, unified dashboard. Everything is visual, clear, and accessible at a glance:

Unique visitors and page views.
Traffic sources and localization.
Device types and browsers.

Don't let the simplicity fool you: Cabin handles event tracking (clicks, form submissions) and campaign parameters (UTMs) out-of-the-box, allowing you to track conversions without cluttering your code with complex logic. See docs

<!-- HTML -->
<a href="menu.pdf" data-cabin-event="Download Menu">Download Menu</a>

// Javascript
cabin.event('Download Menu')

Setup takes exactly 30 seconds. No complex container configurations or endless Tag Manager triggers. You just need to drop this snippet into your site's <head> section:

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

That’s it. No additional configuration is required to start seeing your first real-time metrics roll in.

Conclusion: Which one belongs in your stack?

Choosing your analytics tool shouldn't be a default choice; it should be a decision based on your project's actual needs.

Choose Cabin Analytics if you prioritize speed, eco-design, and a beautiful, "no-nonsense" interface. It’s the perfect candidate for blogs, portfolios, and ethical landing pages. Cabin follows a transparent and sustainable model. The Free tier is perfect for starting out, allowing 1 website with a 30-day data retention and data export.

If you're scaling, the Pro version removes all limits: unlimited websites & data retention, weekly email reports, custom subdomains, custom events and CO₂ reporting.

Choose Matomo if you need total control over your data (self-hosting) and advanced marketing features.
Choose Google Analytics if your business model relies heavily on the Google Ads ecosystem and requires complex cross-channel tracking.

There are also other serious challengers like Plausible, Fathom, or the excellent Pirsch.io that I haven’t had the chance to fully stress-test yet, but they all share this same philosophy of user respect.

Are you ready to delete your cookie banner in favor of a leaner, greener approach?

Javascript in 2026: 11 Under-the-Radar Browser APIs

Quentin Merle — Mon, 16 Feb 2026 13:24:42 +0000

The other day, I was chatting with a friend about retrieving request data for a script outside the main project without re-triggering a fetch. We hit a wall: how do we do this cleanly?

After some digging, I stumbled upon Cache.match() on MDN. It was exactly what we needed. It reminded me of something we all face: the "comfort zone" trap.

We often code by reflex or to save time (which isn't a bad thing), but we forget that browsers are evolving fast. Here is a selection of native APIs that are worth your attention in 2026.

📦 Replacing Dependencies

1. Intl.RelativeTimeFormat
Replaces: dayjs, moment.js
MDN Documentation

This API turns raw data into human-readable phrases.

const rtf = new Intl.RelativeTimeFormat('en', {
  numeric: 'auto' // 'auto' enables phrases like "yesterday" instead of "1 day ago"
});

function formatRelative(date) {
  const now = new Date();
  const diffInMs = date - now;

  // Convert milliseconds to days
  const diffInDays = Math.round(diffInMs / (1000 * 60 * 60 * 24));

  return rtf.format(diffInDays, 'day');
}

// Tests
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

const longAgo = new Date();
longAgo.setDate(longAgo.getDate() - 5);

console.log(formatRelative(yesterday)); // "yesterday" (thanks to numeric: 'auto')
console.log(formatRelative(longAgo));   // "5 days ago"

Note: it doesn’t calculate the units for you (yet—wait for the Temporal API to be fully stable). You need to tell it if you’re dealing with minutes, hours, etc.

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

// Define thresholds in seconds
const UNITS = [
  { unit: 'month',  seconds: 2592000 },
  { unit: 'day',    seconds: 86400 },
  { unit: 'hour',   seconds: 3600 },
  { unit: 'minute', seconds: 60 },
  { unit: 'second', seconds: 1 }
];

function formatAutoRelative(date) {
  const diffInSeconds = Math.round((date - new Date()) / 1000);

  // Find the unit corresponding to the first threshold reached
  for (const { unit, seconds } of UNITS) {
    if (Math.abs(diffInSeconds) >= seconds || unit === 'second') {
      const value = Math.round(diffInSeconds / seconds);
      return rtf.format(value, unit);
    }
  }
}

// --- Tests ---
console.log(formatAutoRelative(new Date(Date.now() - 5000)));       // "5 seconds ago"
console.log(formatAutoRelative(new Date(Date.now() - 3600000)));    // "1 hour ago"
console.log(formatAutoRelative(new Date(Date.now() + 86400000)));   // "tomorrow"

💡 Pro-tip: Couple it with Intl.DateTimeFormat for a "fallback" strategy. If the delay exceeds 7 days, switch from relative time to a full date.

2. structuredClone()
Replaces: lodash.cloneDeep, JSON.parse(JSON.stringify(obj))
MDN Documentation

The JSON method is what we call "lossy cloning." It works for simple objects but destroys anything it doesn't understand (Dates, Maps, Sets, RegEx).

const original = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  regex: /hello/g,
  undefinedVal: undefined
};

// ❌ BEFORE (Hack JSON)
const fakeClone = JSON.parse(JSON.stringify(original));

console.log(fakeClone.date); // "2026-02-10T..." (Converted to a STRING, not a Date object anymore!)
console.log(fakeClone.map);  // {} (Empty, Maps are lost)
console.log(fakeClone.regex); // {} (Lost)
console.log(fakeClone.undefinedVal); // Gone (the key no longer exists)

const original = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  regex: /hello/g
};

// ✅ NOW (2026 Standard)
const realClone = structuredClone(original);

console.log(realClone.date instanceof Date); // true
console.log(realClone.map.get('key'));       // "value"
console.log(realClone.regex.test('hello'));  // true

Note: It won’t clone functions or DOM elements, as they are bound to their execution context.

⚡ Mastering Data Flow

3. AbortController
MDN Documentation

Think of this as the "Emergency Stop" button for your code. If a user frantically clicks a "Category" filter, without AbortController, you fire X fetch requests. Even if you only display the last one, the previous ones still consume bandwidth and CPU in the background.

let currentController;

const fetchData = async () => {
  // 1. Cancel the previous request if it exists
  if (currentController) currentController.abort();

  // 2. Create a new signal for the current request
  currentController = new AbortController();

  try {
    const res = await fetch('/api/data', { signal: currentController.signal });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') return; // Silent, this is an intentional cancellation
    throw err;
  }
};

Note: It's versatile! You can use it with Event Listeners or setTimeout to clean up side effects.

const controller = new AbortController(); // Attach the signal to multiple events
window.addEventListener('resize', () => console.log('Resized'), { signal: controller.signal });
window.addEventListener('scroll', () => console.log('Scrolled'), { signal: controller.signal });
// To delete everything at once: controller.abort();

4. BroadcastChannel
MDN Documentation

Allows different navigation contexts (tabs, windows, iframes) from the same origin to communicate in real-time without a server or complex localStorage hacks. Perfect for syncing a shopping cart or handling a global logout.

// --- Shared Logic ---
const cartChannel = new BroadcastChannel('shop_cart_sync');

// --- TAB A (The "Emitter") ---
function addToCart(product) {
  // 1. Business Logic: save to localStorage for persistence
  const cart = JSON.parse(localStorage.getItem('cart') || '[]');
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));

  // 2. Update the UI of the current tab
  updateCartUI(cart.length);

  // 3. Notify all other tabs instantly
  cartChannel.postMessage({
    type: 'CART_UPDATED',
    count: cart.length,
    lastAdded: product.name
  });
}

// --- TAB B, C, D (The "Listeners") ---
cartChannel.onmessage = (event) => {
  if (event.data.type === 'CART_UPDATED') {
    // Update the cart counter in the header
    updateCartUI(event.data.count);

    // Bonus: Show a little toast notification
    console.log(`An item (${event.data.lastAdded}) was added from another tab!`);
  }
};

💡 Pro-tip: In a SPA, always remember to close the channel when the component is unmounted: bc.close();.

5. Navigator.sendBeacon()
MDN Documentation

How do you send data to the server just before a user leaves the page? Standard fetch often fails because the browser kills the process before the request finishes. sendBeacon() is asynchronous and guaranteed to finish in the background.

// Prepare analytics data
const analyticsData = {
  articleId: '123',
  timeSpent: 450,
  completion: 0.85
};

// Use visibilitychange event (more reliable than 'unload' in 2026)
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // Convert data to Blob or FormData
    const blob = new Blob([JSON.stringify(analyticsData)], { type: 'application/json' });

    // The "fire and forget" magic
    navigator.sendBeacon('/api/analytics', blob);
  }
});

🎨 Performance & Native UI

6. Intersection Observer API
MDN Documentation

The ultimate tool for lazy-loading and scroll-based animations without killing your performance.

<img data-src="high-res-photo.jpg" src="placeholder.jpg" class="lazy-load" alt="Description">

// 1. Configuration: trigger when 10% of the element is visible
const options = {
  root: null, // use browser viewport
  threshold: 0.1 
};

// 2. Observer creation
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // If the element is within the viewport
    if (entry.isIntersecting) {
      const img = entry.target;

      // Replace placeholder with the actual image
      img.src = img.dataset.src;
      img.classList.add('fade-in'); // Adding a subtle, optional animation.

      // Once loaded, stop observing this image (performance gain)
      observer.unobserve(img);
    }
  });
}, options);

// 3. Start observing all "lazy" images
document.querySelectorAll('.lazy-load').forEach(img => {
  observer.observe(img);
});

7. Cache.match()
MDN Documentation

Need to share API data between two independent scripts without a global variable or a second network call? This is exactly how I solved my problem the other day.

⚠️ Important Note: Don't confuse this with standard HTTP caching. While the browser manages the "HTTP Cache" automatically via headers, the Cache API is entirely programmable. You are the one deciding exactly what to store, update, or delete.

// Fetch and cache
async function fetchAndCacheConfig() {
  const cache = await caches.open('app-resources');
  const url = '/api/user-config';

  const response = await fetch(url);

  // We must clone the response because a response body can only be read once
  await cache.put(url, response.clone());

  return response.json();
}

// No fetch, check if it is in cache
async function getExistingData() {
  const cache = await caches.open('app-resources');

  // Check if a request matching this URL exists in the cache
  const cachedResponse = await cache.match('/api/user-config');

  if (cachedResponse) {
    const data = await cachedResponse.json();
    console.log("Data retrieved from cache with no new network call:", data);
    return data;
  }

  console.log("Cache miss: no data found.");
}

Note: Like most modern web APIs, this is only available in HTTPS contexts (and localhost)

8. DocumentFragment (Old but gold)
Specific to Vanilla JS or Web Components
MDN Documentation

A lightweight, "off-screen" DOM container. Use it to batch DOM injections and avoid multiple expensive reflows.

const list = document.querySelector('#ul-list');
const fragment = document.createDocumentFragment();

['Apple', 'Pear', 'Banana'].forEach(fruit => {
  const li = document.createElement('li');
  li.textContent = fruit;
  fragment.appendChild(li); // No rendering here yet
});

list.appendChild(fragment); // A single reflow for all 3 elements!

🛠️ Dev Comfort & Debugging

9. console.table()
MDN Documentation

Stop squinting at messy object logs. Use console.table(data) for a clean, sortable grid in your devtools.

10. URLSearchParams
MDN Documentation

Stop using RegEx to parse URLs.
new URLSearchParams(window.location.search).get('id') is all you need.

🧪 The Experimental One

11. EyeDropper API
MDN Documentation

Adding this one for the 'cool factor'. A native color picker that can grab colors from anywhere on the user's screen—even outside the browser.

async function pickColor() {
  if (!window.EyeDropper) return console.log("Not supported");

  const dropper = new EyeDropper();
  try {
    const result = await dropper.open(); // Opens the system color picker (magnifying glass)
    console.log(result.sRGBHex); // Ex: #ff0000
  } catch (e) {
    console.log("Cancel");
  }
}

Conclusion

The browser's Web API list is massive. I encourage you to browse it regularly.

Which one is your favorite? Do you have any other native 'hidden gems'?