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 104
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.
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.
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.
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.
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.
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.
Angular Schematics: Blueprint Robots with Rollback
Angular Schematics draft changes on a virtual file tree before touching disk. Use them to generate components, enforce standards, or run automated migrations. Never write directly to disk inside a schematic or you break atomic rollback.
Svelte Logic Blocks: Template Control Flow
Svelte logic blocks are compiler directives disguised as HTML comments that branch, loop, and await inside templates. You write {#if}, {#each}, and {#await} directly in markup.
Svelte Keyed each: Identity, Not Index
Svelte keyed each blocks track list items by identity, not index. Without a key, reordering or filtering leaves component state attached to the wrong DOM position. Using the array index as the key silently defeats the purpose and preserves the bug.
Observable: Angular's Push-Based Data Stream
An Observable is a lazy push collection that emits values over time. Angular uses it for HTTP and events, letting components react instead of polling. Forgetting to unsubscribe leaks memory and keeps destroyed components alive.
Apollo Client: GraphQL as Reactive State
Apollo Client turns your GraphQL API into reactive state that components read like a local cache. It shines when multiple views share overlapping data, but teams often footgun by sending one massive query instead of letting the cache normalize fragments.
Testing SvelteKit load Functions
A SvelteKit load function consumes a request event and returns page data. Unit test it by mocking the event object in Vitest, not by mounting the page. Never test it through component rendering, because load runs before the component initializes.
Angular JIT: Runtime Template Compilation
Angular JIT ships the compiler to the browser and builds components on the fly. It speeds up development rebuilds but pushes compilation cost to runtime. The footgun is deploying it to production, bloating bundles and hiding template errors until runtime.
Virtual DOM Diffing: Minimal DOM Surgery
Virtual DOM diffing finds the smallest real DOM ops to sync a lightweight tree with new state. Frameworks batch rapid UI changes instead of repainting everything. The footgun is treating the diff as free; missing keys in lists force expensive reconciliation.
Build Automation: The Engine of CI/CD
Build automation is a repeatable script that turns source code into a runnable application. It's the first step in any CI/CD pipeline, compiling code and running tests. The main footgun is creating brittle scripts that only work on one developer's machine.
Automated Testing: Catch Bugs Before They Ship
Automated testing is like a robot QA engineer checking every code change instantly. It's the engine of CI/CD pipelines, running tests on every commit to give developers immediate feedback on business risks.
Artifact Repository: Your CI/CD's Private Library
An artifact repository is your CI/CD's private library for build outputs like packages and images. CI pipelines publish artifacts here, and deployment scripts pull from it.
Infrastructure as Code: Manage Servers with Code, Not Clicks
Infrastructure as Code (IaC) treats servers and networks like software: defined in files and versioned in Git. It's used to automate cloud resource provisioning on AWS or GCP, ensuring consistent, repeatable environments.
Blue-Green Deployment: Zero-Downtime Releases
Run two identical production environments, Blue (live) and Green (new). To deploy, just flip a switch routing traffic to Green. This enables zero-downtime releases and instant rollbacks. The footgun is using DNS for the switch, which can lag due to caching.
Canary Release: Test New Code on Real Users, Safely
A canary release is like sending a canary into a coal mine: expose a new version to a small group of users to detect problems before a full rollout. It's used to safely test changes in production by gradually shifting traffic.