slides.md

https://hackmd.io/ts-swiss https://hackmd.io/p/ts-swiss

---

title: 'TypeScript Switzerland Winter Meetup' tags: talk

<style> .reveal section img { border-width: 0px; background-color: transparent; } </style>

HackMD-it

enhance GitHub with

open collaborative editor

Yukai Huang

@TypeScript Switzerland

slide: hackmd.io/p/ts-swiss

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

Who am I? 👷

• Yukai Huang
• Full Stack Developer @HackMD 📚
• VSCode ❤️
• I use tabs. 🐱

---

What's HackMD?

Shamelss plug here 😆

---

Let's play with it! 🥚

hackmd.io/ts-swiss-demo

---

---

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

---

🎉

---

{%youtube E8Nj7RwXf0s %}

---

Usage flow

---

---

---

---

---

🍕

---

Extension architecture 🏠

---

---

---

Background script

• Run after the extension start
• Long run action, web request, heavy works, ...
• Kinda backend

---

Content script

• Bind with each page
• Manipulate DOM
• Add event listeners
• Isolated JavaScript environment
  • It doesn't break things

---

Injected script

• Injected with content script
• Accessing global variable
• Call global function
• Acts as JavaScript inserted with HTML script tag <script>

---

3 environments

---

---

🏁

---

cross-environment communication

---

Case: Sync HackMD with GitHub

---

---

• We can't send message between two injected scripts
• We need to manage flow by ourself
• Different set of API
  • content <-> background
  • content <-> injected

---

🍴

---

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

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

---

Register event listener

---

---

---

---

---

Trigger event

---

---

---

---

---

What if we want the result back?

---

😵 😑

---

It's a pain to bridge events manually

---

💡

---

• 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

---

💯 💪 🎉

---

Our extension is not open sourced for now 😅

---

Use crx-bridge as alternative

https://github.com/NeekSandhu/crx-bridge

---

We ❤️ typescript!

---

• Strongly Typed: Manage different protocol with ease
• IDE Features (I ❤️ VSCode)

---

One more thing

---

HackDF

HackDF keeps Documentation Fresh

(recursive acronym)

hackmd.io/hackdf

---

• an GitHub App
• Integrate GitHub With HackMD
• Remind you when should update documentation
• Commit and push documentation changes right on HackMD

---

Wrap up

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

---

Wishlist

---

Thank you! 🐑

You can find me on

• GitHub (@Yukaii)
• Twitter (@yukaii_h)
• or send an email to [email protected]