hello.frontend

Concepts

Master fundamental frontend architectural patterns and mental models.

0/302Solved

React Ecosystem

AbortController — cancelling async work the right way
medium
Adding, removing, and mutating DOM elements in vanilla JS
medium
What AJAX actually means today
medium
Why array indices make bad React keys
medium
How to test asynchronous code without flaky tests
medium
What are common async data loading patterns in React?
easy
What are the benefits of using hooks in React?
easy
How does caching improve performance?
medium
What is the difference between Client side rendering and Server side rendering?
medium
How do you organize code in a JavaScript project?
easy
What is Code Splitting?
medium
What are common data fetching pitfalls in React?
hard
Explain the composition pattern in React
easy
What is the difference between controlled and uncontrolled components in React?
easy
What is Cross-Site Scripting (XSS)?
medium
What is the CSS display property and what are examples of its use?
medium
What CSS frameworks have you used?
hard
What is dangerouslySetInnerHTML and why is it dangerous?
medium
What are data attributes in HTML?
easy
What is the difference between debouncing and throttling?
easy
How do you debug React applications?
medium
What is the decorator pattern?
easy
default vs named export
medium
What are design patterns?
medium
What is destructuring assignment?
medium
Global Scope, Function Scope, and Block Scope
hard
How do you optimize DOM manipulation?
medium
What are error boundaries in React?
easy
How do you handle errors in asynchronous operations?
medium
Describe event capturing in JavaScript
medium
What is the Flux pattern?
easy
What is forwardRef() in React?
hard
What are the HTTP methods?
medium
How would you implement dark mode and light mode?
easy
What are JavaScript modules?
hard
What is JSX and how does it work?
medium
What is the Key Prop in React?
easy
How does lazy loading improve performance?
easy
Can we pass function to initial state? What is difference between passing value and passing function?
easy
How do you identify performance bottlenecks?
medium
What tools do you use to measure performance?
medium
Explain the presentational vs container component pattern
easy
What is difference between preventDefault() and stopPropagation()?
medium
What is progressive rendering?
medium
querySelector vs getElementById
hard
How does re-rendering work in React?
hard
What are some common React anti-patterns?
easy
What are the common pitfalls of React context?
hard
What is React Fiber?
medium
What are React Fragments used for?
easy
What is React hydration?
hard
What is the difference between React Node, React Element, and React Component?
medium
What are React Portals?
medium
How do you decide between React state, context, and external state managers?
easy
What is React strict mode?
medium
What is React Suspense?
medium
How do you redirect to a new page in JavaScript?
easy
What are render props in React?
easy
How do you reset a component state in React?
hard
Rest parameters in JavaScript
medium
What are the rules of React hooks?
easy
How does server-side rendering work in React?
hard
Why use the callback format of setState?
medium
Shallow copy vs deep copy
easy
How do SPAs affect SEO?
medium
Spread operator in JavaScript
medium
state vs props in React
medium
What is static generation?
medium
What is the strategy pattern?
hard
What are tagged templates in JavaScript?
hard
What is the ternary operator?
easy
How do you test React applications?
medium
What testing tools do you use?
medium
Different ways to bind 'this' in JavaScript
medium
'this' binding in event handlers
medium
Unit vs integration vs end-to-end testing
easy
What is the difference between useEffect and useLayoutEffect?
medium
What is 'use strict' in JavaScript?
medium
What is the useCallback hook in React?
medium
How does the useEffect dependency array work?
medium
What is the useId hook in React?
easy
What is the useMemo hook in React?
easy
What is the useReducer hook in React?
easy
What is the useRef hook in React?
easy
What happens when the useState setter function is called in React?
medium
What is the Virtual DOM in React?
hard
What is a closure in JavaScript?
medium
What is object destructuring?
medium
Where Do We Use Observer Pattern in Frontend Development?
easy
Why does React recommend against mutating state?
hard
How does the window.history API work?
medium
How do you write good unit tests?
easy

JavaScript

Anonymous functions — what they are and where they shine
medium
async/await — syntactic sugar over promises
hard
What is the difference between async and defer in JavaScript?
medium
Attribute vs property in the DOM
medium
What is the purpose of break and continue?
easy
What is the difference between call( ) and apply( )?
medium
What is the difference between call( ) and bind( )?
medium
What are callback functions?
easy
How do you check the data type of a variable?
medium
How do you reliably check if an object is empty?
medium
How do you check if an object has a property?
medium
What is a static method in a class?
easy
Classical vs prototypal inheritance
easy
Using closures for private variables
easy
What is code coverage?
hard
What is the command pattern?
easy
Common 'this' pitfalls
medium
CommonJS vs ES Modules
medium
What are the pros and cons of compiling to JavaScript?
hard
What is the Constraint Validation API?
medium
What is currying in JavaScript?
easy
What is the difference between currying and partial application?
medium
What data structure is used to represent the DOM?
easy
What are default parameters?
medium
What is doctype in HTML in start of HTML file?
medium
Why is document.write() considered bad practice?
hard
What is the DOM structure?
easy
What is the difference between dot notation and bracket notation?
easy
What is the difference between == and === in JavaScript?
medium
Error handling with try...catch
hard
How does error propagation work in JavaScript?
medium
What are ES2015 classes and how do they differ from ES5 function constructors?
hard
What is the event loop in JavaScript?
medium
What is the factory pattern?
easy
Why are functions first-class objects?
medium
How do you get query string values in JavaScript?
medium
What is a higher order function?
medium
Hoisting pitfalls and how to avoid them
medium
How do you create a constructor function?
easy
How to prevent the UI from blocking during a long running task?
medium
What are the building blocks of HTML5?
medium
How would you handle image failures in production?
medium
How do you import and export modules?
medium
What is Inversion of Control?
medium
What are the different ways to iterate over arrays?
medium
How do you iterate over object properties?
medium
What are iterators and generators in JavaScript?
easy
JavaScript data types
easy
What are primitive values and reference values in JavaScript?
medium
Promises vs callbacks
easy
What is prototypal inheritance?
easy
How does the prototype chain work?
medium
What is the prototype pattern?
easy
What are Proxies in JavaScript?
medium
Reference vs Syntax Error
medium
Scoping Generics
medium
What are server-sent events?
easy
How do you serve content in multiple languages?
medium
sessionStorage vs localStorage vs cookies
medium
How do you convert a Set to an Array?
medium
What is the srcset attribute?
medium
What is difference between stopPropagation() and stopImmediatePropagation()?
hard
How do you convert a string to a number in JavaScript?
medium
What is the purpose of the switch statement?
easy
What is a symbol type?
medium
What is difference between sync and async function?
medium
Can callbacks be synchronous?
medium
What are template literals?
medium
What is Test Driven Development?
hard
How does the this keyword work in JavaScript?
medium
What does typeof operator do?
medium
What are the different types of errors in JavaScript?
medium
What are the key differences between var, let, and const in JavaScript?
easy
What are the different ways to create objects in JavaScript?
easy
What does preventDefault() do?
medium
What is AB Testing?
medium
What is an arrow function?
medium
What is array destructuring?
hard
What is an async thunk?
easy
What is callback hell?
hard
What is hoisting in JavaScript?
hard
What is Immutability?
medium
What is singleton pattern?
medium
What is Temporal Dead Zone (TDZ) in JavaScript?
medium
What is a thunk?
medium
Why do we use polyfills?
medium
Window object vs Document object
easy
What are workers in JavaScript?
hard
What is the difference between XMLHttpRequest and fetch?
easy

CSS Mastery

What is a Block Formatting Context?
hard
What does box-sizing: border-box mean?
medium
How does the box model work in CSS?
medium
How do you handle browser-specific styling issues?
medium
Explain few methods to center elements in webpages?
medium
What are CSS clearing techniques?
medium
How do you use CSS Grid?
medium
Where should CSS links and JS scripts be placed in HTML?
medium
How does positioning work in CSS?
medium
What are the pros and cons of CSS preprocessors?
hard
What do you like and dislike about CSS preprocessors?
hard
What is CSS selector specificity and how does it work?
hard
What are CSS sprites?
medium
How do you detect if JavaScript is disabled?
easy
What are common CSS efficiency gotchas?
easy
What is feature detection?
easy
What is the difference between Flexbox and Grid?
hard
How do floats work in CSS?
medium
How to improve website performance?
medium
How would you style an SVG?
easy
What is the difference between inline, inline-block, and block in CSS?
medium
What are Progressive Web Apps?
medium
What are pseudo-elements in CSS?
medium
What are reflows and repaints?
hard
What is the difference between Reset and Normalize CSS?
medium
What is the difference between responsive and adaptive design?
medium
How do you serve retina graphics?
easy
What is semantic HTML and why does it matter for accessibility?
medium
How do you serve pages for feature-constrained browsers?
medium
Comparing CSS translate() and absolute positioning: When to use each?
easy
How to truncate text using CSS only
medium
How do you visually hide content but keep it accessible to screen readers?
medium
What happens when you type a URL into a browser and hit enter?
medium
What is Responsive Design?
medium
How do z-index and stacking contexts work?
hard

Web Fundamentals

Critical Rendering Path
medium
Cross-Site Request Forgery (CSRF) Attacks
medium
CORS Explained: Cross-Origin Resource Sharing
medium
CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations
medium
Content Security Policy (CSP)
medium
Why is HTTPS Secure? Understanding TLS/SSL
medium
Authorization Best Practices
easy
Cookie Security & Session Hardening: SameSite, HttpOnly, Secure
easy
Core Web Vitals: LCP, INP & CLS
medium
Performance Optimization Trade-offs
medium
Critical Resource Prioritization: Optimize Loading Order
medium
Code Splitting: Optimize Bundle Size with Dynamic Imports
medium
Tree Shaking: Eliminate Dead Code from Your Bundle
easy
Lazy Loading: Load Resources On-Demand
easy
Resource Hints: Preload, Prefetch & Preconnect
medium
Text Compression: Gzip and Brotli
easy
Image & Video Optimization: Modern Formats & Techniques
easy
Adaptive Loading: Optimize for Device & Network
medium
List Virtualization: Render Large Lists Efficiently
hard
Web Workers vs Main Thread: Offloading Heavy Work
medium
Memory Leaks in Frontend Apps: Detection & Prevention
easy
Managing Third-Party Scripts: Optimization Strategies
medium
How CDNs Work: Edge Delivery, Caching & Performance
easy
HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation
medium
Service Workers & Offline Strategy: Cache First, Network First & Update Lifecycle
medium
PWA Fundamentals: Manifest, Installability & Offline UX
medium
Script Loading: async vs defer
easy
Event Loop: Understanding JavaScript Execution Model
medium
JavaScript Module Systems: CJS vs ESM vs UMD
medium
Dynamic Module Loading: import() Function
medium
Import on Interaction: Load When User Interacts
medium
Import on Visibility: Lazy Loading with IntersectionObserver
medium
Browser Rendering Pipeline & Layout Thrashing
medium
Rendering Strategies: CSR vs SSR vs SSG vs ISR
medium
Streaming SSR: Progressive HTML Streaming
medium
Islands Architecture: Independent Component Hydration
medium
React Server Components: Zero-JS Server Rendering
medium
Framework Reactivity: React, Vue, Svelte & Solid
medium
HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend Performance
medium
DNS Resolution: Path, TTL, Caching & Frontend Impact
medium
Cross-Site Scripting (XSS) Attacks
medium
State Management: Choosing the Right Solution
medium
Redux: Predictable State Container (RTK + RTK Query)
medium
React Query (TanStack Query): Server State Caching
medium
Data Fetching Patterns: REST, GraphQL, tRPC & Real-time
medium
GraphQL Fundamentals for Frontend: Shape, Caching, and Tradeoffs
medium
gRPC-Web Fundamentals: Browser Constraints and Proxy Model
medium
Caching Strategies: Client, Server & Edge
medium
Data Normalization: Organizing State for Performance
medium
API Design Best Practices: Pagination, Errors, Versioning & Type Safety
medium
API Versioning Strategies for Frontend Compatibility
medium
Pagination: Offset vs Cursor-Based
medium
Rate Limiting & API Resilience: Retries, Backoff, Jitter, Idempotency
medium
How Frontend Developers Can Handle Millions of API Requests Without Crashing Everything
medium
Browser Storage: Cookies, SessionStorage, LocalStorage, IndexedDB
medium
Real-time Communication: WebSockets, SSE & Polling
medium
WebRTC: Real-Time Communication in the Browser
hard
Build & Deployment: Monorepo, CI/CD, Strategies & Release Safety
medium