- Watch @zachleat give this talk
- Go through the slides yourself! (Fair warning these are not touchscreen friendly)
Any key
Reveal another characterDelete
(orBackspace
on Windows) to hide a character⌘←
Previous slide⌘→
orEnter
Next slide⌘↑
Back to index- ` Skip animation
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
.
- “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)
- Real web sites (via
- 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>
)
- Don’t use development mode (use
npm start
notnpm run dev
) - Turn off notifications (disable anything that will reveal browser)
- Turn off scrollbars in Mac OS