← Advanced Protocol Hub

DOM Adapter — Advanced Protocols

Vanilla DOM adapter: plain <a class="alap"> anchors, driven by new AlapUI(config). No framework, no build step required. Personalized around the vanilla-JS ecosystem — the async queries here search HN for vanilla javascript, and the static links are MDN / TC39 / WHATWG references.

Placement Compass Rose (click a direction to set placement on every trigger on this page)

Click any direction; every .alap trigger on the page gets that data-alap-placement. Click the active direction again to clear and fall back to the trigger's own default.

Quick confirm — Static DOM links (no async, opens instantly at the compass direction).

1. Progressive Async Menu

Deterministic :slow: mock

Click opens a menu with "Loading…" centered over the trigger. Two seconds later the item rows fade in and the menu FLIPs into its final placement.

Slow menu — 5 items in 2s

Fast menu — 8 items in 500ms

Real data: HN search for vanilla javascript

:hn:search:$vanilla_js: — Algolia full-text search, live off the wire. Alias defined in the config so the multi-word query survives the tokenizer.

Top HN stories about vanilla JS

2. Mixed Static + Dynamic

Static tag | slow protocol

static mock (async) HN (async)

The static items render instantly; the async items fall in when the :slow: timer fires. Provenance is shown by the left border on each row (see source_mock / source_hn classes).

Static DOM links + 3 slow items

Static DOM links + 4 HN stories

3. Error and Empty Placeholders

:flaky: for deterministic error / empty states

Placeholder rows are marked with [data-alap-placeholder="error" | "empty"]. A CSS rule colors errors red and empties green; the default "Loading…" row is italic gray.

Forced error after 800ms

Empty result after 800ms

Static + one error + one slow (mixed)

4. Lens — Metadata Card

Lens with progressive load

The lens is activated by class="alap-lens". Same expression grammar as the menu; the renderer picks lens-style fields (image, title, author, summary).

DOM ecosystem lens (static + slow)

Lightbox with progressive load

class="alap-lightbox" switches renderers. The lightbox pre-loads its first item while the slow protocol is still in flight; once the second item arrives it becomes the next slide.

DOM lightbox (static image + slow)

6. In-Flight Dedup

Two triggers, same token

Both triggers below use :slow:2500:4:. Open one menu, then (while it's still loading) open the other — the second trigger subscribes to the existing in-flight request and both resolve together, with a single network-style delay.

Trigger A — slow 4 items    Trigger B — same token