EdgeCases - Frontend Insights for Senior Engineers

Normal layers: last wins. Important layers: FIRST wins. Learn why !important inverts layer priority.

Benign but scary. Learn why modifying layout in a ResizeObserver callback triggers browser loop protection.

Explicit caching opt-in with 'use cache', cacheLife profiles, and tag-based revalidation

Deeply nested recursive types crash the compiler—learn to optimize with interface caching and tail recursion

Why linear chat history fails for engineering—and how structured Artifacts provide the missing state layer

Wasm engine replaces Rust binary—90% smaller bundles and zero cold starts

Stop hacking refs—use the stable hook designed for non-reactive logic

Why transform is S-Tier and width is F-Tier—mastering the browser rendering pipeline

The difference isn't in policies—it's in the thousand small decisions that reveal whether remote is core or cosmetic

Canonical tags are hints, not directives—Google's ~40 signal algorithm may override your preference

Skipping layout boosts performance but breaks scrollbars—use contain-intrinsic-size: auto to fix the jump

Fix the jagged edges and flickering lines on expanding images with outline: 1px transparent

Stop writing top/right/bottom/left—use inset to handle all four offsets in a single line

Don't just remove animations—replace motion with opacity to preserve context while respecting accessibility

Why border-radius sometimes leaves a gap between background and border, and how background-clip fixes it

Context fragmentation, multimodal gotchas, and agentic patterns at extreme scale

Antigravity's autonomous agents excel at large refactors but break debugging flow. Cursor's inline copilot preserves immediacy but can't parallelize. The edge cases reveal when each architecture dominates.

Cache pages, components, and functions with opt-in directive and stale-while-revalidate profiles

Rust-powered bundler with incremental compilation, file system caching, and production parity with Webpack

Full filesystem and npm package access in middleware—proxy.ts replaces middleware.ts with Node.js runtime

Layout deduplication, viewport-based cancellation, and interaction prioritization reduce redundant requests

Explicit caching with 'use cache', Turbopack as default bundler, and proxy.ts for Node.js runtime clarity

Figma's spring physics can't translate to CSS cubic-bezier—understand the gap between design and code

grid-template-columns won't animate—fr units lack computable intermediate values, breaking smooth transitions

JavaScript animations cause layout thrashing—learn CSS tricks and FLIP to keep animations compositor-safe

The more you know, the less confident you feel—why expertise breeds doubt and how to work with it

Streaming SSR sends HTML in chunks—but does Googlebot wait for the complete stream before indexing?

Schema.org validation passes, but Google Rich Results Test says 'No items detected'—here's why

loading=lazy on hero images delays LCP; WebP needs JPEG fallbacks—optimize without breaking SEO

Client-side navigation breaks traditional PageRank flow—hub-and-spoke vs mesh, the death of nofollow sculpting

Invisible bounding boxes in fonts cause alignment issues—learn to fix them with CSS overrides

font-display values force a choice between fast rendering and layout stability—understand the trade-offs

Match fallback font metrics to custom fonts and eliminate 90% of CLS from font loading

font-feature-settings doesn't cascade—it replaces. Learn the high-level font-variant-* alternatives

Missing crossorigin causes double downloads; too many preloads delay LCP—use surgically

Prevent browsers from creating fake font variants and ensure professional typography

Master custom typography with @font-face and variable fonts for better design flexibility