# Under The Hood Under The Hood is a technical publication by Srikar Phanikumar Marti covering frontend internals, browser behavior, JavaScript, React, web performance, accessibility, and AI engineering. Canonical site: https://blog.mspk.me RSS feed: https://blog.mspk.me/rss.xml ## Use Use the canonical post URLs when citing or summarizing this publication. Prefer the article title, URL, and publication context over platform syndication copies. ## Recent Posts - [ARIA Role Inheritance and Override: How Browsers Resolve Conflicting Semantics](https://blog.mspk.me/posts/aria-role-inheritance-and-override-how-browsers-resolve-conflicting-semantics) Summary: Investigate browser behavior when multiple ARIA roles or properties conflict on a single element, how inheritance and overrides work, and debugging techniques to ensure correct semantics for assistive technologies. Tags: Accessibility, ARIA, WebDev, Debugging, Frontend, ScreenReaders - [Optimizing Keyboard Navigation in Complex Web Apps: Techniques and Debugging Tools](https://blog.mspk.me/posts/optimizing-keyboard-navigation-in-complex-web-apps-techniques-and-debugging-tools) Summary: Detail advanced keyboard navigation techniques for complex widgets, how to use browser and screen reader tools to debug keyboard focus order and event handling issues. Tags: Accessibility, Keyboard, FocusManagement, Debugging, Frontend, UI, WebDev - [CSS Container Queries: How Browsers Calculate and Recalculate Styles](https://blog.mspk.me/posts/css-container-queries-how-browsers-calculate-and-recalculate-styles) Summary: A technical walkthrough of the CSS container query spec implementation, how browsers detect container size changes, the rendering pipeline impact, and debugging container query issues in real-world apps. Tags: CSS, Frontend, WebDev, Rendering, Debugging, Performance - [React Portals: How They Work and When to Use Them for Modals and Tooltips](https://blog.mspk.me/posts/react-portals-how-they-work-and-when-to-use-them-for-modals-and-tooltips) Summary: Explain the internal mechanism of React portals, how they affect event propagation and focus management, and debugging tips for common issues with modals, overlays, and tooltips using portals. Tags: React, Portals, Modals, Tooltips, Frontend, Debugging, UI - [Debugging React Memoization: When useMemo and React.memo Backfire](https://blog.mspk.me/posts/debugging-react-memoization-when-usememo-and-react-memo-backfire) Summary: Explore how React’s memoization hooks work internally, common pitfalls causing stale props or unnecessary renders, and debugging strategies to optimize component memoization. Tags: React, Performance, Memoization, Debugging, Frontend - [Keyboard Accessibility in Custom Components: Implementing and Debugging Focus Management](https://blog.mspk.me/posts/keyboard-accessibility-in-custom-components-implementing-and-debugging-focus-management) Summary: Custom UI components can look great, but keyboard users often get lost because focus management and keyboard interactions are tricky. I share practical tips, pitfalls, and debugging tricks that helped me make keyboard navigation reliable and accessible. Tags: Accessibility, Keyboard, FocusManagement, Debugging, Frontend, UI, WebDev - [Browser Garbage Collection: What Frontend Engineers Should Know](https://blog.mspk.me/posts/browser-garbage-collection-what-frontend-engineers-should-know) Summary: Unpack how modern browsers manage memory, garbage collect JavaScript objects, DOM nodes, and event listeners, common memory leak patterns, and practical debugging techniques for frontend engineers. Tags: Browser, JavaScript, Memory, GarbageCollection, Frontend, Debugging, Performance - [React Suspense and Error Boundaries: How They Interact and How to Debug Failures](https://blog.mspk.me/posts/react-suspense-and-error-boundaries-how-they-interact-and-how-to-debug-failures) Summary: Explore the tricky relationship between React Suspense and Error Boundaries. Understand what happens when errors and Suspense collide, common pitfalls that cause fallback UI to fail, and practical debugging tips from real-world React internals experience. Tags: React, Suspense, Error Boundaries, Debugging, Frontend, ReactInternals - [Debugging Complex Pointer and Touch Event Interactions in Mobile Browsers](https://blog.mspk.me/posts/debugging-complex-pointer-and-touch-event-interactions-in-mobile-browsers) Summary: Explore how mobile browsers handle pointer, touch, and gesture events, event sequence differences from desktop, common pitfalls in custom gesture recognizers, and practical debugging tips using DevTools. Tags: Browser, Mobile, PointerEvents, TouchEvents, Gesture, Debugging, Frontend - [React Concurrent Rendering: Scheduling, Interruptions, and Debugging Suspense Boundaries](https://blog.mspk.me/posts/react-concurrent-rendering-scheduling-interruptions-and-debugging-suspense-boundaries) Summary: I finally understood why my React Suspense boundaries sometimes flicker unpredictably and how React’s concurrent scheduler manages update priorities and interruptions behind the scenes. This deep dive explains React’s concurrent rendering model, how it breaks and resumes work, and practical debugging tips for Suspense boundaries in production. Tags: React, Concurrent Mode, Scheduler, Suspense, Debugging, Frontend, ReactInternals - [How Browsers Handle Keyboard Events: From Raw Input to DOM Events](https://blog.mspk.me/posts/how-browsers-handle-keyboard-events-from-raw-input-to-dom-events) Summary: A deep dive into the browser event pipeline for keyboard input, including event order, key repeat, composition events, and how differences between browsers affect frontend behavior and debugging. Tags: Browser, KeyboardEvents, Frontend, Debugging, WebDev, DOM, InputHandling - [Screen Reader Handling of ARIA Live Regions: Timing, Interruptions, and Debugging](https://blog.mspk.me/posts/screen-reader-handling-of-aria-live-regions-timing-interruptions-and-debugging) Summary: Explore how screen readers process ARIA live regions updates, the timing nuances that affect announcements, how interruptions are handled, and strategies to debug live region issues in SPAs. Tags: Accessibility, ScreenReaders, ARIA, WebDev, Debugging, Frontend, SPA - [How Browsers Implement Native Focus Rings and Their Accessibility Implications](https://blog.mspk.me/posts/how-browsers-implement-native-focus-rings-and-their-accessibility-implications) Summary: Explore the browser mechanisms behind native focus rings, how different user agents render them, tradeoffs in custom focus styling vs native, and debugging accessibility issues related to focus visibility. Tags: Accessibility, Browser, Frontend, UI, Debugging, WebDev - [AI-Driven CSS Refactoring: When Generated Styles Surprise You](https://blog.mspk.me/posts/ai-driven-css-refactoring-when-generated-styles-surprise-you) Summary: Examine AI tools that generate or refactor CSS, mechanisms they use to optimize styles, tradeoffs between automated and manual control, and debugging approaches for unexpected layout or performance regressions. Tags: CSS, AI, Frontend, Performance, Refactoring, Debugging, WebDev - [Debugging AI Model Integration Latency in Frontend: Frontend Architecture and UX Tradeoffs](https://blog.mspk.me/posts/debugging-ai-model-integration-latency-in-frontend-frontend-architecture-and-ux-tradeoffs) Summary: Analyze frontend architectural patterns to minimize latency when integrating AI models in the browser, UX tradeoffs for loading states and responsiveness, and debugging slow or blocking AI features. Tags: AI, Frontend, Performance, Latency, UX, Debugging, WebDev, Architecture - [How React Fiber Handles High Priority Updates: Insights and Debugging Techniques](https://blog.mspk.me/posts/how-react-fiber-handles-high-priority-updates-insights-and-debugging-techniques) Summary: Explore how React Fiber prioritizes urgent updates like user input, interrupts lower priority work, and how to debug common issues like race conditions or janky UI caused by update prioritization. Tags: React, ReactFiber, ConcurrentMode, UI, Frontend, Debugging, Performance - [React Architecture Beyond Components: Understanding Context, Hooks, and Render Phases](https://blog.mspk.me/posts/react-architecture-beyond-components-understanding-context-hooks-and-render-phases) Summary: Unpack React's internal architecture focusing on how Context and Hooks interact with render phases, the implications for state consistency, and debugging tricky lifecycle bugs. Tags: React, Hooks, Context, Rendering, Frontend, Debugging, ReactInternals - [Debugging React Context Performance Issues: When and Why Components Re-render](https://blog.mspk.me/posts/debugging-react-context-performance-issues-when-and-why-components-re-render) Summary: Dissect React Context internals, why context updates cause component re-renders, common anti-patterns, and how to profile and optimize context usage for large applications. Tags: React, Performance, Context, Frontend, Debugging, Optimization - [HTTP QUERY is here: what changes for frontend data fetching?](https://blog.mspk.me/posts/http-query-is-here-what-changes-for-frontend-data-fetching) Summary: RFC 10008 standardized the HTTP QUERY method in June 2026: safe and idempotent like GET, but able to carry a request body like POST. Explore what this means for complex search filters, GraphQL-style reads, CDN caching, browser and framework support, and why teams should not blindly replace every POST /search endpoint yet. Tags: HTTP, frontend, data-fetching, web, RFC, networking, API, web-development - [New Newsletter Alert: Under The Hood Has a New Home](https://blog.mspk.me/posts/new-newsletter-alert) Summary: Why I moved from Substack to an owned newsletter, how I ported the archive, and what I am building from here. Tags: newsletter, substack, publishing, nextjs - [Optimizing React Suspense: How Concurrent Mode Handles Data Fetching and Rendering](https://blog.mspk.me/posts/optimizing-react-suspense-how-concurrent-mode-handles-data-fetching-and-rendering) Summary: Ever seen your React Suspense fallback flash briefly, then disappear, then maybe reappear? Let’s unravel what’s really going on under the hood with React Concurrent Mode’s update prioritization, Suspense boundaries, and data fetching. Understanding this can help you fine-tune your loading UX and boost perceived performance. Tags: React, Suspense, Concurrent Mode, Performance, Frontend, ReactInternals - [React Server Components: Under the Hood of Streaming and Client Boundaries](https://blog.mspk.me/posts/react-server-components-under-the-hood-of-streaming-and-client-boundaries) Summary: Ever wondered how React Server Components stream content to your app and keep client and server logic neatly separated? Let me walk you through the guts of this feature, based on my own debugging and experimentation. Tags: React, Server Components, Streaming, FrontendArchitecture, WebDev - [The Accessibility Tree: What Your DOM Doesn’t Tell You About Screen Readers](https://blog.mspk.me/posts/the-accessibility-tree-what-your-dom-doesn-t-tell-you-about-screen-readers) Summary: Dissect the accessibility tree construction from DOM and CSS, how browsers expose it to assistive tech, and debugging mismatches between UI and accessibility APIs. Tags: Accessibility, DOM, ScreenReaders, WebDev, Debugging - [What will-change Actually Does to Your GPU Memory](https://blog.mspk.me/posts/what-will-change-actually-does-to) Summary: At some point you hit a janky animation, Googled the fix, and found a Stack Overflow answer that said add will change: transform to the element. You added it. The animation got smoother. You moved on. Most developers sto Tags: Substack - [Hydration Isn't Magic — Here's the Exact Sequence That Breaks It](https://blog.mspk.me/posts/hydration-isnt-magic-heres-the-exact) Summary: If you have used Next.js, Nuxt, Remix, or any server rendered React framework, you have almost certainly seen this warning at some point: Warning: Text content did not match. Server: "Hello" Client: "Hello " Or the page Tags: Substack - [The Scroll Performance Problem CSS Solved That JavaScript Made Worse](https://blog.mspk.me/posts/the-scroll-performance-problem-css) Summary: Scroll handlers are one of those things that seem completely reasonable until you understand what actually happens when you attach one. Every time the user scrolls, the browser fires your handler. Not once per frame. Not Tags: Substack - [How the Browser Decides Your Font Is \"Loaded\" ](https://blog.mspk.me/posts/how-the-browser-decides-your-font) Summary: You’ve seen it happen. The page loads, text appears in a fallback font, and then a fraction of a second later everything shifts as the real font kicks in. Or worse — the text is invisible for a moment, then pops in. You Tags: Substack - [Why localStorage Silently Fails in Safari](https://blog.mspk.me/posts/why-localstorage-silently-fails-in) Summary: You ship a feature. It works perfectly in Chrome. You test it in Firefox. Still fine. Then someone files a bug that their settings aren’t saving, their preferences reset on every visit, the thing you built just doesn’t w Tags: Substack - [Why typeof null === ‘object’ Is a Bug That Can Never Be Fixed](https://blog.mspk.me/posts/why-typeof-null-object-is-a-bug-that) Summary: Open your browser console right now and type this: typeof null It returns "object" . It’s wrong. Everyone knows it’s wrong. The people who built JavaScript knew it was wrong. And it will never be fixed. Here’s the full s Tags: Substack - [How import() Changed Frontend Architecture and (almost) Nobody Noticed](https://blog.mspk.me/posts/how-import-changed-frontend-architecture) Summary: We spent years arguing about code splitting. Webpack configs, bundle strategies, route based splitting, component level splitting; entire articles written about how to slice your JavaScript so users don’t download what t Tags: Substack - [The structuredClone You Should Have Been Using Instead of JSON Hacks](https://blog.mspk.me/posts/the-structuredclone-you-should-have) Summary: At some point, every JavaScript developer writes this: const copy = JSON.parse JSON.stringify original ; You know it’s ugly. I know it’s ugly. We all wrote it anyway because it worked — until it didn’t. The thing is, JSO Tags: Substack - [Your Service Worker Is Serving Stale Code (And Your Users Are Stuck in a Time Warp)](https://blog.mspk.me/posts/your-service-worker-is-serving-stale) Summary: Progressive Web Apps PWAs promised us a beautiful, offline first future. We were told that by implementing service workers, we could bypass the unpredictable volatility of mobile networks, cache our core application shel Tags: Substack - [The rem vs px Illusion: How Browsers Actually Scale Typography for Accessibility](https://blog.mspk.me/posts/the-rem-vs-px-illusion-how-browsers) Summary: Go to any frontend engineering forum, search for typography, and you will find yourself staring into a deep, dogmatic rabbit hole. The battle lines were drawn a decade ago: on one side, you have the pixel purists who wan Tags: Substack - [Why I Published an npm Package Just to Parse a String to a Boolean](https://blog.mspk.me/posts/why-i-published-an-npm-package-just) Summary: If you want to start a flame war in a room full of JavaScript developers, just bring up type coercion. We’ve all seen the memes. We all know that == evaluates to true , and we’ve all laughed at the bizarre, dark corners Tags: Substack - [The DistilBERT Ceiling: The Exact Moment You Must Evict Client-Side AI to a Web Worker](https://blog.mspk.me/posts/the-distilbert-ceiling-the-exact) Summary: In my last two posts, we looked at how running machine learning models directly in the browser can completely crash your Core Web Vitals, and why a model’s underlying architecture matters far more than its raw parameter Tags: Substack - [Size Doesn’t Matter: Why a 39M Parameter AI Model Is Slower Than a 110M One in the Browser](https://blog.mspk.me/posts/size-doesnt-matter-why-a-39m-parameter) Summary: If you hang around frontend engineering circles long enough, you’ll notice we have a universal rule of thumb for optimization: smaller is better . Smaller bundle sizes mean faster time to interactive. Smaller image asset Tags: Substack - [I Benchmarked Running AI Models Directly in the Browser. It Completely Trashed My Core Web Vitals.](https://blog.mspk.me/posts/i-benchmarked-running-ai-models-directly) Summary: We are living in the golden age of offloading computation to the client. Frameworks are faster, edge networks are smarter, and libraries like Transformers.js have made running actual neural networks inside a browser look Tags: Substack - [Your AI Feature Works. Your Users Don't Trust It. Here's Why.](https://blog.mspk.me/posts/your-ai-feature-works-your-users) Summary: The gap between \"it's accurate\" and \"I believe it\" is wider than you think — and entirely your fault to close Tags: Substack - [AI Killed \"Powered by AI\"](https://blog.mspk.me/posts/ai-killed-powered-by-ai) Summary: The label that was supposed to sell your product is now the reason users don't trust it Tags: Substack - [Designing for Confident Wrong Answers: The Hardest UX Problem in AI](https://blog.mspk.me/posts/designing-for-confident-wrong-answers) Summary: The model is wrong. You can tell because you happen to know the answer. But your user doesn’t — and the interface gave them no reason to doubt it. This is the central UX failure in AI products right now. Not that models Tags: Substack - [You Hated Matrix Math in College. Turns Out It Runs Every AI Model You’ve Ever Used.](https://blog.mspk.me/posts/you-hated-matrix-math-in-college) Summary: There’s a specific kind of pain reserved for sitting in a linear algebra lecture, staring at a matrix multiplication problem, and thinking: when will I ever use this? Your professor said “it’s foundational.” You filed th Tags: Substack - [The KV Cache: Why Your API Bill Is Higher Than It Should Be](https://blog.mspk.me/posts/the-kv-cache-why-your-api-bill-is) Summary: If you’ve used the Claude or OpenAI APIs at any meaningful scale and never touched prompt caching, you’ve been overpaying. Potentially by 90%. Not as a rounding error — as a structural tax on not understanding what’s hap Tags: Substack - [Fine-Tuning vs. RAG vs. Prompting: Stop Asking Which Is Best](https://blog.mspk.me/posts/fine-tuning-vs-rag-vs-prompting-stop) Summary: Every vendor selling fine tuning will tell you fine tuning is the answer. Every vendor selling a vector database will tell you RAG is the answer. Every API provider will tell you prompting is the answer. None of them are Tags: Substack - [Tokens Are Not Words: What Every Developer Building on LLMs Actually Needs to Know](https://blog.mspk.me/posts/tokens-are-not-words-what-every-developer) Summary: You’ve been paying for tokens since the day you made your first API call. You know the rough “4 characters per token” heuristic. You’ve probably hit a context limit at least once and scrambled to truncate your prompt. Bu Tags: Substack - [The React prop you use every day and completely misunderstand (Its key)](https://blog.mspk.me/posts/the-react-prop-you-use-every-day) Summary: There is a prop in React that every single developer uses, that shows up in almost every component that renders a list, that junior and senior devs alike type without thinking — and almost nobody actually understands wha Tags: Substack - [I built a marketplace of AI tools for 99 cents each. Then I waited for traffic that never came.](https://blog.mspk.me/posts/i-built-a-marketplace-of-ai-tools) Summary: Let me tell you about the moment the idea clicked. I needed to summarize a PDF. Nothing exotic — a long report, wanted the key points, didn’t want to read the whole thing. So I went looking for a tool. Found one. Clean U Tags: Substack - [You don’t need a component for that](https://blog.mspk.me/posts/you-dont-need-a-component-for-that) Summary: Somewhere along the way, React developers stopped writing HTML. Not literally — the JSX is still there, the tags are still there. But the instinct to reach for a plain