Wed's Talk

Class Definition

2021-04-14 Ting

slide: https://hackmd.io/@tingtinghsu/class_definition/

Why this book?

• I
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
  reading.
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →
• A friend gave me this book as a gift in 2019.

class MyClass 
    puts 'Hello World'
end

class_eval

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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

GitHub.

Usage flow

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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

• onMessage('event'): Register event listener
• sendMessage('event'): Trigger event

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

• Dead simple API
• Only cares about application logic

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Wrap up

• Cross envornment commnication
• A small library to solve messaging pain
• TypeScript Rocks
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →

Thank you!

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

You can find me on

• GitHub
• Twitter
• or email me