danydodson/slide-show-template.md

## slide-show-template.md

      
    Raw
  

              slide-show-template.md
            
          
  title
  tags
  description
  
  
  Talk slides template
  Templates, Talk
  View the slide with "Slide Mode".
  
  
Unleash the power!


slide: https://hackmd.io/p/template-Talk-slide

We have a collaborative session
please prepare laptop or smartphone to join!

Who am I?


Front-end developer
VSCode ❤️
I use tabs. 🐱


70% of our users are developers. Developers ❤️ GitHub.


{%youtube E8Nj7RwXf0s %}

Usage flow


digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}


Architecture of extension


Content script


Bind with each page
Manipulate DOM
Add event listeners
Isolated JavaScript environment

It doesn't break things


🍴


<style>
code.blue {
  color: #337AB7 !important;
}
code.orange {
  color: #F7A004 !important;
}
</style>

onMessage('event'): Register event listener
sendMessage('event'): Trigger event


💡


Dead simple API
Only cares about application logic


import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})


// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

💯 💪 🎉


Wrap up


Cross envornment commnication
A small library to solve messaging pain
TypeScript Rocks 🎉


Thank you! 🐑

You can find me on

GitHub
Twitter
or email me