Live Note

Remain optimistic

Posted on In

config clash.service

file path: /etc/systemd/system

1
2
3
4
5
6
7
8
9
10
11
12
13
[Unit]
Description=Clash service
After=network.target

[Service]
Type=simple
User=edward
ExecStart=/usr/bin/clash -d /home/edward/.config/clash >> /home/edward/.config/clash/clash.log
Restart=on-failure
RestartPreventExitStatus=23

[Install]
WantedBy=multi-user.target
  • start: systemctl start clash
  • stop: systemctl stop clash
  • enable(start when system start): systemctl enable clash
  • disable: systemctl disable clash
  • status: systemctl status clash

Posted on

最近在做的事

  • 去中心化 APP
  • 閱讀”我的簡史”

上月任務

  • Testing: 需求過多,完成一半
  • 結構優化: Done.
  • TS: 擱置
  • shell: 擱置

這個月的目標

  • 線性代數
  • Webpack
  • 去中心化 APP

最近的事

  • BTC 接近 20000
  • 去道院參觀
  • 補習數學

Posted on

之前使用的是 trojan, 奈何找不到好的管理程序, 現使用 clash

clash 的 config 使用的是 yaml 文件, 所以比較好寫.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
port: 7890
socks-port: 7891
mixed-port: 7892 # 混合端口
allow-lan: true # 允許局域網連接
log-level: info
external-controller: 127.0.0.1:9090 # 外部控制端口
extarnal-ui: dashborad # 使用的ui
proxies: # clash官方文檔有更清楚的寫法
  - {
      type: ss,
      name: "TEST-SS",
      server: 127.0.0.1,
      port: 2020,
      password: 123456,
      plugin: obfs,
      plugin-opts: { mode: http },
    } # 公司使用的是ss協議
  - {
      type: trojan,
      name: "TEST-TROJAN",
      server: 127.0.0.1,
      port: 443,
      password: 123456,
      #sni
      skip-cert-verify: true,
    }
proxy-groups:
  - { name: WORK, type: select, proxies: ["TEST-SS"] } # 將所需的proxy單獨進行分組
  - { name: Proxy, type: select, proxies: ["TEST-TROJAN"] }
rules:
  - IP-CIDR, 10.8.0.0/12, WORK # 根據rule將不同的請求轉發到所需的分組去
  - IP-CIDR, 172.30.0.0/12, WORK
  - IP-CIDR, 100.64.0.0/10, DIRECT
  - IP-CIDR, 127.0.0.0/8, DIRECT
  - DOMAIN-SUFFIX, google.com, Proxy

Posted on

最近的任務量比較多

10 月份除開 1-8 只休息了四天, 需求很趕, 代碼質量參差不齊.

上個月的任務

  • React Hook: 這個月打算將之前的代碼邏輯抽離城自定義 hooks
  • shell: 需求太密已擱置
  • Linux: 需求太密已擱置
  • 優化 code: 大部分都已經優化掉了, 少數 code 還存在很大問題.

這個月的目標:

  • 補全測試
  • 優化代碼結構, 文件結構
  • 挖掘 Jest 深入用法
  • 重新熟悉 Typescript
  • shell

最近的事

  • BTC 價格接近 16000
  • 美國大選
  • 追完說唱新世代, 一場三個小時是有夠久的
  • 人生中第一次得蕁麻疹, 查不出病因

Posted on In

Example

假設現在有一個數據非常多的數組,但是我們只需要它的前幾個數據,并且進行一定的操作,這時候可以使用 generator 來進行 take 的操作.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const from = (arr) => arr[Symbol.iterator]()

const filter = (f) =>
  function* (iter) {
    let v = iter.next()
    while (!v.done) {
      if (f(v.value)) yield v.value
      v = iter.next()
    }
  }

const multipy = (n) =>
  function* (iter) {
    let v = iter.next()
    while (!v.done) {
      yield v.value * n
      v = iter.next()
    }
  }

const take = (n) =>
  function* (iter) {
    let i = 0
    let v = iter.next()
    while (!v.done && i < n) {
      yield v.value
      i++
      v = iter.next()
    }
  }

const pipe = (...arr) => arr.reduce((acc, func) => func(acc))

console.log([
  ...pipe(
    from(arr),
    filter((v) => v % 2 === 0),
    multipy(3),
    take(30),
    filter((v) => v > 15)
  ),
]) // [18, 24, 30, 36]

Posted on In

Reducer

Reducer 將多個 input fold 成一個 output.

1
2
3
4
const add = (a, b) => a + b
const multiply = (a, b) => a * b
const concatString = (a, b) => a + b
const concatArray = (a, b) => [...a, ...b]

Transducer

Transducer 做的事情大致相同,但是與普通的 reducer 不同的是,它可以通過多個 function 組合而成.而普通的 reducer 不能組合,因爲他們接受兩個參數,但是只返回一個值,所以不能將這次的結果傳入下一個 reducer:

1
2
3
4
5
6
7
// reducer
f: (a, c) => a
g: (a, c) => a

// transducer
f: (reducer) => reducer
g: (reducer) => reducer
Read more »

Posted on

閑著無聊看了看如何部署

公司内部有 k8s 集群,所以也需要學習如何寫 deploy 脚本.目前服務挂在 Travis CI 上,後續可能會使用自己的機器裝個 Github Runner 啥的…

步驟大致為:

  1. 在 Travis 中登錄,然後選擇需要 watch 的倉庫
  2. 編寫 deploy 文件,需要内部暴露字段的可以在 setting 中添加
  3. 在 github 中拿到 person access token,添加到 Travis

因爲 blog 還不需要 build 和 test 的步驟,所以我的 deploy file 暫時還沒有這些:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
language: node_js
node_js:
  - 10 # hexo目前似乎還不支持node 14版本

branches:
  only:
    - master # 需要監聽的branch

before_install:
  - npm install -g hexo-cli

install:
  - npm install
  - npm install hexo-deployer-git

before_script:
  - git config user.name "${username}"
  - git config user.email "${email}"
  - rm -rf themes/next
  - git clone https://github.com/theme-next/hexo-theme-next themes/next
  - cp assets/config/_config.yml themes/next/_config.yml # 我將自己的theme config存在assets中
  - cp assets/images/avatar.jpg themes/next/source/images/avatar.jpg
  - sed -i "s/github_token/${GITHUB_TOKEN}/g" _config.yml

script:
  - hexo clean
  - hexo generate
  - echo "Generation finished."
  - hexo deploy

notifications:
  email:
    - [email protected]
  on_success: change
  on_failure: always

October Plan

  • React Hook: 首要完成的目標
  • shell: 不知道能學到什麽程度
  • Linux 命令: 不知道能學到什麽程度
  • 優化之前的 code: 算是屎山了
Read more »

Posted on

買了個阿里雲服務

有點太貴了。隨便跑點什麽 Memory 就 100%。

時常掉綫，不知道是不是網絡的問題。拿到公司 Network 環境一樣掉綫。

想搭個 Gatsby 玩玩，還是用自己的電腦吧。

Posted on

工作以來的感受

最大的感受就是，需要學習的還有很多很多。獨立思考可以讓你的思維更加開放、活躍，同時可以激發更多的靈感。
目前的技術棧：React+Mobx+TypeScirpt

從前對狀態管理沒有什麽概念，自從接觸到工程項目之後，對爲何要進行 State Management 越來越清晰。
當然也產生了一定的不良影響 -> 只要上手就會想如何設計 State，導致有的地方代碼實在冗餘。

同時在項目代碼中瞭解了許多新知識，如何去設計一個可繼承、可復用的 Function；如何將 Store 封裝，便於使用；如何對請求進行封裝；何時使用 Interface、何時使用 Type；等等……

接下來需要做的

  • 思考之前的代碼如何優化
  • 思考目前的代碼是否還能拆分
  • 閲讀 State Management 的文章
  • ……

課餘時間的活動

  • 書籍

    • 熵的世界
    • 我的簡史 - 霍金

  • 日常

    • 陰陽師
    • B 站
    • 手游 - 跑跑卡丁車
    • 音樂

  • 綜藝

    • 説唱新世代
    • 中國新説唱

  • 影視劇

    • 甜蜜蜜
    • 投名狀
    • 親愛的
    • 八佰
    • Mulan
    • 信條

挖坑

考慮用點什麽搭一個自己的博客。

Posted on In

使用 HOC 进行代码复用

假设存在下面两个组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react"

class ButtonCounter extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
    }
  }

  increase = () => {
    let { step } = this.props

    this.setState((pre) => {
      return {
        count: pre.count + step,
      }
    })
  }

  render() {
    let { count } = this.state

    return <button onClick={this.increase}>click {count} times</button>
  }
}

export default ButtonCounter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react"

class ButtonCounter extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
    }
  }

  increase = () => {
    let { step } = this.props

    this.setState((pre) => {
      return {
        count: pre.count + step,
      }
    })
  }

  render() {
    let { count } = this.state

    return <div onMouseLeave={this.increase}>click {count} times</div>
  }
}

export default ButtonCounter

使用 HOC 进行改造

HOC 通过传入的组件，返回一个新的组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react"

const withCounter = (OriginalComponent) => {
  class newComponent extends React.Component {
    render() {
      return <OriginalComponent />
    }
  }

  return newComponent
}

export default withCounter
Read more »