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?

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

• Yukai Huang
• Full Stack Developer @HackMD
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
• VSCode
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
• I use tabs.
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →

What's HackMD?

Shamelss plug here

Let's play with it!

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

hackmd.io/ts-swiss-demo

70% of our users are developers. Developers

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

GitHub.

Usage flow

Extension architecture

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

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

Register event listener

Trigger event

What if we want the result back?

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

It's a pain to bridge events manually

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

• 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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Our extension is not open sourced for now

Use crx-bridge as alternative

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

We

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

typescript!

• Strongly Typed: Manage different protocol with ease
• IDE Features (I
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
  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
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →

Wishlist

Thank you!

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

You can find me on

• GitHub (@Yukaii)
• Twitter (@yukaii_h)
• or send an email to yukai@hackmd.io