Contributing to Keybr.com Open Source Typing Practice Application

🚀 𝗥𝗘𝗦𝗧 𝘃𝘀 𝗚𝗿𝗮𝗽𝗵𝗤𝗟 — 𝗪𝗵𝗮𝘁 𝘀𝗵𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝘂𝘀𝗲? If you're building APIs, you've probably faced this confusion 👇 👉 Should I go with REST or GraphQL? Let’s break it down simply: ⚡ 𝗥𝗘𝗦𝗧 ✔ Multiple endpoints ✔ Uses HTTP methods (GET, POST, PUT, DELETE) ✔ Fixed data structure ✔ Simple & widely used 🔥 𝗚𝗿𝗮𝗽𝗵𝗤𝗟 ✔ Single endpoint ✔ Fetch exactly what you need ✔ Flexible queries ✔ Reduces over-fetching & under-fetching 💡 𝗞𝗲𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲: REST = Multiple endpoints + fixed response GraphQL = Single endpoint + flexible response 🧠 When to use what? 👉 𝗨𝘀𝗲 𝗥𝗘𝗦𝗧 𝗶𝗳: You want simplicity Your app is small/medium You don’t need complex data fetching 👉 𝗨𝘀𝗲 𝗚𝗿𝗮𝗽𝗵𝗤𝗟 𝗶𝗳: You need flexibility Your frontend needs specific data You want to optimize performance 💭 𝗠𝘆 𝘁𝗮𝗸𝗲: REST is great to start. GraphQL shines in complex applications. 💾 Save this for later 🔁 Share with your dev friends 👨💻 Follow for more dev content #SoftwareEngineering #WebDevelopment #API #Developers #Programming #GraphQL #RESTAPI #Backend #FullStack #Coding

💡 Most Developers Don’t Understand Async Properly (And It Shows 👀) Let’s be brutally honest. Most developers use async/await… But when things break --- they have no idea why. We write: await fetchData(); And feel like: “Haan bhai, async likh diya… ab sab sorted hai 😎” Until production says: “bhai kuch bhi sorted nahi hai 💀” The bug was in their async flow. → They stacked awaits without understanding the execution order → They ignored the event loop → They guessed instead of reasoning Here is the truth. Async is not syntax. Async is execution. You write await fetchData() and feel in control. The engine is doing something very different. JavaScript runs on a single thread. It uses the call stack. It offloads work to Web APIs. It schedules callbacks in queues. Then the event loop decides what runs next. Microtasks run before macrotasks. Always... Look at this. console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Most developers guess wrong. Actual output is clear. "Start" -> "End" -> "Promise" -> "Timeout" No randomness. No magic. Just rules. Because: -> JS doesn’t care about your intuition -> It follows the event loop strictly If you do not know these rules, you are guessing. And guessing breaks systems. 🔥 Why This Matters If you don’t understand async: -> You cannot debug race conditions -> You cannot explain failures -> You cannot scale your thinking The language is not confusing. Your mental model is incomplete. Fix that. Start predicting execution before running code. Trace the stack. Track the queue. Respect the event loop. Pro Tip... Use Chrome DevTools to debug and step through async code That is how real developers work. Syntax is the entry. Understanding execution is the skill. #JavaScript #AsyncAwait #EventLoop #WebDevelopment #SoftwareEngineering

🚀 Just crossed 103 merged pull requests to open source. Two and a half years ago I'd never opened a PR to a major project.  Felt like the codebase was for "other people" - the ones who built the tools I used every day. So I decided to read more, complain less, and ship. The current scoreboard, across 15 projects: ▸ BullMQ - 26 merged · workers, schedulers, type-safety   ▸ VS Code (Microsoft) - 21 merged · debug console, markdown, SCM, terminal   ▸ NestJS CLI - 18 merged · compiler, watch mode, configuration   ▸ Angular Material (Google) - 13 merged · components, accessibility   ▸ NestJS GraphQL · Swagger · TypeORM - 20 merged across the ecosystem   ▸ Plus Directus, Supabase, Angular, NestJS Schematics   ▸ Ongoing in Appwrite, Next.js, Swagger UI, shadcn/ui  What I actually learned (the part that doesn't fit on a resume): 1. The hardest part of an OSS PR isn't the code - it's reading the code until you understand the contributor's intent.   2. A 2-line CSS fix can be more valuable than a 200-line feature, if it removes a daily friction for a million users.   3. The tools you use every day are written by people who, at some point, were exactly where you are. You can join them. If you're a developer who's been hesitating - your first PR to a major project is closer than you think.   Pick a bug that annoys you. Read the source. Fix it. The maintainers will meet you halfway. #OpenSource #NestJS #VSCode #JavaScript #TypeScript #SoftwareEngineering #microsoft #google

🤯 Ever hit “Update”… and your UI still shows OLD data? I thought my API was broken. User clicks: 👉 Update Profile API responds: 👉 Success ✅ But the UI? 👉 Still showing old values 😬 I refreshed the page… 👉 Now it’s correct. So what actually happened? ⚠️ It wasn’t the backend issue. It was frontend state issue. Here’s the truth most devs learn the hard way: Updating data ≠ Updating UI Common culprits: 👉 State not updated correctly 👉 Cached data still hanging around 👉 Async updates causing lag 💥 Result: Your backend is right… …but your UI is lying. 💡 The Fix? : ✔️ Update state instantly (Optimistic UI) ✔️ Refetch after mutation ✔️ Invalidate cache properly (RTK Query / React Query) 🔥 After fixing: ✔️ UI updates instantly ✔️ Users trust the system ✔️ App feels FAST & reliable 🧠 Real lesson: A perfect API means nothing if your UI tells a different story. 💬 Tell me... Have you ever debugged this “ghost data” bug? #frontend #reactjs #webdevelopment #javascript #stateManagement #rtkquery #reactquery #softwareengineering #programming #developers

𝗛𝗼𝘄 𝗚𝗮𝗿𝗯𝗮𝗴𝗲 𝗖𝗼𝗹𝗹𝗲𝗰𝘁𝗶𝗼𝗻 𝗪𝗼𝗿𝗸𝘀 𝗶𝗻 𝗡𝗼𝗱𝗲.𝗷𝘀 As developers, we often focus on writing efficient code—but what about memory management behind the scenes? In 𝗡𝗼𝗱𝗲.𝗷𝘀, garbage collection (GC) is handled automatically by the 𝗩𝟴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲, so you don’t need to manually free memory like in languages such as C or C++. But understanding how it works can help you write more optimized and scalable applications. 𝗞𝗲𝘆 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀: 𝟭. 𝗠𝗲𝗺𝗼𝗿𝘆 𝗔𝗹𝗹𝗼𝗰𝗮𝘁𝗶𝗼𝗻 Whenever you create variables, objects, or functions, memory is allocated in two main areas: Stack→ Stores primitive values and references Heap→ Stores objects and complex data 𝟮. 𝗚𝗮𝗿𝗯𝗮𝗴𝗲 𝗖𝗼𝗹𝗹𝗲𝗰𝘁𝗶𝗼𝗻 (𝗠𝗮𝗿𝗸-𝗮𝗻𝗱-𝗦𝘄𝗲𝗲𝗽) V8 uses a technique called Mark-and-Sweep: * It starts from “root” objects (global scope) * Marks all reachable objects * Unreachable objects are considered garbage * Then, it sweeps (removes) them from memory 𝟯. 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝗮𝗹 𝗚𝗮𝗿𝗯𝗮𝗴𝗲 𝗖𝗼𝗹𝗹𝗲𝗰𝘁𝗶𝗼𝗻 Not all objects live the same lifespan: Young Generation (New Space) → Short-lived objects Old Generation (Old Space) → Long-lived objects Objects that survive multiple GC cycles get promoted to the Old Generation. 𝟰. 𝗠𝗶𝗻𝗼𝗿 & 𝗠𝗮𝗷𝗼𝗿 𝗚𝗖 Minor GC (Scavenge)→ Fast cleanup of short-lived objects Major GC (Mark-Sweep / Mark-Compact) → Handles long-lived objects but is more expensive 𝟱. 𝗦𝘁𝗼𝗽-𝘁𝗵𝗲-𝗪𝗼𝗿𝗹𝗱 During GC, execution pauses briefly. Modern V8 minimizes this with optimizations like incremental and concurrent GC. 𝗖𝗼𝗺𝗺𝗼𝗻 𝗠𝗲𝗺𝗼𝗿𝘆 𝗜𝘀𝘀𝘂𝗲𝘀: * Memory leaks due to unused references * Global variables holding data unnecessarily * Closures retaining large objects 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀: * Avoid global variables * Clean up event listeners and timers * Use streams for large data processing * Monitor memory using tools like Chrome DevTools or `--inspect` Understanding GC = Writing better, faster, and scalable applications #NodeJS #JavaScript #BackendDevelopment #V8 #Performance #WebDevelopment

I used to think flatMap was just a nicer map().flat(). But it's not just it. map assumes a 1 → 1 transformation. Each input produces exactly one output. But real data rarely works like that. Sometimes an item produces multiple results. Sometimes none at all. That’s where flatMap changes the mental model. It’s not about flattening, instead it's about expressing 1 → 0..n transformations explicitly. And that clarity becomes really valuable as soon as your data transformations stop being trivial. Small API, but a meaningful shift in how you think about data. #javascript #frontend #softwareengineering #webdevelopment #cleanCode #coding --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini

Most frontend bugs aren’t in your code… They’re in your data flow. . . I used to think bugs came from “wrong logic” or missing edge cases in components. But most of the time, the UI was doing exactly what I told it to do… The problem was what I was feeding into it. Data coming in too early (before it’s ready). State updates are happening in the wrong order. Multiple sources of truth are fighting each other. Props being passed without clear ownership And suddenly… A perfectly written component starts behaving unpredictably. . . What fixed it for me wasn’t rewriting components. It was: → Making data flow predictable → Keeping a single source of truth → Being intentional about when and where state updates. → Separating data logic from UI logic . . Clean components don’t save you If your data flow is messy. Frontend isn’t just about how things look… It’s about how data moves. . . What’s one bug you chased for hours…that turned out to be a data flow issue? . . #frontend #reactjs #webdevelopment #softwareengineering #coding #devlife #developerexperience #javascript

🚀 Built a File/Folder Explorer using React (with recursion & tree traversal) Recently, I worked on building a File Explorer UI (like VS Code / Finder) using React — and it turned out to be a great exercise in mastering core concepts. ✨ Features implemented: • Expand / Collapse folders • Add new folders dynamically • Delete files/folders • Recursive rendering of nested structure • Clean and interactive UI 💡 What makes this interesting? This is a commonly asked interview question in top product companies like Microsoft, Atlassian, Google, and more. 🔍 Key concepts used: • Recursion (for rendering nested tree) • Tree Data Structure • State management for dynamic UI updates • Immutable updates in nested data 🧠 How DSA helped: Understanding tree traversal (DFS) made it much easier to: • Update deeply nested nodes • Add/delete items efficiently • Think recursively instead of writing complex loops Without DSA, handling nested structures like this can get messy very quickly. 🔗 GitHub Repo: https://lnkd.in/gWqXjaYv Would love feedback or suggestions to improve this further 🙌 #ReactJS #FrontendDevelopment #DSA #WebDevelopment #JavaScript #CodingInterview #SoftwareEngineering

🚀 Productivity Booster: Streamlining NestJS Development Writing repetitive boilerplate for data validation, security, and response formatting can be a major bottleneck in backend development. NestJS solves this elegantly by providing powerful, built-in features that allow us to focus on what truly matters: the business logic. By leveraging these three core building blocks, we can significantly cut down development time: 1. Validation Pipes (Automated Data Integrity) Forget manual if-else checks for every request. With Validation Pipes and decorators, you can ensure that incoming data is clean, typed, and validated before it even reaches your controller. It’s "set it and forget it" security for your data. 2. Guards (Modular Security) Managing authentication and authorization shouldn't be scattered across your functions. Guards provide a clean, single-responsibility layer to determine if a request should be handled or rejected, making your security logic easy to audit and reuse. 3. Interceptors (Global Logic Transformation) Need to transform a response, handle errors globally, or log execution time across all endpoints? Interceptors allow you to bind extra logic to your methods without cluttering the core functionality. #NestJS #BackendDevelopment #SoftwareArchitecture #Productivity #CleanCode #TypeScript #EngineeringEfficiency #BoilerplateFree

 I built a real User Management System from scratch Most developers start with tutorials… I decided to turn knowledge into a real working project. I just built a fully functional User Management Dashboard using vanilla JavaScript. 🔹 What it does: ✔ Fetches real user data from an API ✔ Lets you add new users dynamically ✔ Search users in real time ✔ Delete users instantly ✔ Stores data using Local Storage 🔹 Tech Stack: HTML • CSS • JavaScript • API Integration What I learned from this project is not just coding… but how real systems handle data, interaction, and user experience. 💡 Still improving, still building… one project at a time. 🔗 GitHub: https://lnkd.in/dJZjgYsp I’d appreciate any feedback or suggestions 🙌 #WebDevelopment #Frontend #JavaScript #CodingJourney #BuildInPublic