"Understanding CORS: A Guide for Frontend and Backend Developers"

Common causes of memory leaks in JavaScript: ▪️ Forgetting to clear intervals or timeouts. ▪️ Event listeners not removed when elements are destroyed. ▪️ Global variables holding references unnecessarily. ▪️ Closures capturing variables that are no longer needed. ▪️ DOM nodes kept in memory because of lingering references. ▪️ Large data structures stored in memory without cleanup. ▪️ Detached DOM elements still referenced in code. A memory leak is not always obvious but over time it makes your app slower, heavier, and less reliable. What would you add?

𝐍𝐞𝐱𝐭.𝐣𝐬 16 𝐑𝐞𝐥𝐞𝐚𝐬𝐞𝐝: 𝐅𝐨𝐜𝐮𝐬𝐞𝐝 𝐨𝐧 𝐒𝐩𝐞𝐞𝐝, 𝐂𝐨𝐧𝐭𝐫𝐨𝐥, 𝐚𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 𝐄𝐟𝐟𝐢𝐜𝐢𝐞𝐧𝐜𝐲 After diving into Next.js 16, it’s clear this release focuses on giving developers deeper control over performance and smarter tooling for modern web apps. Here’s what stands out in this release: 1. Cache Components The new "use cache" directive gives developers control over what to cache — improving load times reducing server strain. 2. Turbopack (Stable) Now the default bundler, Turbopack delivers much faster builds and refresh times for new apps. 3. React Compiler Support With automatic memoization built-in, React now skips unnecessary re-renders. 4. Smarter Routing & Prefetching Page transitions feel smoother, and the logs now provide much clearer visibility. 5. AI-Assisted DevTools (MCP Integration) MCP brings AI-powered insights into DevTools, helping developers identify performance and caching issues in real time. In short, Next.js 16 sets a new benchmark for building high-performance, intelligent web applications.

🌐 Understanding HTTP Status Codes: The Language of Web Responses When you send a request to a server, the response doesn’t just include data — it also carries a status code 📩. These codes are like the "body language" of the web, telling you whether things went smoothly ✅, something went wrong ❌, or further action is required 🔄. 🔢 What are HTTP Status Codes? HTTP Status Codes are 3-digit numbers returned by a server in response to a client’s request. They are grouped into categories based on the first digit: - 1xx (Informational ℹ️) → The request is received and still processing. - 2xx (Success ✅) → Everything went well, and the response contains the expected result. - 3xx (Redirection 🔀) → The client must take additional action (like following a new URL). - 4xx (Client Error ⚠️) → Something is wrong with the request (bad syntax, not found, unauthorized). - 5xx (Server Error 💥) → The server failed to process a valid request. 🌟 Most Common Status Codes You’ll Meet - 200 OK ✅ → Request succeeded. - 201 Created 🆕 → New resource successfully created. - 301 Moved Permanently 🔗 → The resource has a new URL. - 400 Bad Request 🚫 → The request is invalid. - 401 Unauthorized 🔑 → You need authentication. - 403 Forbidden ⛔ → You are not allowed to access this resource. - 404 Not Found ❓ → The server can’t find what you’re asking for. - 500 Internal Server Error 💥 → Something went wrong on the server. 💡 Why Status Codes Matter - They help debugging faster 🕵️♂️. - They improve communication between frontend and backend teams 🤝. - They are essential for RESTful API design 🌐. - They give users a better experience by showing meaningful error messages instead of cryptic failures 🙅. 🚀 Final Thoughts Think of Status Codes as the way servers “talk back” 🗣️ to clients. Mastering them makes you a better developer, improves your troubleshooting skills, and keeps your applications user-friendly ✨. #HTTP #WebDevelopment #StatusCodes #API #SoftwareEngineering #Backend #Frontend #RESTAPI

🎥 Just recorded a small experiment where two web browsers talk directly to each other — no server, no backend — just pure WebRTC magic happening inside the DevTools console. ⚡️ What’s happening under the hood? It’s all UDP packets flying directly between peers, carrying real-time data through a secure, peer-to-peer tunnel. This protocol is one of the most exciting parts of modern web engineering — lightweight, encrypted, and incredibly fast. It’s what powers Google Meet, Discord, and countless real-time apps, and yet it’s simple enough to test manually in your own browser. I built this little demo to understand the full WebRTC handshake — offers, answers, and ICE candidates — without relying on any signaling server. Watching the packets connect, and seeing messages appear instantly between two tabs, was honestly fun 😄 🔗 Check out the code and explanation on my GitHub: 👉 https://lnkd.in/e9Vz963N #WebRTC #WebDevelopment #Networking #JavaScript #PeerToPeer #UDP #RealTime #DeveloperJourney

🚀 Understanding “Hydration Error” in Next.js (Explained Simply) If you’ve ever seen this scary line in your console 👇 ⚠️ “Text content does not match. Server: ‘X’ Client: ‘Y’” You’ve just met a hydration error 💡 What actually happens in Next.js: Server-side Rendering (SSR): Next.js runs your React code on the server and sends ready HTML to the browser. Hydration: Once the browser gets that HTML, React runs again on the client, builds a Virtual DOM (vDOM), and compares it with the server’s HTML. If both match ✅ — React just attaches event listeners (page becomes interactive). If they don’t match ❌ — React throws a hydration error. ⚙️ Why does mismatch happen? Because the client doesn’t reuse the server HTML. It recomputes it using the same React component code. If that computation gives a different result — mismatch occurs! Common causes: Using Math.random(), Date.now(), or time-dependent values. Conditional rendering using browser-only data (like window or localStorage). Async data that differs on client and server.

🚀 New Blog: useSyncExternalStore in React? React 18 introduced this powerful hook to safely subscribe to external data sources like browser events, localStorage, or global stores — without risking stale state or inconsistent renders. In my latest post, I explain what it is, how it works, and share a real-world example tracking online/offline status using this API. Read here 👉 https://lnkd.in/gpPf4E5a #ReactJS #WebDevelopment #ReactHooks #JavaScript 

⚡️ When a component mounts multiple times: how I prevented duplicate API calls Here’s what I was fighting with today - and it got me so curious that I decided to share it with you. I’ve also heard from colleagues about this problem, and everyone seems to have their own hacks 🛠️. This was not a typical React StrictMode bug. The real issue was that <MyComponent /> could appear in several parts of the UI at the same time, depending on page state. Each instance triggered its own useEffect, and the backend ended up receiving duplicate API requests. ❌ What failed Local useRef → isolated per instance, no sharing. Global Zustand flag → async race conditions, no distinction between request keys. ✅ The fix A module-level guard with a Set that all instances share. Idempotency ensured by key (hookInquiryId). // MyComponent.tsx const processedInquiryRefs = new Set<string>(); useEffect(() => {  // logic }, [dependency]); 💡 Why it works Set is synchronous and exists once per module. Guarantees: one key → one API call, no matter how many instances mount. StrictMode can still re-run effects, but duplicates never reach the backend 🚫. 🎁 Extra Even with this guard, the backend should also be idempotent (upsert / ignore duplicates). With frontend guard + backend safety, you’re fully protected. 👉 Has this happened to you? How did you prevent duplicate requests when the

🌐 HTTP Status Codes — The Language of the Web Every time your browser talks to a server, it gets a response — not just data, but a status code that tells you what’s going on behind the scenes. Understanding these codes helps you debug faster and build more reliable web apps. Let’s decode a few essentials 👇 ✅ 2xx — Success Zone 200 OK: Everything worked perfectly! 201 Created: A new resource was successfully created (e.g., after a POST request). 🔁 3xx — Redirection 301 Moved Permanently: The URL has changed for good. 302 Found: Temporary redirection — the page lives elsewhere for now. ⚠️ 4xx — Client Errors 400 Bad Request: The server couldn’t process what you sent. 401 Unauthorized: You need proper credentials. 403 Forbidden: You’re authenticated, but not allowed in. 404 Not Found: The resource simply doesn’t exist. 🔥 5xx — Server Errors 500 Internal Server Error: Something broke on the backend. 503 Service Unavailable: The server is overloaded or under maintenance. 💡 Dev Tip: Open DevTools → Network Tab in your browser and inspect any API call. You’ll instantly see which status code is returned — it’s one of the best ways to understand request-response flow and debug like a pro. 👨💻 The takeaway: Once you can read these numbers fluently, you don’t just “use” the web — you understand it. #WebDevelopment #HTTP #APIs #FrontendDevelopment #BackendDevelopment #JavaScript #ReactJS #CodingTips #DeveloperCommunity #FullStackDev #LearnToCode #Programming #WebDev #TechEducation #CodeNewbie

CORS Almost Broke Me But Preflight Saved the Day When I first built my frontend-backend setup, I thought everything would be smooth. Frontend hosted on S3, backend running Apollo GraphQL, and API Gateway sitting in the middle to handle requests safely. Sounds simple, right? Well… browsers had other plans. Every request I made from the frontend to the backend kept failing. Access to fetch at 'https://lnkd.in/gwmsnHny' from origin 'https://myfrontend.com' has been blocked by CORS policy I triple-checked my backend, triple-checked API Gateway. Everything was “working”… but the browser refused to cooperate. CORS isn’t a bug. It’s the browser saying: “Hold on, I don’t trust this request from another domain unless the server says it’s okay.” And the browser always starts with a preflight request an OPTIONS request that asks the server: Am I allowed to send requests from this origin? Which HTTP methods can I use (GET, POST, etc.)? Which headers can I include? If the server or the API Gateway doesn’t answer correctly, the browser https://lnkd.in/gvWstbu6

🔒 𝗣𝗿𝗼𝘁𝗲𝗰𝘁𝗶𝗻𝗴 𝗔𝗣𝗜 𝗘𝗻𝗱𝗽𝗼𝗶𝗻𝘁𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 — 𝗠𝘆 𝗟𝗮𝘁𝗲𝘀𝘁 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 Recently, I explored how to securely connect a Next.js frontend with an external Nest.js backend without exposing sensitive API routes. Here’s what I learned 👇 ✅ 𝗣𝗿𝗼𝗯𝗹𝗲𝗺: Frontend directly calling backend APIs exposed real endpoints risky for production. ✅ 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻: I created a secure proxy layer inside Next.js (/api/secure/[...path]) that: • Hides real backend URLs • Adds authorization headers automatically • Uses environment variables for sensitive keys • Works seamlessly for GET, POST, PUT, PATCH, DELETE ✅ 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀: • Real API stays hidden from the browser • Tokens and secret keys are never exposed • Easier to manage auth logic in one place ✅ 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗦𝗲𝘁𝘂𝗽: All secrets and base URLs are stored safely in .env.production, not hardcoded. 𝐈𝐧𝐬𝐭𝐞𝐚𝐝 𝐨𝐟 𝐜𝐚𝐥𝐥𝐢𝐧𝐠: https://lnkd.in/dfXj43nS 𝐌𝐲 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐜𝐚𝐥𝐥𝐬: /api/secure/auth/login 💡 𝗣𝗿𝗼 𝗧𝗶𝗽: Even if your backend is external, a proxy layer adds an extra shield and simplifies request handling. 𝐑𝐓𝐊 𝐐𝐮𝐞𝐫𝐲 𝐁𝐚𝐬𝐞 𝐒𝐞𝐭𝐮𝐩 👇