Ely S.’s Post

🧠 𝗗𝗼 𝗬𝗼𝘂 𝗥𝗲𝗮𝗹𝗹𝘆 𝗞𝗻𝗼𝘄 𝗪𝗵𝗮𝘁 `new` 𝗗𝗼𝗲𝘀 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? ⤵️  The new Keyword in JavaScript: What Actually Happens ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/dyAXzDHD 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ What actually happens internally when you use `new`   ⇢ The 4-step process: create → link → run → return   ⇢ Constructor functions & how they really work   ⇢ Prototype linking & why it matters   ⇢ How instances share methods but keep separate data   ⇢ Recreating `new` manually (deep understanding)   ⇢ What goes wrong when you forget `new`   ⇢ Debugging real-world bugs related to constructors   ⇢ new vs ES6 classes — what's really different   ⇢ Key tradeoffs & hidden pitfalls  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #SystemDesign #Frontend #Hashnode

Technical deep-dive: How a single cli.js.map file accidentally open-sourced Anthropic’s entire Claude Code CLI (v2.1.88) If you’ve ever shipped a production JS/TS package, you know exactly what a source map is. A *.js.map is a JSON artifact generated by bundlers (Webpack, esbuild, Bun, Rollup, etc.) that adheres to the Source Map Revision 3 spec. It contains: → "version": 3 → "sources": array of original file paths → "names": original variable/function names → "mappings": VLQ-encoded segments that map every token in the minified cli.js back to the exact line/column in the original TypeScript → "sourceRoot" + "sourcesContent": sometimes the full original source embedded → "file": the generated bundle name Its sole purpose is to let debuggers (DevTools, VS Code, Sentry, etc.) reconstruct readable stack traces and enable source-level debugging. Yesterday, Anthropic published @anthropic-ai/claude-code@2.1.88 to npm. Inside the tarball sat a ~60 MB cli.js.map that should never have left their CI pipeline. Here’s exactly what went wrong (classic release-engineering foot-gun): 1. The package was built with Bun’s bundler (which defaults to sourcemap: true unless explicitly disabled). 2. No entry in .npmignore (or the files field in package.json) excluded *.map files. 3. The generated map still contained the original "sourceRoot" and relative paths pointing directly to Anthropic’s public Cloudflare R2 bucket. 4. That bucket held src.zip — the complete, unobfuscated 1,900+ TypeScript files (~512 kLOC) of the Claude Code agent. Result? Anyone who ran npm install @anthropic-ai/claude-code@2.1.88 could: 1. Extract cli.js.map 2. Parse the sources + sourcesContent (or follow the R2 URLs) 3. Download the full original codebase in seconds No de-minification required. No reverse-engineering tricks. Just pure, readable TypeScript — agent architecture, tool handlers, plugin system, feature flags, internal telemetry, unreleased modules (KAIROS, dreaming memory, Tamagotchi-style pet, etc.) all laid bare. Anthropic has since yanked the version and called it a “release packaging issue caused by human error.” No customer data or model weights were exposed — but the operational security optics for a “safety-first” lab are… not great. This is a textbook reminder that your build pipeline and .npmignore are now part of your threat model. #TypeScript #JavaScript #SourceMaps #BuildTools #npm #DevOps #Anthropic #Claude #AISecurity #ReverseEngineering

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆 𝘃𝘀 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 📦 If you’ve ever updated state and something weird happened… this might be why 👇 🔹 Shallow Copy → copies only the first level 🔹 Nested objects are still referenced (same memory) Example: ➡️ Using { ...obj } or Object.assign() 💡 Problem: Change a nested value… and you might accidentally mutate the original object 😬 🔹 Deep Copy → copies everything (all levels) 🔹 No shared references 🔹 Safe to modify without side effects Example: ➡️ structuredClone(obj) ➡️ or libraries like lodash ⚠️ The common pitfall: You think you made a copy: ➡️ { ...user } But inside: ➡️ user.address.city is STILL linked So when you update it: ❌ You mutate the original state ❌ React may not re-render correctly ❌ Bugs appear out of nowhere 🚀 Why this matters (especially in React): State should be immutable ➡️ Always create safe copies ➡️ Avoid hidden mutations ➡️ Keep updates predictable 💡 Rule of thumb: 🔹 Flat objects? → shallow copy is fine 🔹 Nested data? → consider deep copy Understanding this difference = fewer bugs + cleaner state management And yes… almost every developer gets burned by this at least once 😄 Sources: - JavaScript Mastery - w3schools.com Follow 👨💻 Enea Zani for more #javascript #reactjs #webdevelopment #frontend #programming #coding #developers #learnjavascript #softwareengineering #100DaysOfCode

Claude code's source code got leaked. Claude Code is published as a bundled JavaScript CLI on npm. It accidentally got shipped with the cli.js.map file and the source was obtained by unpacking the source map (cli.js.map). Some interesting things: - The first thing I wanted to see was the verb's they use when the claude code is vibing like 'Accomplishing', 'Actioning', 'Actualizing', 'Architecting'. Apparently there is a list of 187 verbs that claude uses. - They are using regex to track when users swear at Claude to measure frustration. Regex is still king even in the age of llm's. - The source includes a feature flag, that injects fake tool definitions into every API call's system prompt. Claude never uses them. They're there to poison anyone recording traffic to train a competing model, so the distilled model learns tool definitions that don't exist. - Also, many unreleased features, including Agent Teams, a planning system called ultraplan, and even a /buddy mode which i think was meant as an April's fool joke 😅. Not sure if they are moving forward with this. Lastly, everybody that has worked with deployments, accidents do happen and everybody has messed up something at one point or another. So, please get off your high horse.

🧩𝗦𝗶𝗺𝗽𝗹𝗶𝗳𝘆𝗶𝗻𝗴 𝗡𝗲𝘀𝘁𝗲𝗱 𝗗𝗮𝘁𝗮 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Working with deeply nested arrays is a common challenge in JavaScript- especially when data structures start getting complex. To address this, I explored array flattening in depth and documented my learnings: “𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗔𝗿𝗿𝗮𝘆 𝗙𝗹𝗮𝘁𝘁𝗲𝗻𝗶𝗻𝗴 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁” https://lnkd.in/gdzX7d5Z 🔍 What’s covered in the blog: 🔹 How the .flat() method works in JavaScript 🔹 Handling different levels of nesting effectively 🔹 Writing a custom polyfill to understand the underlying mechanics Hitesh Choudhary Piyush Garg Anirudh J. Chai Aur Code Akash Kadlag Suraj Kumar Jha Nikhil Rathore Jay Kadlag DEV Community #Chaicode #Cohort #JavaScript #WebDevelopment #TechnicalWriting #CleanCode #LearningInPublic #Chaicode

hi connections Day 29 of 30: Unlocking Type Coercion with LeetCode 2695 🚀 Today’s challenge, Array Wrapper, was a fascinating dive into the "behind-the-scenes" mechanics of JavaScript objects. It’s all about how the engine handles Type Coercion—the process of converting an object into a primitive value (like a number or string). The Concept Usually, when you try to add two objects together in JavaScript, you get a messy string result like "[object Object][object Object]". However, by using a Class and overriding specific prototype methods, we can change that behavior entirely. What I Implemented: valueOf (The Math Hook): I implemented this method to return the sum of the array. Now, when I use the addition operator (obj1 + obj2), JavaScript automatically calls valueOf and sums the numbers instead of merging strings. toString (The Display Hook): I overrode this to return a formatted string (e.g., "[1,2,3]"). This ensures that when the object is logged or converted to a string, it remains readable and useful. Why This Matters for Developers In a MERN stack environment, we often build custom classes or data models. Understanding coercion allows us to: ✅ Create more intuitive data structures. ✅ Simplify debugging by providing clear string representations of objects. ✅ Write cleaner code by allowing objects to interact naturally with mathematical operators. Only 1 day left! Tomorrow marks the completion of this 30-day coding sprint. The consistency has been the greatest reward. 💻✨ #JavaScript #LeetCode

"We did a deep dive into TypeScript advanced generics in 30 different projects. The results? A 40% reduction in runtime errors." Diving headfirst into a complex codebase, I found myself puzzled over a brittle system that suffered from frequent failures and cumbersome maintenance. The culprit was a lack of strong type constraints, hidden inside layers of JavaScript code that attempted to mimic what TypeScript offers natively. The challenge was clear: harness the power of TypeScript's advanced generics and inference to refactor this tangled web. My first task was to unravel a central piece of the system dealing with API data structures. This involved migrating from basic `any` types to a more robust setup using TypeScript's incredible type-level programming capabilities. ```typescript type ApiResponse<T> = { data: T; error?: string; }; type User = { name: string; age: number }; function fetchUser(id: string): ApiResponse<User> { // Implementation } // Correct usage leads to compile-time type checks instead of runtime surprises const userResponse = fetchUser("123"); ``` The initial refactor was daunting, but as I delved deeper, vibe coding with TypeScript became intuitive. The compiler caught more potential issues at design time, not just in this module but throughout the entire application as types propagated. The lesson? Properly leveraging TypeScript's type-level programming can transform your maintenance nightmare into a well-oiled machine. It requires an upfront investment in learning and applying generics, but the returns in stability and developer confidence are unmatched. How have advanced generics and inference changed your approach to TypeScript projects? #WebDevelopment #TypeScript #Frontend #JavaScript

We’ve finally published a deep dive into our new JavaScript/TypeScript static analyzer. Inside: architecture decisions, how it works, and real bugs we found in famous open-source projects. If you interested in static analysis — worth a read! https://lnkd.in/dj_up-q7

If you're still using JSON.stringify(a) === JSON.stringify(b) for deep comparisons, you're leaving performance on the table. It works - until it doesn't. Key ordering differences, undefined values, and circular references will silently break your logic in production. Here are real alternatives worth benchmarking: - structuredClone + manual check: fast for simple objects - Lodash isEqual: reliable, handles edge cases, battle-tested - fast-deep-equal: consistently wins benchmarks for plain objects A quick real-world example: import isEqual from 'fast-deep-equal'; const prev = { user: { id: 1, roles: ['admin'] } }; const next = { user: { id: 1, roles: ['admin'] } }; isEqual(prev, next); // true, no stringify tricks needed fast-deep-equal is roughly 4-8x faster than JSON.stringify in most benchmark suites, especially with nested structures. Practical takeaway: Pick your comparison tool based on data shape. Use fast-deep-equal for plain objects, Lodash isEqual when you need Date, RegExp, or Map support. What comparison method are you currently using in your React or Node projects - and have you actually benchmarked it? #JavaScript #WebDevelopment #FrontendDevelopment #JSPerformance #NodeJS #CodeQuality

Everyone's talking about the Claude Code source map leak. But here's a great learning moment: what the heck is a source map? When a modern JavaScript project is built for production, it undergoes something called "minification". Minification is what it sounds like: it makes your program as tiny as possible so your website loads faster. It does things like: • renames all your variables to short strings like `a` or `dpl` • strips out all the whitespace • slams the *entire* program into a single line This creates a problem: what happens when you need to debug a problem in production? Stacktraces are now useless because the code is effectively unreadable. Source maps solve that problem. They are literally a map that translate symbols from your minified program back to your original source code. Browsers have tools that can transparently load source maps when you, the author, need to debug a problem in production. This is win/win because: ✅ the program your users see is small, and thus loads quickly ✅ your debugging tools translate a view of your original code, so you can think Obviously source maps are generally meant to be private because they reveal the original, commented, structured logic that a company might want to keep proprietary. Anthropic accidentally made theirs public. (There's a lot more to say about how the mapping works, but I'll leave it at that to avoid writing a huge post.)