Search category: Technical Discussion

工具箱符號

如何管理工具函式

近期維護專案時發現有許多通用的函式散亂的分布在專案當中,於是趁有空時整理出一個統一的結構規則以便團隊使用。很多時候我們對這些通用工具函式的印象只停留在要抽離到某個資料夾,至於要怎麼管理或是維護這些函式就沒有太多想法,導致許多亂象產生,像是:過度抽象、意義不明的命名、神級函式。

箱子符號

了解網頁元件化的未來:Web Components

從很早以前就大致知道瀏覽器開始推出 Web Components 相關 API 與標準,但一直沒有機會在實戰中使用這項技術。想撰寫這篇文章記錄是因為隨著時間推移發現 Web Components 的應用範疇越來越廣,因此趁著有空也來了解一下相關知識,並且分析它與現有的解決方案有什麼不同。

上傳檔案圖示

我如何使用 Git LFS 來託付大型 Git 檔案?

Git 允許我們紀錄任何檔案的變更,並且可以輕鬆地回溯到任何一個版本,但是當需要儲存大型檔案時 Git 就會顯得力不從心,因為 Git 並不是為了儲存大型檔案(圖片、影片、音樂……等二進制檔案)而設計的。而這次介紹的 Git Large File Storage 是 Git 的擴充,專門用於解決以上問題。

GitHub Logo 符號

3 招提高 GitHub 代碼審查效率

如今 Git 與 GitHub 已經成為業界主流,有很大機率你的專案也會使用到它們來進行版本控制,但由於 GitHub 是一款基於 Git 附加的服務,所以我們時常會輕視它的功能,其實 GitHub 有許多不錯的功能卻不是那麼明顯,因此主要分享一些我認為有用但日常使用沒有查覺到的功能。

升級符號

來看看 Nx 如何解決套件框架更新的問題 - nx migrate

近期將公司的新 Nx Monorepo 架構專案透過 GitHub Action 添加了自動更新套件的功能,會想實踐該功能是因為舊專案疏於更新導致吃了非常多的苦頭,希望在新架構下可以有更輕鬆且自動化的方式去執行更新。其中 Nx 有專屬的 nx migrate 指令幫助我們達成這件事,並且背後有些非常有趣的機制與理念。

文章搜尋符號

使用 Pagefind 替任何靜態網站添加搜尋功能

不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求,恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind,分享如何在任何靜態網站上加入搜尋功能。

打勾框符號

TDD 測試驅動開發超讚可以試試看(附實際操作範例)

TDD 測試驅動開發是一種開發方法論,先寫測試再實踐代碼,應該如何撰寫測試?或許聽過 TDD 但不清楚與單純寫測試差別在哪?這篇文章詳細描述 TDD 的優勢與實際操作範例快速了解 TDD 為什麼這麼讚。TDD 目的便是打造一個工作流程能夠驗證程式碼的行為,讓開發者能夠更有信心的重構、更動程式碼。

重疊的抽象幾何線條符號

故事化直白的解釋 Monorepo 是什麼

隨著前端的複雜程度增加,Monorepo 這個詞彙也時常出現在眼前,可惜的是相關介紹資源非常不足,趁著近期較為閒暇的時間來統整紀錄一下我對 Monorepo 的理解。受到不同好文章與影片的的啟發,我想寫一篇最直白的 Monorepo 解釋,希望能夠幫助更多人理解 Monorepo 的概念。

文件與放大鏡符號

如何替陳舊代碼導入 HTML 原生客戶端驗證的故事

本文描述近期在維護既有代碼時的故事,目前的專案中有各式各樣前人尚未統一的驗證方式,例如:有些是使用 HTML 原生客戶端驗證、伺服器端驗證、第三方套件、自造的驗證方法,如何統一規範驗證方式是一大問題,同時也要思考:「要如何避免創造更多的陳舊代碼?」

檔案與齒輪符號

藉由導演一部電影來解釋 Node Package Manager

NPM 是 JavaScript 開發環境中一定會使用到的一款套件管理器,本篇文章將比喻導演一部電影來解釋 NPM 如何運作。寫程式就像在拍攝一部電影,可以親自上陣設計並打理演員,也可以聘請別人設計好的,NPM 就像一個平台可以在上面找到很多現成的演員,這些演員就是套件(Package)。

旋轉箭頭中央有問號符號

傳值與傳址,都幾咧?

在程式語言中最基本的問題就是問題就是如何紀錄與操縱資料,牽扯到傳值與傳址的問題,這篇教學使用 JavaScript 搭配圖表幫助你了解它們的差異。了解如何儲存變數有助於更好的操控資料,避免出現改 A 卻動到 B 的狀況。

魔力大法師符號

助教統整 n 個方法幫助你寫出更好的代碼

我相信撰寫程式並沒有絕對的準則,但絕對有些常見可以權衡留意的地方。這篇文章記錄著作為助教在檢閱不同人寫的代碼的時候,留意到的一些潛在的問題……本篇文章主要是經驗的濃縮,如果要詳細的撰寫建議可以參考看看無瑕的程式碼,會有更全面的說明與案例。