JavaScriptBit

Learn how to use JavaScript MutationObserver to detect DOM changes, observe attribute modifications, track child list mutations, and build reactive UI patterns. Practical examples with real-world use cases including testing, analytics, and ad blocking detection.

Practical React performance optimization techniques for production apps. Learn when to use React.memo, useMemo, useCallback, code splitting with React.lazy, list virtualization, and how to profile components with the React Profiler API.

A complete frontend system design answer for building a data table component. Covers the RADIO framework, column configuration, sorting, filtering, pagination, virtual scrolling, keyboard navigation, accessibility, and performance optimisation for large datasets.

Learn how to design a file uploader for frontend interviews. Covers chunked uploads, drag-and-drop, progress tracking, retry logic, file validation, and the RADIO framework — asked at Google, Meta, and Stripe.

Practical patterns for handling errors in JavaScript — sync and async code, custom error classes, retry logic, and the error boundary pattern. Covers try/catch gotchas, unhandled rejection tracking, and when each pattern actually makes sense.

A practical guide to JavaScript debounce and throttle functions. Learn when to use each one with real code examples for search inputs, scroll handlers, resize observers, and button clicks.

Learn how to use JavaScript AbortController to cancel fetch requests, prevent race conditions in search inputs, clean up React useEffect, and abort multiple requests at once. Practical examples with real-world patterns.

Learn the differences between Promise.all, Promise.allSettled, Promise.race, and Promise.any. Understand when to use each Promise combinator with real-world examples for parallel API calls, timeouts, and fallback strategies.

Learn when to use requestAnimationFrame for smooth animations and requestIdleCallback for non-critical background work. Includes real code examples, performance tips, and a comparison table for frontend developers.

ResizeObserver lets you track size changes on any element without polling window.innerWidth or mutation observers. Learn how it works, when to use it, and the patterns used by React, Vue, and chart libraries to build truly responsive components.

A comprehensive guide to JavaScript Map, Set, WeakMap, and WeakSet. Learn when to use each data structure, performance optimization techniques, and real-world interview examples. O(1) lookups vs O(n) searches - master the data structures that separate junior from senior developers.

Learn how the Intersection Observer API replaces expensive scroll event listeners for lazy loading images, infinite scroll, and scroll-triggered animations. Covers options, threshold, rootMargin, and Core Web Vitals impact with practical code examples.

Learn how Service Workers enable offline-first web apps. Covers the install-activate-fetch lifecycle, caching strategies like cache-first and stale-while-revalidate, and debugging techniques with real code examples.

Learn how to use the structuredClone() API for deep copying JavaScript objects. Covers supported types, limitations, real-world patterns, and why JSON.parse/stringify falls short.

A comprehensive guide to WebSockets in JavaScript covering the connection lifecycle, the ws library, reconnection strategies, heartbeat/ping-pong, binary data, and when to choose WebSockets over SSE or HTTP polling.

A credit card statement reveals more about you than you'd think. I built a free web tool to redact everything except the transactions you actually want to share.

Measuring multiline text height in JavaScript has always been a hack. Pretext changes that — using canvas measureText and pure arithmetic to give you exact heights and line counts without touching the DOM. Learn how it works and when to use it.

CSS masonry layout still lacks browser support. The classic JavaScript approach — measuring offsetHeight in a loop — causes expensive DOM reflow. This tutorial shows you how to build a performant masonry grid using pretext, which computes exact card heights without touching the DOM.

An orphan — a single word stranded on the last line of a paragraph — is a classic typography problem. CSS orphans only works in print. text-wrap: balance helps but has limits. This guide shows how to detect and fix screen orphans programmatically using JavaScript and pretext's walkLineRanges API.

SharedArrayBuffer lets multiple Web Workers read and write the same memory simultaneously. Atomics makes that safe by preventing race conditions. Learn how they work, when to use them, and how to enable them with COOP/COEP headers.

JavaScript tooltip overflow and viewport clipping is one of the most common UI bugs. The root cause: we don't know tooltip dimensions until after it renders. Pretext lets you measure tooltip content height and width before DOM insertion — eliminating the flicker and positioning bugs entirely.

A complete frontend system design answer for designing an image carousel component. Covers architecture, CSS layout with scroll snapping, lazy loading, image preloading, touch/swipe support, autoplay, keyboard navigation, and ARIA accessibility.

A complete frontend system design answer for designing a news feed like Facebook or Twitter. Covers architecture, infinite scroll, real-time updates, optimistic UI, virtualization, and accessibility.

Learn the RADIO framework — Requirements, Architecture, Data Model, Interface, Optimizations — the structured method for frontend system design interviews at FAANG and top tech companies.

A complete frontend system design answer for the autocomplete / typeahead question. Covers requirements, component architecture, API design, debouncing, caching, keyboard navigation, and ARIA accessibility.

A complete frontend system design answer for designing a chat application like Messenger or Slack. Covers real-time messaging with WebSockets, IndexedDB for offline support, message delivery states, optimistic UI, and cross-tab sync.

The BroadcastChannel API lets you send messages between browser tabs, windows, and iframes on the same origin. Learn how it works, when to use it, and how it compares to postMessage.

Transferable Objects let you move ArrayBuffers, ImageBitmaps, and other large data between Web Workers and windows without copying. Learn how they work and when to use them with postMessage and BroadcastChannel.

Was it easier to use ChatGPT 4?

How to listen to keyboard shortcuts and execute functions in JavaScript

Use Gatsby plugins to turn any gatsby app into a PWA

How to transfer data between main window, iframe, windows and even between different domains. Channel Messaging API Usage examples.

How to transfer data between main window, iframe, windows and even between different domains. PostMessage API Usage examples.

How to transfer data between main window, iframe, windows and even between different domains. PostMessage API Usage examples.

List of things that help in becoming a really good at Frontend.

Implement Design Thinking in your problem-solving methodology

Implement Design Thinking in your problem-solving methodology

Fix issues by finding with yarn audit

The Event Loop - a simpler explanation

Advanced React Patterns - How to use Prop Getters & Render Props

Build yuour own blog using Gatsby and deploy it using Netlify

How to use Static Components with React - one of the lesser known design patterns with React

Solution approach to the Min steps in Infinite Grid algorithm in JavaScript

Significance of the meta viewport tag in HTML andd why your responsive website needs it

How to solve the N/A version "N/A -> N/A" is not yet installed issue. Run nvm install node and nvm alias default node

Housing.com interview questions for Frontend and experience

Frontend interview questions and experience questions at travel portal Cleartrip.com

Interview tips for Frontend/User Interface developers

Commonly asked JavaScript questions to help you in your Front-End developer interview