nimconf22-nimib

slides for nimib presentation at nimconf 2022

Title: Nimib goes interactive

summary

• [both: 4 mins]
  • intro (title, who we are, previous presentation, content of presentation)
• [pietro: 5 mins]
  • intro to nimib with livecoding (example with QRgen)
• [pietro: 18 mins]
  • introduce nimib 0.3 changes
  • nimibCodeAsInSource is default
  • make your own block
  • fancy blocks
• [hugo: 16 mins]
  • nbPython
  • nbJSstuff
• [pietro 5 mins]
  • js plant app
• [hugo: 5 mins]
  • nimiboost
• [both 10 mins] outro
  • roadmap
  • contributing (back together)
  • thanks

4 intro + 5 livecoding + 18 blocks + 16 js + 5 nimiboost + 5 plant app + 10 outro

1h03'

up for cuts:

• plant app 5
• nimiboost 5

source structure

• for better iteration content is splitted into different modules:
  • intro.nim: initial part of presentation
  • pietros_slides: all slides where pietro is only speaker
  • hugos_slides: all slides where hugo is only speaker
  • outro.nim: final part of presentation
  • custom_blocks.nim: module that contains all custom blocks
  • index.nim: the complete set of slide
    • needs useSource to make sure code sources are read correctly
• a new theme for slides has been created nimConfSlide
  • currently it compiles a js file for every slide
  • it is activated by compile time switch -d:useNimConfSlide
  • without that compile time switch the theme is moon

commands to build slides:

• nim r -d:useNimConf index --nbShow
• nim r index --nbShow --nbFilename:index_moon.html
• nim r -d:noReveal index --nbShow --nbFilename:index_doc.html (currently broken)

corner image

• we are adding a corner image with nim logo
• we used to do this with a js that ran for every slide (-d:useCornerImage and -d:skipNimLogo)
• now we do it with a static image tag
• it does not work in nimiboost (compare e.g. intro with nimiboost and intro from command line), not sure why

status

• record and send presentation
  • will they ask us to cut it?
• nimib
  • add contribute.md
  • cleanup roadmap
    • cleanup and label issues
• prepare slides and repo to be made public on conf day
  • single index.nim with slides
    • refactor intro
    • refactor hugos_slides
  • add videos to slides
    • livecoding
    • nimiboost
  • add authors and link to repo in title slide
  • add source(s) of slides (bottom of title page)?
  • build index.nim with python

meetings:

• Sep 10th, Sat 12:00
• Sep 17-18, Sat 15:00
• Sep 24-25, Sun 15:00
• Oct 1 - Sun 10-12 start recording (all individual parts + intro together)
• Oct 9 - Sun 10-12:30
• Oct 13 (Thu) deadline for video
• Oct 15-16 (what else?)
• Oct 22, Saturday NIMCONF!!!!

recording

• video recording: https://obsproject.com
• video editing: https://www.openshot.org/
• using a circular mask for the webcam, as in this video
  • add filter -> image mask -> select circular_mask_obs.png here in repo
• to record both persons at the same time, share second display with zoom video and crop to fit the circle

preparing slides

• release 0.3.1 nimib
• together
  • title slide
  • presentation content slide
  • recorded intro
• Pietro:
  • who am I (reuse from last time)
  • livecoding
    • code example
    • record livecoding
    • livecode slide
  • 0.3.x changes
    • intro slide for release
      • add lines on 1) how to (custom blocks examples) 2) a js mathy plant app
    • codeAsInSource
      • fix animation of code lines
      • mention CodeFromAst macro
    • custom block theory
      • what are blocks
        • add title and animate
      • what is a block: data + render (two columns with examples)
        • mention backend concept
        • nbCode
        • nbText
        • nbImage
      • nimib types (implementation details)
        • animate and review
        • mention that until 0.2 it was an object variant with 3 kinds
      • a refresher on mustache
      • render function (implementation details)
        • review and animate
      • how do I create a block
        • nbCode
        • nbText
        • nbImage
      • other blocks
        • nbCodeInBlock
        • nbTextWithCode
        • nbFile (string and untyped)
        • nbRawHtml
          • example on how to create blocks with this
      • how can you create blocks?
        • "natively" (newNbCodeBlock, newNbSlimBlock)
        • from other blocks, composing, copying and customizing
        • discussion about partials+renderPlans vs nbRawHtml
          • mention container block as missing piece
    • fancy blocks (blocks with (external) js)
      • how to use external js functionality (add to head, add to main)
      • add redo a title slide
      • leftRight slider
      • mermaid
        • fix in nblog
      • plotly
    • js mathy plant app: title slide
      • add minimal intro
      • embed html
      • use nimconf for this part of slides
    • refactor to allow easy change to nimconfslides
  • record the 0.3.x changes part
  • record description of plant_app as example of js
  • contributing slides draft
  • roadmap draft
  • nimib changes
    • stdout flush fix
    • pre line-height fix
• Hugo:
  • nbPython example
  • nbJstuff
    • js app for qr code app
    • nbJsFromCode with counter example
    • boilerplate karax in nbJsFromCode
    • nbKaraxCode with counter example
    • capture variable example
  • nimiboost
    • livecoding example
    • record nimiboost livecoding
    • Hugo nimiboost: add a way to add video to slides
  • details
    • bigger buttons
    • better example for postRender
• back to Pietro
• together:
  • contributing
  • roadmap
  • hi, thanks, goodbye

cleanup blcok slides before recording again:

• remove stuff and redo what is a block
• add a note that all example will be found in nblog and a link

recording sessions (October 2 and October 9)

homework: Pietro: - [x] livecoding recording - [x] complete release slides - [x] record release part - [x] record plant app - [x] work on later slides (contribution + roadmap) Hugo: - [x] nimiboost recording - [x] record part 2 of slides (+ details) - [x] put together videos

during sessions:

• record intro together - Oct 2
• record outro together - Oct 9

nice to have

• cornerImage without JS? or at least without calling JS every time
• qr code links around
• whale in the qr code
• source of slides (bottom of title slide)