JavaScriptBit

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 to use the structuredClone() API for deep copying JavaScript objects. Covers supported types, limitations, real-world patterns, and why JSON.parse/stringify falls short.

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.

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.

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.

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.

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.

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 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.

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.

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