A complete guide to acing frontend system design interviews — from the RADIO framework to real-world component designs asked at FAANG.
5 articles · View series →
A practical guide to sharing data and coordinating work across browser threads — tabs, workers, and shared memory.
3 articles · View series →
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.
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.
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.
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