Beyond Code Presos

• Index: https://beyondcodebootcamp.github.io/presos/
• Sources: https://github.com/BeyondCodeBootcamp/presos/
• Example: https://beyondcodebootcamp.github.io/presos/example/

Presentation Slides + Videos:

• 🤮 JS for Go Devs
• 🔑 Passkeys
• 👨‍🍳 Go Just Works
• 🦎 Intro To Zig
• λ Semantic Lambdas
• 👩‍🏫 Semantic Javascript
• 💡 Express.js ProTips™
• ⏩ Semantic Arrays
• 🐹 Hello Go
• ⚡️ Variable Shadowing
• 📦 MVC is Dead
• 🦴 The Anatomy of Promises - Utah JS - July 14th, 2022
• 🧙‍♂️ Go Proverbs for JavaScript - Utah Node.js - May 4th, 2022
• Software Engineering's Greatest Hits - BYU - March 23rd, 2022
  • On Software Engineering
  • On Node Js
  • On Js Tooling
• Deploying Node.js in 2022 - Utah Node.js - March 17th, 2022
• Navigating Node.js in 2022 - Utah Node.js - February 18th, 2022
• Hardest Things in CS - Beyond Code - January 24th, 2022
• const, let, var - Beyond Code - January 16th, 2022
• Classless JavaScript - Utah Node.js - December 13th, 2022
• The Concurrency Rainbow - Utah Rust - August 12th, 2022
• My Best Advice for Bootcamp Grads - July 28th, 2022
• Integer Division - July 28th, 2022

Quick Start to Render

watchexec -e md -w "YOUR_PRESO.md" -- mdslides "YOUR_PRESO.md"

These slides are built with Markdown Slides

You'll need:

• python 3.10.1
• mdslides
• a single markdown file

How to Install Pyenv + Python

See https://webinstall.dev/pyenv

Install pyenv

curl -sS https://webi.sh/pyenv | sh

If you see WARNING: Can not proceed... remove '~/.pyenv' first, then you already have pyenv installed. No worries. Carry on.

Install the latest python 3

Check the latest version:

pyenv update
pyenv install --list | grep -vi '[a-z]' | tail -n 1

You can install that or, if you want to have the exact setup as I have, use 3.10.1:

pyenv install -v 3.10.1

Then set that to the current version for your project:

pyenv local 3.10.1
python --version

(or echo '3.10.1' > ./.python-version)

Install Markdown Slides with pip

python -m pip install git+https://gitlab.com/da_doomer/markdown-slides.git

Create Slides

See presentation.md and the reveal.js cheat sheet.

Slides look like this:
See example.md.

[comment]: # "THEME = white"
[comment]: # "CODE_THEME = zenburn"
[comment]: # "controls: false"
[comment]: # "keyboard: true"
[comment]: # "markdown: { smartypants: true }"
[comment]: # "hash: false"
[comment]: # "respondToHashChanges: false"

# Great Title

A great slide

[comment]: # "!!!"

# A Second Slide

Another great slide

[comment]: # "!!! data-auto-animate"

# An Animated Slide

A really WOW slide

[comment]:
  #
  "!!! data-auto-animate data-background-color='aquamarine'"

```js [1-2|3|4]
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
```

<!-- .element: data-id="code" -->

[comment]: # "!!! data-auto-animate"

```js [5]
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
c(5);
```

<!-- .element: data-id="code" -->

[comment]: # "!!! data-auto-animate"

Note:

• The [comment]: # (!!!) bits signify the END of a slide and contain metadata pertaining to the slide above them.
• DO NOT use prettier on the slides (it will ruin the comments)

  echo '**/*.md' >> .prettierignore

It's basically reveal.js, but with the nasty html taken out of your way.

• Slide Themes: https://revealjs.com/themes/ (ex: white)
• Code Themes: https://highlightjs.org/ (ex: zenburn)
• Slide Configuration: https://revealjs.com/config/

Render Slides

1. Navigate to the directory for your presentation:

   mkdir ./my-presentation
   pushd ./my-presentation

2. Render the slides
   • as html

     mdslides ./slides.md

   • or as a pdf

     mdslides --pdf ./slides.md

   • include additional assets as needed

     mdslides --include ./img --include ./js ./slides.md

3. The website directory will be the markdown file

   open ./slides/index.html