All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 103
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
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.
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.
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.
ng generate: Your Project's Code Wizard
ng generate is a command-line wizard for scaffolding new Angular features. It doesn't just create files; it wires them into your app. Use ng g component my-component to create components, services, and more.
Angular's angular.json: Your Workspace Blueprint
angular.json is the blueprint for your workspace, telling the CLI how to build, serve, and generate code. It defines project paths, build targets, and default prefixes. The footgun: assuming the projects section mirrors the file system.
Module Federation: The Multi-Framework "Hydra"
Module Federation can unite micro frontends from different frameworks (e.g., Angular, React) in one app. This is a last resort for migrations or integrating legacy code, not a standard pattern, as it increases complexity and bundle size.
Angular Schematics: Automating Code Modification Safely
Think of a schematic as a safe, scriptable code generator. It operates on a virtual copy of your project, applying changes only after verifying the entire operation. Use them to enforce conventions or package library code.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's bind: turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields undefined, not 0.
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.
<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'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.
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.
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.
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.
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 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.
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.
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.