Live Note

Remain optimistic

Posted on Edited 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:
    - foo@example.com
  on_success: change
  on_failure: always

October Plan

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

Posted on Edited on In

Boosting Flutter Performance with Frame-Based Rendering using keframe

Flutter is known for its smooth UI performance, but complex animations or frequent rebuilds can sometimes lead to jank. Frame-based rendering, also known as keyframe animation, offers a powerful technique to optimize these scenarios. This article explores how to leverage frame-based rendering in Flutter using the keframe package, focusing on FrameAnimation, FrameSeparateWidget, and SizeCacheWidget.

What is Frame-Based Rendering?

Traditional rendering in Flutter often involves rebuilding widgets every time their properties change. While efficient in many cases, this can become a bottleneck when dealing with intricate animations or rapidly changing data.

Frame-based rendering pre-calculates animation frames and stores them. During animation, the system displays these pre-rendered frames sequentially, minimizing constant rebuilds. This results in smoother animations and improved performance, especially on less powerful devices.

Read more »

Posted on Edited on In

In modern web development, enhancing user experience by highlighting specific text within a larger body of content is a common requirement. Whether it’s for search results, annotations, or emphasizing key information, a Highlight Text component can be incredibly useful. In this article, we’ll walk through the process of building a simple yet effective Highlight Text component using React.

Here is the Example captured:

Highlight Text Component Example

Read more »

Posted on Edited on In 
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
let Human = function (param) {
  this.skill = (param && param.skill) || "null"
  this.hobby = (param && param.skill) || "null"
}
Human.prototype = {
  getSkill: function () {
    return this.skill
  },
  getHobby: function () {
    return this.hobby
  },
}

let Named = function (name) {
  let _this = this
  ;((name, _this) => {
    this.wholeName = name
    if (name.indexOf(" ") > -1) {
      _this.FirstName = name.slice(0, name.indexOf(" "))
      _this.LastName = name.slice(name.indexOf(" "))
    }
  })(name, _this)
}

let Work = function (work) {
  let _this = this
  ;((work, _this) => {
    switch (work) {
      case "code":
        this.work = "developer"
        break
      case "design":
        this.work = "designer"
        break
      default:
        this.work = work
    }
  })(work, _this)
}

Work.prototype.changeWork = function (work) {
  this.work = work
}

/**
 * to create a Person
 * @param {*} name
 * @param {*} work
 */
let Person = function (name, work) {
  let _person = new Human()
  _person.name = new Named(name)
  _person.work = new Work(work)
  return _person
}

// for test
let person = new Person("Jack Edward", "design")
console.log(person.work)
console.log(person.name)
person.work.changeWork("code")
console.log(person.work)

Posted on Edited on In

In this post, I want to share how I built a custom slider component that comes packed with useful features. This slider not only supports basic functionalities like step increments and configurable maximum/minimum values, but it also offers advanced features such as displaying scale tick values, suffix rendering, and custom value formatting. Whether you’re building a finance dashboard, a settings panel, or a data visualization tool, this component can be tailored to your needs.

Features

Step Increments

The slider supports step increments, allowing you to specify how much the slider’s value should increase or decrease with each move. This is particularly useful for ensuring users select values within a desired precision.

Scale Tick Values

To improve usability, the slider renders tick values along its track. These ticks provide a visual reference for users, making it easier to gauge the range and current value.

Maximum and Minimum Values

You can easily define the slider’s range by setting the maximum and minimum values. This ensures that users can only select a value within a valid, predetermined range.

Suffix Rendering

Often, slider values need to be accompanied by a unit (e.g., %, $, kg). With suffix rendering, you can easily append a suffix to the displayed value, making it clear what the number represents.

Custom Value Formatting

In some cases, the raw slider value might not be in the ideal format for display. This slider component allows you to pass a formatter function that converts the numeric value into a user-friendly string format.

Implementation Overview

Below is a simplified example of how the slider component is implemented using React and TypeScript:

Read more »