Top 30 Advanced TypeScript & Web APIs Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Which getProperty signature both rejects invalid keys at compile time and returns the exact type of the requested property?

   • aA single generic T with the key typed as string and the return type set to any
   • bTwo generics T and K where K is unconstrained and the return type is T[K]
   • cTwo generics T and K where K extends keyof T and the return type is T[K]
   • dA single generic T with the key typed as keyof T and returning T[keyof T]
   Show the answer

   Answer: c · Two generics T and K where K extends keyof T and the return type is T[K]

   Option C is correct because constraining K with extends keyof T limits keys to valid properties on T, while T[K] preserves the exact type of the accessed property. Option D is tempting because keyof T does restrict keys, but T[keyof T] produces a union of all property types rather than the specific one for the key passed.

   Read the full bite: Create a generic getProperty using generics and keyof

2. Question 2 of 30

   What makes a user-defined type guard unsound when its predicate claims value is User but the body only verifies value is not null?

   • aThe function automatically coerces the value to match the User interface at runtime
   • bTypeScript emits a compile-time error because the predicate contradicts the return type
   • cThe compiler ignores the predicate and falls back to the previous union type
   • dTypeScript narrows the type in conditional branches while the value may still lack required User properties at runtime
   Show the answer

   Answer: d · TypeScript narrows the type in conditional branches while the value may still lack required User properties at runtime

   A type predicate is purely a compile-time hint; if the runtime check is too permissive, TypeScript narrows the type based on a false promise, allowing unsafe property access. Distractor B is wrong because TypeScript never mutates or coerces runtime values to satisfy a type predicate.

   Read the full bite: What is a type predicate? Write a custom type guard for User.

3. Question 3 of 30

   When passing a large ArrayBuffer from the main thread to a dedicated Web Worker for image processing, which technique avoids duplicating that memory in the browser?

   • aRely on structured clone to copy the ArrayBuffer by reference rather than by value
   • bStore the ArrayBuffer in a variable on the global self object that both contexts share
   • cInclude the ArrayBuffer in the postMessage transfer list so ownership moves to the worker
   • dUse requestIdleCallback to process the buffer on the main thread in slices instead of using a worker
   Show the answer

   Answer: c · Include the ArrayBuffer in the postMessage transfer list so ownership moves to the worker

   Listing the ArrayBuffer in the transfer list moves ownership to the worker without copying, preventing memory duplication. The most tempting distractor is wrong because structured clone always copies data; postMessage never shares memory by reference between threads.

   Read the full bite: Offload CPU-intensive work to a Web Worker and explain communication.

4. Question 4 of 30

   Which statement accurately compares open and closed shadow modes regarding encapsulation and event propagation?

   • aClosed mode provides a true security boundary that prevents malicious scripts from inspecting the shadow tree
   • bClosed mode returns null for external shadowRoot access but does not prevent events from bubbling out retargeted to the host
   • cClosed mode blocks all events from crossing the shadow boundary to protect internal implementation details
   • dOpen mode allows external CSS selectors to pierce the shadow boundary and style internal elements directly
   Show the answer

   Answer: b · Closed mode returns null for external shadowRoot access but does not prevent events from bubbling out retargeted to the host

   Closed mode returns null for element.shadowRoot to prevent accidental access, yet bubbling events still cross the boundary with their target retargeted to the host. Distractor D is tempting because closed sounds like a security boundary, but the platform explicitly does not protect against malicious inspection.

   Read the full bite: Explain Shadow DOM, encapsulation, and event propagation

5. Question 5 of 30

   Which approach is the idiomatic TypeScript solution for constructing a typesafe ApiRoute type that includes both /api/v1/<resource> collection paths and /api/v1/<resource>/{id} item paths from a finite Resource union?

   • aA mapped type over Resource that assembles routes into an object, then indexed with Resource to extract the union
   • bA base route template interpolating Resource into /api/v1/, unioned with the same base route suffixed by /{id}
   • cAn open-ended template literal that uses the string type in the resource position to avoid updating types when resources change
   • dA runtime regex inside the API client that validates paths and casts the result to ApiRoute
   Show the answer

   Answer: b · A base route template interpolating Resource into /api/v1/, unioned with the same base route suffixed by /{id}

   Template literal types automatically distribute a union through an interpolated position into every concrete string permutation, so unioning BaseRoute with BaseRoute/{id} is the idiomatic, machinery-free solution. Option A is tempting because it yields the same members, but it unnecessarily uses a mapped type when direct interpolation already expands the union, and C sacrifices compile-time exhaustiveness for false flexibility.

   Read the full bite: Build a typesafe ApiRoute type using template literal types

6. Question 6 of 30

   What return type does fetchItem<T extends boolean>(..., includeHistory: T): T extends true ? ExtendedItem : BaseItem yield when includeHistory is a plain boolean variable?

   • aThe caller must use a const assertion or const type parameter to compile the call
   • bTypeScript infers the variable as a literal true or false and returns exactly ExtendedItem or BaseItem
   • cThe type resolves to ExtendedItem | BaseItem because boolean encompasses both true and false
   • dThe return type collapses to BaseItem because boolean does not extend true
   Show the answer

   Answer: c · The type resolves to ExtendedItem | BaseItem because boolean encompasses both true and false

   Because boolean is equivalent to true | false, the distributive conditional type evaluates both branches and produces a union. Option B is tempting but wrong because TypeScript does not narrow a plain boolean variable to a literal across a function boundary.

   Read the full bite: How would you model fetchItem's return type with generics and conditional types?

7. Question 7 of 30

   In TypeScript, which scenario best justifies using an abstract class rather than an interface?

   • aA single class needs to satisfy multiple unrelated contracts without using mixins.
   • bSubclasses must share stateful logic and a constructor that enforces initialization order at runtime.
   • cUnrelated classes need to share the same structural shape for type checking purposes.
   • dSeveral subclasses need to inherit a concrete utility method that has no internal state or constructor dependencies.
   Show the answer

   Answer: b · Subclasses must share stateful logic and a constructor that enforces initialization order at runtime.

   An abstract class is warranted when subclasses need shared runtime state or guaranteed initialization, such as an internal cache, because interfaces are erased after compilation and cannot carry fields or constructor logic. Option D is tempting because abstract classes can contain implemented methods, but sharing a stateless helper method consumes the single extends slot unnecessarily when composition or a utility function could achieve the same result.

   Read the full bite: Difference between abstract class and interface, with scenario

8. Question 8 of 30

   In the ResponsiveCSSBuilder example, what happens when setColor returns CSSBuilder instead of this during method chaining?

   • aThe chained type collapses to CSSBuilder, making subclass methods like setBreakpoint inaccessible.
   • bTypeScript requires an explicit generic bound to satisfy strict function type checking.
   • cThe JavaScript runtime dynamically rebinds this context, preserving subclass methods without static types.
   • dThe subclass constructor is hidden at runtime, breaking the prototype chain.
   Show the answer

   Answer: a · The chained type collapses to CSSBuilder, making subclass methods like setBreakpoint inaccessible.

   Returning CSSBuilder explicitly collapses the type to the base class, so subsequent subclass-specific methods become inaccessible in the chain, whereas this preserves the derived type. Distractor A confuses static type narrowing with runtime prototype behavior, which is a common misconception the card explicitly warns against.

   Read the full bite: What is the polymorphic this type in TypeScript?

9. Question 9 of 30

   What role does the private constructor play in a TypeScript Singleton implementation?

   • aIt guarantees thread safety across concurrent getInstance calls
   • bIt makes the static instance field automatically lazy-loaded
   • cIt prevents external code from using new, forcing access through getInstance
   • dIt encrypts the instance so its internal fields cannot be read
   Show the answer

   Answer: c · It prevents external code from using new, forcing access through getInstance

   A private constructor blocks new MyClass at compile time, so callers must use the controlled getInstance accessor. It does not encrypt fields, provide thread safety, or by itself make the field lazy.

   Read the full bite: Implementing the Singleton pattern in TypeScript

10. Question 10 of 30

    When appending 1,000 newly created elements in a loop, why does using a DocumentFragment improve performance over direct parent append?

    • aIt queues all mutations and applies them asynchronously on the next animation frame
    • bIt temporarily sets display:none on the parent to suppress layout calculations until insertion
    • cIt exists outside the active document tree, so appends do not trigger reflows or repaints
    • dIt compresses child nodes into a lighter memory structure, reducing RAM usage during creation
    Show the answer

    Answer: c · It exists outside the active document tree, so appends do not trigger reflows or repaints

    C is correct because a DocumentFragment lives outside the active document tree, so batch appends inside a loop cause zero reflows until the single final insertion. A is a tempting distractor because beginners often wrongly assume fragments reduce memory usage, but they actually minimize layout calculations.

    Read the full bite: How would you use DocumentFragment to optimize adding 1,000 list items?

11. Question 11 of 30

    Which pattern correctly implements an IntersectionObserver callback in TypeScript for lazy-loading images while preserving type safety and memory efficiency?

    • aType entries as IntersectionObserverEntry[], narrow entry.target with instanceof HTMLImageElement, and call observer.unobserve(entry.target) after setting src
    • bType entries as IntersectionObserverEntry, assert entry.target to HTMLImageElement, and call observer.disconnect() after each image loads
    • cType entries as IntersectionObserverEntry[], treat entry.target as HTMLElement, and call observer.disconnect() once per callback invocation
    • dType entries as any[], mutate entry.target.src directly, and instantiate one IntersectionObserver per image
    Show the answer

    Answer: a · Type entries as IntersectionObserverEntry[], narrow entry.target with instanceof HTMLImageElement, and call observer.unobserve(entry.target) after setting src

    The callback receives IntersectionObserverEntry[], and because entry.target is typed as Element, you must narrow it to HTMLImageElement before setting src and then call observer.unobserve(entry.target) to release that node. Option C is tempting because the array type is correct, but HTMLElement is still too broad for src and disconnect stops all observations instead of just the loaded image.

    Read the full bite: Implement IntersectionObserver in TypeScript for lazy-loading images

12. Question 12 of 30

    When building a single TypeScript handler for mixed form inputs, which strategy correctly preserves type safety when extracting values from checkboxes, text inputs, and selects?

    • aRely on event.currentTarget because it always refers to the specific input that triggered the event.
    • bNarrow event.target with instanceof checks and branch on element.type to read .checked or .value.
    • cCast event.target to any and use a configuration map to decide which property to read.
    • dType the event as ChangeEvent<HTMLInputElement | HTMLSelectElement> and read event.target.value on every branch.
    Show the answer

    Answer: b · Narrow event.target with instanceof checks and branch on element.type to read .checked or .value.

    Narrowing with instanceof and branching on element.type lets the compiler verify you read .checked for checkboxes and .value for other elements. Option D is tempting because it uses a union type, but reading .value from a checkbox gives the string on rather than the boolean state, breaking both type safety and runtime logic.

    Read the full bite: Write a generic TypeScript handler for mixed form inputs?

13. Question 13 of 30

    In a search-as-you-type component using AbortController, what must occur before initiating a new fetch on each keystroke?

    • aRely on debouncing alone because it guarantees responses arrive in input order
    • bReuse the same AbortSignal across all keystrokes to minimize object creation
    • cAbort the previous controller, instantiate a new one, and pass its fresh signal
    • dIncrement a request ID and drop stale responses while leaving fetches in flight
    Show the answer

    Answer: c · Abort the previous controller, instantiate a new one, and pass its fresh signal

    You must abort the previous in-flight request and create a fresh AbortController per keystroke because a signal can only be aborted once. Reusing the same AbortSignal is a tempting mistake because once aborted it would immediately reject all subsequent fetches.

    Read the full bite: How would you prevent search-as-you-type race conditions with AbortController?

14. Question 14 of 30

    Which pattern correctly implements inSequence to execute promise-returning tasks sequentially and return ordered results?

    • aReturn Promise.all(tasks.map(task => task()))
    • bUse tasks.forEach with an async callback that awaits each task and pushes the result into an array
    • cIterate with a standard for loop and await each tasks[i] without parentheses
    • dDeclare an async function that iterates tasks with a for...of loop, awaits each task() call, and accumulates results
    Show the answer

    Answer: d · Declare an async function that iterates tasks with a for...of loop, awaits each task() call, and accumulates results

    A for...of loop inside an async function blocks on each awaited task call, guaranteeing sequential execution and ordered results. Using forEach with an async callback fires every task immediately because forEach does not await its callback, so tasks run concurrently and the function returns before they finish.

    Read the full bite: Implement inSequence(tasks) to execute promise-returning functions sequentially

15. Question 15 of 30

    When wiring AbortController to a rapid-type search input, which pattern prevents stale UI results without producing unhandled promise rejections?

    • aReuse a single AbortController across all fetches, calling abort() before each request to reset the signal
    • bDebounce keystrokes by 300 ms and skip cancellation because the delay eliminates overlapping requests
    • cStore the controller in React state and abort the previous instance whenever the input changes
    • dCall abort() on the prior controller if it exists, then instantiate a fresh one and pass its signal to fetch, catching only errors named AbortError
    Show the answer

    Answer: d · Call abort() on the prior controller if it exists, then instantiate a fresh one and pass its signal to fetch, catching only errors named AbortError

    You must abort the prior controller before creating a fresh one, pass its signal, and suppress only AbortError to avoid unhandled rejections. Reusing the same controller is tempting but wrong because an aborted signal never resets, so subsequent fetches would abort immediately.

    Read the full bite: How do you cancel pending fetches using AbortController?

16. Question 16 of 30

    A React app on https://app.example.com sends a cross-origin POST to https://api.other.com/events with Content-Type application/json and an Authorization header. Why does the browser first send an OPTIONS request?

    • aThe server requires authentication and must verify the token before accepting the POST.
    • bThe combination of application/json Content-Type and the Authorization header makes it a complex cross-origin request.
    • cPOST requests with a request body always trigger a CORS preflight regardless of headers used.
    • dIncluding credentials in a cross-origin request always forces the browser to perform a preflight check.
    Show the answer

    Answer: b · The combination of application/json Content-Type and the Authorization header makes it a complex cross-origin request.

    The correct answer reflects that application/json is not a CORS-safelisted Content-Type and Authorization is a custom header, so the browser must preflight the complex cross-origin request. The most tempting distractor incorrectly suggests the server initiates the OPTIONS call to verify auth, whereas the card states the browser, not the server, enforces CORS by sending the preflight.

    Read the full bite: When does fetch trigger a CORS preflight, and what POST is complex?

17. Question 17 of 30

    What is the immediate consequence of calling response.body.pipeTo() after already obtaining a reader from that same body?

    • aA TypeError is thrown because the stream is locked to the reader
    • bThe reader is forcibly released so the pipeTo can take over
    • cThe pipe operation is queued until the reader releases its lock
    • dThe stream data is automatically teed so both consumers receive identical chunks
    Show the answer

    Answer: a · A TypeError is thrown because the stream is locked to the reader

    Calling getReader() locks the ReadableStream, and the card explicitly states that any subsequent attempt to pipe or tee it will throw a TypeError. Option C is a tempting distractor because queuing feels intuitive, but locked streams fail immediately rather than deferring the pipe operation.

    Read the full bite: Download a large file via fetch and track ReadableStream progress

18. Question 18 of 30

    What is the primary type-system purpose of resolving to never in the false branch of MyReturnType<T>?

    • aIt tells TypeScript to infer the return type from the nearest overload instead of the last one
    • bIt serves as a recursive base case for extracting return types from nested function types
    • cIt indicates that the type computation should be deferred until runtime when the actual value is known
    • dIt prevents non-function types from being silently assignable by making invalid usages immediately unassignable
    Show the answer

    Answer: d · It prevents non-function types from being silently assignable by making invalid usages immediately unassignable

    The never branch preserves type safety by ensuring non-function types produce an unassignable type, which stops invalid usage at compile time. Leaving the false branch as T or unknown would silently allow non-functions to pass through, a common mistake.

    Read the full bite: Implement MyReturnType<T> using conditional types and infer

19. Question 19 of 30

    How does the as key-remapping syntax in PickByType differ from mapping all keys and setting non-matching values to never?

    • aThe as clause requires TypeScript 4.1 but otherwise behaves identically to the never-value approach.
    • bBoth approaches produce identical types because never properties are implicitly omitted by TypeScript.
    • cThe never-value approach is invalid because never cannot be used as an object property type.
    • dThe as clause removes non-matching keys entirely, while the never-value approach preserves them with never types.
    Show the answer

    Answer: d · The as clause removes non-matching keys entirely, while the never-value approach preserves them with never types.

    The card notes that setting non-matching values to never preserves keys instead of removing them, whereas the as clause filters keys before mapping. Distractor D is tempting because developers often assume never properties disappear, but TypeScript retains the key with a never value.

    Read the full bite: Implement a generic PickByType<T, U> utility type

20. Question 20 of 30

    Which mapped type correctly implements PickByValue<T, V>, keeping only keys whose values are assignable to V?

    • a{ [K in keyof T as T[K] extends V ? K : never]: V }
    • b{ [K in keyof T as T[K] extends V ? K : never]: T[K] }
    • c{ [K in keyof T]: T[K] extends V ? T[K] : never }
    • d{ [K in keyof T as V extends T[K] ? K : never]: T[K] }
    Show the answer

    Answer: b · { [K in keyof T as T[K] extends V ? K : never]: T[K] }

    The correct answer uses the as clause to drop keys by mapping them to never while preserving original values as T[K]; option D reverses the assignability check so it keeps properties whose types are supertypes of V rather than subtypes.

    Read the full bite: Write a generic PickByValue<T, V> type

21. Question 21 of 30

    When implementing DeepReadonly<T>, what is the main drawback of letting array types fall into the object mapped-type branch instead of handling them separately with ReadonlyArray?

    • aIt produces a plain object type with numeric keys and strips array methods like push and pop.
    • bIt triggers a type error because null extends object in the conditional check.
    • cIt leaves nested array elements mutable even though the array reference itself becomes readonly.
    • dIt causes infinite recursion because arrays are self-referencing in the type system.
    Show the answer

    Answer: a · It produces a plain object type with numeric keys and strips array methods like push and pop.

    Mapping over keyof an array yields a plain object type with numeric keys, which strips away array methods like push and pop and destroys array semantics. Option C is a common misconception because the object branch would still recursively wrap values; the critical loss is array type identity and methods, not element mutability.

    Read the full bite: Implement recursive DeepReadonly<T> for nested objects and arrays

22. Question 22 of 30

    When defining CreateSetters<T>, why is the string & K intersection required inside Capitalize?

    • aBecause string & K narrows the key to its exact literal value before concatenation
    • bBecause Capitalize cannot operate on generic type parameters without an intersection
    • cBecause mapped type remapping requires all keys to be coerced to string first
    • dBecause keyof T may yield symbol keys, and Capitalize only accepts string subtypes
    Show the answer

    Answer: d · Because keyof T may yield symbol keys, and Capitalize only accepts string subtypes

    keyof T can include symbol keys, yet Capitalize only accepts string subtypes, so string & K is required to satisfy that constraint. Option B is tempting but wrong because Capitalize can work with generic string parameters; the intersection guards against non-string keys rather than being a generic requirement.

    Read the full bite: Write a generic CreateSetters<T> that maps properties to setter methods

23. Question 23 of 30

    Which approach correctly adds an index to an existing IndexedDB store while preserving data and handling production constraints?

    • aIncrement the version in indexedDB.open, then in onupgradeneeded delete the object store and recreate it with the new index to ensure a clean schema.
    • bOpen the database at the current version, begin a readwrite transaction, and call objectStore.createIndex inside the transaction.
    • cIncrement the version in indexedDB.open, conditionally create the index inside onupgradeneeded based on event.oldVersion, and attach an onblocked handler for other tabs.
    • dIncrement the version in indexedDB.open, then in onsuccess check if the index exists and create it with a manually started transaction if missing.
    Show the answer

    Answer: c · Increment the version in indexedDB.open, conditionally create the index inside onupgradeneeded based on event.oldVersion, and attach an onblocked handler for other tabs.

    IndexedDB schema mutations require a version bump and must run inside onupgradeneeded, where event.oldVersion enables incremental idempotent migrations and onblocked handles concurrent tabs. Option B is wrong because createIndex is not allowed in a normal readwrite transaction outside the upgrade handler.

    Read the full bite: How do you add a new index to an existing IndexedDB store?

24. Question 24 of 30

    Which approach correctly and efficiently retrieves IndexedDB products with a price between 50 and 100?

    • aQuery the object store primary key with IDBKeyRange.lowerBound and sort the resulting records by price in JavaScript.
    • bCreate a price index during onupgradeneeded, then use that index with IDBKeyRange.bound in a readonly transaction.
    • cOpen a readwrite transaction and call createIndex on the store to build a temporary price index for the query.
    • dIterate the entire object store with openCursor and discard records outside the desired price range.
    Show the answer

    Answer: b · Create a price index during onupgradeneeded, then use that index with IDBKeyRange.bound in a readonly transaction.

    IndexedDB schema is version-locked, so the price index must be created in onupgradeneeded, and a readonly transaction with IDBKeyRange.bound efficiently walks only the relevant B-tree leaf nodes. Option C is impossible because createIndex cannot be used outside onupgradeneeded, while option D triggers a full store scan that deserializes every record.

    Read the full bite: How do you query IndexedDB products by price range?

25. Question 25 of 30

    When returning multi-megabyte IndexedDB query results from a Web Worker to the main thread, what is the primary performance cost?

    • aTransferable Objects are used by default, moving buffers without copying and eliminating transfer overhead
    • bThe worker and main thread share heap memory, so no serialization is needed but garbage collection pauses both
    • cpostMessage copies the payload via the Structured Clone Algorithm, adding latency and memory overhead
    • dIndexedDB transactions run synchronously inside the worker, blocking until the operation completes
    Show the answer

    Answer: c · postMessage copies the payload via the Structured Clone Algorithm, adding latency and memory overhead

    postMessage relies on the Structured Clone Algorithm, which copies rather than shares data, so large payloads incur real latency and memory overhead. Option A is tempting but wrong because Transferable Objects are opt-in and not the default behavior for postMessage.

    Read the full bite: Why access IndexedDB exclusively from a Web Worker?

26. Question 26 of 30

    Which statement correctly distinguishes a Service Worker from a dedicated Web Worker?

    • aA dedicated Web Worker persists offline and intercepts network requests
    • bA dedicated Web Worker is shared across all same-origin tabs by default
    • cA Service Worker can update the DOM directly while a Web Worker cannot
    • dA Service Worker acts as a network proxy and is started and killed by the browser
    Show the answer

    Answer: d · A Service Worker acts as a network proxy and is started and killed by the browser

    Service Workers are event-driven network proxies the browser starts and terminates at will. Neither worker touches the DOM, dedicated workers serve one page, and request interception is the Service Worker's role.

    Read the full bite: Dedicated vs Shared vs Service Workers compared

27. Question 27 of 30

    In a news PWA, which resource-to-strategy mapping best balances offline resilience with content freshness?

    • aCache First for the app shell, Stale-While-Revalidate for CSS and JS bundles, and Network First for article APIs
    • bCache First for the app shell, Network First for CSS and JS bundles, and Cache First for article APIs
    • cStale-While-Revalidate for the app shell, Network First for CSS and JS bundles, and Cache First for article APIs
    • dNetwork First for the app shell, Cache First for CSS and JS bundles, and Stale-While-Revalidate for article APIs
    Show the answer

    Answer: a · Cache First for the app shell, Stale-While-Revalidate for CSS and JS bundles, and Network First for article APIs

    This mapping matches update frequency and criticality: the versioned app shell must render instantly offline, static assets can load immediately while refreshing in the background, and article APIs should try the network first to avoid serving stale headlines. Option B is tempting because it correctly pairs Cache First with the shell, but it wrongly applies Network First to static assets, which delays returning visitors, and Cache First to APIs, which would present old news as current.

    Read the full bite: Design a Service Worker caching strategy for a news app

28. Question 28 of 30

    When rendering a mesh in WebGL, why is vertex position data supplied as an attribute while a model-view-projection matrix is supplied as a uniform?

    • aThe position buffer is bound with vertexAttribPointer so each vertex reads a distinct value, while the MVP matrix is uploaded once per draw call via gl.uniformMatrix4fv and remains constant for all vertices.
    • bUniforms vary per vertex when updated inside a loop before each gl.drawArrays call, making them suitable for per-vertex positions without buffer overhead.
    • cAttributes are optimized for infrequently changing data like transforms, whereas uniforms are streamed from buffers to provide unique values for every vertex invocation.
    • dBoth inputs use gl.bufferData, but attributes are automatically interpolated across vertices while uniforms are sampled once per primitive by the fragment shader.
    Show the answer

    Answer: a · The position buffer is bound with vertexAttribPointer so each vertex reads a distinct value, while the MVP matrix is uploaded once per draw call via gl.uniformMatrix4fv and remains constant for all vertices.

    Vertex positions must be attributes because they are fetched from a buffer per vertex via vertexAttribPointer, while an MVP matrix is a uniform set once per draw call with gl.uniformMatrix4fv and shared by all vertices. Option B is tempting but wrong because uniforms cannot vary per vertex within a single draw call, and attempting to update them per vertex from JavaScript would require thousands of individual draw calls.

    Read the full bite: In WebGL, what is the difference between attributes and uniforms?

29. Question 29 of 30

    After two WebRTC peers complete signaling and connect successfully via a direct path, what role does the signaling server play in the media stream?

    • aIt plays no role; media flows directly peer-to-peer after setup
    • bIt re-encodes the media to match each peer's codec support
    • cIt continuously relays all audio and video between the two peers
    • dIt becomes the TURN relay for the duration of the call
    Show the answer

    Answer: a · It plays no role; media flows directly peer-to-peer after setup

    The signaling server only brokers SDP and ICE exchange during setup; once a direct path is found, media flows peer-to-peer. A TURN relay, not the signaling server, handles relaying only when direct connectivity fails.

    Read the full bite: WebRTC signaling: SDP, ICE, and the signaling server

30. Question 30 of 30

    Why must isolatedModules flag a const enum when a project is transpiled by esbuild?

    • aesbuild compiles each file alone and cannot inline the enum's values across files
    • bconst enums are deprecated and removed in modern TypeScript versions
    • cconst enums produce larger output that esbuild cannot minify
    • desbuild requires all enums to be declared in a single namespace
    Show the answer

    Answer: a · esbuild compiles each file alone and cannot inline the enum's values across files

    const enums rely on the compiler inlining their values throughout the program, which a single-file transpiler cannot do safely. They are not deprecated, and the issue is cross-file inlining, not minification or namespaces.

    Read the full bite: What isolatedModules enforces and why bundlers need it