1     present
2     present - `why`
3     present - `overview`
4     present - `goals`
5     present - `alternatives`
6     present - `live`
7     present - `installation`
8     present - `VS Code`
9     present - `running`
10     present - `overview - markdown`
11     present - overview - transitions, tables
13     images, style, header, footer
15     present - `templates`
17     present - `templates with arguments`
18     present - code
22     Links
23     Links :cat:
24     Links :dog:
25     Links :confused:
26     Links :cat: & :dog:
27     Links
28     Graphs - mermaid
29     Graphs - d2
30     Roadmap
31     Thank you !
presentinteractive Powerpoint alternative

Zlatko Bratković
github.com/oktalz
linkedin.com/in/bratkoviczlatko/

present - why


  • meetup presentations

  • educational purposes

    • all code in working state
    • "run on your own machine"
    • easier preparation (or lack of it)
  • writing interactive tutorials

  • challenge

present - overview


  • tool for viewing presentations written in markdown like format
    • markdown - easy to read
  • slides are written in text friendly format and follow all standard markdown rules (with some additions)
  • easy to run
  • primarily for presentations + code
    • inlined of linked code
  • tutorials
    • run/experiment on your machine

present - goals


  • view presentation in browser
  • text format
    • git friendly
  • run the code (any language) directly from presentation
    • run complex examples
  • standard header/footer options
  • fully customizable (settings and css/js customizations)
  • live share (as a help in large rooms) / remote watching*
  • easy share presentations
    • share on github, run with link
  • print friendly (chromium browsers)

present - alternatives


  • existing tools
    • golang.org/x/tools/present
    • https://jupyter.org/
    • google slides
    • ...

present - live


 

Live view

 
dors.bratkovic.eu

present - installation


github.com/oktalz/present

Installation

Use the following command to download and
install this tool:

go install github.com/oktalz/present@latest
go install github.com/oktalz/present@v1.0.0

Binaries

prebuilt binaries can be found on releases page

present - VS Code



Visual Studio Code Marketplace
Open VSX Marketplace

present - running


present --help
true

present - running


  • enter folder, type present
    • program should read all files and start web server on port 8080 (default)
      • port can be customized (see present.env file)
  • run present -d /path/to/files
  • run present -g github.com/oktalz/present -d examples/showcase
    • for gitlab.com and github.com project url is detected,
    • for others use full path
      -g https://github.com/oktalz/present.git

present - overview - markdown


### title
- text that is **Bold**, *Italics*, `highlighted`, ~strikethrough~
  - random point
- :speech_balloon: :thought_balloon: :warning: :construction:
.transition
- πŸ˜‚ ⭐ ❗ πŸ”₯ πŸ‘
 

present - overview - markdown


### title
- text that is **Bold**, *Italics*, `highlighted`, ~strikethrough~
  - random point
- :speech_balloon: :thought_balloon: :warning: :construction:
.transition
- πŸ˜‚ ⭐ ❗ πŸ”₯ πŸ‘

title

  • text that is Bold, Italics, highlighted, strikethrough
    • random point
  • 💬 💭 ⚠️ 🚧
 

present - overview - markdown


### title
- text that is **Bold**, *Italics*, `highlighted`, ~strikethrough~
  - random point
- :speech_balloon: :thought_balloon: :warning: :construction:
.transition
- πŸ˜‚ ⭐ ❗ πŸ”₯ πŸ‘

title

  • text that is Bold, Italics, highlighted, strikethrough
    • random point
  • 💬 💭 ⚠️ 🚧
  • πŸ˜‚ ⭐ ❗ πŸ”₯ πŸ‘

present - overview - transitions, tables


simple transition

topic one
 

present - overview - transitions, tables


simple transition

topic one
topic two
 

present - overview - transitions, tables


simple transition

topic one
topic two

projects written in Go

 

present - overview - transitions, tables


simple transition

topic one
topic two

projects written in Go
Docker

 

present - overview - transitions, tables


simple transition

topic one
topic two

projects written in Go
DockerCockroachDB

 

present - overview - transitions, tables


simple transition

topic one
topic two

projects written in Go
DockerCockroachDB
Kubernetes

 

present - overview - transitions, tables


simple transition

topic one
topic two

projects written in Go
DockerCockroachDB
KubernetesEtherium blockchain

  • can be a bit complex to setup (at first)

   images, style, header, footer


  • any html style formatting is possible
    • custom styling of span, div, blocks (div)
    • existing styling can be overridden
  • use svh and svw for font size (and in general)
 
 
HTML styles background
even rotated, positional
DORS/CLUC 30

   images, style, header, footer


.{text-shadow: 0 0 3px #FFFFFF, 0 0 15px #000000;}(**HTML**)

HTML

.css{
  text-shadow: 0 0 3px #FFFFFF, 0 0 15px #000000;
  font-size: 10svh;
  color: blue;
}
**DORS/CLUC**
.css.end
DORS/CLUC
DORS/CLUC 30

   present - templates


.================================
.TITLE{present - `why`}

- meetup presentations

- educational purposes
  - all code in working state
  - "run on your own machine"
  - easier preparation (or lack of it)

- writing interactive tutorials
- challenge
  • meetup presentations

  • educational purposes

    • all code in working state
    • "run on your own machine"
    • easier preparation (or lack of it)
  • writing interactive tutorials

  • challenge

DORS/CLUC 30

   present - templates


.template{TITLE}
.header
.div{margin-left: 3svw;}(##  {{.}})
<hr>
.header.end
.footer
.div{position: absolute; left: 91svw;}(.image(icon.png 8svw:))
.footer.end
DORS/CLUC 30

   present - templates with arguments


.template{FROM_TO}(From,To)
{{.From}}:{{.To}})
.template.end
.FROM_TO{From}(10){To}(20)
DORS/CLUC 30

   present - code


  • editable
  • inline or imported from file
  • run in tmp or in specific folder
  • partially shown (with edit option)
  • response seen in presentation in terminal
DORS/CLUC 30

   present - code


.cast.edit.save(main.go).run(go run .).before(go mod init x)

 

package main

import (
    "fmt"
)

func main() {
    fmt.Println("hello DORS/CLUC 30")
}
DORS/CLUC 30
true

   present - code


.cast.stream.edit.save(main.go).run(go run .).show(9:11)

 

  fmt.Println("hello")
  time.Sleep(3 * time.Second)
  fmt.Println("world")
DORS/CLUC 30
true

   present - code


.cast.stream.edit.save(script.sh).run(sh script.sh)

 

date
echo "Hello DORC/CLUC"
DORS/CLUC 30
true

   Links


  • pick 🐱 or 🐶 (click with mouse)
    🐱 🐶
DORS/CLUC 30

   Links 🐱


🐱
DORS/CLUC 30

   Links 🐶


🐶
DORS/CLUC 30

   Links 😕


no pick ?
😕
DORS/CLUC 30

   Links 🐱 & 🐶


happy path
👍
DORS/CLUC 30

   Links


next slide from all paths
DORS/CLUC 30

   Graphs - mermaid


graph LR;
   subgraph K8s
        API
    end

   subgraph ControllerSG[Ingress Controller]
        K8sInformers

        subgraph LoopSG[Event Loop]

                Event{Event}
                Event --> K8sEV[k8s event]
                K8sEV --> Storage[Storage + Runtime]
                Storage --> Loop
                Event --> Command
                Command --> Config[Update configuration]
                Config --> Loop
                Loop --> Event
        end
   end

   API --> K8sInformers
   K8sInformers --> Event
.block.path(graphs).source(k8sIC.mermaid).lang(mermaid)
.lang(mermaid) is not needed if extension matches block type
can be embedded directly in file
DORS/CLUC 30

   Graphs - d2


Global run queuePMGoPMGoPMGoGoGoGoGoGoGoGoGoGoGoGoGoGoGo
.css{width: 100svw; height: 75svh; overflow: hidden; font-size: 4svh!important;}
.block.path(graphs).source(scheduler.d2)
.css.end
DORS/CLUC 30

   Roadmap


  • viewers do not see admin executions of code
  • browser based editing
  • tests :)
  • animations (native)
  • performance
DORS/CLUC 30

Thank you !


 
Q & A