Blog

Notes and guides on frontend engineering — performance, accessibility, TypeScript, and building multilingual interfaces.

Your progress48 / 54
Continue learning

Learning paths

Recent articles

9 min read

The UI Coding Round: Three Builds, Done Right

The frontend coding round decoded — the anatomy of a strong UI build answer (clarify, build behavior, handle loading/empty/error, add accessibility, narrate throughout), then three worked React builds interviewers love: a debounced accessible autocomplete with request cancellation, a keyboard-navigable tabs component following the ARIA pattern, and a sortable/filterable/paginated data table. With the edge cases and a11y that separate a pass from a strong pass.

InterviewFrontendJavaScript
10 min read

DSA Interview Patterns: The Ones That Actually Recur

A pattern-first cheatsheet for the algorithms round — two pointers, sliding window, hashing, binary search, BFS, DFS and backtracking, monotonic stack, top-K with a heap, intervals, and 1D dynamic programming. For each: the tell that signals it, a reusable JavaScript template, representative problems, and the complexity — so you recognize the pattern instead of memorizing hundreds of problems.

InterviewAlgorithmsData Structures
9 min read

The STAR Behavioral Interview Playbook

How to prepare for and win the behavioral interview — the STAR framework (Situation, Task, Action, Result) done properly, how to build a reusable bank of 8–12 stories that flex across any question, how to own the 'I' and end on the lesson, mapping stories to company values, and question-type playbooks for failure, conflict, ambiguity, leadership, and more — with the delivery rules and common mistakes that decide the round.

InterviewBehavioralCareer
11 min read

The Airbnb Front End Interview Process

A round-by-round map of Airbnb's front end engineering loop — recruiter screen, online assessment, UI coding, frontend system design, code review, and behavioral — with what each round actually tests, how to prepare, the focus topics, and the common mistakes. Coding is one round of six; this shows you where the other five points go and how to weight your prep across a 4–6 week runway.

InterviewFrontendCareer
8 min read

Frontend System Design Basics

A practical introduction to frontend system design for interviews and real work — a repeatable framework (requirements, high-level architecture, data model, API and data flow, deep dives, trade-offs), the core areas you're expected to reason about (rendering strategy, component and state architecture, data fetching and caching, performance, accessibility, real-time), and a worked example designing an autocomplete search — with common mistakes and exercises.

System DesignFrontendInterview
13 min read

Frontend Interview Questions: React, Next.js & the Fundamentals

A curated bank of frontend interview questions with strong, concise answers — JavaScript and the language, HTML/CSS and accessibility, the browser and the network, performance and Core Web Vitals, React (hooks, rendering, state), Next.js (Server Components, rendering, caching), and behavioral/design questions — each with a 'Show answer' you can self-test against, plus how to approach the interview itself.

InterviewReactNext.js
9 min read

Next.js in Production: Auth, Performance & Deployment

An expert guide to taking a Next.js App Router app to production with TypeScript — authentication done in layers (middleware, Data Access Layer, sessions with httpOnly cookies), environment variables and keeping secrets server-only, performance with next/image, next/font, dynamic imports and bundle analysis, error handling with error.tsx and not-found, and deployment on Vercel or self-hosted with standalone output — with common mistakes and exercises.

Next.jsTypeScriptProduction
8 min read

Next.js Advanced Routing, In Depth

An expert guide to the Next.js App Router's powerful routing features with TypeScript — route groups for organization and multiple root layouts, dynamic and catch-all segments with generateStaticParams, parallel routes with named slots, intercepting routes for modals, route handlers (route.ts) as API endpoints, middleware for auth and redirects, template vs layout, and metadata files — with common mistakes and exercises.

Next.jsTypeScriptRouting
10 min read

Next.js Mutations & Server Actions, In Depth

An expert guide to changing data in the Next.js App Router with Server Actions and TypeScript — what a Server Action is and how 'use server' works, form actions and progressive enhancement, useActionState for form state and validation errors, useFormStatus for pending UI, useOptimistic for optimistic updates, revalidating and redirecting after a mutation, binding extra arguments, calling actions outside forms, and the security rules that matter because actions are public endpoints — with common mistakes and exercises.

Next.jsTypeScriptServer Actions
10 min read

Next.js Rendering & Caching, In Depth

An expert guide to how the Next.js App Router renders and caches — static vs dynamic rendering and what triggers each, the four caching layers (Request Memoization, Data Cache, Full Route Cache, Router Cache), fetch caching in Next 15+ (uncached by default), time-based and on-demand revalidation with revalidateTag/revalidatePath, unstable_cache for non-fetch data, route segment config, streaming with Suspense and loading.tsx, and Partial Prerendering — with common mistakes and exercises.

Next.jsTypeScriptPerformance
11 min read

Next.js Basics: From Zero to Hero

A practical introduction to Next.js and the App Router with TypeScript — what a React framework adds on top of React, file-based routing with folders and page.tsx, layouts and nested routes, Server vs Client Components, fetching data on the server, rendering strategies (SSG/SSR/ISR), navigation with next/link and useRouter, special files (loading, error, not-found), the Metadata API for SEO, and a first look at Server Actions and next/image — with common mistakes and hands-on exercises.

ReactTypeScriptNext.js
10 min read

Data Fetching in React: From Zero to Hero

A practical guide to fetching data in React with TypeScript — the loading/error/success states every request has, fetching in useEffect with cleanup and AbortController, avoiding race conditions, typing responses, handling HTTP errors properly, extracting a useFetch hook, mutations and refetching, and why a library like TanStack Query exists (caching, dedup, revalidation) — with common mistakes and hands-on exercises.

ReactTypeScriptData Fetching
9 min read

React Routing with React Router: From Zero to Hero

A practical guide to client-side routing in React with React Router and TypeScript — what a SPA router does, setting up routes, Link and NavLink navigation, nested routes and layouts with Outlet, dynamic URL params with useParams, reading and setting query strings with useSearchParams, programmatic navigation with useNavigate, redirects and protected routes, 404 handling, and lazy-loading routes — with common mistakes and hands-on exercises.

ReactTypeScriptReact Router
14 min read

React State & Hooks: From Zero to Hero

A deep, practical guide to React hooks with TypeScript — the Rules of Hooks, useState in depth (lazy init, functional updates, state as a snapshot), useEffect and the dependency array (synchronizing with external systems, cleanup, and when you don't need an effect), useRef for values and DOM nodes, useMemo and useCallback, useContext for shared state, useReducer for complex state, building your own custom hooks, common mistakes, and hands-on exercises with solutions.

ReactTypeScriptHooks
11 min read

React Components & Props: Composition from Zero to Hero

A deep, practical guide to designing React components and typing their props with TypeScript — props as a read-only contract, typing props with type vs interface, optional values and defaults, children and React.ReactNode, composition patterns (wrappers, slots, specialized components), forwarding props to the DOM with rest and React.ComponentProps, discriminated-union props for variants, prop drilling and why composition beats configuration, common mistakes, and hands-on exercises with solutions.

ReactTypeScriptComponents
18 min read

React Fundamentals: From Zero to Hero

A complete, practical guide to the React mental model every frontend developer needs — why React exists, thinking declaratively (UI = f(state)), components and JSX, typed props with TypeScript and one-way data flow, rendering lists and keys, conditional rendering, handling events, state with useState, immutable updates, the re-render model, purity and composition, common mistakes, and hands-on exercises with solutions.

ReactTypeScriptFrontend
21 min read

JavaScript Coding Problems: The Classics, Solved & Explained

A practical drill of the JavaScript coding problems interviewers actually ask — reversing arrays and strings, implementing call/apply/bind, debounce and throttle, deep clone, memoize and curry, flatten, a Promise.all polyfill, and more. Every problem comes with how to think about it and a solution, plus the output-prediction gotchas interviewers love.

JavaScriptInterviewAlgorithms
8 min read

JavaScript Promises: Taming Asynchronous Code

A complete, practical guide to Promises — what they are and the three states, creating and consuming them, chaining with .then/.catch/.finally, the combinators (all, allSettled, race, any), error propagation, microtask timing, and the common mistakes — with hands-on exercises and solutions.

JavaScriptPromisesAsync
9 min read

CSS Transitions & Animations: Motion That Feels Right

A complete, practical guide to CSS motion — transitions and their four parts, what's animatable and what isn't, transform and why it's the performant property, easing and cubic-bezier, keyframe animations and all the animation-* properties, performance (compositor vs main thread), prefers-reduced-motion, plus common mistakes and hands-on exercises with solutions.

CSSAnimationsTransitions
6 min read

Regular Expressions in JavaScript: Pattern Matching Without Fear

A practical guide to regex in JavaScript — literal vs constructor syntax, character classes, quantifiers, anchors, groups and alternation, flags, the string methods (test, match, matchAll, replace, split), capture and named groups, lookahead/lookbehind, and common pitfalls — with hands-on exercises and solutions.

JavaScriptRegexStrings
6 min read

ES Modules & Modern Tooling: From Scripts to Apps

A practical guide to JavaScript modules and the build toolchain — named and default exports, import syntax, why modules have their own scope, static vs dynamic import, the module graph, npm and package.json, bundlers like Vite, and how a modern build works — with hands-on exercises and solutions.

JavaScriptModulesTooling
8 min read

CSS Typography & Web Fonts: Text That's a Pleasure to Read

A complete, practical guide to styling text on the web — the font stack and system fonts, @font-face and web fonts, font-display and loading performance, variable fonts, sizing with rem and fluid clamp(), line-height and measure, letter-spacing, text wrapping and truncation, text-wrap balance/pretty, vertical rhythm, accessibility, common mistakes, and hands-on exercises with solutions.

CSSTypographyWeb Fonts
6 min read

Error Handling & Debugging: Failing Gracefully and Finding Bugs Fast

A practical guide to handling errors and debugging in JavaScript — try/catch/finally, the Error object and custom error classes, throwing well, async error handling, global handlers, and a working DevTools debugging toolkit (breakpoints, the call stack, console methods, source maps) — with hands-on exercises and solutions.

JavaScriptErrorsDebugging
8 min read

Closures, Scope & this: The Mechanics Behind JavaScript

A deeper guide to JavaScript's execution model — lexical scope and the scope chain, hoisting and the temporal dead zone, closures and the patterns they enable (private state, factories, memoization), the four rules of this, call/apply/bind, and arrow functions — with hands-on exercises and solutions.

JavaScriptClosuresScope
7 min read

Functional JavaScript: Pure Functions, Immutability & Composition

A practical guide to functional programming in JavaScript — pure functions and side effects, immutability and how to update data without mutation, first-class and higher-order functions, map/filter/reduce, composition and currying, and why this style underpins React — with hands-on exercises and solutions.

JavaScriptFunctionalImmutability
6 min read

Browser Storage & State: localStorage, Cookies, IndexedDB & More

A practical guide to storing data in the browser — localStorage and sessionStorage, cookies and their flags, when to use each, IndexedDB for larger structured data, the Cache API, security and size limits, and patterns for persisting app state — with hands-on exercises and solutions.

JavaScriptStorageBrowser
13 min read

Git & GitHub: Version Control From Zero to Hero

A complete, practical guide to Git and GitHub — the three areas, staging and committing, inspecting history, branches and merge vs rebase, conflicts, undoing anything (amend/restore/reset/revert), stashing, interactive rebase, cherry-pick, tags, recovery with reflog and bisect, remotes and safe force-push, branching strategies, and the full GitHub workflow (reviews, draft PRs, protected branches, Actions) — with hands-on exercises and solutions.

GitGitHubTooling
12 min read

The DOM: From Zero to Hero

A complete, practical guide to the Document Object Model — what the DOM really is, selecting and traversing nodes, reading and changing content, attributes vs properties, classes and styles, creating/inserting/removing elements, the event model (bubbling, delegation, preventDefault), forms, performance (reflow/repaint, fragments, debouncing), common mistakes, and hands-on exercises with solutions.

JavaScriptDOMBrowser
7 min read

JavaScript Performance & Memory: Fast, Smooth, Leak-Free

A practical guide to making JavaScript fast — the single-threaded model and avoiding main-thread blocking, debounce and throttle, memoization, efficient DOM updates and batching, memory leaks and how they happen, garbage collection, WeakMap/WeakSet, and measuring with DevTools — with hands-on exercises and solutions.

JavaScriptPerformanceMemory
10 min read

Responsive Design & Media Queries: Building Interfaces That Fit Every Screen

A complete, practical guide to responsive design — the viewport meta tag, mobile-first media queries, min/max-width and ranges, breakpoints that follow content, fluid type with clamp(), responsive images, prefers-* feature queries, and container queries — with hands-on exercises.

CSSResponsiveMedia Queries
9 min read

Elementor V3 vs V4: What Changed and Why It Matters

A practical breakdown of Elementor's V4 Atomic Editor — Classes, Variables, the unified Style Tab, and the dramatically cleaner DOM — with a real before/after example and honest migration advice.

WordPressElementorPage Builders
7 min read

Prototypes, Classes & OOP in JavaScript

A practical guide to object-oriented JavaScript — the prototype chain and how property lookup works, constructor functions, the class syntax, methods and the prototype, inheritance with extends and super, static members, private #fields, getters/setters, and composition over inheritance — with hands-on exercises and solutions.

JavaScriptOOPClasses
10 min read

CSS Selectors, Specificity & the Cascade: Why Your Styles Win or Lose

The foundation under all of CSS — every selector type and combinator, pseudo-classes and pseudo-elements, how specificity is actually calculated, the cascade's full resolution order, inheritance, the inherit/initial/unset/revert keywords, escaping !important, and hands-on exercises with solutions.

CSSSelectorsSpecificity
11 min read

CSS Grid: Everything You Need to Lay Things Out in Two Dimensions

A complete, visual guide to CSS Grid — the grid container, tracks, fr units, repeat() and minmax(), template areas, line-based and area placement, auto-fit vs auto-fill, gap, alignment, implicit grids, and hands-on exercises with solutions.

CSSGridLayout
8 min read

CSS Color & Gradients: From Hex to oklch and Beyond

A complete, practical guide to color on the web — hex, rgb and hsl, the modern oklch space, alpha and transparency, currentColor, color-mix, linear/radial/conic gradients, color stops and hard stops, multiple backgrounds and background-clip, dark mode with prefers-color-scheme, contrast and accessibility, common mistakes, and hands-on exercises with solutions.

CSSColorGradients
9 min read

TypeScript, Advanced: Conditional & Mapped Types, infer, and the Type Toolkit

The type-level programming layer of TypeScript — conditional types and infer, mapped types with key remapping and modifiers, template literal types, recursive types, building your own utility types, declaration files and module augmentation, assertion functions and overloads, and bridging compile-time types to runtime validation — with hands-on exercises and solutions.

TypeScriptTypesAdvanced
7 min read

Iterators & Generators: Lazy Sequences in JavaScript

A practical guide to JavaScript's iteration protocol — what makes something iterable, the iterator protocol, for...of and the spread operator, writing generator functions with function* and yield, lazy and infinite sequences, generator delegation, and async iterators — with hands-on exercises and solutions.

JavaScriptIteratorsGenerators
8 min read

CSS Positioning & Stacking: static, relative, absolute, fixed, sticky, and z-index

A complete, practical guide to CSS positioning — the position values and how each one moves an element, the offset properties, containing blocks, sticky positioning, z-index and stacking contexts (and why z-index sometimes does nothing), plus common mistakes and hands-on exercises with solutions.

CSSPositioningLayout
9 min read

TypeScript, Intermediate: Unions, Guards, Generics & Utility Types

The next layer of TypeScript — discriminated unions, custom type guards and exhaustiveness with never, generic constraints and defaults, keyof and indexed-access types, typeof and as const, the built-in utility types, satisfies, enums vs literal unions, and classes — with hands-on exercises and solutions.

TypeScriptTypesGenerics
7 min read

HTML Forms: Collecting Input the Right Way

A complete, practical guide to web forms — the form element and submission, input types, labels and accessibility, the name attribute, HTML5 validation, the Constraint Validation API, handling submit in JavaScript with FormData, select/textarea/fieldset, and common mistakes — with hands-on exercises and solutions.

HTMLFormsAccessibility
17 min read

Flexbox: Everything You Need to Lay Things Out in One Dimension

A complete, visual guide to CSS Flexbox — the two axes, flex-direction, wrapping, justify-content, align-items, gap, grow/shrink/basis, the flex shorthand, auto margins, the min-width:0 gotcha, RTL behaviour, and hands-on exercises with solutions.

CSSFlexboxLayout
7 min read

Async/Await: Asynchronous Code That Reads Like Synchronous

A complete, practical guide to async/await — how it builds on promises, the await keyword, error handling with try/catch, running tasks in parallel vs sequence, async functions always returning promises, top-level await, loops and async, and the common mistakes — with hands-on exercises and solutions.

JavaScriptAsyncPromises
7 min read

TypeScript: A Practical Introduction for JavaScript Developers

A practical guide to TypeScript — why static types matter, basic and inferred types, interfaces and type aliases, unions and literals, generics, optional and readonly, narrowing, typing functions and async, and how it integrates into a real project — with hands-on exercises and solutions.

TypeScriptJavaScriptTypes
7 min read

Fetch & HTTP: Talking to APIs from the Browser

A complete, practical guide to HTTP and the Fetch API — the request/response model, methods and status codes, headers, fetch with GET and POST, sending and parsing JSON, why fetch doesn't reject on 404, error handling, AbortController and timeouts, CORS, and the common mistakes — with hands-on exercises and solutions.

JavaScriptHTTPFetch
17 min read

JavaScript Fundamentals: From Zero to Hero

A complete, practical guide to the JavaScript every developer needs — how it runs, variables and scope, types and coercion, functions and closures, this, objects and arrays, destructuring, the event loop, promises and async/await, modules, the DOM, error handling, common mistakes, and hands-on exercises with solutions.

JavaScriptFundamentalsProgramming
10 min read

The CSS Box Model: Everything That Actually Matters

A complete, visual guide to the CSS box model — content, padding, border, margin, box-sizing, margin collapsing, logical properties, and the gotchas that bite in real layouts.

CSSBox ModelLayout
7 min read

Testing JavaScript: Confidence Through Automated Tests

A practical guide to testing JavaScript — why tests matter, unit vs integration vs end-to-end, the arrange-act-assert structure, writing tests with Vitest, assertions and matchers, mocking, testing async code, what to test (and what not to), and test-driven development — with hands-on exercises and solutions.

JavaScriptTestingVitest
10 min read

Modern CSS: The Features That Changed How We Write Styles

A tour of the modern CSS features now shipping in browsers — container queries, :has(), nesting, cascade layers, subgrid, custom properties, color-mix() and modern color, logical properties, clamp(), aspect-ratio, scroll-driven animations, view transitions, and :is()/:where() — with hands-on exercises.

CSSModern CSSFrontend