- 早上 11:00

第一次與主治醫生的會面，原本昨天狀況良好，呼吸器都改成訓練模式，住院醫生說預計今天下午可以拔管，所以我們前一晚想了一堆拔管後可能面臨狀況的問題，但沒想到今天一早來到加護病房，突然說爺爺昨晚有肺部感染的狀況，痰液變多，所以呼吸器也沒辨法再用訓練模式，原本預計要拔管但目前狀況無法，隨後主治就在病床前講了一堆狀況，目前肺部感染所以有使用抗生素治療，那如果不能拔管的話，之後建議我們做氣切

...

- 早上 11:00

昨天中午 12:00 做的 MRI 有初步的結果了，住院醫生說爺爺腦部有大片栓塞的狀況，判斷是缺血性腦中風，從住院到現在都有用藥治療幫助疏通，另外因為他们覺得爺爺現在自己呼吸狀況不錯，所以考慮明天下午拔氣管讓他自己呼吸，但拔氣管後可能會有各種需要設想的狀況，例如：爺爺現在沒有什麼咳嗽反應，所以如果之後有痰咳不出來，又需要再插回氣管，這樣的話基本就不能再拔管了，還有其他需要考量的點，這部分他們會再...

- 晚上 8:00

奶奶打電話很緊急的跟我說爺爺睡著人都叫不醒，而且全身都硬硬的，大聲叫我快回家看怎麼辦

我一回家後發現爺爺打呼超大聲，雙腳呈現交疊在一起的不正常姿勢，我趕快叫爺爺及推推他發現的確完全叫不醒，然後我趕快 google 搜尋 “老人睡覺叫不醒 打呼”，發現沒有什麼好的方式處理，這時奶奶一直推爺爺、按摩他的手、在耳朵旁邊大聲呼喊，但爺爺還是一樣大聲的打呼，雖然我覺得狀況很緊急但奶奶還是不願意打 1...

前言

這是我第一篇學習 shader 的文章，藉由上完 three.js journey lessons 27 - Shaders 後，嘗試延伸用老師的範例畫出自己國家的國旗

為什麼需要寫 shader?

Three.js 裡已經有內建各式各樣的 Geometry (ex. PlaneGeometry, BoxGeometry) 可以創建不同形狀的物體，但如果需要對這些 Geometry 裡個別的頂點們進行操作 (ex. 改變位置、顏色) 就需要 Shader 來進行精細的操作

前言

Threejs 中的 texture(貼圖) 可以設置 offset, repeat 及 wrap 屬性，但大部分文章都只有文字說明而沒有視覺化的範例，所以寫了一個視覺化範例讓自己能夠理解

Demo

圖片渲染在 (x,y) 平面上，右方橘色線為 x 軸，上方綠色線為 y 軸

此為 event loop 系列文章 - 第 4 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

這篇文章想藉由閱讀 Vue.nextTick() 的源碼來看 event loop 的使用

Vue.nextTick 的使用方式

官方文件寫明 Vue.nextTick() 是拿來等待下一次 DOM 更新的方法，因為 Vue 在每次響應式數據改變後是異步去更新 DOM，所以如果在數據改變後，馬上獲取 DOM 的資料會是舊的，這時就需要用到 Vue.nextTick() 獲取更新後的 DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

此為 event loop 系列文章 - 第 3 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

在研究 event loop 的過程中，赫然發現原來瀏覽器已經有了原生的 queueMicrotask 讓開發者可以自行管理微任務的執行，下面我們來看看什麼情況下會需要用到這個功能吧

基本用法

基本上 queueMicrotask 就如同使用 new Promise() 一樣，會將 callback 加入到 微任務佇列 (microtask queue)

1
2
3
4
5
6
7
8

let callback = () => console.log("Regular timeout callback has run");

let urgentCallback = () =>  console.log("*** Oh noes! An urgent callback has run!");

console.log("Main program started");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
console.log("Main program exiting");

此為 event loop 系列文章 - 第 2 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

上一篇介紹了 event loop 的運行原理，這篇文章希望藉由各種範例進一步體會 event loop 的執行順序

各種不同的 event loop 範例

1. 基本的 event loop 執行順序

1
2
3
4
5
6
7
8
9

setTimeout(() => {
  console.log('timeout')
}, 0)

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('main script');

此為 event loop 系列文章 - 第 1 篇：

1. Javascript 中的 event loop 及瀏覽器渲染機制
2. 從程式碼角度來看 event loop
3. 使用原生的 queueMicrotask 處理微任務
4. Vue.nextTick() 中的 event loop

前言

event loop 是 js 中一個蠻重要的概念，雖然以前知道 宏任務 (macrotask) 及 微任務 (microtask) 優先級上的差別，但似乎一直不知道 event loop 與瀏覽器渲染間的關係，而大部分的文章都只單獨介紹 event loop 或是 瀏覽器渲染流程，所以寫了這篇文章統整 event loop 與 瀏覽器渲染 間的關聯性

event loop 的作用

以前端來說，在瀏覽器中使用者的畫面點擊、呼叫後端 api、window.addEventListener，這些全部都由 js 執行，但 js 是單線程的程式語言，同一時間就是只能做一件事，所以當事情同時發生時，需要讓 js 知道哪行程式碼是先被執行的、而接下來又該執行哪段程式碼，這個負責安排執行順序的東西，基本上就叫做 event loop

event loop 的宿主環境

嚴格來說 event loop 並不是定義在 js 上的東西，而是根據不同環境有不同的 event loop 規則，以瀏覽器來說就會有瀏覽器的 event loop 規則，而 nodejs 的話又會有另一套 nodejs 的 event loop 規則，今天這篇文章只探討瀏覽器的 event loop

THREE.Vector3 是 threejs 中最常用到的基礎類別，代表 3 維向量的運算

Vector3 的方法

- add(v: Vector3): this

1
2
3

const addVector3 = new THREE.Vector3(1, 1, 1);
addVector3.add(new THREE.Vector3(2, 2, 2));
console.log('.add', addVector3); // {x: 3, y: 3, z: 3}

- addScalar(s: Float): this

1
2
3

const addScalarVector3 = new THREE.Vector3(1, 1, 1);
addScalarVector3.addScalar(2);
console.log('.addScalar', addScalarVector3); // {x: 3, y: 3, z: 3}