Mastering Fetch API: POST Requests, Binary Data & Performance

Claude doesn't see your web page. I read all 512,000 lines of the Claude Code source that leaked yesterday. Most of the coverage focused on the Tamagotchi pet and the undercover mode. I was looking for something else: how does Claude actually handle citations? The biggest thing I found: when Claude fetches your URL, it doesn't pass your content to the main model. It sends it through Haiku (Anthropic's small model) first, which summarizes it. Only the summary reaches Claude. Your page has to survive lossy compression by a less capable model before it can influence an answer. Except for ~96 domains — all developer docs — that bypass the summarization layer entirely and get their full content passed through raw. react.dev, docs.python.org, kubernetes.io... there's a hardcoded whitelist in the source code. There's also a silent domain blocklist, a hardcoded 8 search cap per query, a 125 character quote limit, and a mandatory citation instruction appended to every single search result. I wrote up all 9 findings with the actual code excerpts and file paths. https://lnkd.in/e3q9ZQv6?

Every JS developer writes data every day. But most can't explain Primitive vs Non-Primitive clearly. 🧵 Here's the complete breakdown — with examples 👇 🔵 PRIMITIVE DATA TYPES : 🔹 Stored by VALUE · Immutable · Lives in the Stack 1. String   → 'hello' 2. Number   → 42, 3.14 3. Boolean  → true / false 4. Undefined → let x; (no value assigned) 5. Null    → let x = null 6. BigInt   → 9007199254740991n 7. Symbol   → Symbol('id') → always unique 🟡 NON-PRIMITIVE DATA TYPES : 🔹 Stored by REFERENCE · Mutable · Lives in the Heap 1. Object  → { name: 'Alice', age: 25 } 2. Array   → [1, 2, 3, 'hello'] 3. Function → function greet() { } 📊 QUICK COMPARISON 🔹 Primitive        🔹 Non-Primitive ✓ Stack        ✓ Heap ✓ By value       ✓ By reference ✓ Immutable      ✓ Mutable ✓ Faster access    ✓ Holds complex data 💡 Interview tip: When asked about bugs with objects/arrays — 9 out of 10 times it's a reference issue. Use spread operator or structuredClone() to avoid mutating the original. ✅ Save this. You'll need it. ♻️ Follow for more JS tips 👇 #JavaScript #WebDevelopment #JS #Frontend #Programming #CodingInterview

Claude doesn't see your web page. We read all 512,000 lines of the Claude Code source that leaked yesterday. Most of the coverage focused on the Tamagotchi pet and the undercover mode. I was looking for something else: how does Claude actually handle citations? The biggest thing we found: when Claude fetches your URL, it doesn't pass your content to the main model. It sends it through Haiku (Anthropic's small model) first, which summarizes it. Only the summary reaches Claude. Your page has to survive lossy compression by a less capable model before it can influence an answer. Except for ~96 domains — all developer docs — that bypass the summarization layer entirely and get their full content passed through raw. react.dev, docs.python.org, kubernetes.io... there's a hardcoded whitelist in the source code. There's also a silent domain blocklist, a hardcoded 8 search cap per query, a 125 character quote limit, and a mandatory citation instruction appended to every single search result. we wrote up all 9 findings with the actual code excerpts and file paths. https://lnkd.in/e9KfXhX8

📘 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐌𝐨𝐝𝐮𝐥𝐞 (𝐁𝐚𝐬𝐢𝐜) 𝐒𝐞𝐜𝐭𝐢𝐨𝐧 2: 𝐕𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 1.What is a variable? 2.Why do we use a variable? 3.How to declare a variable? 4.Tell me about variable declaration rules? 5.How many types of variables do you know? 6.When do we use var? 7.When do we use let? 8.When do we use const? 9.How to create an undefined variable?  10.What is an undefined variable? 11.What is undefined? 12.What is NaN? 13.What is null? 14.What is concatenation? 15.What is Infinity?  16.How to assign data to a variable / How to assign a variable data? 17.Variable is primitive or non-primitive? 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1.Difference between var, let, and const? 2.What is variable hoisting? 3.Why can var be accessed before declaring it? 4.What is temporal dead zone (TDZ)? 5.Can we reassign const variable? 6.Why shouldn't modern JavaScript use var? 𝐒𝐞𝐜𝐭𝐢𝐨𝐧 3: 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐃𝐚𝐭𝐚 𝐓𝐲𝐩𝐞𝐬 & 𝐊𝐞𝐲𝐰𝐨𝐫𝐝𝐬 1.JavaScript data types? 2.What is a reserved keyword? 3.What is a special keyword? 4.How can check type data type? 5.JavaScript variables is case-sensitive? 6.JavaScript variable naming conventions? 7.How to convert string ("20") to number (20)? 8.JavaScript built-in functions? 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1.Difference between primitive and reference types? 2.What is type coercion? 3.Difference between null and undefined? 4.What is typeof null / What is the output of typeof null and why? (Important trick question) 5.What is the difference in memory management between primitive and reference type data? #DotNet #AspNetCore #MVC #FullStack #SoftwareEngineering #ProgrammingTips #DeveloperLife #LearnToCode #JavaScript #JS #JavaScriptTips #JSLearning #FrontendDevelopment #WebDevelopment #CodingTips #CodeManagement #DevTools

Day 91 of me reading random and basic but important dev topicsss... Yesterday I read about how to capture File objects. Today, I read about how to actually look inside them.... Enter: The FileReader API. FileReader is a built-in object with one sole purpose: reading data from Blob (and File) objects asynchronously. Because reading from a disk can take time, it delivers the data using an event-driven model. Here is the complete breakdown of how to wield it..... The 3 Core Reading Methods: The method we choose depends entirely on what we plan to do with the data.... 1. readAsText(blob, [encoding]) - Perfect for parsing CSVs or text files into a string. 2. readAsDataURL(blob) - Reads the binary data and encodes it as a base64 Data URL. (Ideal for immediately previewing an uploaded <img> via its src attribute). 3. readAsArrayBuffer(blob) - Reads data into a binary ArrayBuffer for low-level byte manipulation. (Note: You can cancel any of these operations mid-flight by calling reader.abort()) The Event Lifecycle: As the file reads, FileReader emits several events. The most common are load (success) and error (failure), but we also have access to: * loadstart (started) * progress (firing continuously during the read) * loadend (finished, regardless of success/fail) let reader = new FileReader(); reader.readAsText(file); reader.onload = () => console.log("Success:", reader.result); reader.onerror = () => console.log("Error:", reader.error); The Fast-Track: If your only goal is to display an image or generate a download link, skip FileReader entirely! Use URL.createObjectURL(file). It generates a short, temporary URL instantly without needing to read the file contents into memory. Web Workers: Dealing with massive files? You can use FileReaderSync inside Web Workers. It reads files synchronously (returning the result directly without events) without freezing the main UI thread! Keep Learning!!!!! #JavaScript #WebAPI #FrontendDev #WebArchitecture #Coding

The Try-Catch Time Trap: Why Async Errors Escape? Lets look at this code that reads and parse the invalid JSON file. Sync code try { const data = fs.readFileSync("invalid.json", "utf-8"); const jsonData = JSON.parse(data); } catch (err) { console.log("error caught:", err.message); // catches parsing error } All good. --- Async code try { fs.readFile("invalid.json", "utf-8", (err, data) => { const jsonData = JSON.parse(data); }); } catch (err) { console.log("error caught:", err.message); // does NOT even run } Catch block won't execute. Now the question is… 👉 Why? --- Here’s how I started thinking about it: If JS finds an error → it stops execution → looks for a catch block in the current call stack → if not found, it bubbles up the stack --- In sync code: 👉 Everything runs in one continuous stack → error happens → catch block is right there → so it works --- But async changes things. When this line runs: fs.readFile(..., callback) 👉 JS does NOT execute the callback immediately Instead: → it registers the callback → pushes it to the event loop → and moves on --- Now important part 👇 👉 The current call stack finishes execution → which means try-catch is gone --- Later… 👉 when file reading is done → event loop pushes the callback to the call stack → callback runs But now: 👉 this is a new call stack And the old try-catch? 👉 already gone. --- So when error happens inside callback: ❌ there is no catch block anymore --- That’s when it clicked for me: 👉 try-catch works only within the same execution stack Not across time. Not across async boundaries. #JavaScript #Node #Programming #ErrorHandling #Interview #Eventloop #Callstack

“set (𝙧𝙚𝙫𝙖𝙡𝙞𝙙𝙖𝙩𝙚: 𝟲𝟬) and move on” This works in Next.js — until it doesn’t. Now you’re: • serving stale data for up to 60s • re-fetching even when nothing changed • adding load for no reason This is where caching stops being an optimization — and becomes about 𝘄𝗵𝗼 𝗼𝘄𝗻𝘀 𝗳𝗿𝗲𝘀𝗵𝗻𝗲𝘀𝘀. At a high level: 𝗦𝘁𝗮𝘁𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → speed 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → freshness 𝗖𝗮𝗰𝗵𝗶𝗻𝗴 + 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 → where we balance the two But this abstraction starts to break down at scale. 👉 𝗧𝗶𝗺𝗲-𝗯𝗮𝘀𝗲𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲) periodically refetches data This works well when data becomes stale in predictable intervals Think dashboards, blogs, or analytics snapshots 👉 𝗢𝗻-𝗱𝗲𝗺𝗮𝗻𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗧𝗮𝗴, 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗣𝗮𝘁𝗵) flips the model Don't blindly revalidate — react to change In one of our systems, moving from time-based to event-driven invalidation: • reduced redundant fetches significantly • cache behavior became predictable under load This becomes the default once writes are frequent. 👉 𝗙𝘂𝗹𝗹 𝗥𝗼𝘂𝘁𝗲 𝗖𝗮𝗰𝗵𝗲 𝘃𝘀 𝗗𝗮𝘁𝗮 𝗖𝗮𝗰𝗵𝗲 • Full Route Cache → caches the rendered output • Data Cache → caches the underlying fetch calls That separation is powerful: Don't rebuild the entire page — refresh just the data 🧠 𝗠𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 𝗦𝘁𝗼𝗽 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝘁𝗶𝗺𝗲 → 𝘀𝘁𝗮𝗿𝘁 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝗲𝘃𝗲𝗻𝘁𝘀 Instead of → “𝘳𝘦𝘷𝘢𝘭𝘪𝘥𝘢𝘵𝘦 𝘦𝘷𝘦𝘳𝘺 𝘟 𝘴𝘦𝘤𝘰𝘯𝘥𝘴” Think → “𝘸𝘩𝘢𝘵 𝘦𝘷𝘦𝘯𝘵 𝘴𝘩𝘰𝘶𝘭𝘥 𝘮𝘢𝘬𝘦 𝘵𝘩𝘪𝘴 𝘥𝘢𝘵𝘢 𝘴𝘵𝘢𝘭𝘦?” ❓Interested to hear how this plays out in write-heavy or multi-region setups. #NextJS #Caching #ReactJS #WebDevelopment #FullStack #JavaScript #SoftwareEngineering #SystemDesign #FrontendDevelopment

Data Types and Operators in JavaScript. ✏️ JavaScript has 2 main categories (Data Types): 1. Primitive Data Types 2. Non-Primitive Data Types ✒️ Primitive Data Types: i-String → text. ii-Number → integer. iii-Boolean → true / false. iv-Undefined → variable declared but no value. v-Null → empty value . ✒️ Non-Primitive Data Types: i-Object. ii-Array. iii-Function. ✏️  Operators in JavaScript: Arithmetic Operators ( ➕ ).  Assignment Operators( 📒 ). Comparison Operators( 🔍 ).Logical Operators( 🧠 ).

Have you ever found yourself struggling with data formats in JavaScript? JSON.parse and JSON.stringify are your best friends when it comes to converting data to and from JSON format. ────────────────────────────── Mastering JSON.parse and JSON.stringify Unlock the full potential of JSON in your JavaScript projects. #javascript #json #webdevelopment ────────────────────────────── Key Rules • Use JSON.stringify to convert JavaScript objects into JSON strings. • Use JSON.parse to turn JSON strings back into JavaScript objects. • Be mindful of data types; functions and undefined values cannot be stringified. 💡 Try This const obj = { name: 'Alice', age: 25 }; const jsonString = JSON.stringify(obj); const parsedObj = JSON.parse(jsonString); console.log(parsedObj); ❓ Quick Quiz Q: What does JSON.stringify do? A: It converts a JavaScript object into a JSON string. 🔑 Key Takeaway Mastering JSON methods can simplify data handling in your applications! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

𝐒𝐞𝐜𝐭𝐢𝐨𝐧 3: 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐃𝐚𝐭𝐚 𝐓𝐲𝐩𝐞𝐬 & 𝐊𝐞𝐲𝐰𝐨𝐫𝐝𝐬 🎯 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧𝐬 (𝐄𝐱𝐭𝐫𝐚) 1. 𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐛𝐞𝐭𝐰𝐞𝐞𝐧 𝐩𝐫𝐢𝐦𝐢𝐭𝐢𝐯𝐞 𝐚𝐧𝐝 𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐭𝐲𝐩𝐞𝐬? -> Primitive: They are in the Stack memory. When you copy data from one variable to another, it creates a copy of the original data. So changing the value of one does not affect the other. Primitive → single value (number, string, boolean) -> Reference: They are in the Heap memory. When you copy, it does not copy the data but copies the address of the main data. So changing the value of one changes the other too. Reference → complex data (array, object) 2. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐲𝐩𝐞 𝐜𝐨𝐞𝐫𝐜𝐢𝐨𝐧? -> When JavaScript automatically converts one type of data to another. Example: If you write 10 + "5", JavaScript automatically converts 10 to a string and gives the result "105". This is type coercion. 3. 𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐛𝐞𝐭𝐰𝐞𝐞𝐧 𝐧𝐮𝐥𝐥 𝐚𝐧𝐝 𝐮𝐧𝐝𝐞𝐟𝐢𝐧𝐞𝐝? -> Undefined: It means "not found" or "no value given". This is provided by JavaScript itself. -> Null: means "empty" or "nothing". This is set intentionally by the developer to indicate that there is currently nothing here. 4. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐲𝐩𝐞𝐨𝐟 𝐧𝐮𝐥𝐥 / 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐡𝐞 𝐨𝐮𝐭𝐩𝐮𝐭 𝐨𝐟 𝐭𝐲𝐩𝐞𝐨𝐟 𝐧𝐮𝐥𝐥 𝐚𝐧𝐝 𝐰𝐡𝐲? (𝐈𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐭 𝐭𝐫𝐢𝐜𝐤 𝐪𝐮𝐞𝐬𝐭𝐢𝐨𝐧) -> This is an old bug in JavaScript (historical bug). When typeof null is used, the output is "object". Why? This is actually a bug in the first version of JavaScript. The developers wanted to fix it later, but by then many websites had been built based on this bug, so it was not changed. 5. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐡𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐢𝐧 𝐦𝐞𝐦𝐨𝐫𝐲 𝐦𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐛𝐞𝐭𝐰𝐞𝐞𝐧 𝐩𝐫𝐢𝐦𝐢𝐭𝐢𝐯𝐞 𝐚𝐧𝐝 𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐭𝐲𝐩𝐞 𝐝𝐚𝐭𝐚? -> Primitive: let a = 10; let b = a; b = 20; 1. Primitive data (number, string, boolean) stores direct value 2. These are in stack memory 3. When b = a is set → value is copied 4. So changing b does not change a 5. result a = 10, b = 20 -> Reference: let arr1 = [1, 2]; let arr2 = arr1; arr2[0] = 100; 1. Array/Object is stored in heap memory 2. Variable does not have actual data, but reference (address) 3. arr2 = arr1 → not copy, shares same reference 4. result arr1 = [100, 2], arr2 = [100, 2] #DotNet #AspNetCore #MVC #FullStack #SoftwareEngineering #ProgrammingTips #DeveloperLife #LearnToCode #JavaScript #JS #JavaScriptTips #JSLearning #FrontendDevelopment #WebDevelopment #CodingTips #CodeManagement #DevTools