Intermediate everything in Frontend Dev, page 21
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like adapter-static for static sites. The footgun is forgetting one entirely.
Vite Config: The Control Panel for Your Build
Think of vite.config.js as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
Why Svelte Skips the Virtual DOM
Svelte skips the Virtual DOM, treating it as runtime overhead. It acts as a compiler, generating precise JavaScript to update the DOM directly. This avoids the 'diffing' step of frameworks like React, leading to smaller bundles and faster updates.
Angular's Hierarchical Dependency Injection
Angular's DI is a tree of injectors mirroring your components. When a component needs a service, Angular walks up the tree to find the first provider. Use it to scope services to UI branches, but beware: providing at a component level creates a new instance.
Vue Single-File Components (SFCs)
Vue Single-File Components (.vue files) colocate a component's template, logic, and styling into one modular unit. This is the standard for building Vue SPAs and static sites, enabling scoped CSS and pre-compiled templates. Remember, SFCs require a build step.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for import/require or <script> usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
Shipping TypeScript Types in package.json
The types field in package.json tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in devDependencies instead of dependencies.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a user property to Express's Request object.
Modern Bundlers & TypeScript: Transpile, Don't Check
Modern bundlers like Vite prioritize speed by only transpiling TypeScript files, not type-checking them. This enables sub-50ms updates during development. The footgun: your dev server won't report type errors; you must run tsc --noEmit separately.
TypeScript's Module Resolution Strategy
TypeScript's moduleResolution is the compiler's search plan for finding files behind import statements. It's crucial when mixing module types (ESM/CJS) or targeting Node.js vs. the browser. The footgun is assuming the default node works for modern ESM.
MediaRecorder API: Capture Audio and Video in the Browser
The MediaRecorder API is a VCR for your browser, capturing a MediaStream from a camera or screen into a file. Use it for in-browser video recorders or voice memo apps. The footgun: recorded data arrives as Blob objects in an event, not as a direct.
WebGL Uniforms: Global State for Shaders
WebGL uniforms are global constants for your shaders, set once per frame from JavaScript to provide the same value to every vertex and pixel. Use them for scene-wide data like a camera's projection matrix. The footgun: changing a uniform is a CPU-to-GPU call.
WebGL Buffers: Telling the GPU How to Read Your Data
WebGL's vertexAttribPointer is the map you give the GPU to read vertex data from a buffer. It tells your shader how to parse a flat byte array into attributes like position. This is how you link CPU data to the GPU before drawing.
WebGL Shaders: Your Direct Line to the GPU
WebGL shaders are small programs written in GLSL that run directly on the GPU, bypassing the CPU for massively parallel graphics tasks. They are essential for all WebGL rendering, positioning vertices and coloring pixels.
WebGL Rendering Context: Your GPU's API on Canvas
The WebGL rendering context is your JavaScript's command center for drawing on a <canvas> with the GPU. You use it for 3D games or complex data visualizations. The context can be lost, so always check isContextLost() before rendering a new frame.
Intercept Network Requests with the `fetch` Event
The fetch event turns your Service Worker into a programmable network proxy. Use it to intercept outgoing requests to serve assets from a cache for offline support or to synthesize custom responses.
The Service Worker Lifecycle: Register, Install, Activate
A service worker is a background proxy that lets your app work offline. Its lifecycle—register, install, activate—governs how it takes control of pages. The biggest footgun: a new worker waits for old clients to close before activating, delaying updates.
Choosing the Right Client-Side Storage
Client-side storage turns the browser into a mini-database for faster loads and offline access. It's used for remembering user preferences or caching assets.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles