localStorage vs sessionStorage: Choosing the Right Storage for Frontend

Forced Synchronous Layout is one of those bugs that shows up as a long task in DevTools but is hard to pinpoint in the code. The pattern is deceptively simple: a class mutation followed immediately by a geometric property read (`scrollTop`, `getBoundingClientRect`…). The browser can't defer the layout — it recalculates right now, blocking the main thread. I've added a new snippet to WebPerf Snippets that detects it at runtime. Run it in DevTools, reproduce the interaction, and every FSL event gets logged with: - The property accessed and whether it was a read or write - The element descriptor (tagName + id/class) - Milliseconds since the last mutation - Full stack trace to locate the offending code One thing I had to work out while building it: MutationObserver fires asynchronously, so it can't catch mutations and geometric reads in the same synchronous block. The fix was intercepting `classList`, `setAttribute`, `setProperty`, and `cssText` directly at the prototype level, synchronously. Call `getFSLSummary()` for an aggregated report by property and element. Call `stopFSLDetector()` to restore all prototypes when you're done. https://lnkd.in/dhNciS5B #WebPerf #Performance #JavaScript #FrontEnd #WebPerfSnippets

Stop guessing the order of your console.logs. 🛑 JavaScript is single-threaded. It has one brain and two hands. So, how does it handle a heavy API call, a 5-second timer, and a button click all at once without catching fire? It’s all about the Event Loop, but specifically, the "VIP treatment" happening behind the scenes. The Two Queues You Need to Know: 1. The Microtask Queue (The VIP Line) 💎 What lives here: Promises (.then), await, and MutationObserver. The Rule: The Event Loop is obsessed with this line. It will not move on to anything else until this queue is bone-dry. If a Promise creates another Promise, JS stays here until they are all done. 2. The Macrotask Queue (The Regular Line) 🎟️ What lives here: setTimeout, setInterval, and I/O tasks. The Rule: These tasks are patient. The Event Loop only picks one at a time, then goes back to check if any new VIPs (Microtasks) have arrived. The "Aha!" Moment Interview Question: What is the output of this code? (Most junior devs get this wrong). JavaScript console.log('Start'); setTimeout(() => console.log('Timeout'), 0); Promise.resolve().then(() => console.log('Promise')); console.log('End'); The Reality: 1. Start (Sync) 2. End (Sync) 3. Promise (Microtask - Jumps the line!) 4. Timeout (Macrotask - Even at 0ms, it waits for the VIPs) The Pro-Tip for Performance 💡 If you have a heavy calculation, don't wrap it in a Promise thinking it makes it "background." It’s still on the main thread! Use Web Workers if you really want to offload the heavy lifting. Does the Event Loop still confuse you, or did this click? Let's discuss in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Frontend

🚀 Understanding useRef in React — Simplified! Not all data in React should trigger a re-render. 👉 That’s where useRef becomes powerful. 💡 What is useRef? useRef is a hook that lets you store a mutable value that persists across renders—without causing re-renders. ⚙️ Basic Syntax const ref = useRef(initialValue); 👉 Access value using: ref.current 🧠 How it works Value persists across renders Updating it does NOT trigger re-render Works like a mutable container 🔹 Example const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log(countRef.current); }; 👉 UI won’t update—but value persists 🧩 Real-world use cases ✔ Accessing DOM elements (focus, scroll) ✔ Storing previous values ✔ Managing timers / intervals ✔ Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useRef for non-UI data ✅ Use it for DOM access ✅ Combine with useEffect when needed ❌ Don’t use useRef for UI state ❌ Don’t expect UI updates from it ⚠️ Common Mistake // ❌ Expecting UI update countRef.current += 1; 👉 React won’t re-render 💬 Pro Insight 👉 useRef = Persist value without re-render 👉 useState = Persist value with re-render 📌 Save this post & follow for more deep frontend insights! 📅 Day 14/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useRef #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

🚀 Web APIs Made Simple (With Quick Explanations) When I started learning JavaScript, I was confused about how API calls, UI updates, and storage actually work. Then I understood this 👇 👉 JavaScript alone is limited 👉 Browsers provide powerful features called Web APIs --- 💡 Simple idea: JavaScript = Brain 🧠 Web APIs = Tools + Internet 🌐 --- 🔥 Important Web APIs (with simple explanations): 1. Fetch API → Used to call backend APIs and get data 2. DOM API → Used to update and control HTML elements 3. LocalStorage API → Store data permanently in browser 4. SessionStorage API → Store data for one tab/session 5. Timer API → Run code after delay (setTimeout) or repeatedly (setInterval) 6. Geolocation API → Get user’s current location 7. Media API → Access camera and microphone 8. WebSocket API → Real-time communication (chat apps, live data) 9. Canvas API → Draw graphics, charts, games 10. Web Workers API → Run heavy tasks in background without blocking UI --- 💡 Reality: You don’t need all of them at once. Most apps mainly use: 👉 DOM 👉 Fetch 👉 Storage 👉 Events --- 📈 Best way to learn: Start building: - Todo App (DOM + Storage) - API App (Fetch) - Chat App (WebSocket) --- 🔥 Once you understand Web APIs, JavaScript becomes much more powerful. --- 💬 Which API was hardest for you to understand? --- 📚 Full article on Web APIs: https://lnkd.in/gHk3dyqz #javascript #webdevelopment #frontend #reactjs #programming #coding #100daysofcode

I spent 3 hours debugging a “simple” frontend issue… and it turned out to be one line. The problem? An API was getting called on every keystroke. Network tab = chaos 👀 Dozens of API calls for a single search. 👉 The issue: No debouncing. Here’s what the code looked like before: useEffect(() => { if (!query) return; fetch(`https://lnkd.in/eNE6UBeq) .then(res => res.json()) .then(data => setData(data)); }, [query]); Every keypress → API call ❌ Here’s the fix (debouncing): useEffect(() => { if (!query) return; const timer = setTimeout(() => { fetch(`https://lnkd.in/eNE6UBeq) .then(res => res.json()) .then(data => setData(data)); }, 300); return () => clearTimeout(timer); }, [query]); ✅ API calls reduced by ~70% ✅ Smoother UI ✅ Better user experience Lesson: Frontend performance isn’t just about what you render… It’s about when you trigger things. Small change. Big impact. Have you used debouncing or throttling in your apps? Where did it make the biggest difference? #frontend #reactjs #javascript #webperformance #softwareengineering

The TanStack Query loading trap you should avoid Ever seen a loading spinner that never stops when you're offline? This usually happens when you rely only on isPending. What’s happening behind the scenes: - First load (no cache) + user goes offline - Query gets paused, not failed: isPending = true, fetchStatus = 'paused' - UI keeps showing a spinner Problem: Checking only isPending results in the user being stuck on a loader with no explanation. Solution 1: Check both isPending and fetchStatus. This allows you to show a specific "Offline" message instead of a generic spinner. Solution 2: Control network behavior by updating global config: networkMode: 'always' This forces queries to run even when offline (no pause state) It is a small detail, but handling these edge cases makes a huge difference in providing a polished user experience. Thanks to JavaScript Mastery, Hitesh Choudhary, RoadsideCoder.com, Traversy Media, freeCodeCamp for sharing such valuable content for Frontend production-grade applications. #TanStackQuery #ReactQuery #WebDevelopment #Frontend #JavaScript #ReactJS

Angular 21 dropped in November 2025, and it's a bigger architectural shift than most developers probably realize. Here's what actually changed under the hood: 🔁 Zone.js is gone by default Angular has been monkey-patching browser APIs with zone.js for change detection since v2. It worked but caused bloated bundles, unpredictable async behavior, and performance overhead that was hard to profile. In v21, new applications ship zoneless by default, leveraging Signals to surgically update only the view nodes that depend on changed state. This means better Core Web Vitals, native async/await support, and cleaner stack traces. 📝 Signal Forms (experimental) Reactive Forms were already powerful but were kinda verbose. Manual FormGroup/FormControl instantiation, Observable subscriptions that leaked if you forgot to unsubscribe, and validators scattered across your component class. Signal Forms replaces that entire model with a signal that automatically syncs to bound form fields, with centralized schema-based validation and full TypeScript type safety on every field access. 🤖 Angular CLI MCP Server (now stable) This one is easy to underestimate. The Angular CLI now exposes an MCP (Model Context Protocol) server via `ng mcp`. Connect it to Cursor, VS Code, or JetBrains and your AI agent gains the ability to query live Angular docs, analyze your component's dependency graph before recommending migration strategies, and run schematics against your actual project. No need to worry about it guessing or hallucinating. It actually uses the CLI as the source of truth. The `onpush_zoneless_migration` tool can even plan a migration path for existing codebases to get up to date with the new architecture. ♿ Angular Aria (developer preview) A headless, unstyled component library built around WAI-ARIA patterns, handling keyboard interactions, focus management, and screen reader support out of the box. You bring the HTML structure and CSS. It ships 8 patterns covering 13 components. 🧪 Vitest is now the default test runner Karma is officially outta here. Vitest is stable and the CLI scaffolds it by default for new projects. Angular 22 is expected in May 2026 and looks to make OnPush the default change detection strategy. That will essentially lock in the signals-first architecture as the only path forward. #Angular #WebDevelopment #TypeScript #Frontend #JavaScript

⚛️ 𝗜𝗺𝗽𝗿𝗼𝘃𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — 𝗨𝘀𝗶𝗻𝗴 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 As React applications grow, bundle size increases — which directly impacts initial load time. Common problem: • large JS bundle • slow first load • unnecessary code loaded upfront A better production approach is 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 𝘧𝘳𝘰𝘮 "./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 𝘧𝘳𝘰𝘮 "./𝘙𝘦𝘱𝘰𝘳𝘵𝘴"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴 𝘧𝘳𝘰𝘮 "./𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴"; All components load upfront — even if not used immediately. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 { 𝘭𝘢𝘻𝘺, 𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 } 𝘧𝘳𝘰𝘮 "𝘳𝘦𝘢𝘤𝘵"; 𝘤𝘰𝘯𝘴𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥")); 𝘤𝘰𝘯𝘴𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘙𝘦𝘱𝘰𝘳𝘵𝘴")); 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘈𝘱𝘱() {   𝘳𝘦𝘵𝘶𝘳𝘯 (     <𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 𝘧𝘢𝘭𝘭𝘣𝘢𝘤𝘬={<𝘱>𝘓𝘰𝘢𝘥𝘪𝘯𝘨...</𝘱>}>       <𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 />       <𝘙𝘦𝘱𝘰𝘳𝘵𝘴 />     </𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦>   ); } Now components load 𝗼𝗻𝗹𝘆 𝘄𝗵𝗲𝗻 𝗻𝗲𝗲𝗱𝗲𝗱. 📌 Where this helps most: • large dashboards • admin panels • multi-page apps • heavy third-party libraries 📌 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀: • faster initial load • reduced bundle size • better performance • improved user experience 📌 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀: • split at route level • avoid over-splitting • use meaningful fallbacks • monitor bundle size Loading everything at once works — but splitting wisely improves performance significantly. 💬 Curious — do you apply code splitting at route level or component level? #ReactJS #CodeSplitting #Performance #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #Optimization

#javascript #javascriptdeveloper Masking Sensitive Data in JavaScript When displaying sensitive values (like credit card numbers), it’s common to hide all but the last few digits for better privacy. JavaScript’s padStart() makes this simple slice out the last four digits, then pad the start with a masking character (* in this case) until it matches the original length. Another padStart() example: Formatting invoice numbers with leading zeros: const invoiceNumber = '42'; console.log(invoiceNumber.padStart(6, '0')); // 000042 Note: The goal here is to demonstrate possible uses of padStart(). For true security, masking should be done on the backend before data is sent to the client. Frontend masking is mainly for UI/UX purposes for example, hiding input while typing, showing only the last few digits for user confirmation, or masking locally generated data.