開發契機：某個深夜的「驚險時刻」
身為工程師，確認代碼的微小變更或設定檔的差異是家常便飯。
在某個深夜，正埋頭於除錯工作的我，試圖比較兩份龐大的日誌檔案。我像往常一樣在瀏覽器搜尋「Diff 工具 線上」，開啟了第一個出現的網站，正準備貼上文字的那瞬間。
握著滑鼠的手停住了，一股冷汗從背後冒出。
「等一下——我正準備貼上的這份日誌，是不是包含了客戶的電子郵件地址或認證 Token？」
許多線上工具會將輸入的資料先送到伺服器端，在那裡執行差異演算法後再回傳結果。即使沒有惡意，該資料殘留在伺服器日誌或被快取的可能性絕非為零。
「雖然方便，但很恐怖。」我想藉由技術的力量，消除這種工程師特有的心理門檻。
這正是開發 DevToolKits 的 Diff 工具 的最大動機。
技術巧思：將「大腦」塞入瀏覽器
為了實現「資料絕不跨出外部一步」，必須將通常在伺服器進行的差異運算，全部在使用者瀏覽器內完。
1. 兼顧穩定性與「工程師的直覺」
差異演算法的學問意外地深，如果自行實作，在邊緣案例 (Edge cases) 很容易產生錯誤。因此，我們採用了獲業界肯定的 jsdiff 函式庫。
然而，光是直接使用函式庫是不夠的。為了打造讓工程師感到「易讀」的 Diff，必須精細控制換行處理與空白的意義。
import { diffLines } from 'diff';
// 將換行符號視為行分隔線處理，而不僅僅是字元
// 實現直觀的「行基準」比較設定
const changes = diffLines(oldText, newText, { newlineIsToken: false });透過反覆的微調，我們在瀏覽器上重現了如同 GitHub Pull Request 般、工程師最信賴的比較體驗。
2. 「減法」的設計
在開發初期，曾想過加入許多裝飾功能。但最後還是回歸到了「輸入、比較」這種不干擾思考的單純性。
在配色上我們也下了一番苦心。為了不讓長時間除錯的工作使眼睛疲勞，刻意選用了彩度稍低的翡翠綠（新增）與玫瑰紅（刪除）。比起華麗，我們更重視那種即使連用幾小時也不會感到負擔的「工具」質感。
對「伺服器不信任」的執著
開發這款工具時，最堅持的一點就是 「1 位元組也不外洩」。
那是種不經由網路、僅在記憶體中完結的安心感。
「資料始終掌握在自己手中」。正因為有這份確定感，專業開發者才能安心專注於工作。我相信這就是工具能提供的最高級 UX。
結語
雖然 Diff 工具非常單純，但在其背後蘊含著我「想消除工程師不安感」的強烈心願。
用於高機密性檔案的比較，或是正式環境部署前的最終確認。
如果這款工具能成為您「安全工具箱」中的一員，對我而言將是莫大的榮幸。