Concepts in Frontend Dev, page 22
Doc Site Generators: Content-First Websites
A doc site generator turns your Markdown files into a complete, searchable website. Use it for project docs or blogs to focus on writing, not web dev. The footgun is thinking they're only for docs; many are powerful static site generators.
Configuring the Angular Compiler (ngc)
The Angular Compiler (ngc) transforms your templates into optimized JavaScript ahead-of-time. You tune it in tsconfig.json to create smaller production builds or publish reusable libraries.
Requesting Camera and Mic Access with getUserMedia
getUserMedia asks for camera/mic access in the browser. It's used for video chats or photo booths and returns a Promise with the media stream. Footgun: The promise can hang forever if the user ignores the prompt, so your app must handle that state.
next/font: Zero Layout Shift Fonts
next/font bundles fonts with your app at build time, serving them from your own domain to eliminate layout shift and extra network requests. It's the standard for any Next.js app. The footgun is using <link> tags, which negates all benefits.
Pre-commit Hooks: Your Code's Quality Gatekeeper
Think of a pre-commit hook as a bouncer for your codebase. It's a script that runs before Git finalizes a commit, checking your changes against project rules. Use it to automatically lint code, run formatters, or check for secrets before they enter history.
Vue's <script setup>: Less Boilerplate, More Performance
Vue's <script setup> is compile-time sugar that automatically exposes variables and functions to your template, cutting boilerplate. It yields more succinct, performant components with better type-safety.
Managing Canvas State with save() and restore()
Think of save() and restore() as checkpoints for your canvas. save() pushes the current drawing state (styles, transforms) onto a stack, and restore() pops it back off. Use this to temporarily apply a transformation to just one element.
Optimize Loading with next/script
The next/script component prevents third-party scripts from blocking your page's initial render. Use it for analytics, ads, or chat widgets to improve performance. The footgun is not choosing the laziest strategy possible for non-essential scripts.
Monorepo: Managing Multiple Projects in One Repository
A monorepo puts multiple projects into one repository, creating a single source of truth. It's great for design systems, allowing atomic updates to shared components and consuming apps.
Framework Reactivity: Coarse vs. Fine-Grained Updates
Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.
Canvas drawImage: Projecting Pixels onto a Canvas
drawImage is a versatile projector for your canvas, letting you place, scale, and even slice images before drawing them. It's used for rendering game sprites from a sprite sheet, displaying video frames, or compositing images.
Next.js Middleware: Your App's Edge Bouncer
Think of Next.js Middleware as a bouncer at your app's door. It runs code on the edge before a request is processed, letting you redirect, rewrite, or block it. The main footgun is forgetting it runs in a limited Edge Runtime, not a full Node.js.
Visual Regression Testing: Spot the Difference for UIs
Visual regression testing is like an automated 'spot the difference' for your UI, catching visual bugs functional tests miss. It's used in CI/CD to compare screenshots before and after a code change.
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.
Next.js i18n Routing: URLs for a Global Audience
Next.js i18n routing maps locales to URLs, like /en/about or /es/acerca-de. It's not just text translation; it's building a site structure for each language. This improves SEO and user experience.
Design System Build Pipeline: Automating UI Consistency
A design system pipeline treats UI rules like code, syncing design tokens from a single source of truth (like Figma) to your codebase. It prevents drift between design and code, but the biggest footgun is not starting one, leading to manual, error-prone…
Angular Incremental Compilation: Faster Rebuilds
Angular's incremental compilation avoids full rebuilds by tracking changes, making performance proportional to what you changed, not the whole app. It speeds up development by reusing analysis and skipping file generation for unchanged code.
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.
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