Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
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.
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.
Vue Custom Directives: For Low-Level DOM Access
Vue custom directives are for low-level DOM access. Use them for tasks like auto-focusing a dynamically inserted input. The footgun is using them for stateful logic or UI structure, where a composable or component is the right tool.
Svelte Actions: Reusable DOM Logic
Svelte Actions let you run code when an element is mounted for direct DOM access. Use them to integrate third-party libraries or add custom events like swipe gestures.
Angular Custom Pipes: Transform Data in Your Templates
An Angular custom pipe is a reusable formatting function for your templates. Use it for common display transformations like currency or date formatting, keeping your component logic clean. Footgun: Avoid slow logic; pipes run often and can kill performance.
Vue Router: Controlling Scroll Behavior
In a SPA, the browser doesn't manage scroll position; `scrollBehavior` is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting `savedPosition`, breaking native back-button behavior.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (`/users`) but needs server setup, while hash mode uses a hash symbol (`/#/users`) and works out-of-the-box.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a `<transition>` component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
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`.
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.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a `User` page for `/users/johnny` and `/users/jolyne`. Define a path with a param like `/users/:id` and access its value via `$route.params.id`.
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: `params` are ignored if you also provide a `path`—use a named route instead.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for `<a>` tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard `<a href="...">`, which reloads the page and loses application state.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
XState: Predictable UI State with State Machines
XState treats UI logic as a formal state machine, making impossible states impossible. It's ideal for complex components like multi-step forms or data fetching UIs. The footgun is overusing it for simple boolean toggles, which adds needless boilerplate.
Optimistic UI: Assume Success for a Faster Feel
An optimistic UI assumes an action will succeed, updating the interface instantly instead of waiting for the server. This makes actions like liking a post or adding to a cart feel instant. The footgun is failing to revert the UI when the server reports an.
Angular HttpClient: Your App's API Connector
Angular's HttpClient turns network requests into RxJS Observables. Use it to fetch data or submit forms. The footgun: a request is never sent until you subscribe to the Observable it returns, a common mistake for beginners.
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
VeeValidate: Vue Forms Without the Boilerplate
VeeValidate manages the entire lifecycle of a Vue form—tracking values, validation, and submissions—so you don't write the state boilerplate. Use it for simple contact forms or complex wizards, especially with async validation. The footgun is mixing its APIs.
Angular's Reactive Form Classes: FormControl, FormGroup, FormArray
Reactive forms build a data model in your code, not the template. Use `FormControl` for one input, `FormGroup` for a set of fields like a login form, and `FormArray` for dynamic lists. The main footgun is forgetting to import `ReactiveFormsModule`.
Angular's Built-in Form Validators
Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing `required` for text inputs with `requiredTrue`, which is only for checkboxes.
Angular Template-Driven Forms: Logic in the HTML
Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with `[(ngModel)]`, they're great for simple scenarios like login or contact forms.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.