<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? :construction_worker:
- Yukai Huang
- Full Stack Developer @HackMD :books:
- VSCode :heart:
- I use tabs. :cat:
---
## What's <i class="fa fa-file-text" aria-hidden="true"></i> HackMD?
<small>Shamelss plug here :laughing:</small>
---
### Let's play with it! :egg:
### hackmd.io/ts-swiss-demo
---
---
### 70% of our users are developers. Developers :heart: GitHub.
---
:tada:
---
{%youtube E8Nj7RwXf0s %}
---
### Usage flow
---
---
---
---
---
:pizza:
---
### Extension architecture :house:
---
---
---
## 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
---
---
:checkered_flag:
---
## 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`
---
# :fork_and_knife:
---
<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>
- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event
---
### Register event listener
---
---
---
---
---
### Trigger event
---
---
---
---
---
### What if we want the result back?
---
# :dizzy_face: :expressionless:
---
### It's a pain to bridge events manually
---
# :bulb:
---
- Dead simple API
- Only cares about application logic
---
```typescript
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()
```
---
```typescript
// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})
```
<br>
```typescript
// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true
```
---
# :100: :muscle: :tada:
---
Our extension is not open sourced for now :sweat_smile:
---
Use `crx-bridge` as alternative
https://github.com/NeekSandhu/crx-bridge
---
### We :heart: typescript!
---
- Strongly Typed: Manage different protocol with ease
- IDE Features (I :heart: VSCode)
---
### One more thing
---
### HackDF
##### HackDF keeps Documentation Fresh
<small>(`recursive acronym`)</small>
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 :tada:
---
Wishlist
---
### Thank you! :sheep:
You can find me on
- GitHub ([@Yukaii](https://github.com))
- Twitter ([@yukaii_h](https://twitter.com/yukaii_h))
- or send an email to yukai@hackmd.io
{"metaMigratedAt":"2023-06-14T19:24:00.815Z","metaMigratedFrom":"YAML","title":"TypeScript Switzerland Winter Meetup","breaks":true,"contributors":"[{\"id\":\"6d3b4625-23c8-4275-a28e-cdc2cb546eda\",\"add\":4378,\"del\":114}]"}