Hello Frontend

Architecture Studio · Concepts

Conceptual Questions

Build the mental models behind frontend decisions: browser engines, runtime behavior, Web APIs, rendering, and modern UI architecture.

0%
0 / 244 solvedYour learning progress
Suggested next questionAbortController — cancelling async work the right way

Question index

244 questions
AbortController — cancelling async work the right wayMediumReact EcosystemAdding, removing, and mutating DOM elements in vanilla JSMediumReact EcosystemWhat AJAX actually means todayMediumReact EcosystemAnonymous functions — what they are and where they shineMediumJavaScriptaria-label, aria-labelledby, and aria-live in practiceMediumAccessibilityWhy array indices make bad React keysMediumReact Ecosystemasync/await — syntactic sugar over promisesHardJavaScriptHow to test asynchronous code without flaky testsMediumReact EcosystemWhat are common async data loading patterns in React?EasyReact EcosystemWhat is the difference between async and defer in JavaScript?MediumJavaScriptAttribute vs property in the DOMMediumJavaScriptWhat is the Beacon API?MediumWeb PerformanceWhat are the benefits of using hooks in React?EasyReact EcosystemWhat is a Block Formatting Context?HardCSS MasteryWhat does box-sizing: border-box mean?MediumCSS MasteryHow does the box model work in CSS?MediumCSS MasteryWhat is the purpose of break and continue?EasyJavaScriptHow do you handle browser-specific styling issues?MediumCSS MasteryHow does caching improve performance?MediumReact EcosystemWhat is the difference between call( ) and apply( )?MediumJavaScriptWhat is the difference between call( ) and bind( )?MediumJavaScriptWhat are callback functions?EasyJavaScriptExplain few methods to center elements in webpages?MediumCSS MasteryHow do you check the data type of a variable?MediumJavaScriptHow do you reliably check if an object is empty?MediumJavaScriptHow do you check if an object has a property?MediumJavaScriptWhat is a static method in a class?EasyJavaScriptClassical vs prototypal inheritanceEasyJavaScriptWhat are CSS clearing techniques?MediumCSS MasteryWhat is clickjacking and how do you prevent it?MediumWeb SecurityWhat is the difference between Client side rendering and Server side rendering?MediumReact EcosystemUsing closures for private variablesEasyJavaScriptWhat is code coverage?HardJavaScriptHow do you organize code in a JavaScript project?EasyReact EcosystemWhat is Code Splitting?MediumReact EcosystemWhat is the command pattern?EasyJavaScriptWhat are common data fetching pitfalls in React?HardReact EcosystemCommon 'this' pitfallsMediumJavaScriptCommonJS vs ES ModulesMediumJavaScriptWhat are the pros and cons of compiling to JavaScript?HardJavaScriptExplain the composition pattern in ReactEasyReact EcosystemWhat is the Constraint Validation API?MediumJavaScriptWhat is content security policy (CSP)?MediumWeb SecurityWhat is the difference between controlled and uncontrolled components in React?EasyReact EcosystemWhat is Cross-Origin Resource Sharing (CORS)?EasyWeb SecurityWhat is Cross-Site Scripting (XSS)?MediumReact EcosystemWhat is CSRF?EasyWeb SecurityWhat is the CSS display property and what are examples of its use?MediumReact EcosystemWhat CSS frameworks have you used?HardReact EcosystemHow do you use CSS Grid?MediumCSS MasteryWhere should CSS links and JS scripts be placed in HTML?MediumCSS MasteryHow does positioning work in CSS?MediumCSS MasteryWhat are the pros and cons of CSS preprocessors?HardCSS MasteryWhat do you like and dislike about CSS preprocessors?HardCSS MasteryWhat is CSS selector specificity and how does it work?HardCSS MasteryWhat are CSS sprites?MediumCSS MasteryWhat is currying in JavaScript?EasyJavaScriptWhat is the difference between currying and partial application?MediumJavaScriptWhat is dangerouslySetInnerHTML and why is it dangerous?MediumReact EcosystemWhat are data attributes in HTML?EasyReact EcosystemWhat data structure is used to represent the DOM?EasyJavaScriptWhat is the difference between debouncing and throttling?EasyReact EcosystemHow do you debug React applications?MediumReact EcosystemWhat is the decorator pattern?EasyReact EcosystemWhat are default parameters?MediumJavaScriptdefault vs named exportMediumReact EcosystemWhat are design patterns?MediumReact EcosystemWhat is destructuring assignment?MediumReact EcosystemHow do you detect if JavaScript is disabled?EasyCSS MasteryWhat is difference between a map object and a plain object in JavaScript?MediumWeb PerformanceGlobal Scope, Function Scope, and Block ScopeHardReact EcosystemWhat is doctype in HTML in start of HTML file?MediumJavaScriptWhy is document.write() considered bad practice?HardJavaScriptHow do you optimize DOM manipulation?MediumReact EcosystemWhat is the DOM structure?EasyJavaScriptWhat is the difference between dot notation and bracket notation?EasyJavaScriptWhat is the difference between == and === in JavaScript?MediumJavaScriptWhat are common CSS efficiency gotchas?EasyCSS MasteryWhat are error boundaries in React?EasyReact EcosystemError handling with try...catchHardJavaScriptHow does error propagation work in JavaScript?MediumJavaScriptHow do you handle errors in asynchronous operations?MediumReact EcosystemWhat are ES2015 classes and how do they differ from ES5 function constructors?HardJavaScriptDescribe event capturing in JavaScriptMediumReact EcosystemWhat is event delegation in JavaScript?MediumWeb PerformanceWhat is the event loop in JavaScript?MediumJavaScriptWhat is the factory pattern?EasyJavaScriptWhat is feature detection?EasyCSS MasteryWhat is the difference between Flexbox and Grid?HardCSS MasteryHow do floats work in CSS?MediumCSS MasteryWhat is the Flux pattern?EasyReact EcosystemWhat is forwardRef() in React?HardReact EcosystemWhy are functions first-class objects?MediumJavaScriptGarbage CollectionMediumWeb PerformanceHow do you get query string values in JavaScript?MediumJavaScriptWhat is a higher order function?MediumJavaScriptHoisting pitfalls and how to avoid themMediumJavaScriptHow do you create a constructor function?EasyJavaScriptHow to improve website performance?MediumCSS MasteryHow to prevent the UI from blocking during a long running task?MediumJavaScriptHow would you style an SVG?EasyCSS MasteryWhat are the building blocks of HTML5?MediumJavaScriptWhat are the HTTP methods?MediumReact EcosystemHow do iframes communicate with the parent page?MediumWeb SecurityHow would you handle image failures in production?MediumJavaScriptHow would you implement dark mode and light mode?EasyReact EcosystemHow do you import and export modules?MediumJavaScriptWhat is the difference between inline, inline-block, and block in CSS?MediumCSS MasteryinnerHTML vs textContentMediumWeb SecurityWhat is Inversion of Control?MediumJavaScriptWhat are the different ways to iterate over arrays?MediumJavaScriptHow do you iterate over object properties?MediumJavaScriptWhat are iterators and generators in JavaScript?EasyJavaScriptJavaScript data typesEasyJavaScriptWhat are JavaScript modules?HardReact EcosystemWhat is JSONP?MediumWeb SecurityWhat is JSX and how does it work?MediumReact EcosystemWhat is the Key Prop in React?EasyReact EcosystemHow does lazy loading improve performance?EasyReact EcosystemCan we pass function to initial state? What is difference between passing value and passing function?EasyReact EcosystemHow do you identify performance bottlenecks?MediumReact EcosystemWhat tools do you use to measure performance?MediumReact EcosystemExplain the presentational vs container component patternEasyReact EcosystemWhat is difference between preventDefault() and stopPropagation()?MediumReact EcosystemWhat are primitive values and reference values in JavaScript?MediumJavaScriptWhat is progressive rendering?MediumReact EcosystemWhat are Progressive Web Apps?MediumCSS MasteryPromises vs callbacksEasyJavaScriptWhat is prototypal inheritance?EasyJavaScriptHow does the prototype chain work?MediumJavaScriptWhat is the prototype pattern?EasyJavaScriptWhat are Proxies in JavaScript?MediumJavaScriptWhat are pseudo-elements in CSS?MediumCSS MasteryquerySelector vs getElementByIdHardReact EcosystemHow does re-rendering work in React?HardReact EcosystemWhat are some common React anti-patterns?EasyReact EcosystemWhat are the common pitfalls of React context?HardReact EcosystemWhat is React Fiber?MediumReact EcosystemWhat are React Fragments used for?EasyReact EcosystemWhat is React hydration?HardReact EcosystemWhat is the difference between React Node, React Element, and React Component?MediumReact EcosystemWhat are React Portals?MediumReact EcosystemHow do you decide between React state, context, and external state managers?EasyReact EcosystemWhat is React strict mode?MediumReact EcosystemWhat is React Suspense?MediumReact EcosystemWhat is recursion in JavaScript?EasyWeb PerformanceHow do you redirect to a new page in JavaScript?EasyReact EcosystemReference vs Syntax ErrorMediumJavaScriptWhat are reflows and repaints?HardCSS MasteryWhat are render props in React?EasyReact EcosystemHow do you reset a component state in React?HardReact EcosystemWhat is the difference between Reset and Normalize CSS?MediumCSS MasteryWhat is the difference between responsive and adaptive design?MediumCSS MasteryRest parameters in JavaScriptMediumReact EcosystemHow do you serve retina graphics?EasyCSS MasteryWhat are the rules of React hooks?EasyReact EcosystemWhat is the same-origin policy?MediumWeb SecurityScoping GenericsMediumJavaScriptHow do you implement secure authentication and authorization?MediumWeb SecurityWhat are security headers?MediumWeb SecurityWhat tools help find security vulnerabilities?EasyWeb SecurityWhat is semantic HTML and why does it matter for accessibility?MediumCSS MasteryWhat are best practices for handling sensitive data?MediumWeb SecurityWhat are server-sent events?EasyJavaScriptHow does server-side rendering work in React?HardReact EcosystemHow do you serve pages for feature-constrained browsers?MediumCSS MasteryHow do you serve content in multiple languages?MediumJavaScriptsessionStorage vs localStorage vs cookiesMediumJavaScriptHow do you convert a Set to an Array?MediumJavaScriptWhy use the callback format of setState?MediumReact EcosystemShallow copy vs deep copyEasyReact EcosystemHow do SPAs affect SEO?MediumReact EcosystemSpread operator in JavaScriptMediumReact EcosystemWhat is SQL injection and how do you prevent it?EasyWeb SecurityWhat is the srcset attribute?MediumJavaScriptstate vs props in ReactMediumReact EcosystemWhat is static generation?MediumReact EcosystemWhat is difference between stopPropagation() and stopImmediatePropagation()?HardJavaScriptWhat is the strategy pattern?HardReact EcosystemHow do you convert a string to a number in JavaScript?MediumJavaScriptWhat is the purpose of the switch statement?EasyJavaScriptWhat is a symbol type?MediumJavaScriptWhat is difference between sync and async function?MediumJavaScriptCan callbacks be synchronous?MediumJavaScriptWhat are tagged templates in JavaScript?HardReact EcosystemWhat are template literals?MediumJavaScriptWhat is the ternary operator?EasyReact EcosystemWhat is Test Driven Development?HardJavaScriptHow do you test React applications?MediumReact EcosystemWhat testing tools do you use?MediumReact EcosystemDifferent ways to bind 'this' in JavaScriptMediumReact Ecosystem'this' binding in event handlersMediumReact EcosystemHow does the this keyword work in JavaScript?MediumJavaScriptComparing CSS translate() and absolute positioning: When to use each?EasyCSS MasteryWhat is tree shaking?MediumWeb PerformanceHow to truncate text using CSS onlyMediumCSS MasteryWhat does typeof operator do?MediumJavaScriptWhat are the different types of errors in JavaScript?MediumJavaScriptUnit vs integration vs end-to-end testingEasyReact EcosystemWhat is the difference between useEffect and useLayoutEffect?MediumReact EcosystemWhat is 'use strict' in JavaScript?MediumReact EcosystemWhat is the useCallback hook in React?MediumReact EcosystemHow does the useEffect dependency array work?MediumReact EcosystemWhat is the useId hook in React?EasyReact EcosystemWhat is the useMemo hook in React?EasyReact EcosystemWhat is the useReducer hook in React?EasyReact EcosystemWhat is the useRef hook in React?EasyReact EcosystemWhat happens when the useState setter function is called in React?MediumReact EcosystemWhat are the key differences between var, let, and const in JavaScript?EasyJavaScriptWhat is the Virtual DOM in React?HardReact EcosystemHow do you visually hide content but keep it accessible to screen readers?MediumCSS MasteryWhat are the different ways to create objects in JavaScript?EasyJavaScriptWhat are Web Vitals?MediumWeb PerformanceWhat does preventDefault() do?MediumJavaScriptWhat happens when you type a URL into a browser and hit enter?MediumCSS MasteryWhat is a closure in JavaScript?MediumReact EcosystemWhat is AB Testing?MediumJavaScriptWhat is an arrow function?MediumJavaScriptWhat is array destructuring?HardJavaScriptWhat is an async thunk?EasyJavaScriptWhat is callback hell?HardJavaScriptWhat is cookie?MediumWeb SecurityWhat is hoisting in JavaScript?HardJavaScriptWhat is Immutability?MediumJavaScriptWhat is object destructuring?MediumReact EcosystemWhat is Responsive Design?MediumCSS MasteryWhat is singleton pattern?MediumJavaScriptWhat is Temporal Dead Zone (TDZ) in JavaScript?MediumJavaScriptWhat is a thunk?MediumJavaScriptWhere Do We Use Observer Pattern in Frontend Development?EasyReact EcosystemWhy do we use polyfills?MediumJavaScriptWhy is input validation important?MediumWeb SecurityWhy does React recommend against mutating state?HardReact EcosystemHow does the window.history API work?MediumReact EcosystemWindow object vs Document objectEasyJavaScriptWhat are workers in JavaScript?HardJavaScriptHow do you write good unit tests?EasyReact EcosystemWhat is the difference between XMLHttpRequest and fetch?EasyJavaScriptHow do z-index and stacking contexts work?HardCSS MasteryStreaming protocols compared: SSE vs WebSockets vs HTTP/2 Push vs chunked transferEasyFrontend AIAbortController and how it composes with fetch + ReadableStreamMediumFrontend AITextDecoder({ stream: true }): why UTF-8 boundaries break naïve streamingMediumFrontend AIFrom token generation to character render: the full streaming pipelineMediumFrontend AIRAG: where does the frontend's responsibility start and end?MediumFrontend AI

Mark a question complete from its reader. Filter by domain to make focused review sessions.