Today I Learned

2026년 7월

2026-07-14

General concepts I hit while tidying up my dev environment: shell quoting, monorepo publishing, CI runners, guard design

A TIL distilling shell word splitting, workspace publish rewriting, CI runner mismatches, and fail-open guards into general concepts encountered while maintaining tooling and infrastructure

A path held in a shell variable, if it contains spaces, splits into multiple arguments when used unquoted and the command silently breaks
Internal monorepo dependencies should be linked with the workspace protocol and published with a manager that rewrites them to real versions

2026-07-13

Starlight graph, SW cache, Playwright triage, ESLint guardrail

A TIL covering Canvas star nodes, Service Worker SWR and generation security, CI flaky classification, and design-system ESLint guardrails in one day

Stabilize Canvas node decoration with ID hash and always restore globalAlpha and shadowBlur right after drawing
For red Playwright CI, split flaky from deterministic failed using retry results first

2026-07-11

Directing a scroll-driven home-hero narrative

A day implementing a TIL→Knowledge promotion demo and a pipeline section with sticky scrolly, CSS keyframes, and view-timeline — no GSAP

sticky scrolly makes a scroll time axis as tall as the wrapper, and if phases derive from progress the JS stays thin
A hero live demo can build a loop with just a clip-path steps wipe + animation-delay

2026-07-10

Modal peek stack and a CSS-layer package

A day aligning peek UX and theme customization via document push inside a single dialog and @layer-based editor CSS splitting

gallery→peek is more continuous when you just swap documentId in the same shell rather than opening a fresh dialog
async resolve must block the (newId, oldContent) intermediate frame with a render-time reset

2026-07-09

Hierarchical document nav and viewer bundle splitting

A day tuning both portfolio-demo depth and bundle size at once, via a page push/peek navigator and a separate read-only viewer entry

A document graph is better separated from the flat editor via a page block + push/peek navigator contract
peek/embed can share DOM with the editor, but the import graph must differ for the viewer bundle to shrink

2026-07-08

Mobile pointer gestures and a server image proxy

A day spent stabilizing touch drag/resize and, in an unoptimized environment, cutting transferred bytes with an image proxy

Reworked the drag behavior so dragging by touch doesn't scroll the page along with it
Added a proxy so images ship only the size needed, not the whole original

2026-07-07

Making Nested UI Re-renders O(1) — read-model, external store, and render-count tests

In an immutable-tree editor, editing a single line redrew everything; here's how I first pinned the problem with a test, then cut row and container re-renders with a normalized projection and per-id subscriptions

An immutable tree patch gives ancestors a new ref too, so passing props down triggers O(depth) re-renders — a normalized entry plus per-id subscription can cut it to O(1)
The entry cache must be stabilized by output value-equality, not input ref, and the external store sync must run synchronously at the choke point right before setState

2026-07-06

Bundle Shared Vendor, Cross-Block Selection, Floating-UI Coordinates

webpack splitChunks traps, cross-block range operations in a hybrid editor, selectionchange·scroll anchor patterns, Context subscription separation

Using chunks:all with a fixed name on a catch-all vendor pulls dynamic imports up into a shared chunk.
For cross-block text operations, stateless derivation from getSelection + a single boundary split is safer than range state.

2026-07-05

Block-Editor Ordering, Collaboration, and Keyboard Contracts

General patterns: fractional ordering, optimistic rebase, IME defer, keyboard undo delegation, scoped popover, Jest ESM shim, and more

For sibling ordering, a fractional position key + neighbor anchor + tie-break is better for concurrent inserts than an integer index.
Optimistic UI can't rebase without an inverse patch, and the remote seq must be the merge authority.

2026-07-04

The Document Is the Host SoT; the Editor Is a Focused Guest

Explaining, for a first-time reader, the host/guest boundary in a block-document editor, React external-store snapshots, the 2-stack undo, and HTML5 drag and selection/copy

Document meaning is owned by host patches, and the rich-text engine is kept only as a guest for the focused block.
Using only a ms timestamp in a useSyncExternalStore snapshot drops re-renders on same-ms mutations — a monotonic revision is needed.

2026-07-03

Perf Is a 3× Median; Prefetch Comes as a Set with Skeletons

Sorting out lab-trace outliers, SSR prefetch query-key alignment, CLS skeleton reservation, and server-injected JSON-LD in one day

A single dev-server Performance trace often has outliers, so before/after must be compared with the median of N reloads.
SSR prefetch is a cache miss if the query key differs from the client by even one character, and it must be treated as a set with skeleton-height reservation, or CLS results.

2026-07-01

Long Lists: flatten → SSR First Slice → virtualizer

A pattern that separates infinite scroll from list virtualization, guarantees first HTML with an SSR static gate, then switches to a virtual list

Infinite scroll controls the data-exposure ceiling; virtualization controls the DOM ceiling — each separately.
Flatten a nested group UI into header/item rows before feeding it to the virtualizer.

2026년 6월

2026-06-30

Direct-Upload Contract, CSS-Token Theming, Hydration Boundaries

Shared principles learned from the 4-step presigned-URL upload, a single generator for @layer-based token theming, and fr layout with post-mount hydration

A presigned-URL upload is a 4-step contract of presign→PUT→complete→create, and skipping the complete notification means the backend never registers the upload.
CSS-token theming must separate @layer (priority), @scope (scope), and light-dark() (mode), and unify runtime and build CSS under a single generator so they don't diverge.

2026-06-29

Choosing a Search Backend in a Serverless Environment

What to put inside vs. outside the function in serverless, and how to hide swappable search behind a provider contract

A search engine that needs to stay resident can't run inside a serverless function, but can be replaced by a pre-built in-memory index.
Build artifacts read at runtime must be declared in bundle file tracing, or they go missing on cold start.

2026-06-28

WebSocket Streaming and LCP Improvement

Measurement, UI, and resource priority learned while streaming partial agent responses and improving landing LCP in parallel

You can stream partial results over WebSocket as well.
The priority of the LCP resource has a large impact on the actual metric.

2026-06-27

WebSocket Streaming Experiment

What I learned from WebSocket handshake/reconnect/heartbeat design and observing streaming timing

Heartbeats must be designed with the cost of keeping the connection alive in mind.