Skip to content

presenting.md

Latest commit

 

History

History
33 lines (22 loc) · 3.53 KB

presenting.md

File metadata and controls

33 lines (22 loc) · 3.53 KB
Raw

Presenting a Tutorial

How to show a tutorial in a talk, a workshop or a screen share. For writing one, see Authoring Reference.

Presentation mode: the tutorial fills the screen with a compact toolbar, the current step on the left and the cURL request it explains highlighted on the right.

Before the talk

  • Link to the exact spot: #step-id opens the tutorial at a step, and ?variant=curl#request also picks the language. Keep one link per section of the talk.
  • Pick the theme for the room: the header toggle switches light and dark, and the choice is remembered for the whole site. Light usually reads better on projectors.
  • Zoom until the back row can read the code (CMD/Ctrl + "+"). The layout stays usable at high zoom: the Result pane header turns "Keep response", "Show captured" and then "Run request" into icons (their names show as tooltips), and a short Result pane scrolls as a whole: request line, notices and body. Long lines wrap when the author sets codeWrap: true (Frontmatter).
  • Plan for a bad network: give request steps a captured output=. If the venue's network or CORS blocks a live request, the pane falls back to it and says so. Serve the site from your laptop with the CLI (serve, see Commands) when the network is unreliable.
  • Secrets on screen: secret fields and the request line stay masked; "Show secrets" is off on every page load. Persisted fields keep what you typed in the browser, so present from a browser profile without your real credentials.

During the talk

  • Presentation mode: the header's presentation icon enters browser full screen with a compact toolbar. The handle on the explanations splitter hides the explanations so the code gets the full width. Esc leaves.
  • Clickers and keys: PageDown/PageUp move steps wherever the focus is: a form field, the JSON tree, the Result pane's tabs and controls, or the Preview. Only multi-line text keeps them. Arrow keys also move steps, except inside fields and widgets that use them (JSON tree, Body/Headers tabs, "Run as", splitters).
  • Images: on a step with images, step keys page through them before moving to the next step; clicking an image opens a full-screen viewer.
  • Splitters: drag them to give the code or the Preview more room. Their sizes are remembered.

Maximized panes

The code panel, the iframe Preview and the Result pane each have a maximize icon in their header. A maximized pane fills the browser window (the whole screen in presentation mode); its icon or Esc restores the layout with the same splitter sizes. One pane is maximized at a time, and step keys keep moving steps underneath. On a step with images, the maximized code area shows the carousel with a floating restore action. Maximizing a collapsed Preview or Result pane expands it; collapsing it restores the layout. The state is not remembered across reloads.

Authors can maximize a pane from a step, for example to show a big result and restore the layout on the next step: see maximize.

Leaving with Esc

Esc goes one level at a time: an open image viewer, then the maximized pane, then presentation mode. In browser full screen, the browser takes the first Esc to leave full screen (and presentation mode); the pane stays maximized until the next Esc.