How this website was built.

Follow a page from the restaurant domain through its document, embedded game, build artifacts, and separate application services.

The formal model

How it connects to this website

The source map separates app/ routes, game-src/ editable modules, public/games/ browser assets, db/ schema, and tools/ build operations. GameFrame provides an iframe wrapper with Restart, Fill browser window, and Full screen. Packed Squarespace game builds are an additional publication path; they should not be conflated with a whole application deployment. The Spades publication builder explicitly states that online-room publication is a separate task.

const layers = new Map([
  ["restaurant-page", ["game-frame"]],
  ["game-frame", ["game-document"]],
  ["game-document", ["browser-APIs"]],
  ["browser-APIs", []]
]);
function visit(name, seen = new Set()) {
  if (seen.has(name)) return seen;
  seen.add(name);
  for (const dependency of layers.get(name) ?? []) visit(dependency, seen);
  return seen;
}
console.log([...visit("restaurant-page")].join(" → "));

Run context: Run in a JavaScript console or save as architecture.mjs and run with Node.js.

restaurant-page → game-frame → game-document → browser-APIs

Going deeper

For advanced study, consider failure independence. If a decorative image cannot load, should ordering information remain usable? If a compression API is absent, should an existing game disappear? The current game builders retain an existing frame when replacement cannot proceed. This is an example of a compatibility contract. A dependency graph becomes useful engineering documentation when it also records which failures are recoverable, which layers hold state, and which component owns cleanup.

The project's architecture is heterogeneous: a content-management system, embedded browser applications, and a separate application backend coexist. That is a practical composition problem, not evidence that every available framework is being executed on every page. Dependencies listed in a package file describe the development project; only actual built and delivered artifacts establish a visitor's execution path.

Applied laboratory: take one visible feature and identify its artifact, owner, dependencies, and observable success criteria. For a game launch, write down the canonical entry page, the target frame, the game document, and the action that proves it is playable. Then deliberately imagine one failure at each boundary. A missing frame, unsupported API, failed image, and rejected fullscreen request should not all produce the same unhelpful blank rectangle. Each has a different cause and a different reasonable recovery.

This analysis extends to change impact. If a global script is modified, every page that loads it is potentially affected. If a path-scoped installer changes one frame, the impact is narrower, but it still depends on the host's lifecycle. Enumerating dependencies helps select verification work. It also prevents a change to a single game from being described as a release of all account features. To document the system academically, distinguish component diagrams, deployment diagrams, and runtime traces: the first explains logical responsibilities, the second explains where artifacts execute, and the third explains a particular interaction over time.

A useful oral-exam question is: what could remain wrong even if every dependency loads successfully? Answers include an incorrect rule, misleading status message, inaccessible control, private-data leak, or confusing layout. Architecture organizes these obligations; it does not eliminate them.

Common traps

A successful local build is not evidence that a public page was updated.

An iframe is a document boundary, not automatic proof of a strong security boundary.

Questions to investigate

Draw the dependency graph for a catering inquiry from selection to submission.

Identify which layer should decide a legal card move and explain why.

Further reading: HTML living standard · HTML living standard: The iframe element · esbuild API

Read symbols as a grammar, then distinguish a syntactically valid program from a program that does the intended job.

The formal model

How it connects to this website

The Spades source exports typed card helpers, rule definitions, and engine operations instead of embedding all decisions in click handlers. Build scripts bundle modules into browser-deliverable JavaScript. The build also parses generated script text to catch syntax failures. That is a useful gate, but it does not validate every game mechanic or interface interaction.

function addPoints(score, bonus) {
  if (!Number.isSafeInteger(score) || score < 0) throw new TypeError("Invalid score");
  if (!Number.isSafeInteger(bonus) || bonus < 0) throw new TypeError("Invalid bonus");
  const next = score + bonus;
  if (!Number.isSafeInteger(next)) throw new RangeError("Score overflow");
  return next;
}
console.log(addPoints(100, 25));
try { addPoints(100, "25"); } catch (error) { console.log(error.message); }

Run context: Run in a JavaScript console or as syntax.mjs.

125, followed by Invalid bonus

Going deeper

At a research level, semantics permits precise questions about equivalence. If two score functions return the same result for tested inputs, they may still differ on overflow, malformed data, or side effects. A proof needs an explicitly bounded domain or reasoning for all admissible inputs. Testing supplies observations; formal semantics supplies a language for explaining what those observations are meant to support.

Names also matter. A variable named price may denote dollars, cents, a pre-tip subtotal, or a final quote. Good names encode units and role: foodCents and tipCents are easier to reason about. Comments should explain invariants and tradeoffs rather than narrate punctuation. The durable intellectual work is turning a vague intention into an unambiguous contract that a human reader, compiler, and test can all interrogate.

Applied laboratory: annotate a ten-line program without running it. Identify each binding, expression, branch, function call, and possible exception. Then specify an input/output relation using a few representative and boundary cases. If your prose says that negative bonuses are forbidden, the implementation should enforce that precondition or clearly assign enforcement to its caller. A comment alone has no runtime effect.

Next consider referential transparency. If an expression can be replaced by its result without changing observable behavior, it behaves transparently in that context. A pure calculation of a percentage is often close to this ideal. Reading the current time or changing local storage is not. Mixing these effects into arithmetic makes explanations and tests harder because the result depends on the environment as well as the apparent arguments.

Formal methods begin with this discipline of precise meaning. A Hoare-style statement {P} C {Q} says that if precondition P holds and command C terminates normally, postcondition Q holds. It must account for exceptions and termination assumptions. For the points example, a postcondition includes that the output is a nonnegative safe integer equal to the mathematical sum. This is a modest but meaningful specification, far more useful than saying the function is advanced or intelligent.

Common traps

Valid syntax can express an incorrect algorithm.

Do not use eval to turn user-supplied text into a program.

Questions to investigate

Predict the difference between 10 + 2 and "10" + 2.

Refactor a calculation into a pure function and list its preconditions.

Further reading: ECMAScript 2026 language specification (ECMA-262, 17th ed.) · Types and programming languages

Use TypeScript to describe card identities, match phases, and commands while retaining runtime validation at external boundaries.

The formal model

How it connects to this website

Spades defines Seat, Suit, Rank, CardId, MatchPhase, MatchCommand, MatchState, and SeatProjection. CardId uses a template-literal type combining a rank with a suit. Public-history helpers accept only the subset of projection fields needed for the last move. This makes their information requirements explicit and supports separation between public plays and private hands.

type Action =
  | { kind: "bid"; tricks: number }
  | { kind: "play"; card: string };
function describe(action: Action): string {
  switch (action.kind) {
    case "bid": return `Bid ${action.tricks} tricks`;
    case "play": return `Play ${action.card}`;
    default: {
      const unreachable: never = action;
      return unreachable;
    }
  }
}
console.log(describe({kind: "play", card: "AS"}));

Run context: Paste into the official TypeScript Playground, then run. Alternatively compile with TypeScript and run the emitted JavaScript.

Play AS

Going deeper

For deeper study, connect this design to preservation and progress. In a small formal language, preservation says that one evaluation step preserves a well-typed expression's type; progress says a well-typed closed expression is a value or can step. These theorems depend on precise rules. Real browser applications add network failures, mutable documents, external scripts, and user input, so a local theorem cannot be promoted into an unrestricted application guarantee.

Types remain valuable because they compress assumptions into machine-checkable structure. A projection that omits other players' cards restricts what bot and interface functions can accidentally read. A versioned command makes protocol evolution visible. An integer-with-units convention helps prevent mixing milliseconds and seconds. The objective is to make invalid combinations harder to express and remaining assumptions easier to audit.

Applied laboratory: write down the complete set of values your interface can accept for one setting. A suit-order preference is a permutation of four suits, so there are 4! = 24 distinct orders. An arbitrary array of strings has a vastly larger domain. A normalization function narrows that domain at runtime and supplies a defined fallback when stored data is malformed. A static declaration can then describe the normalized values used inside the program.

This illustrates the boundary between representation and validity. A value may be representable by a type yet invalid for the current state. A bid of 13 is a number and lies in the game's numeric range, but it may still be rejected when it is another seat's turn. Types express broad structural constraints; the transition system expresses contextual legality. Both are necessary.

For a deeper exercise, encode different phases with phase-specific fields rather than one large record full of nullable values. Compare how many impossible combinations each design admits. More restrictive types can make code clearer, but they also introduce conversion and maintenance costs when the network protocol or persisted format changes. The engineering decision should be evaluated through concrete invalid states prevented, useful errors produced, and migration obligations created.

Common traps

A type assertion does not validate JSON.

Do not advertise static types as a proof that a program has no bugs.

Questions to investigate

Add a resign action and observe the exhaustiveness error.

Write a runtime predicate that validates an unknown bid before casting it.

Further reading: TypeScript handbook: Narrowing · Types and programming languages

Understand semantic elements, tree operations, text safety, and the difference between a button and a decorative shape.

The formal model

How it connects to this website

Skewer Storm's discovery catalog, image credits, glossary, and source links are assembled with createElement, textContent, and append. The Spades layout observes the hand container so it can adapt after visible layout changes. Packed game installers use MutationObserver to locate their existing frame, then stop or reconcile within a bounded scope. The restaurant footer's photo link is a normal anchor as well as an Extras entry.

<!doctype html>
<meta charset="utf-8">
<h1>Request preview</h1>
<label>Notes <input id="notes" value="A table near the window"></label>
<button id="preview" type="button">Preview notes</button>
<p id="result" role="status"></p>
<script>
  document.querySelector("#preview").addEventListener("click", () => {
    document.querySelector("#result").textContent =
      document.querySelector("#notes").value;
  });
</script>

Run context: Save as document.html and open it in a browser.

The notes appear as literal text after Preview notes; markup-like input remains text.

Going deeper

DOM programming has an ownership problem. A custom script sharing a content-management page should select a narrow root, avoid unrelated content, and restore only attributes it changed. Repeated initialization should not create duplicated buttons or listeners. This is idempotence at the document level: applying an installer twice should have the same intended result as applying it once.

At scale, frequent reads of geometry interleaved with writes can force repeated layout work. Collecting measurements, then applying changes together, helps keep an interface responsive. This is an engineering inference about browser pipelines rather than a claim that every control on this site has been fully optimized. The chapter's minimal example prioritizes semantics and correct interpretation; production layout and asynchronous lifecycle add further obligations.

Applied laboratory: inspect a small page as a tree rather than a screenshot. Name the root, landmarks, heading hierarchy, control labels, and status region. Then ask which information remains understandable if styles do not load. A semantic document should preserve much of its purpose. If the meaning exists only in background images or positioned decoration, the content model needs work before further ornament is useful.

Node identity matters when code updates a document. Replacing an entire subtree can discard focus, selection, and listeners attached to its old nodes. Updating a stable status element's text preserves more context. The same principle explains why a game should not rebuild every control after each small score change when a narrow update will suffice. A renderer needs a deliberate policy for which nodes persist and which are recreated.

For advanced readers, distinguish the DOM tree, accessibility tree, layout tree, and painted output. These structures are related but not identical. A node may be present in the DOM yet not visible, or visible yet missing an accessible name. Verification should examine the relevant representation for the claim being made. Counting buttons in markup does not prove they can be reached by keyboard; a screenshot alone does not prove that a screen reader receives an understandable status update.

Common traps

A click listener on a div does not automatically supply keyboard activation.

A selector that matches the wrong control can be syntactically valid and visually destructive.

Questions to investigate

Enter <strong>Hello</strong> and explain why it is displayed literally.

Replace the paragraph with an output element and compare the document semantics.

Further reading: HTML living standard · DOM standard

Connect gilded visual styling to the cascade, layout constraints, responsive geometry, and readable information hierarchy.

The formal model

How it connects to this website

Catering uses a dedicated kb-catering root, preset cards, a structured summary, gold actions, and local decorative artwork. Spades uses separate hand-layout and table-layout modules plus CSS rules for expanded modes. The fullscreen wrapper changes the shell and restores prior body overflow on exit. These details show that decorative treatment, content hierarchy, and available-space management are connected but distinct tasks.

<!doctype html>
<meta charset="utf-8">
<style>
  :root { --ink:#153c38; --paper:#fff8e8; --gold:#d9b35f; }
  body { background:var(--paper); color:var(--ink); font:18px system-ui; padding:2rem; }
  .choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1rem; }
  button { min-height:48px; padding:1rem; border:2px solid var(--gold); border-radius:.6rem; background:#f5d985; color:var(--ink); font:inherit; }
  button:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
  button:active { transform:translateY(2px); }
  @media (prefers-reduced-motion:reduce) { button { transform:none; } }
</style>
<h1>Choose a gathering</h1>
<div class="choices"><button>Small celebration</button><button>Team lunch</button><button>Build your own</button></div>

Run context: Save as layout.html; resize the browser and navigate with Tab.

The cards reflow; the active keyboard target has an obvious focus outline.

Going deeper

A research-informed interface also treats typography as a resource allocation problem. Extra ornament consumes area and attention. A card rank needs distinguishable glyphs before an elaborate card back matters. A summary should communicate the selected package before decorative animation draws the eye. These are design decisions that can be evaluated through task success and comprehension, not merely a screenshot's visual complexity.

The browser's computed style can explain which rule actually wins. A declaration present in a source file is not proof that it affects a live element. Container dimensions, inherited properties, transforms, viewport rules, and host-page CSS all participate. This is why source validation must be followed by rendered checks at representative widths and heights. Responsive correctness depends on the whole composition.

Applied laboratory: write the layout's constraints before styling it. Require a readable action label, a minimum touch target, a visible focus indicator, and a maximum line length for paragraphs. Then add the feather pattern and gold border while preserving those constraints. This reverses a common failure in which an attractive composition is built first and the controls are squeezed into whatever space remains.

Responsive design also involves height. A wide laptop can have a short viewport, especially when a toolbar or browser zoom consumes space. A design tested only by width can still place a bid button below the visible area. A phone in landscape changes both dimensions. Card-table rules must evaluate the whole available rectangle and decide when a different arrangement is appropriate.

The formal distinction between intrinsic and extrinsic sizing is useful here. Content has minimum and maximum contributions; containers impose additional constraints. A long unbroken string can change a minimum-content width unexpectedly. min-width: 0 on an appropriate flex or grid item can permit shrinking, but the content still needs a wrapping or overflow policy. These mechanisms should be applied with an explanation of the actual pressure in the layout, not copied as mysterious incantations from an unrelated page.

Common traps

Gold-colored text can have poor contrast on a gold background.

Hiding overflow may hide controls instead of solving a layout problem.

Questions to investigate

Calculate whether thirteen 54-pixel cards with 6-pixel gaps fit into 800 pixels.

Test the layout with 200% browser zoom and a longer translated label.

Further reading: CSS cascading and inheritance level 5 · CSS grid layout module level 2 · Web content accessibility guidelines (WCAG) 2.2

Explain why asynchronous code can remain single-threaded at the document level and why heavy work can delay an animation.

The formal model

How it connects to this website

Skewer Storm obtains timestamp deltas from animation callbacks, updates only running or intermission modes, and renders each frame. Spades schedules a hand redraw and observes changes to its container. Its observers are disconnected on pagehide. The compressed publication loader returns a promise from stream decoding instead of blocking the page while waiting for a document to appear.

console.log("1 · synchronous start");
setTimeout(() => console.log("4 · timer task"), 0);
Promise.resolve().then(() => console.log("3 · promise microtask"));
console.log("2 · synchronous end");

Run context: Run in a fresh JavaScript console or as event-loop.mjs.

1 · synchronous start; 2 · synchronous end; 3 · promise microtask; 4 · timer task

Going deeper

In concurrent systems, a happens-before relation identifies orderings justified by the program model. It is better than assuming wall-clock simultaneity. A callback registered first may still wait for a different external event. Network responses may return out of order; the interface must decide whether a later request supersedes an earlier one. Explicit revisions, cancellation, or stale-result checks are useful patterns.

This matters for character animation too. A list of scheduled launch times encodes intent, while elapsed-time interpolation determines the visible position. If the main thread pauses, actual paints may be delayed. Engineering a resilient sequence means defining the current phase from elapsed time, cleaning up old state, and preserving a readable fallback when motion is disabled. The specification of the sequence is separate from assumptions about perfect scheduling.

Applied laboratory: collect a trace with labels and timestamps around a click, promise continuation, animation callback, and timeout. Predict the ordering guaranteed by the program model, then distinguish it from ordering that merely happened during one run. This separates causal reasoning from an accident of scheduling. A trace can reveal that a network response completed promptly while a long synchronous task delayed its display.

Cancellation is another scheduling concern. If an interface is closed while an asynchronous operation remains pending, its eventual callback must not blindly update a new or unrelated screen. A generation counter can identify which request belongs to the current view; an AbortController can cancel supported operations. These patterns are possible improvements and teaching techniques, not a claim that every request in this project already uses both.

A practical performance budget lists tasks competing for the same rendering opportunity: game simulation, drawing, DOM measurement, image decoding, and decorative animation. Removing a background process might improve available resources, but it does not fix an unbounded computation in a click listener. Diagnosing performance requires measurements tied to specific work. The event-loop model supplies a way to explain those measurements and avoids treating every delay as the same kind of problem.

Common traps

A zero-millisecond timer does not run before the current call stack finishes.

Repeatedly retrying a stale browser editor does not prove an Internet bandwidth problem.

Questions to investigate

Add a second promise callback and predict the order before running it.

Measure a deliberately expensive calculation and explain which user interactions it could delay.

Further reading: HTML living standard: Web application APIs and event loops · Synchronizing with effects

Distinguish a game clock from a display refresh rate and explain the limitations of a capped variable time step.

The formal model

How it connects to this website

Skewer Storm computes dt = min(0.033, max(0, elapsedMilliseconds/1000)). Visibility changes pause running mode. The update function has a dedicated intermission branch and only advances narrative timing there. On continuation, the next wave resets the player's position and grants a short transition grace period. These are explicit mechanics in source, not claims that an arbitrary browser will maintain a particular frame rate.

function advance(position, velocity, elapsedSeconds, paused) {
  const dt = paused ? 0 : Math.min(0.033, Math.max(0, elapsedSeconds));
  return position + velocity * dt;
}
console.log(advance(10, 100, 0.02, false));
console.log(advance(10, 100, 5, false));
console.log(advance(10, 100, 0.02, true));

Run context: Run in a JavaScript console or as timing.mjs.

12; 13.3; 10

Going deeper

For graduate work, distinguish numerical reproducibility from gameplay fairness. Identical seeds and identical commands may still produce different trajectories if the simulation uses variable steps, platform-dependent timing, or non-associative floating-point summation. A deterministic card engine has fewer such problems because its important updates are discrete. A continuous shooter should not promise identical cross-device replay without controlling these additional variables.

The clock also becomes a resource in interface design. A brief launch delay can create anticipation; a long mandatory greeting can become friction after repeat visits. Timing should be an explicit, testable parameter. The lesson is to express desired launches, impacts, pauses, and completion as data or state, then verify both the schedule and the human-visible sequence.

Applied laboratory: advance a constant-speed object for one nominal second using several frame sequences. Test sixty intervals of 1/60 second, ten intervals of 0.1 second, and an irregular sequence containing a stall. Compare simulated displacement with wall-clock displacement. Under a 0.033-second clamp, the low-rate sequence advances less simulated time. This is not a contradiction; it is the chosen overload behavior.

Then specify which clock governs each mechanic. A cooldown may use simulated active-play time, a reconnect timeout uses a server clock, a greeting uses elapsed animation time, and an appointment date uses civil time with a time zone. These quantities should not be mixed simply because they all contain numbers. Pausing one clock must not unexpectedly pause another authority's timeout.

For numeric analysis, accumulated rounding can depend on operation order because floating-point addition is not associative. Summing many small increments into a very large experience total can eventually lose increments below the representable spacing. Scaled integers or a carefully defined accumulation strategy can preserve intended fractional progression. A design that promises extraordinarily large experience caps should first specify units, representation, serialization, arithmetic, and display—not merely choose a famous large number for its headline.

Common traps

A clamped time step does not make a simulation automatically frame-rate independent under every load.

Pausing rendering while leaving gameplay timers active is not a complete pause.

Questions to investigate

Compare total distance after one second at 60 Hz and at 10 Hz with this clamp.

Design a fixed-step accumulator and specify its catch-up limit.

Further reading: Fix your timestep! · HTML living standard: Web application APIs and event loops · ECMAScript 2026 language specification (ECMA-262, 17th ed.)

Map logical coordinates to display pixels and use geometric models to explain collision and safe-zone behavior.

The formal model

How it connects to this website

Skewer Storm maintains logical WIDTH and HEIGHT, resizes with the parent, caps bitmap density, and renders stars, enemies, warnings, and effects on a two-dimensional canvas. The scene also includes credited astronomical image assets. Those real observations and the game's fictional atmosphere should remain distinguishable. A visually convincing image does not make the flight model an astrophysical simulation.

function circlesOverlap(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y;
  return dx * dx + dy * dy <= (a.r + b.r) ** 2;
}
function hullFits(centerX, halfWidth, zoneLeft, zoneRight) {
  return centerX - halfWidth >= zoneLeft && centerX + halfWidth <= zoneRight;
}
console.log(circlesOverlap({x:0,y:0,r:2}, {x:3,y:0,r:2}));
console.log(hullFits(50, 8, 40, 60));
console.log(hullFits(44, 8, 40, 60));

Run context: Run in a JavaScript console or as geometry.mjs.

true; true; false

Going deeper

Spatial fairness includes perceptual alignment. The collision shape should approximately match what a player believes is solid. Transparent decorative glow should not silently enlarge a damaging obstacle. Warning colors, outlines, timing, and geometry work together; a mathematically accurate region can still be difficult to interpret if visual boundaries are weak.

An advanced extension is swept collision detection. A tiny fast object can cross a target between two frames without intersecting at either sampled position. Testing the segment of motion against the target addresses this tunneling problem. Choosing such techniques requires measuring actual failure cases and costs. An impressive effect should retain a comprehensible causal relationship between action, warning, contact, and consequence.

Applied laboratory: draw the same logical scene at several bitmap densities and compare clarity, memory usage, and frame time. Keep logical positions fixed while changing only the device transform. If an object moves differently when density changes, the program has probably mixed coordinate systems. The experiment makes the distinction between resolution and simulation geometry visible.

Next overlay collision shapes during a development build. Compare them with the opaque parts of the artwork, warning bands, and perceived safe spaces. A player's complaint can then be investigated as a difference between visual and collision geometry rather than dismissed as poor play. Debug overlays should be separate from the ordinary customer interface, but they can provide unusually clear educational demonstrations.

The depth effect can be parameterized by layers with different velocity scales. Let a distant image use α_d v and a nearby particle use α_n v, with 0 ≤ α_d < α_n. This produces parallax-like relative motion. It is an artistic screen-space model, not a claim about actual travel near a star. Scientific captions should explain real objects while labeling fictional flight and dramatic transitions. That separation lets visual creativity coexist with accurate teaching instead of converting evocative imagery into false physical assertions.

Common traps

More resolution is not free; bitmap work grows with area.

Perspective effects are artistic cues unless backed by an explicitly stated physical model.

Questions to investigate

Transform a pointer position into logical Canvas coordinates after CSS scaling.

Compare a circular collision approximation with a rectangular ship sprite.

Further reading: HTML living standard: The canvas element · Introduction to algorithms (4th ed.)

Build interactions that work with mouse, touch, keyboard, and interrupted gestures.

The formal model

How it connects to this website

Skewer Storm's input logic distinguishes spaceHeld, pointerType, touchActive, and movement settings. Mouse/keyboard firing and touch auto-fire follow different declared control paths. Public fullscreen wrappers include escape and return controls. The example below teaches a robust drag protocol; it is deliberately a standalone lesson and does not assert that Plate Panic's current glass interaction has been repaired by displaying it here.

<!doctype html>
<meta charset="utf-8">
<style>#token{touch-action:none;position:relative;width:120px;min-height:52px}</style>
<button id="token" type="button">Drag token</button>
<output id="status">Ready</output>
<script>
 const token=document.querySelector("#token"), status=document.querySelector("#status");
 let drag=null;
 token.addEventListener("pointerdown",event=>{
   if(event.button!==0 || drag) return;
   drag={id:event.pointerId,x:event.clientX,y:event.clientY};
   token.setPointerCapture(event.pointerId);
   status.textContent="Dragging";
 });
 token.addEventListener("pointermove",event=>{
   if(!drag || event.pointerId!==drag.id) return;
   token.style.transform=`translate(${event.clientX-drag.x}px,${event.clientY-drag.y}px)`;
 });
 function finish(event){
   if(!drag || event.pointerId!==drag.id) return;
   drag=null; token.style.transform=""; status.textContent="Ready";
 }
 token.addEventListener("pointerup",finish);
 token.addEventListener("pointercancel",finish);
 token.addEventListener("lostpointercapture",finish);
</script>

Run context: Save as pointer.html and drag with a mouse or touch device; interrupt the gesture and try again.

The token follows one captured pointer and returns to Ready when the gesture ends or is cancelled.

Going deeper

At a deeper level, input processing is a small distributed system between device, operating system, browser, and application. Events can be coalesced, interrupted, or delayed. The program should reason from the supplied event identity and state rather than assume a perfect stream of physical motion. Explicit cancellation is a first-class part of a successful interaction.

Accessibility extends the state model. A drag-only action may exclude users who cannot operate a pointer precisely. Offering a Load button or keyboard-selectable destination can preserve the task without requiring the same physical gesture. The aim is equivalence of meaningful outcomes, not imitation of mouse movement. Test the contract with real interactions rather than just counting event listeners in source.

Applied laboratory: test a gesture matrix containing click without movement, drag out of bounds, release outside the original element, interrupted touch, second pointer, and loss of page focus. Record the expected state after each case. A test confined to a perfectly centered drag misses the failure modes most likely to make an interaction feel unreliable.

Selection and activation should also be distinct. A card may be focused, highlighted, selected for preview, or committed as a move. Treating all four as the same state can cause accidental plays. A bid interface should keep the hand visible, communicate the selected value, and offer a clear commitment action. The engine still validates the resulting command regardless of how the interface produced it.

At a formal level, input handling is a transducer: it maps an event stream and internal state to actions and new state. Some events should be ignored, some consumed, and some forwarded to ordinary browser behavior. Writing those rules prevents accidental global interception. Keyboard shortcuts are especially important because they coexist with editing, assistive technology, browser commands, and platform conventions. A hidden shortcut should be a convenience with a visible ordinary alternative, not the only route to an important function.

Common traps

Never leave a stale drag flag after cancellation.

Do not disable Select All or ordinary navigation shortcuts globally just to add an Easter egg.

Questions to investigate

Add ArrowLeft and ArrowRight alternatives with a visible position readout.

Identify how a pointer cancel differs from a successful drop.

Further reading: Pointer events level 3 · Web content accessibility guidelines (WCAG) 2.2 · DOM standard

Explain generated chimes, oscillator graphs, gain envelopes, audio clocks, and explicit visitor control.

The formal model

How it connects to this website

Skewer Storm creates oscillator and gain nodes, applies a short attack and exponential release, tracks active voice counts, and disconnects completed nodes. Sound families separate effects and music. This is source-audited generated audio. It is not evidence of a licensed commercial soundtrack or a promise that audio will bypass a browser's interaction requirement.

<!doctype html>
<meta charset="utf-8">
<button id="chime" type="button">Play a quiet chime</button>
<script>
 let audio;
 document.querySelector("#chime").addEventListener("click",async()=>{
   audio ??= new AudioContext(); await audio.resume();
   const tone=audio.createOscillator(),gain=audio.createGain(),t=audio.currentTime;
   tone.frequency.value=660; tone.type="sine";
   gain.gain.setValueAtTime(0.0001,t);
   gain.gain.linearRampToValueAtTime(0.06,t+0.01);
   gain.gain.exponentialRampToValueAtTime(0.0001,t+0.3);
   tone.connect(gain).connect(audio.destination);
   tone.onended=()=>{tone.disconnect();gain.disconnect();};
   tone.start(t);tone.stop(t+0.31);
 });
</script>

Run context: Save as chime.html and press the button; begin with a low device volume.

A short quiet tone plays after an explicit click if Web Audio is available.

Going deeper

Sound design is an information problem. If every event uses the same loud cue, the player cannot infer what occurred. Short distinctive patterns can communicate state transitions while remaining pleasant. A visual indicator should accompany information-bearing audio so that a muted game remains usable. Audible excitement should not be the sole mechanism for understanding a repair, extra life, or warning.

Advanced analysis connects envelopes to frequency content: discontinuities introduce broadband components, while smoother transitions reduce some abrupt artifacts. That explains why a few milliseconds of shaping can improve quality without adding a recording. The example is intentionally small; production audio additionally needs volume settings, suspension handling, limits, and testing across devices and listening environments.

Applied laboratory: construct three short envelopes using the same frequency and compare their onset and release. An abrupt rectangular envelope, a brief linear attack, and a longer shaped decay will feel different even without changing the note. Keep the listening level low and compare quality rather than maximum loudness. Sound intensity is a design parameter, not a substitute for intelligible feedback.

Then assign each cue an informational role. A reward can rise in pitch; an unavailable action can use a short neutral response; a warning can repeat with limited urgency. The corresponding visual label must communicate the same event. This creates redundancy across sensory channels and lets muted play remain comprehensible.

For advanced study, distinguish synthesis, sampled playback, mixing, and spatialization. Synthesis creates a signal from parameters. Sampled playback uses a recorded signal. Mixing combines voices. Spatialization models the relationship between source and listener. The current small oscillator routine demonstrates synthesis and amplitude shaping, not every part of a full audio engine. Scheduling a source accurately also does not guarantee zero hardware latency; the complete path includes processing blocks, browser buffering, output-device buffering, and the physical listening environment.

Common traps

A sound-enabled preference does not override browser autoplay restrictions.

Do not use an unbounded number of voices or maximum gain to make feedback noticeable.

Questions to investigate

Change the waveform and describe the perceptual difference.

Create different pitch contours for success, warning, and cancellation.

Further reading: Web Audio API

Follow editable modules into a packed game document and learn why compression is delivery engineering rather than secrecy.

The formal model

How it connects to this website

The Spades builder limits itself to /games and #kb-spades-frame. It preserves the frame's existing layout, permissions, and sandbox attributes and restores original source attributes on close, route exit, or pagehide. The Storm builder similarly targets its dedicated game frame. Build-time checks include gzip round trips and expected embedded-image coverage. These are substantial engineering checks, but rendered play still requires public verification.

const original = "An elegant interface should have a reversible release.";
const encoded = new TextEncoder().encode(original);
const compressed = await new Response(
  new Blob([encoded]).stream().pipeThrough(new CompressionStream("gzip"))
).arrayBuffer();
const restored = await new Response(
  new Blob([compressed]).stream().pipeThrough(new DecompressionStream("gzip"))
).text();
console.log(restored === original);

Run context: Run in a browser console supporting Compression Streams, or save as compression.mjs in a modern Node.js runtime.

true

Going deeper

For advanced readers, publication is a reproducibility problem. The meaningful release identity includes source revision, build-tool behavior, generated output, and host wiring. Hashing the intended output then checking the public frame's decoded document is stronger than simply seeing a new filename. It still does not replace testing controls, layout, audio activation, or gameplay.

Self-contained embeds trade modular caching for publication convenience. Embedding large images can make an editor field expensive to manipulate and increase the host document's initial payload even when the game is not open. A future architectural improvement could isolate lazily loaded versioned assets. That is a design option derived from the observed packaging, not a claim that such a change has already been deployed.

Applied laboratory: package a small self-contained HTML lesson, hash its original bytes, compress it, restore it, and hash the restored bytes. The equality test verifies reversible transport. Then deliberately remove an asset or alter one byte and confirm that the validation detects the change. Such checks are useful because a valid-looking string can still describe the wrong version of a game.

Different forms of identity answer different questions. A source revision identifies tracked source. A build digest identifies output bytes. A release marker identifies the intended integration version. A rendered screenshot records one observation. Combining these records gives an auditable chain, but it is still necessary to ensure that each record actually belongs to the same release rather than collecting unrelated successful artifacts.

The installer should also have an explicit fallback contract. If a required API is absent, preserve a working previous frame or show a helpful message rather than half-installing new code. If the modal closes, remove observers and restore owned attributes. If the route changes, do not keep modifying a detached or repurposed frame. These lifecycle constraints make a packed embed maintainable in a host system whose document may change independently of the game developer's code.

Common traps

Compression and minification are not encryption.

Do not replace an unrelated frame just because its selector looks similar.

Questions to investigate

Measure original, compressed, and base64 lengths for repetitive and random input.

Specify which frame attributes your installer owns and how each is restored.

Further reading: Compression standard · esbuild API · HTML living standard: The iframe element

Separate game rules from rendering and distinguish a fair heuristic bot from an opponent that can read hidden cards.

The formal model

How it connects to this website

The Spades engine rejects commands for the wrong phase, turn, or revision; follows suit when possible; and prevents leading unbroken Spades when a non-Spade alternative exists. getProjection constructs the view. Public-history helpers derive the last play solely from already face-up cards. Bot code includes partner-Nil cover and attacks an opponent Nil only after the team's normal contract is secured. The source makes these priorities inspectable.

function transition(state, command) {
  if (state.phase === "bidding" && command.kind === "bid") {
    if (!Number.isInteger(command.value) || command.value < 0 || command.value > 13)
      return {ok:false,error:"Invalid bid"};
    return {ok:true,state:{phase:"playing",bid:command.value}};
  }
  return {ok:false,error:"Action is not legal in this phase"};
}
console.log(transition({phase:"bidding"},{kind:"bid",value:4}));
console.log(transition({phase:"bidding"},{kind:"play",card:"AS"}));

Run context: Run in a JavaScript console or as state.mjs.

The bid produces a playing state; playing a card during bidding is rejected.

Going deeper

For graduate study, imperfect-information games can be described through information sets and belief states. A visible failure to follow a suit narrows possible hidden hands, but does not reveal exact cards. A policy can maintain that inference without cheating. The current bot implements a bounded heuristic approximation; a full Bayesian belief update or search over all consistent deals would be a different, more expensive design.

Separating state transitions from drawing also makes history useful. A last-move panel becomes a projection of accepted public play, not a reconstruction from animated card positions. Replaying commands can support debugging, but deterministic replay requires specifying randomness and versioned rules. This is how a pleasant card-table interface connects to formal state-machine engineering.

Applied laboratory: create two complete deals that differ only in cards hidden from one bot, while preserving its own hand and all publicly played information. Feed the same seat projection into the decision function and verify the same result. Then introduce a public event, such as an opponent failing to follow suit, and examine whether the inference changes appropriately. This distinguishes legitimate learning from hidden-information access.

State invariants can be checked after every accepted command in a simulation. Count cards in all hands, current trick, and completed tricks; verify uniqueness and expected totals. Verify that the next turn is consistent with the phase. Verify that scoring follows the selected rule version. A long random simulation is more useful when every intermediate step is checked than when it merely reaches an ending without crashing.

Heuristic priorities should be documented as policy rather than inevitability. Protecting a partner's Nil, securing a team's contract, attacking an opponent's Nil, and avoiding unnecessary bags can conflict. The source's ordered decision rules expose those tradeoffs. An alternative search-based bot could evaluate many future deals, but its quality would depend on inference, sampling, objective functions, and runtime cost. Stronger-looking behavior is not automatically fairer, faster, or more understandable.

Common traps

A public projection should omit hidden cards rather than merely hide them visually.

Bot sophistication is not evidence of a mathematically optimal policy.

Questions to investigate

List five card-conservation invariants.

Design a test that detects a bot reading another seat's hidden hand.

Further reading: TypeScript handbook: Narrowing · Introduction to algorithms (4th ed.) · Types and programming languages

Treat a selection summary as data, calculate with clear units, and distinguish preparing a request from actually submitting it.

The formal model

How it connects to this website

The source names foodCents, tipCents, and foodAndTipCents and notes the actual 18% policy in the customer request. Unpriced additions remain subject to restaurant confirmation. The planner checks event details, sets a handoff timeout, verifies its parent and origin on acknowledgement, and keeps copy/download fallbacks. It also limits notes and avoids saving selected event date and notes in its local preference save.

function percentageInCents(cents, basisPoints) {
  if (!Number.isSafeInteger(cents) || cents < 0) throw new TypeError("Invalid cents");
  if (!Number.isSafeInteger(basisPoints) || basisPoints < 0) throw new TypeError("Invalid rate");
  const numerator = BigInt(cents) * BigInt(basisPoints);
  return (numerator + 5000n) / 10000n;
}
const subtotal = 25000;
const tip = percentageInCents(subtotal, 1800);
console.log(`${tip} cents`);

Run context: Run in a JavaScript console or as estimate.mjs.

4500 cents; this demonstrates arithmetic, not an authoritative event quote.

Going deeper

At an advanced level, numeric representation is part of the domain model. A finite floating-point value approximates a real number; it is not that real number. Exact decimal rules can be represented through scaled integers or rationals when the relevant range is bounded. The correct unit belongs in names, interfaces, serialization, and tests, not only in a paragraph of documentation.

Formality also means preserving agency. The visitor should see their selections before sending, know whether any payment is taken, and understand that availability requires restaurant review. A technically elaborate handoff remains incomplete if it cannot communicate these states. Test failure and timeout paths, not only the successful animation leading to the form.

Applied laboratory: enumerate the states of one request in everyday language, then bind each visible message to exactly one state. "Selections prepared" belongs to form preparation. "Request received" belongs to a successful receiver response. "Booking confirmed" requires the restaurant's actual confirmation. If one message spans several stages, rewrite it so a visitor cannot reasonably mistake a draft estimate for a reserved event.

Validation has both syntactic and semantic parts. A date can have a valid YYYY-MM-DD format yet be unsuitable for a booking. A guest count can be an integer yet exceed the planner's intended range. A phone string can be displayable without being useful for contact. The form should validate only claims it can support and avoid asserting external facts it has not checked.

Numerical serialization introduces another boundary. BigInt is suitable for exact integer arithmetic but ordinary JSON.stringify does not directly serialize it. A protocol can encode such values as validated decimal strings, or use bounded safe integers where appropriate. The format must be versioned and understood on both sides. Mathematical precision, transport representation, and user-facing currency formatting are separate decisions that should be documented together when a calculator becomes a real business interface.

Common traps

Never label a prepared form as a delivered email or a confirmed booking.

Do not trust a browser-submitted total as the authoritative server price.

Questions to investigate

Specify how half-cent rounding should work and test a boundary case.

Diagram the difference between preparation, submission, receipt, review, and confirmation.

Further reading: ECMAScript 2026 language specification (ECMA-262, 17th ed.) · Fetch standard · HTML living standard: The iframe element

Teach origins, membership, private projections, idempotency, compare-and-swap revisions, and the limits of a client-side sandbox.

The formal model

How it connects to this website

The room code uses prepared SQL parameters, transactional D1 batches, expected revisions, command receipts, invitation digests, membership checks, and presence heartbeats. Spades distinguishes a human seat from bot-controlled replacement. The API reads bounded JSON bodies, rejects extra client-controlled fields, checks same-origin POSTs, and returns no-store responses. The iframe wrapper's allow-scripts plus allow-same-origin combination should not be advertised as isolation for arbitrary hostile same-origin code.

-- Run in a scratch SQLite database; this is a simplified concurrency lesson.
CREATE TABLE board (id TEXT PRIMARY KEY, revision INTEGER NOT NULL, choice TEXT);
INSERT INTO board VALUES ('demo', 0, NULL);
UPDATE board SET choice='A', revision=revision+1
  WHERE id='demo' AND revision=0;
SELECT changes() AS first_update;
UPDATE board SET choice='B', revision=revision+1
  WHERE id='demo' AND revision=0;
SELECT changes() AS stale_update;
SELECT revision, choice FROM board;

Run context: Execute the statements in order in a temporary SQLite database.

The first update changes one row, the stale update changes zero, and the board remains revision 1 with choice A.

Going deeper

Graduate readers can relate this design to linearizability: each accepted operation should appear to occur at one point between invocation and response, consistent with the application's sequential rules. The compare-and-swap update supplies a candidate linearization point, while the transaction ties dependent effects to it. End-to-end proof would require auditing all relevant reads, writes, failure paths, and database semantics.

Client progress and a server wallet are also different authorities. Solo trophies stored in localStorage are visitor-controlled display progress. They should not silently become redeemable value or trusted account balances. The current solo Spades reward code explicitly labels its coins local, while the application's Play Points ledger is a separate server system. Explaining this distinction prevents attractive interface language from overstating the security model.

Applied laboratory: simulate two requests reading revision zero. Let the first update succeed and make the second execute its original compare-and-swap condition. The second must detect that the state changed, then refresh rather than overwrite. Add a retry of the first command and show that its recorded identity returns the previous accepted result instead of producing another move.

Threat modeling starts with assets, actors, entry points, and trust boundaries. A game room protects membership and private hands. A request form protects customer contact details. A server wallet protects its ledger. A decorative effect has different requirements. Treating every component as equally sensitive wastes effort, while treating every browser value as trustworthy creates avoidable vulnerabilities.

Presence handling demonstrates why time-based decisions need care. A heartbeat can be delayed by a network interruption or background-tab throttling. A forfeit or bot replacement is therefore a rule about observed inactivity, not a reliable reading of a player's intention. The server should re-check presence inside the state-changing operation to avoid racing with a reconnect. Testing this boundary requires two independent clients or a controlled concurrent harness; a solo screenshot cannot demonstrate the relevant property.

Common traps

A compressed browser bundle is not a place for secrets.

A heartbeat alone cannot prove whether a user intentionally abandoned a match.

A sandbox flag combination must be evaluated in its actual origin context.

Questions to investigate

Add a command receipt and make update plus receipt atomic.

Explain why a membership check must occur before returning a room projection.

Further reading: Transaction · D1 database: Worker API · SQL language expressions: Parameters · HTML living standard: The iframe element

Move from example-based checking to invariants, reproducible simulation, rendering checks, and honest verification boundaries.

The formal model

How it connects to this website

Spades tests cover hand ordering, public last-play derivation, bot Nil behavior, and expanded-layout distributions. Storm checks combat rules, opening progression, transit lessons, warning geometry, and spawn behavior. The build verifies expected images and a gzip round trip. Public checks for the v19 shooter exercised start, firing, phone sizing, first-wave transition, and a science intermission; that bounded evidence is distinct from a full eight-boss playthrough.

import assert from "node:assert/strict";
import test from "node:test";
function deck() {
  return ["C","D","H","S"].flatMap(suit =>
    ["2","3","4","5","6","7","8","9","10","J","Q","K","A"].map(rank=>rank+suit));
}
test("a deck has 52 unique cards and 13 cards per suit",()=>{
  const cards=deck();
  assert.equal(cards.length,52);assert.equal(new Set(cards).size,52);
  for(const suit of ["C","D","H","S"])
    assert.equal(cards.filter(card=>card.endsWith(suit)).length,13);
});

Run context: Save as deck.test.mjs and run node --test deck.test.mjs.

One passing test that checks three independent deck properties.

Going deeper

For advanced verification, mutation testing asks whether deliberately introduced defects cause the tests to fail. Metamorphic testing checks relations between executions when exact expected output is difficult to calculate. For example, permuting irrelevant hidden cards should not change a public-information bot decision. These techniques expose weaknesses in a test oracle and help avoid superficial confidence from a large count of checks.

Observability makes failures explainable. A revision, release marker, state phase, structured error, and narrowly scoped log can identify what happened without exposing credentials or private customer details. The public update history should record what changed, why, and the checks actually completed. It is a useful educational artifact precisely because it distinguishes intention from evidence.

Applied laboratory: write down the claim before selecting a test. For "the hand fits," define the viewport, zoom, hand distribution, minimum readable dimensions, and presence of other controls. For "the move cannot be duplicated," define identity, retry behavior, database atomicity, and concurrent requests. A test becomes meaningful when it can fail for the defect implied by the claim.

An acceptance matrix should include representative devices, error paths, focus behavior, reduced motion, and state restoration. The point is not to run every conceivable combination after every harmless edit. It is to choose checks that cover the change's plausible effects and expand when new evidence reveals a risk. More repeated tests without a new hypothesis do not automatically produce better knowledge.

For advanced readers, distinguish coverage metrics from correctness. Executing a line shows that it was reached, not that its result was validated. Branch coverage improves visibility but does not cover every meaningful state combination. Model-based testing can generate command sequences from an independent transition model and compare accepted behavior. The independence of that model is crucial: copying the same incorrect rule into both implementation and oracle merely produces consistent error.

Common traps

A test report is not a deployment receipt.

An untested error path can remain broken even when the happy path works.

Questions to investigate

Write a property asserting that display sorting preserves the multiset of cards.

Construct an independent oracle for a safe-zone geometry boundary.

Further reading: Test runner · Introduction to algorithms (4th ed.) · TypeScript handbook: Narrowing

Explain human direction, AI-generated changes, source control, provenance, limitations, and an evidence-backed public update history.

The formal model

How it connects to this website

The actual workflow includes readable TypeScript/JavaScript, bundled artifacts, original and generated art, focused tests, rollback backups, and public checks. Codex is a development tool; it is not embedded as a live conversational model in every gold button. The teaching examples here are simplified original examples. They do not publish secrets, private restaurant correspondence, or imply that all third-party artwork has the same license as the example code.

const update = {
  date: "2026-10-12",
  area: "educational example",
  change: "Separate intent, implementation and verification",
  reason: "Make limitations and evidence visible",
  checks: ["Review source", "Test behavior", "Check rendered result"],
  status: "Example, not a deployment receipt"
};
console.log(JSON.stringify(update, null, 2));

Run context: Run in a JavaScript console or as update-log.mjs.

A structured example update record; its explicit status prevents it from becoming a false live-release claim.

Going deeper

A serious public learning resource welcomes falsification. Readers can identify an unclear explanation, propose a better test, or point out a boundary the implementation has not handled. Advanced contributors may care about type soundness, atomicity, latency budgets, input semantics, or asset licensing. Beginners may simply ask why the same-looking buttons behave differently. Both questions can improve the specification.

The update log should use dated entries and evidence-derived language: changed, tested, published, and observed are different verbs. A living library can grow without pretending its first edition covers everything or exceeds a thousand printed pages. Its academic value comes from precise concepts, attributable sources, runnable examples, and candid limitations—not a fabricated length or claims of institutional endorsement.

Applied laboratory: express a request in four parts: intention, boundaries, acceptance criteria, and verification. "Make the greeting faster" becomes a schedule with launch intervals, impact intervals, an overall completion bound, preserved controls, and a reduced-motion fallback. That specification gives the coding tool a concrete target and gives the human a result that can be assessed without guessing what prettier or smarter meant.

Review should focus on what the program actually does. Ask whether it changes unrelated pages, introduces new dependencies, exposes private information, invents restaurant terms, or hides a failed action behind cheerful wording. A model can be fluent while misunderstanding any of these. Feedback is valuable when it identifies a reproducible counterexample rather than only rewarding confident prose.

A public teaching archive can share the method without exposing private operational history. Show simplified source, relevant contracts, references, and dated change summaries. Keep credentials, personal correspondence, internal costs, and sensitive account records out of the learning material. Invite corrections and contributions through a normal contact path. This turns prompt engineering into a transparent case study of software work: human goals, generated proposals, explicit constraints, implementation artifacts, tests, and observed results remain distinguishable.

Common traps

An AI-generated program can contain incorrect assumptions even when it compiles.

Do not describe a public resource as accredited university instruction or exhaustive coverage of computer science.

Showing code does not automatically grant redistribution rights to every asset or dependency.

Questions to investigate

Turn a vague visual request into acceptance criteria with observable outcomes.

Write an update entry that honestly distinguishes a local candidate from a verified public release.

Further reading: Codex CLI · Test runner · esbuild API · Synchronizing with effects