<!--The World Economic Forum (WEF) says that we are on the cusp of the Fourth Industrial Revolution. In this context, what do you think are the important skills an engineer of the next decade should possess? -->
### In the Context of the Fourth Industrial Revolution, What Are the Important Skills an Engineer of the Next Decade Should Possess?
----
- Li Ruochen
- A0204696X
---
#### The Fourth Industrial Revolution
- What is it?
----
#### The Fourth Industrial Revolution
- The First Industrial Revolution (1760 - 1840)
- Used water and steam power to mechanize production
- The shift from our reliance on animals, human effort and biomass as primary sources of energy to the use of fossil fuels and the mechanical power this enabled
- The Seconda Industrial Revolution (1870 - 1914)
- used electric power to create mass production
- brought major breakthroughs in the form of electricity distribution, both wireless and wired communication, the synthesis of ammonia and new forms of power generation
- The Third Industrial Revolution ()
---
# 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
---
---
## 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
{"metaMigratedAt":"2023-06-15T01:15:59.436Z","metaMigratedFrom":"YAML","title":"Presentation","breaks":true,"description":"RC's EE1111A Presentation","slideOptions":"{\"theme\":\"solarized\",\"transition\":\"fade\"}","contributors":"[{\"id\":\"54c99c02-3348-4931-bd31-8398d1896265\",\"add\":3647,\"del\":116}]"}