
## {{ title }}

### Markdown 驅動文章頁面

最近在寫文章時對於添加圖片這件事很困擾，自從 `blueturtle.dev` 採取`由 Markdown 檔案去產生文章頁面`的解決方案，我對文章頁面的渲染結果一直都不是很滿意，這套工作流運作起來很流暢，只需要專注在撰寫內容本身然後管理好每個文章對應的 md 檔，其他跟文章有關的資料（主旨、文章類別、標籤...）放到 Metadata 裡面，剩下的都不用手動介入，Next.js 會幫我遍歷 md 檔案建立好靜態路由、渲染頁面、產生超連結到文章列表裡，從結果來看確實達成了當初想要的效果

### 新增圖片是一場災難

如果只是撰寫純文字的文章內容沒有太大的問題，但只要想新增圖片就是一場災難，在 Markdown 裡面新增圖片的語法像是這樣

```Markdown
![Title](/public/picture.png)
```

在 Markdown 語法裡面無法調整圖片大小更無法調整擺放位置，像是`文字在左, 圖片在右`或其他文繞圖排版效果都沒有辦法實現，可以透過調整程式去改變圖片大小，但這麼做並沒有從根本解決問題，我想實現的是在撰寫文章的當下就能自行調整圖片大小及排版

下面是有關讀取 Markdown 內容轉換成 HTML 頁面的程式碼

```typescript
export const MarkdownViewer = ({ md, codeStyle }: MarkdownTypes) => {
  const MarkdownComponent: Object = {
    img: ({
      node,
      src,
      inline,
      className,
      alt,
      ...props
    }: {
      node: MarkdownNode;
      src: string;
      inline: boolean;
      className: string;
      alt: string;
      [key: string]: any;
    }) => {
      return (
        <Image
          src={src}
          width={0}
          height={0}
          sizes="100vw"
          className="h-auto w-full"
          alt={alt}
        />
      );
    },
  };

  return (
    <Markdown
      className="prose w-full text-primary lg:prose-lg"
      rehypePlugins={[rehypeRaw, rehypeSlug]}
      remarkPlugins={[remarkGfm, remarkGeomoji]}
      components={MarkdownComponent}>
      {md?.content ?? ''}
    </Markdown>
  );
};
```

### 尋找解決方案

擴展語法或引用其他插件或許是可行的方法，但這就失去了用 Markdown 撰寫文章的意義，有極大的可能我折騰了許多時間最後只會得到一個堪用的效果，不停的往輕量化標記語言添加新功能，這個`特殊版本的 Markdown`還失去了可攜性，無法帶到其他平台使用

### 最理想的結果

要怎麼做才能在撰寫文章時不折騰太多時間調整版型又保留後續調整的彈性呢？把每一篇文章獨立成各自的`.tsx檔`來管理似乎是個不錯的做法，跟原本的方案比起來像在開倒車但因為原本就有用 Next.js，要組織這些東西比起傳統的網頁應用程式要來的簡單很多

---

![文繞圖效果](/public/img/bobograss-layout.png)

---

```typescript
import { Article, Picture, TextWrap } from '@/components/article'

export default function Page() {
  const title = '彰化秘境私藏旅行'
  const address = "彰化縣田尾鄉"
  const caption = '毛茸茸的田尾波波草'
  const content = '讓可愛的波波草療癒疲累的心靈吧'
  const picture = <Picture figure={caption} src='/bobograss.jpg' width="70%"/>

  return (
    <Article title={title} location={address}>
      <TextWrap layout='topRight'>{content}</TextWrap>
    </Article>
  )
```

### 現行的文章渲染結果

再回過頭來看用現行的機制去渲染文章會得到什麼結果

---

### 彰化秘境私藏旅行

彰化縣田尾鄉

讓可愛的波波草療癒疲累的心靈吧

![彰化波波草](/public/img/cover/bobograss.jpg)

> 毛茸茸的田尾波波草

---

```Markdown
# 彰化秘境私藏旅行

彰化縣田尾鄉

讓可愛的波波草療癒疲累的心靈吧

![彰化波波草](/public/img/cover/bobograss.jpg)

> 毛茸茸的田尾波波草
```

不管怎麼組織文章結構或調整程式都無法得到剛剛那個最理想的結果，寫文章時只能用 `heading`, `paragraph`, `image`, `blockquote` 這些基本元素去組織內容，我很難透過在元素上添加香料來改變整個排版結果，直接在 Markdown 裡加入 HTML 元素也不是很理想

### 後續的移植工作

還有一些工作要做...

- 建立組成文章內容的元件
- 把 md 檔移植到 \*.tsx 裡
- 拿掉跟靜態路由有關的程式碼 (`getStaticPaths`, `getStaticProps`)
- 重新組織文章列表



# {{ title }}

[yt-dlp](https://github.com/yt-dlp/yt-dlp) 是一個透過命令行指令操作的 YouTube Downloader

## 安裝

### macOS

#### Homebrew

```bash
brew install yt-dlp
```

> 透過 `Homebrew` 來安裝 `yt-dlp` 會自動安裝其他相依套件，如果是透過預先編譯完的執行檔 (executable) 來執行 `yt-dlp` 在使用時部分功能可能會無法運作，像是在下載時加入 `--merge-output-format mp4` 選項會將下載回來的視訊及音訊檔案合併成 mp4 格式，如果執行環境缺少 `ffmpeg` 套件合併會執行失敗。

## 更新

有時候沒辦法下載是因為`yt-dlp`的版本太舊，要更新成最新版才能使用

```bash
pip install yt-dlp --upgrade
```

## 基本用法

### 下載影片

```bash
yt-dlp "https://www.youtube.com/watch?v=q3zqJs7JUCQ"
```

### 運作原理

藉由觀察下載過程產生的訊息我們可以得知 `yt-dlp` 的運作原理

```bash
yt-dlp "https://www.youtube.com/watch?v=q3zqJs7JUCQ"
[youtube] Extracting URL: https://www.youtube.com/watch?v=q3zqJs7JUCQ
[youtube] q3zqJs7JUCQ: Downloading webpage
[youtube] q3zqJs7JUCQ: Downloading ios player API JSON
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] Skipping player responses from android clients (got player responses for video "aQvGIIdgFDM" instead of "q3zqJs7JUCQ")
[youtube] q3zqJs7JUCQ: Downloading m3u8 information
[info] q3zqJs7JUCQ: Downloading 1 format(s): 616+251
[hlsnative] Downloading m3u8 manifest
[hlsnative] Total fragments: 49
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4
[download] 100% of   88.17MiB in 00:02:33 at 586.97KiB/s
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm
[download] 100% of    3.81MiB in 00:00:07 at 508.50KiB/s
[Merger] Merging formats into "Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].webm"
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4 (pass -k to keep)
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm (pass -k to keep)
```

a. 下載開始前先找到影片的串流資源格式列表 `m3u8 playlist`

```bash
   [youtube] q3zqJs7JUCQ: Downloading m3u8 information
```

b. 每支影片在 `Youtube` 上提供了數種不同的串流資源格式以滿足每個用戶的需求，因此下載時需指定格式 `ID` 才能下載，若不指定 `ID` 下載時預設會帶入 `-f bestvideo*+bestaudio/best` `yt-dlp` 會從列表中找到最佳的視訊及音訊格式進行下載

```bash
[info] q3zqJs7JUCQ: Downloading 1 format(s): 616+251
```

c. 開始進行下載

```bash
[hlsnative] Downloading m3u8 manifest
[hlsnative] Total fragments: 49
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4
[download] 100% of   88.17MiB in 00:02:33 at 586.97KiB/s
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm
[download] 100% of    3.81MiB in 00:00:07 at 508.50KiB/s
```

d. 視訊是以片段的方式存放的，可以從 `m3u8 manifest` 裡得到片段資訊

```bash
[hlsnative] Downloading m3u8 manifest
[hlsnative] Total fragments: 49
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4
[download] 100% of   88.17MiB in 00:02:33 at 586.97KiB/s
```

e. 音訊沒有片段的設計

```bash
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm
[download] 100% of    3.81MiB in 00:00:07 at 508.50KiB/s
```

f. 將下載回來的視訊及音訊做合併成為一個完整的影片

```bash
[Merger] Merging formats into "Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].webm"
```

g. 合併完成後將暫存檔 (視訊及音訊檔) 清除

```bash
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4 (pass -k to keep)
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm (pass -k to keep)
```

### 列出所有可用的串流格式

```bash
yt-dlp --list-formats "https://www.youtube.com/watch?v=q3zqJs7JUCQ"

[youtube] Extracting URL: https://www.youtube.com/watch?v=q3zqJs7JUCQ
[youtube] q3zqJs7JUCQ: Downloading webpage
[youtube] q3zqJs7JUCQ: Downloading ios player API JSON
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] Skipping player responses from android clients (got player responses for video "aQvGIIdgFDM" instead of "q3zqJs7JUCQ")
[youtube] q3zqJs7JUCQ: Downloading player 7d1f7724
[youtube] q3zqJs7JUCQ: Downloading m3u8 information
[info] Available formats for q3zqJs7JUCQ:
ID  EXT   RESOLUTION FPS CH │   FILESIZE   TBR PROTO │ VCODEC          VBR ACODEC      ABR ASR MORE INFO
────────────────────────────────────────────────────────────────────────────────────────────────────────────────
sb3 mhtml 48x27        0    │                  mhtml │ images                                  storyboard
sb2 mhtml 80x45        1    │                  mhtml │ images                                  storyboard
sb1 mhtml 160x90       1    │                  mhtml │ images                                  storyboard
sb0 mhtml 320x180      1    │                  mhtml │ images                                  storyboard
233 mp4   audio only        │                  m3u8  │ audio only          unknown             Default
234 mp4   audio only        │                  m3u8  │ audio only          unknown             Default
139 m4a   audio only      2 │    1.45MiB   49k https │ audio only          mp4a.40.5   49k 22k low, m4a_dash
249 webm  audio only      2 │    1.46MiB   49k https │ audio only          opus        49k 48k low, webm_dash
250 webm  audio only      2 │    1.93MiB   65k https │ audio only          opus        65k 48k low, webm_dash
140 m4a   audio only      2 │    3.85MiB  129k https │ audio only          mp4a.40.2  129k 44k medium, m4a_dash
251 webm  audio only      2 │    3.81MiB  128k https │ audio only          opus       128k 48k medium, webm_dash
602 mp4   256x144     12    │ ~  3.26MiB  110k m3u8  │ vp09.00.10.08  110k video only
394 mp4   256x144     24    │    1.73MiB   58k https │ av01.0.00M.08   58k video only          144p, mp4_dash
269 mp4   256x144     24    │ ~  5.12MiB  173k m3u8  │ avc1.4D400C    173k video only
160 mp4   256x144     24    │    3.30MiB  111k https │ avc1.4D400C    111k video only          144p, mp4_dash
603 mp4   256x144     24    │ ~  5.32MiB  179k m3u8  │ vp09.00.11.08  179k video only
278 webm  256x144     24    │    2.33MiB   78k https │ vp09.00.11.08   78k video only          144p, webm_dash
395 mp4   426x240     24    │    2.78MiB   93k https │ av01.0.00M.08   93k video only          240p, mp4_dash
229 mp4   426x240     24    │ ~  9.33MiB  314k m3u8  │ avc1.4D4015    314k video only
133 mp4   426x240     24    │    7.29MiB  245k https │ avc1.4D4015    245k video only          240p, mp4_dash
604 mp4   426x240     24    │ ~ 10.46MiB  352k m3u8  │ vp09.00.20.08  352k video only
242 webm  426x240     24    │    4.26MiB  143k https │ vp09.00.20.08  143k video only          240p, webm_dash
396 mp4   640x360     24    │    5.32MiB  179k https │ av01.0.01M.08  179k video only          360p, mp4_dash
230 mp4   640x360     24    │ ~ 23.83MiB  803k m3u8  │ avc1.4D401E    803k video only
134 mp4   640x360     24    │   12.02MiB  404k https │ avc1.4D401E    404k video only          360p, mp4_dash
18  mp4   640x360     24  2 │   15.56MiB  523k https │ avc1.42001E         mp4a.40.2       44k 360p
605 mp4   640x360     24    │ ~ 19.42MiB  654k m3u8  │ vp09.00.21.08  654k video only
243 webm  640x360     24    │    7.18MiB  242k https │ vp09.00.21.08  242k video only          360p, webm_dash
397 mp4   854x480     24    │    9.27MiB  312k https │ av01.0.04M.08  312k video only          480p, mp4_dash
231 mp4   854x480     24    │ ~ 40.19MiB 1354k m3u8  │ avc1.4D401E   1354k video only
135 mp4   854x480     24    │   23.59MiB  794k https │ avc1.4D401E    794k video only          480p, mp4_dash
606 mp4   854x480     24    │ ~ 31.70MiB 1068k m3u8  │ vp09.00.30.08 1068k video only
244 webm  854x480     24    │   11.83MiB  398k https │ vp09.00.30.08  398k video only          480p, webm_dash
398 mp4   1280x720    24    │   17.59MiB  592k https │ av01.0.05M.08  592k video only          720p, mp4_dash
232 mp4   1280x720    24    │ ~ 76.23MiB 2568k m3u8  │ avc1.4D401F   2568k video only
136 mp4   1280x720    24    │   45.82MiB 1542k https │ avc1.4D401F   1542k video only          720p, mp4_dash
609 mp4   1280x720    24    │ ~ 49.08MiB 1654k m3u8  │ vp09.00.31.08 1654k video only
247 webm  1280x720    24    │   21.04MiB  708k https │ vp09.00.31.08  708k video only          720p, webm_dash
399 mp4   1920x1080   24    │   31.28MiB 1053k https │ av01.0.08M.08 1053k video only          1080p, mp4_dash
270 mp4   1920x1080   24    │ ~139.67MiB 4705k m3u8  │ avc1.640028   4705k video only
137 mp4   1920x1080   24    │   89.08MiB 2997k https │ avc1.640028   2997k video only          1080p, mp4_dash
614 mp4   1920x1080   24    │ ~ 78.28MiB 2637k m3u8  │ vp09.00.40.08 2637k video only
248 webm  1920x1080   24    │   36.79MiB 1238k https │ vp09.00.40.08 1238k video only          1080p, webm_dash
616 mp4   1920x1080   24    │ ~170.49MiB 5744k m3u8  │ vp09.00.40.08 5744k video only          Premium
```

### 下載後自動加上影片縮圖

```bash
yt-dlp --embed-thumbnail "https://www.youtube.com/watch?v=q3zqJs7JUCQ"
```

### 單獨下載音訊

```bash
yt-dlp -f 251 "https://www.youtube.com/watch?v=q3zqJs7JUCQ"
```

#### 將音訊轉成 Mp3

```bash
yt-dlp -f 251 --extract-audio --audio-format mp3 "https://www.youtube.com/watch?v=q3zqJs7JUCQ"
```

### 下載直播影片

```bash
yt-dlp --live-from-start --merge-output-format mp4 --embed-thumbnail "https://www.youtube.com/watch?v=rntsXse2noY"
```

#### 指定影片開始時間

直播影片開始時可能會因為前置作業時間留有一段沒有內容的空白片段，可以加入 `--wait-for-video 60` 將影片的起始點推遲60秒再下載

```bash
yt-dlp --live-from-start --merge-output-format mp4 --embed-thumbnail --wait-for-video 233 "https://www.youtube.com/watch?v=rntsXse2noY"
```

## 打造自己的 Youtube 離線音樂庫

如果想要把`Youtube`當作音樂播放器使用又不想要花錢訂閱`Youtube Premium`，那就只能把平台上的資源下載下來離線播放，`yt-dlp`可以在下載完成時順便幫你把檔案轉換成了想要的格式，這邊會以`iPhone`做舉例

### 下載資源並轉成`m4a`檔

```bash
yt-dlp --extract-audio --audio-format m4a "https://youtu.be/iCFFl_wGSsI?si=zLPeVdoVnaFY0oDu"
```

### 將影片存進播放清單中，下載時直接與播放清單同步

一個一個分別下載很麻煩，我們只要將要放入離線音樂庫的影片都存進同一個播放清單裡，下載時就可以一網打盡

```bash
cd ~/Youtube Music Library
yt-dlp --extract-audio --audio-format m4a "https://www.youtube.com/watch?v=qHPIPdPhUP0&list=PLcZPDW3YZk05hsoPOASCsxYMBPIoXLcXI"
```

> 如果下載的資源已經存在當前目錄底下`yt-dlp`會自動跳過

### 將檔案存進手機裡

我這邊是用`Apple Music`作為播放器及音樂庫使用，只要把`Youtube Music Library`資料夾裡面的檔案全部匯入`Apple Music`裡再與手機同步資料，就可以直接用手機聆聽離線音樂庫了

> 如果你從不同的路徑匯入相同的檔案到`Apple Music`中會被視為不同的資源因此會出現重複的歌曲，所以每一次下載都要存進同一個資料夾並從這個資料夾匯入到`Apple Music`中

## 疑難排解

### Unable to download API page

下載影片時出現 `HTTP Error 400 (Precondition check failed)`，原因是 `yt-dlp` 的版本過舊，更新後可以解決問題

```bash
yt-dlp "https://www.youtube.com/watch?v=q3zqJs7JUCQ"

[youtube] Extracting URL: https://www.youtube.com/watch?v=q3zqJs7JUCQ
[youtube] q3zqJs7JUCQ: Downloading webpage
[youtube] q3zqJs7JUCQ: Downloading ios player API JSON
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] YouTube said: ERROR - Precondition check failed.
WARNING: [youtube] HTTP Error 400: Bad Request. Retrying (1/3)...
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] YouTube said: ERROR - Precondition check failed.
WARNING: [youtube] HTTP Error 400: Bad Request. Retrying (2/3)...
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] YouTube said: ERROR - Precondition check failed.
WARNING: [youtube] HTTP Error 400: Bad Request. Retrying (3/3)...
[youtube] q3zqJs7JUCQ: Downloading android player API JSON
WARNING: [youtube] YouTube said: ERROR - Precondition check failed.
WARNING: [youtube] Unable to download API page: HTTP Error 400: Bad Request (caused by <HTTPError 400: Bad Request>); please report this issue on  https://github.com/yt-dlp/yt-dlp/issues?q= , filling out the appropriate issue template. Confirm you are on the latest version using  yt-dlp -U
[youtube] q3zqJs7JUCQ: Downloading player 8fc6998a
[youtube] q3zqJs7JUCQ: Downloading m3u8 information
[info] q3zqJs7JUCQ: Downloading 1 format(s): 616+251
[hlsnative] Downloading m3u8 manifest
[hlsnative] Total fragments: 49
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4
[download] 100% of   88.17MiB in 00:02:31 at 596.50KiB/s
[download] Destination: Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm
[download] 100% of    3.81MiB in 00:00:06 at 574.16KiB/s
[Merger] Merging formats into "Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].webm"
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f616.mp4 (pass -k to keep)
Deleting original file Taylor Swift - Fortnight (feat. Post Malone) (Official Music Video) [q3zqJs7JUCQ].f251.webm (pass -k to keep)
```

```bash
brew upgrade yt-dlp
```



## {{ title }}

### 為什麼需要用腳手架建立項目

現代網頁應用程式已經不再只是透過引用幾個簡單的 HTML、JavaScript、CSS 檔案組合起來就能完成，雖然網頁技術的底層還是這些東西沒有改變，但作為運行應用程式最常見的客戶端(瀏覽器)目前還是只看得懂這三樣東西，實務上我們不會單純用這三樣東西開發應用程式，可能還會用上 TypeScript、Tailwind CSS、ECMAScript 這些新技術，網頁檔案在丟給瀏覽器工作之前還要先做像是編譯、轉譯、打包等等的前置作業，才能讓瀏覽器正常執行渲染畫面

如果要從頭建立一個新的 React 項目要先自行安裝必要的相依套件、調整初始設定，並且要在每次修改代碼完自行處理先前提到的前置作業，才能讓這些零件運轉起來在瀏覽器上看到執行結果，為了增加開發效率減少這些瑣碎的事情通常會透過俗稱腳手架 (scaffold) 的工具來協助建立新項目，常見的腳手架有 Create React App、Vite、Next.js，本文會聚焦在介紹這三種腳手架工具

> 無論使用哪一種腳手架來建項目都要記得啟動前要先手動執行`npm install`把相依套件安裝好才可以用`npm run dev`啟動項目
>
> 這是一個常見的做法因為`node_modules`的佔用空間及檔案數量太驚人了，把項目的相依性套件相關資訊寫在`package.json`裡面追蹤後續異動，只在開發期間安裝相關套件到工作目錄中，生產階段會透過建置工具將必要的套件拆分打包壓縮放到生產代碼中

### Create React App (CRA)

作為早期最普遍使用的 React 建置工具雖然現在已經沒落了，但還是能在很多教程內容中看見它的身影，因為啟動開發服務器緩慢、打包生產代碼緩慢，整個開發體驗不及其他後起之秀，如果有舊項目要維護或有遷移建置工具的需求才會用到，現在已不建議從 CRA 開始用起，建議用 Vite 或 Next.js 取代

#### 安裝

```bash
// 如果先前在全域環境有安裝過套件建議先將舊版本移除掉再用 'npx' 進行安裝，避免安裝到舊版本
npm uninstall -g create-react-app
```

```bash
npx create-react-app cra
```

#### package.json

```json
{
  "name": "cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

#### 啟動項目

```bash
npm run start
Compiled successfully!

You can now view cra in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://172.20.10.2:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
```

![cra-start](/public/img/cra-start.png)

> 整個執行安裝的時間可能長達數分鐘之久，這是正常的情況

### Vite

Vite 是次世代的前端項目建置工具，作者為 Evan You (Vue.js 的作者)，擁有以下特點

- 快速啟動開發服務器 dev server
- 原生 ESM 支持
- 熱模組加載 Hot Module Reload (HMR)
- 透過 Plugin 擴充功能
- 用 Rollup 打包生產代碼

因為 Vite 擁有這些優勢讓它的開發者體驗明顯優於其他建置工具，如果有用過 CRA 或自行用 Webpack 處理的前端開發者應該能夠理解每次修改完代碼要等待一段時間才能在瀏覽器上看到更新結果的痛點

#### 安裝

```bash
npm create vite@latest
```

隨後會跳出 prompt 請你輸入 package 名稱及要使用的 framework，然後完成建立

```bash
npm create vite@latest
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /Users/tarmac/Projects/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev
```

#### package.json

```json
{
  "name": "react-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}
```

#### 啟動項目

Vite 執行時會找到根目錄的 `vite.config.ts` 檔案根據設定去執行建置工作

```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});
```

執行`npm run dev`後 Vite 會快速啟動一個 `dev server` 將項目部署在上面運行

```bash
npm run dev
$ vite

  VITE v5.2.9  ready in 429 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

![vite-start](/public/img/vite-start.png)

### Next.js

Next.js 不算是單純的腳手架工具，它是基於 React 打造的全端開發框架，React 官方已經將它寫進文檔裡推薦開發者用 Next.js 建立新項目

Next.js 提供了多樣的網頁渲染方式

- Client-Side-Rendering (CSR) 客戶端渲染
- Server-Side-Rendering (SSR) 服務器端渲染
- Static-Site-Generator (SSG) 靜態網站生成

#### 安裝

```bash
npx create-next-app@latest
```

隨後會跳出一些 prompt 確認項目的偏好設定，然後完成建立

```bash
npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.2
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/tarmac/Projects/nextjsapp.
```

#### package.json

```json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.2"
  }
}
```

#### 啟動項目

```bash
npm run dev
$ next dev
 ⚠ Port 3000 is in use, trying 3001 instead.
  ▲ Next.js 14.2.2
  - Local:        http://localhost:3001
```

![nextjs-start](/public/img/nextjs-start.png)


# {{ title }}

## 為什麼要遷移到Next.js

### Next.js是什麼？

Next.js是基於React用來快速構建網頁應用程式的開發框架，透過框架可以選擇用SSG (Static Site Generator)或SSR (Server Side Rendering)的方式渲染網頁應用程式，Next.js可以協助將整個React應用程式的目錄結構規範下來、協助簡化處理路由的細節等等，減輕React開發者的心智負擔。

### 學習React的契機

最近工作上有一個專案需要用現代網頁框架去建立應用程式，因為我沒有任何相關的實作經驗，因此我需要先在React、Angular、Vue這三個主流框架中做選擇從頭開始學起，這是一個全新的專案且沒有技術上的歷史包袱，我私心選了對我未來發展可能最有幫助的React，學習曲線雖然較為陡峭難上手，但使用起來靈活高效只要像拼積木一樣將不同的組件(Component)拼湊在一塊就可以實作出各種功能，React擁有最高的市占率與充沛的社群資源，開發過程中若有遇到什麼問題都可以很快在網路上得到解答。

### 遷移到Next.js的目的

未來我想寫更多有關React技術的文章，遷移到Next.js的目的是希望能夠更方便的在文章中說明程式碼然後呈現執行結果，讓讀者可以很直觀的看到運作原理。

## 選擇Hugo作為SSG的優點

### 構建速度極快

技術分享網站主要是靜態內容呈現不需要跟後端交互，任何一種SSG應該都很適合，現在的主流是用Markdown撰寫文章，這種格式可以讓作者專注在內容本身，其他像排版的問題交給SSG去處理協助渲染成網頁，Hugo相較於其他競品來說最大的優點是構建速度，撰寫Markdown時會希望即時看到渲染完的結果方便進一步做調整，如果網站的文章數量很多而構建速度太慢，會花太多時間在等待構建作業完成，用Hugo的話不用擔心這個問題，整個構建作業在毫秒間就完成，但我目前的文章數量還不足以拿這點來作為取捨SSG的考量重點。

Hugo功能很完整很強大，還有其他優點就不在這篇文章展開來討論，之後如果有寫Hugo的系列文章會再分享介紹。

## 為什麼放棄使用Hugo

### Go Template

```html
{{ define "main" }}
<main aria-role="main">
  <header class="homepage-header">
    <h1>{{ .Title }}</h1>
    {{ with .Params.subtitle }}
    <span class="subtitle">{{ . }}</span>
    {{ end }}
  </header>
  <div class="homepage-content">
    
    {{ .Content }}
  </div>
  <div>
    {{ range first 10 .Site.RegularPages }} {{ .Render "summary" }} {{ end }}
  </div>
</main>
{{ end }}
```

Hugo用Go內置模板來組織網頁結構渲染內容，如果有用過像是Handlebars、Mustache、EJS的人應該不陌生，Web的發展過程中有流行了一段時間，用模板語言渲染文章內容本身沒什麼太大的問題，但如果模板語言要跟React應用程式混合一起使用就麻煩了，我還打算用上TypeScript，這樣的技術堆疊下來還有編譯、模組打包的問題要處理，每一次調整版型都不知道如何下手，因為Hugo並不是為了解決這類問題去設計的，將網站遷移用別種SSG來維護會是比較好的選擇，後續如果要調整版型或添加新功能維護成本會降低許多。

### 難以擴展新功能

因為Hugo是用Golang寫的，如果有需要的功能是開源社群上找不到的，可能需要捲起袖子自己寫Golang，這就違背了專注在文章內容本身的這件事上，目前沒有打算投入其他時間來學習Golang。

### 趁機練習Next.js及React

將個人技術分享網站遷移到Next.js的選擇，可以讓我拿實際的工作項目練習學到的新技術，將學到的東西寫成文章方便未來回顧且分享給更多人，持續做這件事一定能給我帶來很多收穫讓我飛速成長。


# {{ title }}

## 為什麼要替 Web API 做版本控制?

> 這邊的版本控制是指某個 Web API 因為某些因素改變了內部的實作，導致沒有辦法向下兼容，一旦 API 對外發佈了就要保證消費者呼叫後得到的結果其結構永遠不變

例如有個 API 呼叫後可以得到客戶 ID 為 001 的相關資料

```bash
> curl "company.com/api/customer/001"
{
  "id": "001",
  "name": "Jack Johnson",
}`
```

過了一陣子再次呼叫 API 卻得到了

```bash
> curl "company.com/api/customer/001"
{
  "id": "001",
  "firstName": "Jack",
  "lastName": "Johnson",
}
```

因為該 API 設計初期考慮不周，消費者在呼叫時總是需要自行將客戶的姓名做進一步的處理，才能得到客戶的姓氏與名字，於是開發團隊改變了 API 回應的數據結構，這樣的變動就會導致先前呼叫 API 的人要調整自己的程式碼，才能得到正確的客戶姓名

## 解決方案

### 用 URL 區分版本

為了避免這種情況發生，我們可以在 API 請求的 url 中加入版本控制的路由，確保呼叫 API 的人清楚明白自己呼叫了哪個版本的 API，進一步會得到什麼樣的回應

`company.com/api/v1/customer/001`

後續的 API 異動如果沒有辦法向下兼容就做版本遞增

`company.com/api/v2/customer/001`

這麼一來呼叫 API v1 的人始終可以得到

```bash
> curl "company.com/api/v1/customer/001"
{
  "id": "001",
  "name": "Jack Johnson",
}
```

而呼叫 API v2 的人可以得到

```bash
> curl "company.com/api/v2/customer/001"
{
  "id": "001",
  "firstName": "Jack",
  "lastName": "Johnson",
}
```

### 用 Domain 區分版本

我們也可以這樣做，用 Domain 來區分現在呼叫的 API 是什麼版本，不同的 API 版本使用不同的 Domain

`v1.api.company.com/customer/001`

這也是一種解決方案，但這樣的設計會有很多衍生問題需要處理

#### Domain 中的 API 版本辨識符號要放在域名的前綴或後綴?

`v1.api.company.com/customer/001`

`company.com.api.v1/customer/001`

`api.v1.company.com/customer/001`

> 別忘了我們變動的可是 Web API 的 Domain，這個調整造成的副作用遠比改變單一接口的返回數據結構影響來得大多了，每一次調整都要購買或租用新的 Domain，同時要告知所有使用到此 API 的消費者這個訊息...
>
> 嘿! 我們換了 API 的 Domain 哦，我不曉得對你們的影響有多大，祝你好運!

#### 跨來源資源共用 Cross-Origin Resource Sharing (CORS)

`company.com`，設計了這個 API 的公司網站需要呼叫 API 進一步取得訂單資料

因為 v1 版的 API 沒有取得訂單資料的接口，所以必須先呼叫 v2 版的 API

`v2.api.company.com/order/sn314056`

> :warning: Access to XMLHttpRequest at 'http://v2.api.company.com/order/sn314056' from origin 'http://company.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

安全性考量，當你從一個網站嘗試取得其他來源（網域）的資源時會被阻擋，你只能取得與應用程式相同網域底下的資源

Web API Server 必須調整 Response 的 Header 來告訴瀏覽器允許 Host 來自`company.com`的請求

```bash
# on server (v2.api.company.com)
access-control-allow-origin: company.com
```

調整之後我們成功取得了訂單資料

```json
{
  "orderId": "sn314056",
  "customer": {
    "id": "001"
  },
  "items": [{ "name": "Learning JavaScript" }]
}
```

取得訂單資料後我想知道下這筆訂單的客戶他的名字是什麼，所以我利用客戶的 ID 再做一次查詢

`v1.api.company.com/customer/001`

> :warning: Access to XMLHttpRequest at 'http://v1.api.company.com/customer/001' from origin 'http://company.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

因為 v1 的 Web API Server 是另一台機器，需要做相同的調整才能順利取得資料

```bash
# on server (v1.api.company.com)
access-control-allow-origin: company.com
```

終於有了...

```json
{
  "id": "001",
  "name": "Jack Johnson"
}
```

`在 Domain 中加入版本識別符`來做 Web API 的版本控制看來不是一個理想的方法，沒有絕對的理由應該盡量避免使用

### 用 Parameter 區分版本

如果要用這種解決方案，第一個要決定用來識別 API 版本的參數名稱

`api.company.com/customer/001?v=1`

`api.company.com/customer/001?apiversion=1`

`api.company.com/customer/001?api=v1`

假設我們決定使用第一種命名風格，在 Web API Server 對應的 endpoint 中要加入取得 API 版本資訊及在不同版本底下要如何處理的相關邏輯

> 這邊用 Node.js 的 Express 做為代碼範例

```js
const express = require('express');
const app = express();

app.get('/customer/:id', function (req, res) {
  let apiVersion = req.query.v;
  if (apiVersion == 1) {
    // do something
  }
  if (apiVersion == 2) {
    // do something
  }

  // when apiVersion is empty or other value, need to do something else to handle
});
```

這個解決方案有什麼副作用？

1. 每個 endpoint 都要加入判斷調用版本的邏輯代碼
2. 參數的名稱如果變動了，Web API 的 Provider 跟 Consumer 都要做調整
3. 用來識別 API 版本的參數名稱傳錯了，要怎麼處理?

## 結語

在本篇文章中思考了三種解決方案來處理 Web API 版本控制的問題，當然還有像是在表頭上加入 X-API-Version 等等其他做法，整體看來 `用 URL 區分版本` 似乎是最理想的做法，帶來最少的副作用且好調整好維護，API 版本控制不得不做，除非你的 API 永遠不會更新迭代



# {{ title }}

![APPISDAMAGED](/public/img/app-is-damaged.png)

## Allow applications downloaded from "Anywhere"

```bash
show anywhere
> sudo spctl --master-disable

set default
> sudo spctl --master-enable
```

## Create a fake sign for unknown app

```bash
xattr -rc /Applications/RyuSAK.app && codesign --force --deep --sign - /Applications/RyuSAK.app
```



# {{ title }}

## 使用情境

有個儲存裝置透過 USB 連接到電腦，他的連接協定不是用`USB MSC` (Usb Mass Storage Device Class)而是`MTP`，如果想讓裝置內的某個資料夾與本機的資料夾同步，可以怎麼做?

與`USB MSC`不同的是，透過`MTP`協定連接的儲存裝置不像一般的隨身碟會掛載到檔案系統中，也就是在電腦裡找不到一個實際存在的儲存空間 (Volume)可供操作

我的同步任務需要同時滿足以下兩個條件:

1. 只複製裝置上不存在的檔案過去
2. 遇到檔案已存在裝置上時自動忽略

## 探索解決方案

### 透過檔案總管手動拖拉

這個解法很明顯沒辦法滿足條件，因為複製時遇到檔案已存在的情況會不停跳出是否要覆蓋原有檔案的詢問，如果選擇不要覆蓋就會取消後續的動作

### 透過命令列或腳本

我有找到很多命令列工具像是`xcopy`或`robocopy`可以滿足同步任務的條件，但問題來了，下指令時我的目的地路徑參數要怎麼輸入，透過 MTP 協定連接的儲存裝置不會存在檔案系統中，所以要先用`mtpmount`將`MTP Storage`掛載到檔案系統再做後續操作，或直接用我最後選擇的解決方案`mtpcopy`

## mtpcopy

[kzmi/mtpcopy][mtpcopy]

### 安裝

我是透過 [Scoop][scoop] (套件管理工具)安裝到電腦裡

```powershell
scoop install mtpcopy --global
```

### 列出所有的 MTP Storage

```powershell
mtpcopy storages
WALKMAN:Internal shared storage:
WALKMAN:Lyra:
```

可以看到我有兩個 storage，一個是裝置上的內部儲存空間，另一個是裝置上的記憶卡儲存空間名為`Lyra`

### 同步資料

```powershell
mtpcopy copy -R C:\Users\hugo\Music\Music\ WALKMAN:Lyra:\Music\
```

### 列出路徑匹配到的所有檔案

```powershell
C:\Users\hugo> mtpcopy list WALKMAN:Lyra:\Music\John*
WALKMAN:Lyra:\Music\John Mayer
WALKMAN:Lyra:\Music\John Williams
```

[mtpcopy]: https://github.com/kzmi/mtpcopy
[scoop]: https://scoop.sh/



# {{ title }}

## 在沒有 ORM 之前應用程式是怎麼跟資料庫交流的

我們必須透過 JDBC API(Java Database Connectivity API)的介面搭配該資料庫適用的 JDBC Driver 去跟資料庫連接

![JDBC](/public/diagrams/orm-is-born/jdbc.png)

不同的資料庫有不同的 JDBC Driver，透過 DriverManager 針對不同的請求去回傳對應的 JDBC Driver

![JDBC Driver Manager](/public/diagrams/orm-is-born/jdbc-driver-manager.png)

## ORM 的誕生

除了上述談到針對不同的資料庫有不同的連接方式這個問題，還有應用程式內的資料要怎麼對映到資料表也是個問題，ORM(Object Relational Mapping)的出現就是為了解決這些麻煩的事情，若少了 ORM 我們要手動去處理資料在這兩者之間的映對關係

![relationship](/public/diagrams/orm-is-born/relationship.png)

在操作時要把映對關係設定好才能讓資料在物件模型與資料表中做轉換，若資料表改變了結構，映對關係也要同步做調整，實務上資料庫不會只有一種，可能有 MySQL、DB2、SQL Server 之類的，不同的資料庫有不同的結構與 SQL 語法，透過 ORM 的抽象層去設定映對關係，這樣就可以專注在跟業務邏輯有關的代碼上，不用煩惱操作不同的資料庫時，應用程式要做哪些調整才能取得那些資料，ORM 是位於資料庫與應用程式間的中間層，透過 ORM 提供的 API 介面幫你去跟資料庫打交道，聽起來一切都很美好但也有一些缺點

- 要多學一套 ORM 的 API
- 比較複雜的功能沒有辦法單獨透過 ORM 來完成，還是需要 SQL
- 多了 ORM 應用程式的性能會有些損失

![orm](/public/diagrams/orm-is-born/orm.png)

> 雖然有提到使用 ORM 會損失性能，但這並不是造成應用程式緩慢的關鍵，會造成緩慢多半是因為 SQL 語法沒有最佳化、資料庫設計不佳、應用程式架構不良等其他因素導致的，也就是說如果沒有明確的原因，ORM 帶來的性能損失可以暫且不論

## JPA 是什麼?

JPA 全名為 Jakarta Persistence API 或在早期叫 Java Persistence API，是一個 Java 官方為了實現 ORM 所制定的一套標準規範(Specification)及接口(API)，要注意這是一個規範沒辦法給開發者直接使用，必須透過像是 Hibernate、OpenJPA 或 TopLink 之類的 JPA Provider 才行

![jpa](/public/diagrams/orm-is-born/jpa.png)

## Hibernate 是什麼?

Hibernate 是 Java 生態系中最廣泛使用的 ORM 框架並且實作了 JPA 的規範

## Spring Data JPA 是什麼?

雖然我們有了 ORM 來幫助我們處理訪問持久層的操作，但這些 ORM 框架基於 JPA 規範又各自擴展了其他功能，導致開發人員無法在這些 ORM 框架之間無縫切換，於是 Spring 提出了 Spring Data JPA 這個解決方案，它是位於 JPA 與各個 ORM 框架之間經過抽象化的資料存取層(Data Access Layer)，這樣在 Spring 底下開發應用程式就不用管底下的 ORM 框架怎麼變化了

![spring-data-jpa](/public/diagrams/orm-is-born/spring-data-jpa.png)

## 總結

希望這篇文章能幫助讀者了解為什麼要有 ORM 及什麼是 ORM，還有 JPA, Hibernate 與 Spring Data JPA 之間的關係，這些觀念對於剛踏入 Spring 世界的我來說很有幫助



# {{ title }}

## 前言

我想要讓我的 PowerShell 環境在調用 JDK 時有彈性可以隨時切換版本靈活使用，在 WSL 底下有 sdkman 可以用，但在 Pure PowerShell 底下就要找別的解決方案，我找到了一個叫 Jabba 的工具，這篇文章簡單介紹如何安裝及使用

> [Jabba][Jabba repo] 官方介紹
>
> Java Version Manager inspired by nvm (Node.js). Written in Go.

## 安裝

### 避免用 Scoop 來安裝 Jabba

雖然我很喜歡用 Scoop`(一種套件管理工具像是macOS上的homebrew)`管理我所有的開發工具，但這邊用 Scoop 來安裝 Jabba 會有一些問題應該避免使用

[相關 issue][issue]

[這篇文章也有提到這點][jonz94]

### 直接用官方提供的指令來安裝

用 PowerShell 執行以下指令

```powershell
[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
Invoke-Expression (
  Invoke-WebRequest https://github.com/shyiko/jabba/raw/master/install.ps1 -UseBasicParsing
).Content
(use the same command to upgrade)
```

## 基本使用

### 列出所有 Java 17 版本可供安裝的 JDK

```powershell
> jabba ls-remote | grep 1.17
amazon-corretto@1.17.0-0.35.1
openjdk@1.17.0
openjdk-ri@1.17.0
zulu@1.17.0-0
```

### 安裝openjdk@1.17.0

```powershell
> jabba install openjdk@1.17.0
> jabba current
openjdk@1.17.0
```

> 安裝完會直接將當前的 JDK 切換至該版本

### 透過 alias default 設定預設的 JDK 版本

```powershell
> jabba alias default openjdk@1.17.0
default -> C:\Users\hugo\.jabba\jdk\openjdk@1.17.0
> jabba use default
> jabba current
openjdk@1.17.0
```

> :warning: `jabba alias default openjdk@2.17.0` 執行完後會`~/.jabba`這個資料夾底下新增一個叫`default.alias`的檔案，內容為`openjdk@1.17.0`，下次執行`jabba use default`就會到剛剛新增的檔案裡取得預設的 JDK 版本

### 修改 Profile 讓每一次啟動 shell session 時，自動配置預設的 JDK

> 因為 Jabba 不是透過設定 JAVA_HOME 的方式去指向 JDK 的位置，使用 Jabba 後只會在該 session 下保存相關的環境變數，只要關閉該 session 這些環境變數就會跟著消失，等到下一次建立新的 session 就會找不到任何的 JDK，這樣使用起來不是很方便

先找到 profile 的路徑

```powershell
> $profile | Format-List * -force

AllUsersAllHosts       : C:\Program Files\PowerShell\7\profile.ps1
AllUsersCurrentHost    : C:\Program Files\PowerShell\7\Microsoft.PowerShell_profile.ps1
CurrentUserAllHosts    : C:\Users\hugo\Documents\PowerShell\profile.ps1
CurrentUserCurrentHost : C:\Users\hugo\Documents\PowerShell\Microsoft.PowerShell_profile.ps1
Length                 : 67
```

我只想要套用設定到當前使用者上，修改

```powershell
C:\Users\hugo\Documents\PowerShell\Microsoft.PowerShell_profile.ps1
```

```powershell
這行在安裝完Jabba後應該會自己出現不用特別新增
if (Test-Path "$env:JABBA_HOME\jabba.ps1") { . "$env:JABBA_HOME\jabba.ps1" }

我們要新增這一行，當default.alias檔案存在時，執行`jabba use default`
if (Test-Path "$env:USERPROFILE\.jabba\default.alias") { jabba use default }
```

建立新的 shell session 來試試

```powershell
PowerShell 7.3.3
> jabba current
openjdk@1.17.0
```

### 透過.jabbarc 設定預設的 JDK

```powershell
> echo "zulu@1.8.0" > ./jabbarc
> jabba use
> jabba current
zulu@1.8.0
```

> :warning: `jabba use` 會嘗試找到當前目錄的`.jabbarc`後配置 JDK，若該檔案不存在則會傳回 help info

[Jabba repo]: https://github.com/shyiko/jabba
[JAVA_HOME]: https://jvmaware.com/multiple-java-versions/
[issue]: https://github.com/shyiko/jabba/issues/707
[jonz94]: https://hackmd.io/@jonz94/BJbp3lsnu



# {{ title }}

## 前言

> 我經常會在處理一件事的時候用力過頭，一口氣把全部的精力投入進去，過度思考問題把事情複雜化，最後被衍生出來的更多事情淹沒然後自我放棄，這個習慣不但對我的生產力有害且挫敗的經驗長久下來會傷害我的身心健康，我想要先用 `限制資源` 這個方法試著不要讓我在處理事情的時候失去控制

## 限制資源

要不試著在每次處理事情的時候限制自己只能花 30 分鐘的時間處理，每個單位(30 分鐘)我把它稱為一個子工作，如果這次執行子工作在資源結束時沒有處理完是正常的，如果需要很多個子工作才能完成是正常的，這就是一件事情在處理時必然會發生的過程

## 正向回饋

期待每次事情結束時都能拿到超過滿分的表現是沒有必要的，我要把追求完美的性格暫時先放在一邊，我要持續累積處理子工作時帶給我的感覺與回饋，好的回饋期待將它投入到下一次的子工作中，若出現不好的回饋我可以在子工作結束時做適當的調整，讓下一次的投入更順利進行


從 Hugo 遷移至 Next.js

實用的身份驗證 Practical authentication

Web API 版本控制

在 MTP 協定裡透過命令列同步資料

在單純的 Windows 環境下使用 JDK 管理工具 - jabba

避免注意力分散 Avoid space out