Frontend Development

What is the DOM?

The DOM (Document Object Model) is a tree-structured, in-memory representation of an HTML or XML document that browsers build from parsed markup, letting JavaS…

What is Progressive Enhancement?

Progressive enhancement is a design strategy that starts with a basic, functional HTML experience for every user and browser, then layers on CSS and JavaScript…

What Are the Rules of Hooks and Why Do They Exist?

The Rules of Hooks state that hooks must only be called at the top level of a React function component or custom hook, never inside loops, conditions, or neste…

useEffect vs useLayoutEffect: What Is the Difference?

useEffect runs its callback asynchronously after the browser has painted the updated DOM to the screen, while useLayoutEffect runs synchronously after DOM muta…

useMemo vs useCallback: What Is the Difference?

useMemo memoizes the returned value of an expensive computation so it is only recalculated when its dependencies change, while useCallback memoizes the functio…

Context API vs Redux: When Should You Use Each?

React’s Context API is a built-in mechanism for passing data through the component tree without manual prop drilling, best suited for relatively static or infr…

Controlled vs Uncontrolled Components: What Is the Difference?

A controlled component has its form value driven entirely by React state, with every keystroke updating state via onChange and the state value fed back into th…

How Does the Geolocation API Work in the Browser?

The Geolocation API is a browser-provided interface that asks the user for permission and then returns the device coordinates, either once via getCurrentPositi…

What Is the Web Animations API and How Does It Compare to CSS Animations?

The Web Animations API (WAAPI) is a JavaScript interface, exposed via element.animate(), that lets you define and control keyframe animations programmatically…

Canvas vs SVG: When Should You Use Each for Web Graphics?

Canvas is an immediate-mode, pixel-based bitmap you draw onto imperatively with JavaScript and which forgets every shape once drawn, while SVG is a retained-mo…

What Is the Web Audio API and How Does the Audio Graph Work?

The Web Audio API is a browser interface for processing and synthesizing audio through a modular graph of AudioNode objects — sources, effects, and destination…