All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 244
The Kano Model: Not All Features Are Created Equal
The Kano Model classifies features by their impact on user satisfaction, separating "must-haves" from "delighters." Use it in product planning to prioritize impactful work. The footgun is misclassifying a novelty as a core need, starving basic functionality.
Product Vision: The Why Behind Your What
A product vision is your team's North Star—an aspirational goal answering 'Why are we building this?' It guides the roadmap and aligns stakeholders by describing the future you're creating, ensuring everyone pulls in the same direction.
Scrum Master Stances: A Situational Toolkit
A Scrum Master isn't just a meeting facilitator. They're a situational leader who adopts different roles—teacher, coach, impediment remover—to serve the team. This toolkit helps them decide when to teach, when to coach, and when to clear a path for the team.
Shu-Ha-Ri: A Model for Mastery
Shu-Ha-Ri is a model for mastery: first follow the rules (Shu), then break them (Ha), and finally make your own (Ri). It's used to guide agile adoption, starting with strict adherence before innovating.
Angular Universal: Hybrid Rendering for Faster Apps
Angular Universal enables hybrid rendering, letting you choose where each page is built: on the server (SSR), at build time (SSG), or in the browser (CSR). This improves load times and SEO. The footgun is misconfiguring routes, negating performance gains.
Nuxt Server Routes: Your Backend in a Folder
Nuxt Server Routes let you build a backend inside your frontend project. Create API endpoints by adding files to the server/api directory, which automatically get an /api prefix. The common footgun is forgetting this prefix difference with server/routes.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
Testing NgRx Effects: Isolate and Verify Side Effects
Test NgRx Effects by treating them as pipelines that transform action streams. Provide a source action and mock dependencies to verify the effect dispatches the correct success or failure action.
Angular Lazy Loading: Ship Less Code Upfront
Think of your app as an encyclopedia. Lazy loading only fetches the volume (feature module) you need, when you need it, instead of loading the whole set upfront. Use it for distinct sections like dashboards.
Svelte Transitions: Declarative UI Animation
Svelte transitions are declarative animations for elements entering or leaving the DOM. Use transition:fade on a modal or crossfade for items moving between lists. The footgun: they only run on mount/unmount, not on general state changes.
Lazy Loading Routes: Faster Initial Loads
Lazy loading routes splits your app into smaller chunks, loading code only when a user visits a specific page. This drastically cuts initial load times for large SPAs. Just be sure not to use Vue's async components directly as route components.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
NgRx Selectors: Memoized Queries for Your State
NgRx selectors are smart, cached queries for your app's state. They use memoization to avoid re-computing derived data if the underlying state hasn't changed. This prevents needless re-renders.
Angular Route Resolvers: Fetch Data Before Navigation
An Angular Route Resolver pre-fetches data, ensuring it's ready *before* your component renders. Use it to load critical data for a route, like a user profile, to avoid showing a loading spinner. The footgun: a slow resolver blocks navigation entirely.
NgRx Effects
NgRx Effects handle side effects, like API calls, outside of reducers and components by listening to the stream of dispatched actions and, when a matching action appears, running async work and dispatching a new action with the result.
NgRx Store: Reactive State Management for Angular
NgRx Store is a centralized database for your Angular app's frontend state, providing a single source of truth. Use it in large apps to manage complex, shared state like user sessions. The main footgun is overusing it for simple, local state.
Angular's `async` Pipe: Manage Observables in Templates
Angular's async pipe is a self-managing subscription for your templates. It unwraps values from Observables or Promises directly in your HTML, triggering updates on new emissions. It automatically unsubscribes, preventing the common footgun of memory leaks.
Angular's ng-template: Reusable UI Blueprints
ng-template defines a reusable UI blueprint that isn't rendered by default. Use it with ngTemplateOutlet to create configurable components, like passing a custom item layout to a generic list.
<ng-container>: Group Elements Without a DOM Footprint
<ng-container> is an Angular grouping element that doesn't render to the DOM. Use it to apply a structural directive like *ngIf to multiple elements without adding an extra <div> that could break your layout.
Angular Template Reference Variables: A #handle for Elements
A template reference variable is a handle to a DOM element or component within your template. Use the #varName syntax to grab an input's value or call a child component's method. Its scope is limited to the template where it's defined.