---
# System prepended metadata

title: Unleash the power!

---

1. Rostow.1960. The Economic History Review, New Series, Vol. 12, No. 1,
pp. 1-16
2. Kotler, P. & Sidney J. Levy.1969. Broadening the Concept of Marketing.
Journal of Marketing. Vol. 33, Issue 1, pp.10-15.
3. Kotler, P. 1967. Marketing Management: Analysis, Planning and Control.
Prentice Hall.
4. S.Gopalakish.1997. A review of innovation research in economics,
sociology and technology management, Volume 25, Issue 1, Pages 15-28
5. Hounshell.1984. David A. From the American System to Mass
Production, 1800-1932. Baltimore: Johns Hopkins University Press,
Volume 90 Issue 5
6. Cowan.1997. Ruth Schwartz. A Social History of American Technology.
New York: Oxford University Press, Volume 85, Issue 2, 1 September
1998, Pages 643
7. MM Fischer, 1998. The Innovation Process and Network Activities of
Manufacturing Firms. 38th European Congress of the Regional Science
Association.
8. 2001.The Development Of Mass Production Has A Dramatic Impact On
Industry And Society.
9. PeterTufano.2003. Handbook of the Economics of Finance, Financial
Innovation. Chapter 6.
10. Kostas.2006. Innovation process. Make sense-using systems thinking.
Volume 26, Issue 11. Pages 1201-1302
11. Zetlin. 2008. OECD Statistics, labor productivity indicators
12. Błach.2011. Financial innovations and their role in the modern financial
system. Vol. 7, Iss.3, pp. 13-26
13. Morrar. R. 2014. Innovation in Services: A Literature Review.
Technology Innovation Management Review, 4(4): 6-14
62
14. Peter Kesting.2016. The impact of leadership styles on innovation
management - a review and a synthesis. Journal of Innovation
Management Kesting, Song, Niu JIM 3, 4 (2015) 22-41
15. Paul Trott.2017, An examination of product innovation in low- and
medium-technology industries: Cases from the UK packaged food sector.
Journal ISSN :0048-7333
16. Day, Jen-Der,2017, ICOI International conference of organizational
innovation, From Here to There 10 P Creates Innovation---
title: Talk slides template
tags: Templates, Talk
description: View the slide with "Slide Mode".
---

# Unleash the power!

<!-- Put the link to this slide here so people can follow -->
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 :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
