oharu tech blog

文章

  • 兩個檢查全綠的 GitHub pull request 弄壞了 main — 如何用 Require branches to be up to date before merging 來避免

    我的習慣是等 pull request 上的檢查全部變綠才合併，所以當我的一個 pull request 在一支它根本沒動過的測試檔上 CI 失敗時，我很意外。 這個失敗跟我的改動完全無關。另一個 pull request 在所有檢查都通過的情況下合併後，main 本身就變紅了，於是每個還開著的 pull request 都因為跟自己無關的原因跟著變紅。壞掉的 main 背後還藏著一個真正的 bug，而且還沒有任何測試跑到它。 被合併的那個 pull request 的檢查結果沒有錯，只是過時了。那些檢查是在另一個 pull request 合併之前跑的，而被合併的這個 pull request，正好弄壞了另一個 pull request 新增的程式碼。GitHub 的 _Require branches to be up to date before merging_ 會讓這種合併等到 CI 重新跑過。 本文說明兩個綠燈的 pull request 如何疊出一個紅燈的 main，以及除了這項設定之外，main 還值得加上哪些規則。

    閱讀更多

  • 把 Vercel 部署儲存空間從 13.96 GB 降到 20.27 MB — 關閉預覽、縮短保留期

    Vercel 的用量頁面在 Deployment Storage 旁邊顯示了一個紅圈：免費額度 10 GB，用掉 13.96 GB。同一個帳戶裡，其他項目沒有一項超過上限的 20%。 我第一個想知道的是線上網站會不會受影響。答案是不會。不過一直超過上限還是有代價的：Vercel 會不再遵守 30 天的保留期，會直接刪掉符合條件的部署，也有可能在回到額度以內之前拒絕新的部署。 我一開始懷疑的是 repo，畢竟這裡每篇文章都帶著圖表和截圖。然而 repo 打包後只有 9.79 MiB，所有影像和影片加起來也才 9.4 MB。這個網站部署一次用掉的空間是 147 MB，而三十天內共部署了 189 次。 關掉預覽建置、把保留期縮到一天，並且在發布流程的開頭加上清理處理，最後成功讓 Deployment Storage 變成了 20.27 MB。

    閱讀更多

  • iPhone 上操作時這個部落格能夠被縮到 100% 以下 — 用 overflow-wrap 與表格捲動容器來解決

    我在手機上對自己的文章用手指內捏，結果整頁縮得比原本的尺寸還小，這感覺不太對所以我決定調查這個問題。 在首頁上沒有這個問題，無論怎麼向內捏頁面最小就維持在 100%；這兩種頁面用的是同一個 <meta name="viewport">，證明問題並非出在這個標籤。 在 iPhone 使用瀏覽器時 WebKit 是用文件實際的內容寬度決定向內捏的最小比例，而且從 iOS 10 起就會忽略 minimum-scale，所以根本沒辦法設定縮放下限。真正的問題是 頁面超出了手機螢幕的寬度，導致瀏覽器為了顯示完整的頁面而縮得比實際大小來得小。 解決方法是兩條 CSS 規則：行內程式碼加上 overflow-wrap: anywhere，以及替任何比內文寬度更寬的表格加上捲動容器。我另外添加了一個檢查，會用手機寬度量測每一篇文章，讓超出螢幕的頁面在上線前就報錯。

    閱讀更多

  • Trend Micro 把這個部落格標記為 Disease Vector——鎖定確切 URL 重新分類後解決了

    我自己也在用 Trend Micro，所以搜尋結果旁的標記我一向會多看一眼。某天我在 Google 的搜尋結果發現這個部落格被標記為灰色，而不是我平常熟悉的安全綠色標記。 我想要的是綠色勾勾，於是把網域提交給 Trend Micro 的 Site Safety Center 申請重新分類， 結果卻比原本更糟糕，評等變成 Dangerous，內容類型被歸類為 Disease Vector。 這篇文章記錄了後續的調查過程，以及最終把評等改回 Safe 的解決方法。

    閱讀更多

  • CommonMark 的 flanking 規則會在日文與中文頁面印出 **

    我用三種語言發布了一篇文章，打開日文頁面想讀一讀，卻看到本該是粗體的那一句兩端排著星號。 原因出在 CommonMark。 這組分隔符號只有在 right-flanking 時才能關閉並強調為粗體**。夾在句號與文字之間的分隔符號，既不是 left-flanking 也不是 right-flanking。英文不會出現這種情況，因為每個句號後面都跟著一個空白。CJK （中文、日文、韓文）沒有這個空白。

    閱讀更多

  • 讓每個專案裡的 chrome-devtools MCP 各自用一份 Chrome 設定檔 — 並設置 gitignore 的 .mcp.json

    我有兩個專案透過 chrome-devtools-mcp 驅動 Chrome：這個部落格，以及一個處理足球資料的應用。當我開著部落格那邊的瀏覽器，並切到另一個 repo 要求抓一個頁面時，卻發生了錯誤： 這是因為 Chrome 規定每一個設定檔目錄只能有一個瀏覽器行程。而官方外掛給機器上每一個專案的都是同一個目錄。解決辦法是 在每個 repo 放一份 .mcp.json，並各自傳入自己的 --userDataDir。這個檔案需要被 gitignore 掉：因為絕對路徑只在一台電腦上成立，repo 卻是要跨電腦共用的。 現在兩個專案可以同時驅動 Chrome，各自的登入狀態也都保留著。

    閱讀更多

  • 在 Git 中用 Markdown 來管理規格書的正本，並使用 WeasyPrint 來隨時產生 PDF

    我常常搞不清楚手上的程式碼，對應的到底是規格書的哪一版。規格書放在 Google Drive，git 看不到，所以別人改了什麼，我的工作目錄一點動靜也沒有。後來我把相隔一天的兩份匯出檔拉出來比對，才發現有些修改我根本沒看過，而且已經改掉了程式該做的事。 那把匯出檔一起提交進去呢？沒用。PDF 在 git 眼中是二進位檔，每一版都整份存一次；HTML 匯出檔則是每匯出一次，換行就換一個位置。結果一樣：改一個字，差異看起來像整份文件被重寫。 所以我最後選擇把規格書搬進了 Git，以 Markdown 的形式儲存。PDF 則交給 WeasyPrint 隨時產生。

    閱讀更多

  • 用 Expressive Code 外掛來標示指令輸出 — Gutter API 以及控制複製按鈕的複製內容

    Claude Code 在自己的對話紀錄裡，會將執行的指令標記為 IN、結果標為 OUT，我希望把相同的模式帶進這個部落格。這裡的 Bash 輸出一直是用 # 註解的方式來呈現。讀起來沒問題，但： 讀者分不出到底是註解還是指令的輸出。 因為兩者都寫成 #。 無論是註解還是指令的輸出， 複製按鈕都會一併複製。 解決方法是利用 Expressive Code 的外掛，並在 bash out={2} gh api repos/oharu121/<repo-name>/automated-security-fixes {"enabled":true,"paused":false} ` 它用到三個擴充點： 溝槽元素負責顯示 IN/OUT 標籤。 算繪後的改寫將指令輸出從複製按鈕的對象中移除。 特異性的覆寫去掉輸出行上 Shiki 的著色。 這篇文章會介紹這三個擴充點、標記時錯誤的寫法，以及我遇到的兩個障礙。

    閱讀更多
載入更多