Supademo: record a workflow that others can click through
Supademo creates interactive demos and step-by-step guides. Support, training and product teams can turn a workflow into explained steps that readers explore at their own pace.
Break down the problem and try your own design and implementation first. Then explore the reasoning to check states, edge cases, trade-offs, and ways to test your approach. The guide offers a reasoning path, not a complete implementation.
How can a guide allow revisiting steps without trapping the reader?
Design a pre-publication checker for a teaching demo player. A demo consists of steps, each with a unique id and a list of nextIds. startId identifies the entry, and terminalIds identifies the endpoints. An edge means a reader can choose that next step. This exercise does not describe Supademo's internal implementation.
- Report nonexistent targets, steps unreachable from the entry, and reachable steps with no path to any endpoint. A cycle for revisiting screens is allowed if there is still a path out to an endpoint.
- Work through this example: entry A; A→B; B→A and C; C is an endpoint; D is isolated. Then remove B→C and compare the results.
- Deliver the order of input checks, the approach to path analysis and a test table. Include no steps, duplicate ids, a missing entry, no endpoints and a self-loop. Explain which analyses remain meaningful for invalid input. No complete implementation is needed.
Explore the reasoning
- Check identifiers and references first, separating structural errors from path problems. Do not silently resolve duplicate ids by overwriting an earlier step.
- Consider what is reachable from the entry, then work backward from all endpoints to consider which steps can finish. These sets answer different questions.
- A and B form a cycle in the original example but can reach C, so they are not trapped. D is simply unreachable from the entry. Removing B→C leaves A and B without a path to an endpoint.
- Include cycles with and without exits; detecting a cycle alone must not cause failure. Define explicit output for no endpoints or a missing entry rather than treating an impossible analysis as a pass.
How should hotspots keep their position when an image scales?
Design a hotspot layer for a teaching demo. The original image is 1200×800. Each hotspot uses normalized image coordinates: 0 to 1 from left to right and top to bottom. The image fits completely inside a 600×500 container with no border or padding, preserving its aspect ratio and centered horizontally and vertically. Unused space remains blank.
- Calculate the container-relative position of the hotspot (0.25, 0.5), then repeat for a 360×360 container. Place hotspots within the displayed image, without treating blank margins as part of it.
- Propose state and layout handling for an unloaded image, zero dimensions, resizing and page scrolling. A tooltip may move to avoid obscuring content; its hotspot anchor must still indicate the original position.
- Use focusable buttons for hotspots, with Tab following step order, Enter or Space activating them, and visible focus. Deliver coordinate calculations, a strategy for invalid states and a narrow-screen keyboard checklist. A complete component is not required.
Explore the reasoning
- Derive the displayed image area from its aspect ratio, then account for centered blank space. Multiplying normalized coordinates directly by container dimensions is incorrect.
- Inside 600×500, the image is 600×400 with 50 pixels above and below. The example hotspot is (150, 250). Inside 360×360, the image is 360×240 with 60 pixels above and below, giving (90, 180).
- Separate image readiness from measurements. Do not show clickable anchors for invalid dimensions; restore them after a valid measurement. If using getBoundingClientRect, its position is relative to the viewport and must not be mixed with document coordinates.
- Check anchors and tooltips separately, especially edge positions, scrolling and enlarged text. Complete the same path using a keyboard and verify focus visibility and step order.