Intermediate everything in Frontend Dev, page 19
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.
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.
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.
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.
Angular Ivy: The Tree-Shakable Compiler
Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.
Playwright: E2E Tests That Aren't Flaky
Playwright makes E2E tests reliable by automatically waiting for UI elements to be ready. Use it to test critical user journeys across Chrome, Firefox, and WebKit. The footgun is using brittle CSS selectors instead of user-facing locators like getByRole.
Angular's TestBed: A Sandbox for Component Testing
Angular's TestBed creates a mini-app just for your test, letting you check how a component renders and behaves with mock dependencies. It's for testing component-template interactions in isolation.
Vitest Mocking: Isolating Code with `vi.mock`
Vitest's vi.mock replaces a module with a fake version, isolating your code for tests. This is key for preventing real network or database calls. The footgun: calls are "hoisted" to the top of the file, running before other code and breaking variable access.
Svelte Testing Library: Test Components Like a User
Test Svelte components like a user would use them. Svelte Testing Library interacts with the rendered DOM, not internal state, to verify behavior. This avoids brittle tests tied to implementation.
The Testing Trophy: Prioritize Integration Tests
The Testing Trophy flips the classic pyramid, arguing for "mostly integration tests" to maximize your return on investment. It's for UI apps where testing component interactions gives more confidence than isolated unit tests.
JavaScript Bundle Analysis: Seeing Your App's Weight
Think of it as an X-ray for your compiled JavaScript, showing which libraries take up the most space. Use it to diagnose slow load times by finding large or duplicated dependencies.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
Angular's OnPush: Faster Apps by Doing Less
OnPush tells Angular to only re-render a component when its inputs change or its own events fire, not on every global event. It's a key performance boost for large apps, but mutating an input object directly won't trigger a re-render, causing a stale UI.
Vue Async Components: Defer Loading Until Needed
Vue async components defer loading a component's code until it's rendered, speeding up initial app loads. Use them for heavy components not needed right away, like modals or admin panels. The footgun is a blank UI if you don't handle loading/error states.
Angular HttpInterceptor: A Pipeline for API Requests
Think of an HttpInterceptor as a pipeline for every API call, letting you inspect or modify requests and responses globally. Use it to automatically add auth headers or show a loading spinner.
Angular Custom Attribute Directives
An Angular attribute directive changes the appearance or behavior of an existing DOM element without adding a new one, applied as a plain HTML attribute so reusable behavior like hover effects or validation can be attached declaratively across many templates.
Vue Composables: Reusable Stateful Logic
A Vue composable is a function for bundling reusable stateful logic, like tracking mouse position. Use it to share complex logic like API fetches across components. The footgun: each component gets a fresh, independent state, not a shared one.
Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static snapshot for the initial value, or a queryParams Observable for live updates. Use it for values like ?search=term.
File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at routes/about/+page.svelte automatically creates the /about page, no central config needed.
Navigation Guards: Vue's Route Bouncers
Think of navigation guards as bouncers for your app's routes. They intercept route changes to check permissions or fetch data before rendering a page. The old next() callback is a trap; accidentally calling it twice can break navigation.
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