# Wed's Talk
## Class Definition
2021-04-14 Ting
<!-- Put the link to this slide here so people can follow -->
#### slide: https://hackmd.io/@tingtinghsu/class_definition/
---
---
## Why this book?
- I :heart: reading. :book:
- A friend gave me this book as a gift in 2019.
---
---
```ruby
class MyClass
puts 'Hello World'
end
```
---
# class_eval
```bash
vagrant@vm ~/nerv master*
❯ rg 'class_eval'
test/helpers/model_helper.rb
84: klass.class_eval do
108: klass.class_eval do
test/util/file_uploader_test.rb
13: uploader.class.class_eval do
config/initializers/trailblazer.rb
92: base.class_eval do
111: Reform::Form.class_eval do
```
---
---
### 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
// 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-15T21:38:03.959Z","metaMigratedFrom":"YAML","title":"Wednesday Talk 2021-04-14","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"55148774-a793-4ea6-a8ad-d47b88b811b2\",\"add\":2925,\"del\":224}]"}