https://github.com/zachleat/this-website-is-a-tech-talk
https://github.com/zachleat/this-website-is-a-tech-talk
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/zachleat/this-website-is-a-tech-talk
- Owner: zachleat
- License: mit
- Created: 2020-09-26T03:36:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-06T19:47:25.000Z (over 5 years ago)
- Last Synced: 2025-03-30T03:14:09.962Z (over 1 year ago)
- Language: HTML
- Homepage: https://techtalk.zachleat.dev/
- Size: 12.7 MB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# This web site is a tech talk
* [Watch @zachleat give this talk](https://www.zachleat.com/web/this-website-is-a-tech-talk/)
* [Go through the slides yourself!](https://techtalk.zachleat.dev/) (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](https://www.11ty.dev/).
```
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 ``)
* “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 ``)
## 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