Flyback · Demo Prep
A full day hardening Flyback for real-world demo. Rewrote the start page as a narrative landing, built the voice narration kit, added geolocation opt-in, fixed accessibility, and made every rough edge demo-safe.
The studio voice deck was including internal build notes and yellow metadata markers in the narration output. These showed up as "[INTERNAL]" fragments when read aloud — obviously not demo-safe.
Two-step fix: first skipped internal slides via a filter, then stripped yellow metadata elements from the narration text pipeline. Regenerated clean narration after both fixes confirmed.
The navigator.clipboard API requires a secure context (HTTPS). On the local dev server over HTTP, the share button silently failed — no copy, no error shown to the user.
Added fallback to `document.execCommand('copy')` when clipboard API is unavailable. Added a visible "Copied!" confirmation so failure is never silent.
The first attempt at skipping internal slides filtered too aggressively — it also skipped slides that had internal metadata but were still meant to be shown in voice mode. Committed, then immediately reverted.
Rewrote the filter to check for an explicit `internal: true` flag on slides only, not any slide containing metadata elements.
The map pin toolbar was visible by default and several demo viewers tried clicking it before understanding the core exploration flow. It created a "what does this do?" moment early in the demo.
Removed the pin toolbar from the default view. Pins are still functional but the toolbar no longer appears unless explicitly invoked.
Using the 1854 Montville plat map as the start page hero immediately communicates what Flyback is about without a word of explanation. The map IS the pitch. No stock photo needed.
Rewriting the start page as a story ("Here's what you're about to experience...") made first impressions dramatically better. People leaned in. Feature lists make people scan; stories make people read.
Asking permission in plain English before triggering the browser geolocation prompt eliminated the "why is this asking for my location?" reaction. Two-step consent = no friction, no distrust.
Treating demo prep as its own session (not a hasty pre-demo patch) meant we could be systematic — go through every panel, every tap target, every edge case. The app that comes out of this session is qualitatively different from the one that went in.
`navigator.clipboard` is only available in secure contexts. Any share/copy feature must fall back to `document.execCommand('copy')` and must show visible confirmation so failure is never silent.
Content marked internal (build notes, metadata annotations) must be filtered at the source before being passed to any voice or export system. Filtering downstream is fragile and prone to leakage.
Never trigger `navigator.geolocation.getCurrentPosition` without first showing an explicit plain-language opt-in. The browser prompt alone is not sufficient explanation for a new user.
Do not demo-prep in the last 30 minutes before showing someone. It produces hasty patches and missed edge cases. A dedicated hardening session finds real problems — rushed prep hides them until the worst moment.
For a local history / time-machine app, the most compelling hero image is always the real historical document — not stock photography. The 1854 plat map is more arresting than any Unsplash image.
"Demo hardening isn't polish. It's respect for the person you're about to show something to."