HackMD Introduce

# HackMD簡介  ---  ## 前提  <span> 當你需要跟其他人一起快速共同編輯 自己的筆記、文件時 有很多雲端服務可以滿足你的需求 例如「 Quip 」，或是使用「 Google Docs 」</span> ---- 但是 ---- 如果想要找一款特別適合==工程師==需求的共筆服務方便「貼上與顯示程式碼」筆記過程可以「全程使用 ==Markdown== 」那麼之前很受歡迎的服務就是「 ==Hackpad== 」。 ---- ## Markdown? - Markdown 是一種輕量級標記式語言它有純文字標記的特性，讓==編寫的可讀性==提高這是在以前很多電子郵件中就已經有的寫法目前也有很多網站都使用 Markdown 來撰寫說明文件或是在論壇上發表文章與發送訊息。 ---- ### <span> ### MD?TMD? </span> - 常見網站例如： - GitHub - wordpress - Slack - FB Messenger - Reddit - stackoverflow 等等。 - ![](https://i.imgur.com/xA5oiQm.png) --- 不過 Hackpad 被 Dropbox 收購後目前雖然還是可以使用但看起來主力團隊應該是投入了最新的「 Dropbox Paper 」的開發而 Dropbox Paper 反而有點失去 Hackpad 簡潔快速的特色。 --- ## HackMD :::info - Front-end developer - VSCode :heart: - I use tabs. :cat: ::: --- ### 70% of our users are developers. Developers :heart: GitHub. --- {%youtube E8Nj7RwXf0s %} --- ### Usage flow --- ```graphviz 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 --- ![](https://i.imgur.com/ij69tPh.png) --- ## Content script - Bind with each page - Manipulate DOM - Add event listeners - Isolated JavaScript environment - It doesn't break things --- # :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 --- # :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: --- ### Wrap up - Cross envornment commnication - A small library to solve messaging pain - TypeScript Rocks :tada: --- ### Thank you! :sheep: You can find me on - GitHub - Twitter - or email me