你好,我是 Maneshwar。我正在打造 git-lrc,一個會在每次提交時執行的微型 AI 程式碼審查工具。它是免費的,而且在 GitHub 上可取得原始碼。 Star git-lrc 以幫助開發者發現這個專案。也請你試用看看,並分享你的回饋。

我查看 dev.to 統計資料的頻率,比我在求職面試時願意承認的還要高。

反應數、瀏覽數、留言數,那些會上升的小數字,以及那些固執地不肯上升的。

通常這個儀式意味著打開瀏覽器、點進儀表板,然後一次盯著一篇文章,像是在讀茶葉占卜一樣。

我想要更平靜一點的東西。

一個終端機視窗。

把我最熱門的文章依讚數、瀏覽數和留言數排行,同時顯示在畫面上,安靜地自動重新整理,彷彿我在做正事。

所以我在一個下午把它做出來了。

只需要一個小小的 Go 程式、一個很棒的封存專案負責重活,還有兩個我完全沒有點餐、卻硬是被端上來的 bug。

讓我連 bug 一起帶你看過去。

計畫(看起來可疑地簡單)

這個計畫有三個部分。

第一,dev.to 本來就會把你自己的資料交給你。

有一個端點 GET /api/articles/me,你在 api-key 標頭裡帶上 API 金鑰,就能拿回你發表過的所有文章,而且那些你在意的欄位都已經幫你算好了:positive_reactions_countpage_views_countcomments_count

不用爬蟲,不用解析 HTML,不用哭。

你可以在 dev.to 的設定頁面裡,Extensions 底下產生金鑰。

第二,我不想從零開始做整個 TUI。

格線、顏色、邊框、鍵盤處理、重新整理迴圈。人生苦短 xD

第三,所以我需要一個已經能畫出漂亮終端機儀表板,而且只要我把資料餵好,它就會很樂意顯示數字的工具。

這第三個東西真的存在,而且它叫做 devdash。

介紹 devdash(以及應得的致敬)

{ % embed https://github.com/Phantas0s/devdash

devdash 是 Matthieu Cneude(更廣為人知的名字是 Phantas0s)所做的一個高度可設定終端機儀表板。

它有 GitHub、Google Analytics、Google Search Console、Travis 等等的元件,整個版面配置都由單一 YAML 檔驅動。

列、欄、T 恤尺寸、顏色,全都以宣告式方式設定。

這真的是一個非常漂亮的 Go 專案。

不過有兩個小問題。它自 2023 年起已被封存。以及它對 dev.to 完全沒有概念。

我本來可以 fork 它、加入正式的 Forem 服務、接上 struct、寫測試,然後對一個禮貌地關門歇業的 repo 提交 pull request。

但我選了懶人捷徑,而那扇門剛好本來就是開著的。

devdash 有一個叫做 lh.table 的元件,也就是 localhost table。

你給它一個 shell 指令,它就執行那個指令,並把指令輸出的內容渲染成有邊框的表格。

它會把每一行輸出依空白字元切開,再把切好的片段放進欄位中。這就是全部的契約。

所以 devdash 不需要知道 dev.to。

它只需要一個能印出列資料的指令。我就可以當那個指令。

如果 Matthieu 真的讀到這篇:謝謝你做出一個彈性大到可以這麼優雅地被拿來亂用的工具。

X 上找 Matthieu 吵他,告訴他他的封存專案現在還在繼續值班。

以下就是整體架構。

Image description

中間那個小小的 Go 執行檔,就是我真正需要自己寫的部分。

我把它叫做 devto-stats

它會抓取我所有文章(每次 100 筆分頁,直到 dev.to 沒資料為止),只保留已發布的文章,依 devdash 要求的指標排序,然後印出乾淨的列資料。

req.Header.Set("api-key", apiKey)
resp, _ := client.Do(req)
// GET https://dev.to/api/articles/me?per_page=100&page=N

而設定檔只是把三個表格元件指向這個指令的三種變體。

- name: lh.table
  options:
    title: " MOST VIEWED "
    command: "./bin/devto-stats -mode=table -sort=views -limit=10"
    headers: "#,Article,Views"
    border_color: green

三個區塊,分別是紅、綠、黃,並排放著。理論上,完成了。

理論上。

我的儀表板差點把我自己的帳號 DDoS 掉 xD

我把它打開。概覽列出現了。Most Liked,完美。Most Commented,也在。

Most Viewed 則是一個鮮紅的 ERROR 方塊。

手動執行這個指令完全沒問題。

只有在 devdash 裡面才失敗。

關鍵線索在於 devdash 的重新整理方式:它會同時觸發每個元件,各自跑在不同的 goroutine 中,全部在同一瞬間發送。

四個元件就代表有四份 devto-stats 同時朝 dev.to API 衝過去,完全沒有禮讓。dev.to 做了合理的事,回了一個 429 Too Many Requests

那四個裡總有一個輸在競速中,通常是 Most Viewed。

我自己對自己發動了一個非常小、非常有禮貌的拒絕服務攻擊。

Image description

修正方式很無聊,但正確:遇到 429 就等待後重試,搭配退避與抖動(jitter)。

if resp.StatusCode == http.StatusTooManyRequests {
    backoff := time.Duration(attempt-1) * 700 * time.Millisecond
    jitter := time.Duration(rand.Intn(500)) * time.Millisecond
    time.Sleep(backoff + jitter)
    continue // 重新嘗試這一頁
}

jitter 才是重點。沒有它的話,四個請求都會以相同的時間退避,然後又再次撞在一起,就像走廊裡四個人同時道歉、還往同一個方向側身一樣。

加上一個隨機偏移後,它們就會自己散開。

之後就沒有錯誤了。

一個逗號走進我的表格,結果全盤崩壞

Most Viewed 終於渲染出來了。但渲染錯了。

第一列看起來正常,接下來的每一列都往右偏了一欄。

標題跑到數字欄,數字不知去向。

我認出是從哪篇文章開始出問題的。

我排名最高的文章標題是「Good Bye CRUD APIs, Hello Sync」。

看那個標點符號。

devdash 底層的做法是這樣:它先把每一行依空白切成儲存格,再把這些儲存格用逗號重新串起來,然後再把整批內容依逗號切一次,以便分成每 N 欄一列。

標題裡的逗號,和 devdash 故意加上的逗號根本無法區分。

一個標題會變成兩個儲存格,該列變成四個片段而不是三個,而因為分組是全域性的,後面的每一列都會永遠錯位。

Image description

Image description

真正的修正應該要在上游、在那個已經沒有在接待訪客的 repo 裡完成。

所以我就在我能控制輸出的地方修。

我的 binary 本來就已經把標題做了 slug 化,以便撐過空白切分。

我只是再教它把逗號也清掉。

s := strings.Join(strings.Fields(title), "-")
s = strings.ReplaceAll(s, ",", "") // devdash 會再次用逗號切表格

一行而已。逗號表格立刻恢復正常。

成果

下面是單一面板所使用的原始資料流,直接來自這個 binary,來自我真實帳號的真實數字:

Image description

devdash 會把這三份資料流框成有顏色、有邊框、會自動重新整理、並排放置的表格:Most Liked 用紅色,Most Viewed 用綠色,Most Commented 用黃色,上方還有一條摘要列。

Ctrl+R 會強制重新整理,Ctrl+C 會結束;如果不管它,它每五分鐘會自己重繪一次。

444 篇文章,全都被妥善記錄;不用瀏覽器、不用點擊,只剩下一個安靜的終端機,告訴我大家到底真的讀了哪些文章。

我實際學到的事

最好的整合,往往就是不做整合。 devdash 從來沒有學會 dev.to。

我改成讓 dev.to 說 devdash 的語言,於是一個在 2023 年就停止維護的工具,居然沒有對原始碼做任何修改,就能渲染 2026 年的資料。

整個專案,包括 Go 輔助程式、YAML 和 Makefile,都在這裡:lovestaco/devto_devdash

請自備 API 金鑰。

也非常感謝 Matthieu Cneude 製作 devdash。

有時候,最適合這份工作的工具,可能是那個幾年前就不再維護、安安靜靜地放在那裡,卻依然樂意再幫忙做一個儀表板的專案。


Image description

AI 代理寫程式很快。它們也會在不告知你的情況下,悄悄移除邏輯、改變行為,並引入 bug。你常常要到上線後才發現。

git-lrc 可以解決這件事。它會掛在 git commit 上,並在每次差異進入倉庫前先審查。只要 60 秒就能完成設定。完全免費。

歡迎任何回饋或貢獻者!它已上線、可取得原始碼,任何人都能使用。

⭐ 到 GitHub 上幫它點星:
{% github=https://github.com/HexmosTech/git-lrc


原文出處:https://dev.to/lovestaco/a-dash-of-devto-my-blog-stats-now-live-in-the-terminal-4l4e


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝8   💬3   ❤️4
289
🥈
我愛JS
📝3   💬6   ❤️4
185
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
📢 贊助商廣告 · 我要刊登