Learn one idea.
Put it to work.

Effectful web applications that respect a person's work: explicit lifetimes, meaningful state, portable templates, and inclusive interactions.

Build a working order editor, share its state between views, and choose the next lesson from the feature you need to ship.

Design a reusable account picker by separating state, interaction, output, and the lifetime each caller controls.

Build interfaces by understanding their state, keyboard behavior, native hosts, and accessibility contracts.

Build and run producer-driven work with Effect values, errors, services, and cleanup.

Start with the smallest constructor that matches your producer, then add typed failure, services, and cleanup where they actually exist.

Build a workspace feed whose configuration, connection, and cleanup are resolved when it is observed.

Give an Fx a typed consumer without coupling the producer to logging, storage, transport, or UI.

Connect independently owned producers and consumers through one scoped, typed publication boundary.

Turn pushed values into useful domain data without hiding failures, services, or timing.

Carry only the local history a transform needs, then expose transitions, changes, and groups explicitly.

Choose whether inner Fx overlap, wait, replace one another, or are ignored.

Coordinate independent producers, then recognize when a value starts work of its own.

Keep, omit, gate, and stop pushed values without confusing selection with cancellation policy.

Put clocks, quiet periods, rate windows, and retries in the Fx graph with explicit cancellation.

Translate expected errors, retry subscriptions, and materialize complete outcomes deliberately.

Keep Effect requirements explicit while giving each Fx run a clear Layer, Scope, and shutdown boundary.

Choose the runner that matches what your application needs from a producer.

Trace values, errors, completion and cancellation through every public Fx operation.

Develop a review-queue selection model with named commands, derived queries, typed consumers, and a lifetime that matches the feature.

Carry Schema-checked RefSubject state from Typed HTML into the adopted browser DOM.

Use one constructor for values, Effects, Streams, and Fx while knowing when each source starts and stops.

Build a workspace review model whose writable state, derived selection, and public capabilities agree.

Turn a queue model into live queries while preserving absence, service requirements, and the distinction between state and event history.

Model a review queue's ordered rows, keyed lookup, optional focus, field edits, and settled outcomes with the appropriate RefSubject operations.

Keep a current read, update stream, and invalidation token together when a value comes from an independently owned source.

Keep a reservation decision coherent, separate remote work from local commits, and choose when a writable representation is safe.

Give independently built routes, commands, and views one selection model without exposing unnecessary write authority.

Generate branded identifiers, retain identity across renders, and replace generation deterministically in tests.

Represent loading, refreshes, failure, and optimistic edits as values that work in any renderer.

Connect a decoded request, replacement policy, resource identity, AsyncData, and a working template in one scoped feature.

Publish provisional values, preserve rollback history, and decide which server response may commit when edits overlap.

Write a static template, add one live value, and mount it in the browser.

Build a reusable search field by separating its fixed markup, live values, native events, and component lifetime.

See how ordinary values, Effect values, streams, arrays, and renderer output become one template part without losing errors or requirements.

Keep one rendered range per stable key so insertions, removals, and moves preserve the browser state that belongs to an item.

Choose the exact browser field a scalar interpolation owns, including sparse attributes and boolean presence.

Combine native attributes, DOM properties, dataset values, and event handlers without losing their individual semantics.

Understand the local token ledger that lets Typed update its classes while preserving classes added by other code.

Attach real browser listeners whose work is an Effect, while keeping listener options, errors, services, and lifetime explicit.

Use ref for the small set of browser integrations that need the exact element, with an Effect-owned lifetime and explicit hydration behavior.

Author SVG and MathML directly; Typed builds the native namespace transitions and attributes the platform expects.

Keep textarea, title, script, and style content in the context the browser gives it, with explicit limits around escaping, closing tags, and trust.

Render a live RenderEvent Fx into one real browser root with an explicit lifetime.

Serialize a template to HTML chunks or one string without coupling it to HTTP transport.

Adopt compatible Typed SSR output below one DOM host, or construct fresh output when the adoption contract does not match.

Send buffered or streamed Typed HTML from Effect HTTP, then adopt that same inner template in the browser.

What the DOM renderer creates, mounts, hydrates, and reconciles—and the local size each cost depends on.

See which exact DOM location each scalar template interpolation owns and what one push changes.

Change when local DOM work runs without changing what a template owns or how a dynamic part is updated.

Choose the output boundary that matches the renderer you already have.

Carry exact Nodes, DocumentFragments, Wires, and nested rendered values through a Typed dynamic range without cloning them.

Carry ordered, trusted renderer-owned HTML chunks through Typed SSR while keeping completion and the trust boundary explicit.

Hand existing DOM output across a renderer boundary, including a stable multi-node range when one is genuinely needed.

Build a renderer or framework target on the public Template, HtmlChunk, and RenderEvent contracts.

Build or decorate a renderer at the public RenderTemplate boundary while keeping parsing, output ownership, and platform policy inside the target.

Use EventSource when a renderer needs scoped, native delegation across the concrete elements it produced.

Start with a normal template, add local state when needed, and test the same save behavior the button runs.

Develop a report screen by assigning each interaction to the browser, a Typed family, or application state.

Build a changing editor toolbar and trace the relationship between command identity, DOM registration, browser focus, and application state.

Build a project switcher from a compact known-value choice to searchable input, then attach commands to the project actually selected.

Explain bounded measurements, threshold semantics, native rendering, and the difference from progress or input.

Use assertive live-region semantics deliberately and distinguish announcements from interactive recovery.

Use explicit heading levels while keeping outline semantics and design-system typography separate.

Name a semantic group explicitly without inventing fieldset behavior or implicit label relationships.

Choose semantic separation, orientation, and styling without implying a draggable splitter.

Provide accessible text with clipping while distinguishing visual hiding, semantic hiding, and focus visibility.

Understand zero-argument values, parameterized components, pipeline arguments, and E/R inference.

Use tabindex deliberately without mistaking focusability for an interaction pattern.

Register runtime element handles with scope cleanup and explicit navigation metadata.

Build keyboard movement from a collection while choosing roving or virtual focus explicitly.

Use an explicit role while preserving naming, structure, and native interactions.

Preserve a component contract while extending its real DOM host.

Supply application services, await visible output, and dispose every mounted story.

Understand GET registration, decoding, request services, and buffered versus streaming HTML.

Choose button types, connect Effect handlers, and preserve browser activation through styling and custom hosts.

Understand which clicks enter Typed Navigation and which remain browser-owned anchor behavior.

Connect native checked and indeterminate properties to one hydrated state without confusing mixed presentation with submitted data.

Model a binary setting with native button activation and explicit persistence and form participation.

Combine native radio inputs, named form values, and optional collection-based focus movement.

Assemble trigger, content, and options while making keyboard collection and native form differences explicit.

Connect input-time numeric updates to an accessible range control and an explicit domain value.

Use native number entry while keeping empty drafts, finite state, bounds, and commit timing explicit.

Understand decoded values, field codecs, form context, validation, metadata, and the native submit boundary.

Build a trial-request editor by connecting native controls, decoded schema values, accessible errors, and an explicit submission preview.

Keep input focus stable while navigating filtered suggestions and distinguish text from a validated choice.

Build a persistent single-choice list and understand when navigation commits the value.

Compose native popover command menus without confusing active focus with application state.

Connect horizontal command focus to independently owned submenu popovers.

Choose automatic or manual activation and keep tab identity separate from panel lifetime.

Use the Tab re-export correctly and design instance-safe local panel switches.

Compose a roving command group while keeping command state and focus state independent.

Model parent identities and visible descendants without mistaking focus for file selection.

Build a two-dimensional keyboard surface and distinguish it from an editable spreadsheet.

Keep row expansion identities separate from cell focus identities in a hierarchical grid.

Build a manual slide sequence and understand the state required before adding automatic motion.

Connect native pointer dragging and keyboard resizing to the same bounded pane layout.

Develop a report's explanation, legend, and archive decision with distinct native visibility and dismissal contracts.

Separate opening, cancel requests, accepted actions, and native modal behavior.

Connect open state to show, showModal, and close without adopting compound parts.

Build a manual popover with explicit dismissal and honest focus expectations.

Own markup and reverse toggle synchronization while reusing the native observer.

Compose native details and summary with hydrated state and predictable structure.

Use a one-way ref with an explicit browser-to-state toggle path.

Connect a stable description ID, focusable anchor, delays, and manual popover content.

Preserve pointer and focus transfer into a named non-modal preview.

Build a small linked review app, then trace which contract owns URL input, history, selected work, and page readiness.

Design shareable queue filters and issue links, decode domain parameters once, and distinguish malformed URLs from missing pages.

Follow issue URLs through typed selection, cancellable loading, route-local services, retained layouts, and scoped recovery.

Design a queue's Back behavior, observe committed versus pending destinations, and coordinate an editor's leave confirmation through Effect.

Separate a normal non-match from an operation that failed while selecting or transforming input.

Turn state, request ordering, DOM identity, and cleanup promises into tests that can actually disprove them.

Run typed issue pages as request-local GET HTML routes, choose buffered or streaming responses, and test the real HTTP boundary.