Frontend internals, written down
Challenges you actually build, JavaScript internals implemented from scratch, and long-form notes on how the browser really works.
// Function.prototype.call, by handFunction.prototype.myCall = function (ctx, ...args) { if (typeof this !== 'function') { throw new TypeError('not callable') } const key = Symbol('fn') const owner = ctx ?? globalThis owner[key] = this const result = owner[key](...args) delete owner[key] return result}Pick the track that matches what you are trying to get better at.
Implement the standard library by hand — polyfills, promises, currying, debounce. Each one covers the edge cases naive versions miss.
Interactive components built from scratch — carousels, modals, infinite scroll, nested comments — with a written walkthrough and a runnable demo.
Long-form notes on the browser rendering pipeline, the event loop, web security and performance — written to be read end to end.
Frontend architecture write-ups — how to structure a news feed, a chat app, a design system. In progress.
A good place to start if you are new here
Implement a Function.prototype.call polyfill from scratch. Master JavaScript this binding, execution context, primitive boxing, and safe property assignment techniques.
JavaScript · Functions · this
Pratik Rai ·
Implement a pub/sub EventEmitter class with on, off, emit, and once — the pattern behind Node's events module.
JavaScript · Design Patterns · Events
Pratik Rai ·
Create an interactive image carousel in React with smooth slide transitions, navigation arrows, dot indicators, autoplay, and touch/swipe support for mobile devices.
React · JavaScript
Pratik Rai ·
Build a dynamic Tic Tac Toe game in React with customizable grid sizes, win detection algorithms, player turn management, and game reset functionality. Great for interviews.
React · JavaScript
Pratik Rai ·
Frontend Dummies is a single-author site about the layer underneath the frameworks. Most material stops at the API surface — it tells you what Array.prototype.map does, but not what happens when you implement it yourself, or why the browser stalls when you get the critical rendering path wrong.
Everything here is organised around closing that gap. The challenges are components and utilities you build from scratch, each with a written explanation, the edge cases naive implementations miss, and a runnable demo. The articles are long-form notes on how the browser actually works — the rendering pipeline, the event loop, web security, performance.
It is written for developers preparing for interviews, and for anyone who has shipped React for a couple of years and wants to understand what is happening beneath it.
Written and maintained by Pratik Rai, a frontend engineer based in Gurgaon, India.
Long-form notes on how the browser actually works
The mental models and edge cases that separate someone who has used HTML, CSS, JS, forms, responsive design, and HTTP from someone who actually understands them. Part 1 of the Frontend Roadmap series.
Accessibility, state management, component design, media optimization, rendering strategies, fonts, testing, and deployment — the intermediate tier where most mid-level interviews actually live. Part 2 of the Frontend Roadmap series.
Build systems, security, offline-first patterns, internationalization, maintainable CSS, performance internals, and design systems — the advanced tier where senior-level depth is tested. Part 3 of the Frontend Roadmap series.
Local-first systems and CRDTs, monorepo tooling, server-driven UI, microfrontends, WebGL/WebGPU, WebAssembly, and browser internals — the expert tier where architecture and platform machinery meet. Part 4 of the Frontend Roadmap series.
Jump straight to the area you want to work on
Pick a polyfill and implement it from scratch. It takes twenty minutes, and it is the fastest way to find out whether you understand this, closures and the event loop — or merely recognise them.