This web site is a tech talk

• Watch @zachleat give this talk
• Go through the slides yourself! (Fair warning these are not touchscreen friendly)

Keyboard commands

• Any key Reveal another character
• Delete (or Backspace on Windows) to hide a character
• ⌘← Previous slide
• ⌘→ or Enter Next slide
• ⌘↑ Back to index
• ` Skip animation

Run locally

This uses Eleventy.

npm install
npm start

All of the slide content is stored in slides/. Clear this folder out to create your own presentation!

All of the front matter options for slides are documented in _includes/slide.njk.

Features

• “Fake” live coding (a la https://hackertyper.com/)
  • Supports adding to boilerplate pre-populated code sample.
  • Multiple cursor entry points on the same slide, jumps between them automatically.
  • Multiple cursors!
  • Supports “fake” deleting characters
• Live preview of output in “Fake” browser
  • Multiple alignment modes (side-by-side, top/bottom)
  • Supports client-rendered Liquid syntax
• “Fake” browser can show:
  • Real web sites (via <iframe>)
  • “Fake” web sites (via image screenshots—more offline friendly)
• Show “Fake” terminal with “Fake” terminal output (progressively revealed).
  • Scrolls with the text if it goes longer than a page
• Benchmark and show Lighthouse scores for slide output (uses <speedlify-score>)

Checklist before giving the talk

• Don’t use development mode (use npm start not npm run dev)
• Turn off notifications (disable anything that will reveal browser)
• Turn off scrollbars in Mac OS