由 Use Zoom For DSF 導致的幽靈 Bug 在寫專案時，我們都會產生一些 Bug。俗話說“解決 Bug 的第一步是先復現它”，但如果遇到了一個幽靈 Bug（無法穩定復現的 Bug）時，要如何解決呢？ Bug 的現象 我們有一個對外專案，其中一個頁面裡面展示了各類統計圖表。當我們還在慶祝專案按時開發完成時，QA 小姐姐找了過來，說頁面上有一個表格的行間分隔線消失了： 但是我們經過多次除錯後，發現攢了很久的一句話終於派上用場了： ... 2022-05-08 開發
JSON Diff Kit：幾個簡單演算法的組合 背景 最近我收到一個需求：展示兩個 JSON 字串的 diff，這兩個字串基本上是一個 API 的請求和響應資料。此外，我們還應該以 Git 的風格顯示 diff。 然而，經過簡單的搜尋，我並沒有發現合適的庫。 那我只好自己實現了。 Git 的方式 JSON 字串可能非常不規範。例如這兩個 JSON 字串是等價的： {"a":1,"b&q... 2022-02-09 開發
Golang 記憶體洩漏排查之旅 “業務提了個線上問題，麻煩你看一下。” 自從我開始寫 Golang 後端之後，可能是能力有限，我的服務總是會在意想不到的情況下變得異常，而我要做的事情就是解決這個問題。 這次出現的問題看起來是運營平臺後端服務的記憶體洩漏，那就先從記憶體曲線開始看起吧。 突然暴增的曲線 Grafana 平臺給出的曲線大概符合這樣的特徵：有 8 個突變點，每次突變都會讓記憶體猛然上升接近 500 MB，上漲到逼近... 2021-10-02 開發
TypeScript 小技巧：校驗 i18n 引數 最近我們的某個專案需要支援多語言了。作為一個從 Entry Task 開始就與多語言打過交道的人，我已經對這裡面的套路很是熟悉。但是作為一個工程師，還是想著能不能做的更好一些。 我們是怎麼做國際化的 對於大部分場景來說，國際化都相當簡單：有若干語言包，每個語言包中是一堆 Key 和對應的文字模板，模板中可能會有佔位符。一個語言包可能長這樣： { "user_settin... 2021-02-21 開發
從 Svelte 3 的編譯器中得到的啟示 前端的編譯器，除了可以做轉換，是否還有其它用途？ 由於現在國內“前端主流框架”的稱號基本被 React、Vue、Angular 佔領，前二者在渲染層的技術，本質上都是極為相似的：在記憶體中維護 Virtual DOM，透過某些方式獲取到變數被修改，然後利用 DOM Diff 演算法（以及一些最佳化）計算出需要對 DOM 做的操作，再 Patch 到真實的 DOM 上。相信大家（尤其是準備過面試的小夥... 2021-01-17 開發
盲除錯解決 Zebra 印表機吞紙問題的經歷 本來我以為，前端的工作內容只需要跟瀏覽器打交道，最多再做一做客戶端和後端；萬萬沒想到，如標題所示，我居然需要解決印表機的問題。 奇怪的需求 我們有一個畫面單的平臺，關於這個平臺，我之前已經寫過幾篇文章，這裡就不多提了。 一天，面單的產品突然把我拉到了一個群裡，因為我們的業務 PM（BPM）接到了一個緊急需求：在我們開始跟某個賣家合作時，他們提出：我們在列印面單的時候，必須支援透過一個叫 Z... 2020-12-20 環境
使用 OpenResty 無痛最佳化圖片體積（AVIF / WebP） 圖片體積最佳化計劃 兩年半之前，我第一次瞭解到 WebP 可以有效減少圖片體積的時候，有一瞬間產生了“把網站中所有資源替換成 WebP”的衝動，但當我開啟 CanIUse 的時候，發現 Safari 遲遲不支援，況且網站中涉及到圖片的地方實在是太多，修改程式碼不太現實。 我當時搜了一些資料，是關於讓 Nginx 針對瀏覽器提供的 Accept 頭來分別提供不同格式的檔案。這個方法確實有，然而我實... 2020-09-20 開發
當表格排版遇到了合併單元格 我負責的面單平臺的需求複雜度已經越來越高了。自從寒假接了一個複雜表格排版的需求後，各類業務對於表格排版的使用場景也開始變多。畢竟，一個可以自動換頁排版，並保持每一頁都帶有首部區域和尾部區域的表格，哪個業務不喜歡呢？（被打） 表格的排版 先回顧一下之前的需求： 有一類專門的面單型別叫“揀貨單”，用於給賣家揀貨 揀貨單有三個部分：頭部區域（展示 Logo、買家地址等）、表格（展示商品資訊）... 2020-07-01 開發
編寫狀態驅動的業務程式碼（2） 記得兩年前的差不多這個時候，我曾經寫了一篇文章 編寫狀態驅動的業務程式碼 ，講了一下我使用狀態來描述業務需求的一個經歷。自那之後，我很少再接觸步驟如此多的業務需求，直到前一段時間…… 一個複雜的頁面 運營平臺有一個頁面，是專門用來配置運費規則的，裡面有最多 12 個步驟（12 個對話方塊），一個可能的步驟如下： 基礎資訊配置，其中可以選擇是否需要配置一些“可選費用”（例如燃油費等） 地區... 2020-06-16 開發
由於硬體問題引發的條形碼掃描 Bug 聽一個希捷的朋友說的。有使用者反映每次用筆記本播放李娜的青藏高原時，電腦就會宕機。經測試發現，唱到最後的“那就是青藏高……”時，硬碟產生了共振，振幅過大，讀寫頭讀不出資料了。為了抓住這個bug，朋友聽了一個月的青藏高原…… 一開始看到這個段子（出處： 有哪些讓你目瞪口呆的 Bug ？ - wuz的回答 - 知乎 ）的時候，只是笑一笑。然而萬萬沒想到，我一個前端居然也會遇到硬體問題。 問題現象 ... 2020-06-11 開發
面單工具：對 Chrome Headless 渲染的極致最佳化 背景 有些同學對“面單工具”這個專案應該不算陌生，因為之前我已經寫過幾篇跟它相關的文章了。它的基礎功能無非就是畫面單：如果你從 Shopee 上買了點東西，那麼快遞上面貼的面單就是用這個工具畫出來的。 可能是這工具用起來比較方便，隨著業務的擴張，一些不是面單的奇奇怪怪的東西也開始切換到面單工具上，例如採購系統的合同（更像是 Word 檔案）、倉庫的條形碼（用了特殊紙張）、揀貨單（可以理解成外... 2020-05-03 開發
用 OpenResty+OpenCC 讓網站支援正體中文 想要檢視本站的正體中文版本，點選頁尾處的“正體中文”連結即可。 關於這篇文章的背景，真是說來話長…… 大概在八年前，我去 CTSC（國際資訊學奧林匹克競賽中國隊選拔賽）打了個醬油（非集訓隊，只是去玩的），在那幾天裡，我接受了許多大佬們的培訓，印象比較深刻的是 BYVoid 大佬，因為他在 PPT 中放了自己網站的連結，我點進去之後發現可以隨意切換“簡體”和“繁體”，而且似乎跟我以前見過的... 2020-02-29 環境