Intermediate concepts in Frontend Dev, page 10
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.
Next.js Router Cache: Instant Client-Side Navigation
The Next.js Router Cache is a client-side, in-memory cache that makes navigation feel instant by storing the rendered UI of visited routes. It's why navigating with <Link> is fast. The footgun: it caches UI, not data, so stale content can appear.
Automated Accessibility Testing: Your First Line of Defense
Think of it as a linter for usability, scanning your code for machine-detectable issues like missing alt text or poor color contrast. It's often run in CI pipelines to catch regressions. The footgun is relying on it exclusively, as it misses most issues.
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.
CODEOWNERS: Auto-Assigning PR Reviewers
A CODEOWNERS file maps repo paths to owners, auto-requesting their review on PRs. It ensures experts review changes to their code, like a platform team owning CI configs. The footgun: owners aren't notified for draft PRs and must have write permissions.
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.
MDX in Next.js: Markdown with Superpowers
MDX lets you write in Markdown and embed interactive React components directly inside your content. Use it for blogs or docs that need more than static text, like interactive charts or code demos.
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.
Configuring Security Headers in Next.js
Security headers are rules your server sends the browser to prevent attacks like XSS and clickjacking. In Next.js, you configure these globally in next.config.js.
Nuxt Server Data Fetching: useAsyncData & useFetch
Avoid client-side request waterfalls by fetching data on the server and embedding it in the page. Nuxt's useAsyncData and useFetch handle this SSR hydration for you. The main footgun: not providing a stable key, leading to re-fetches.
Angular: Run Code Only on Browser or Server
Angular Universal runs your app twice: on a server and in a browser. Use isPlatformBrowser to run code only where it's safe, like accessing window or document, to prevent your server-side render from crashing.
SvelteKit Prerendering: Build-Time HTML for Faster Sites
SvelteKit prerendering creates static HTML files at build time for instant loads. It's ideal for content that doesn't change per user, like marketing pages or blog posts. The main footgun: unlinked pages won't be found unless you explicitly list them.
Session Authentication: JWT vs. Database
Session auth gives users an ID after login. A JWT is a self-contained ID card with their data; a database session is a library card pointing to their record. The key trade-off: JWTs are fast but can't be easily revoked, while database sessions are revocable.
Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
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.
OAuth 2.0: Delegated Access, Not Shared Passwords
OAuth 2.0 lets users grant limited access to their data without sharing passwords. It's used when a third-party app needs to read your Google Calendar. The common footgun is mistaking it for authentication (logging in); it's for authorization.
Angular's Default Change Detection with Zone.js
Zone.js tells Angular to re-check your entire app whenever any async event finishes. This is Angular's default magic: a variable updates after an HTTP call, and the UI just works. The footgun? This "check everything" approach is expensive in large apps.
Auth.js: Full-Stack Authentication for Next.js
Auth.js simplifies full-stack authentication in Next.js, handling social logins and session management. It lets you add providers like GitHub with minimal code, abstracting away OAuth flows.
CSS :has(): Query Parents and Previous Siblings
CSS :has() styles an element based on its children or later siblings, like highlighting a section with a featured card. Previously this required JavaScript. If unsupported, the whole selector block fails, so wrap it in :is() or use progressive enhancement.
Svelte's Reactivity: A Compiler, Not a Library
Svelte achieves reactivity at compile time, not runtime. It's a compiler that turns your component files into efficient, imperative JavaScript that updates the DOM directly, skipping the virtual DOM. The footgun: reactivity only triggers on assignment.
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