網頁東東

學會挑選合適的模型透過 Ollama 本地運行 LLM

Wed, 08 Apr 2026 00:00:00 GMT

雖然在 AI 出現之前很難想像，但 2026 年工作上我已經很少「手寫程式」而是透過 AI 更有效率的輔助開發，我相信在 AI 百家爭鳴的時代不用特別執著用哪個模型或工具，挑個最新順手的免費方案就夠了，未來模型只會更便宜更有效率。

Backend Integration Testing with Testcontainers

Sat, 04 Apr 2026 00:00:00 GMT

Frontend tests focus on browsers; backend tests face distributed services and state. This shows using Testcontainers to run Docker-based integration tests.

使用 Testcontainers 实现后端集成测试

Sat, 04 Apr 2026 00:00:00 GMT

前端测试主要重点在与浏览器打交道（Jsdom、Headless Browser）且通常只与单一后端进行沟通，而后端测试则是面临截然不同的难题：分散服务与状态。这篇文章介绍实战上我如何透过 Testcontainers 创建 Docker 测试环境来达成完整的后端整合测试流程。

使用 Testcontainers 實現後端整合測試

Sat, 04 Apr 2026 00:00:00 GMT

前端測試主要重點在與瀏覽器打交道（Jsdom、Headless Browser）且通常只與單一後端進行溝通，而後端測試則是面臨截然不同的難題：分散服務與狀態。這篇文章介紹實戰上我如何透過 Testcontainers 創建 Docker 測試環境來達成完整的後端整合測試流程。

Understand AES best practices, block padding, and modes

Mon, 30 Mar 2026 00:00:00 GMT

AES is the most widely used symmetric cipher—used in HTTPS/TLS, Wi‑Fi, full-disk encryption, and messaging. Understanding AES clarifies modern encryption.

了解 AES 最佳实践、区块填充与模式

Mon, 30 Mar 2026 00:00:00 GMT

AES（Advanced Encryption Standard）是最广泛使用的对称加密，HTTPS/TLS、Wi-Fi（WPA2/3）、全硬盘加密（BitLocker、FileVault）……通过理解 AES 如何运作有助于了解现代安全加密如何实践。

了解 AES 最佳實踐、區塊填充與模式

Mon, 30 Mar 2026 00:00:00 GMT

AES（Advanced Encryption Standard）是最廣泛使用的對稱加密，HTTPS/TLS、Wi-Fi（WPA2/3）、全硬碟加密（BitLocker、FileVault）⋯⋯透過理解 AES 如何運作有助於了解現代安全加密如何實踐。

Practical FIDO: Implementing Passwordless Login

Tue, 24 Mar 2026 00:00:00 GMT

Managing many site passwords is risky. FIDO (Fast IDentity Online) enables passwordless login using fingerprint or face scan.

实战 FIDO 验证实现无密码登录

Tue, 24 Mar 2026 00:00:00 GMT

不同网站的密码需要管理，不仅容易忘记，也存在被窃取或重复使用的风险。如果只需要扫描指纹或使用面部识别，就能立即完成注册与登录——这正是 FIDO（Fast IDentity Online）所推动的“无密码身份验证”愿景。

實戰 FIDO 驗證實現無密碼登入

Tue, 24 Mar 2026 00:00:00 GMT

不同網站的密碼需要管理，不僅容易忘記，也存在被竊取或重複使用帶來的風險。如果只需要掃描指紋或使用臉部識別，就能立即完成註冊與登入——這正是 FIDO（Fast IDentity Online）所推動的「無密碼身分驗證」願景。

Idiomatic Go Testing: Table Driven Test

Tue, 10 Mar 2026 00:00:00 GMT

I noticed a widely praised convention in Go testing: Table Driven Tests. I thought tests should be simple, but this pattern reflects programmers' laziness.

Go 测试的地道写法：Table Driven Test

Tue, 10 Mar 2026 00:00:00 GMT

最近在写 Go 测试时发现官方与社群中有一种大力推崇的惯例：TableDrivenTest，我一直以为测试应该要保持简单愚蠢，但这种做法让我想到程式人的三大美德之一：「懒惰」。可能是因为这种模式通常只是测试框架包装下的方便手段，而 Go 社群文化下人人对于追求简单程式有一种莫名的执着。

Go 測試道地寫法：Table Driven Test

Tue, 10 Mar 2026 00:00:00 GMT

最近在寫 Go 測試時發現官方與社群中有一種大力推崇的慣例：TableDrivenTest，我一直以為測試應該要保持簡單愚蠢，但這種做法讓我想到程式人的三大美德之一：「懶惰」。可能是因為這種模式通常只是測試框架包裝下的方便手段，而 Go 社群文化下人人對於追求簡單程式有一種莫名的執著。

Idiomatic Go Set

Wed, 04 Mar 2026 00:00:00 GMT

Notes on implementing a Set while migrating from JavaScript to Go — using maps to represent Sets since Go lacks a native Set.

Go Set 数据结构的地道写法

Wed, 04 Mar 2026 00:00:00 GMT

纪录近期从 JavaScript 迁移到 Go 的过程中实践 Set 资料结构的方式。先前代码使用 JavaScript Set 来实现不重复资料定义，但在 Go 语言当中并没有实践 Set 资料结构，但我们可以透过改造 map 来实践。

Go Set 資料結構道地寫法

Wed, 04 Mar 2026 00:00:00 GMT

紀錄近期從 JavaScript 遷移到 Go 的過程中實踐 Set 資料結構的方式。先前代碼使用 JavaScript Set 來實現不重複資料定義，但在 Go 語言當中並沒有實踐 Set 資料結構，但我們可以透過改造 map 來實踐。

Embed files at compile time with go:embed

Mon, 02 Mar 2026 00:00:00 GMT

Using Go 1.16's embed to include files at compile time, avoiding path/environment issues. Not suitable if files must change at runtime.

通过 go:embed 在编译时将文件嵌入

Mon, 02 Mar 2026 00:00:00 GMT

纪录使用到其中一项 Go 1.16 的 embed 功能，可以把任何档案在编译时就包进去，进而不用烦恼路径与环境问题。如果资料需要在 runtime 被修改，那就不适合使用 embed，但如果它是「版本的一部分」，那 embed 是更安全的选择。

透過 go:embed 在編譯時將檔案包入

Mon, 02 Mar 2026 00:00:00 GMT

紀錄使用到其中一項 Go 1.16 的 embed 功能，可以把任何檔案在編譯時就包進去，進而不用煩惱路徑與環境問題。如果資料需要在 runtime 被修改，那就不適合使用 embed，但如果它是「版本的一部分」，那 embed 是更安全的選擇。

P vs NP: Exploring the difficulty of solving problems

Sat, 28 Feb 2026 00:00:00 GMT

P and NP classify problems by whether they can be solved in polynomial time or nondeterministic polynomial time.

P vs NP 问题探讨问题解法的难度

Sat, 28 Feb 2026 00:00:00 GMT

P 与 NP 用来描述解决问题的难度所需的时间为：polynomial time 或 non-deterministic polynomial time。将问题分类为 P 或 NP，有助于理解一个问题是否有可能在合理的时间内被解决——即执行时间不会随着输入规模的增长而爆炸性膨胀。

P vs NP 問題探討問題解方的難度

Sat, 28 Feb 2026 00:00:00 GMT

P 與 NP 用來描述解決問題的難度所需的時間為：polynomial time 或 non-deterministic polynomial time。將問題分類為 P 或 NP，有助於理解一個問題是否有可能在合理的時間內被解決——即執行時間不會隨著輸入規模的增長而爆炸性膨脹。

4 Types of Feature Flags and When to Use Them

Tue, 10 Feb 2026 00:00:00 GMT

After covering what Feature Flags are, this post explains four types of Feature Flags and their differing lifecycles, dynamism, and management strategies.

4 种 Feature Flag 与使用时机

Tue, 10 Feb 2026 00:00:00 GMT

先前探讨到：什么是 Feature Flag 以及它解决什么问题？了解 Feature Flag 存在的价值后，今天了解更多关于 4 种类型的 Feature Flag 以及实战上的用途。不同目的的 Flag，在设计方式、生命周期、动态程度与管理策略上都有明显差异。

4 種類的 Feature Flag 與使用時機

Tue, 10 Feb 2026 00:00:00 GMT

先前探討到：什麼是 Feature Flag 以及它解決什麼問題？了解 Feature Flag 存在的價值後，今天了解更多關於 4 種類型的 Feature Flag 以及實戰上的用途。不同目的的 Flag，在設計方式、生命週期、動態程度與管理策略上都有明顯差異。

Stable Product Feature Releases through OpenFeature

Fri, 06 Feb 2026 00:00:00 GMT

I thought keeping things simple—changing code or env vars—was enough. But when incidents occur you don't have time to debug.

通过 OpenFeature 实践稳定产品功能发布

Fri, 06 Feb 2026 00:00:00 GMT

我一直觉得事情可以保持简单就好，有问题改程式码或环境变数切换就好，何必导入更复杂的套件管理与第三方服务呢？但真实情境当问题发生时不会有空闲慢慢部署与除错，就有必要透过更完善的 Feature Flag 规划来降低推送功能的风险，也能减少心脏病发作的机率。

透過 OpenFeature 實踐穩定產品功能發布

Fri, 06 Feb 2026 00:00:00 GMT

我一直覺得事情可以保持簡單就好，有問題改程式碼或環境變數切換就好，何必導入更複雜的套件管理與第三方服務呢？但真實情境當問題發生時不會有空閒慢慢部署與除錯，就有必要透過更完善的 Feature Flag 規劃來降低推送功能的風險，也能減少心臟病發作的機率。

Dependency Injection - Make Swappable & Testable module!

Wed, 04 Feb 2026 00:00:00 GMT

To better replace modules via "dependency injection" for cleaner testing. I uploaded the demo example demonstrating testing architecture through DI.

通过依赖注入达成依赖反转，使替换程序模块测试更省事！

Wed, 04 Feb 2026 00:00:00 GMT

通常有些规模的专案会透过架构分层的方式来管理，而近期在研究如何更好的透过「依赖注入」替换模块并实现更干净的测试。架构分层的概念可以参考之前写过的：Express.js 入门建构 MVC 范例。我上传了 go-gin-testing-todos 范例透过 DI 实践测试架构。

透過依賴注入達成依賴反轉，使替換程式模組測試更省事！

Wed, 04 Feb 2026 00:00:00 GMT

通常有些規模的專案會透過架構分層的方式來管理，而近期在研究如何更好的透過「依賴注入」替換模塊並實現更乾淨的測試。架構分層的概念可以參考之前寫過的：Express.js 入門建構 MVC 範例。我上傳了 go-gin-testing-todos 範例透過 DI 實踐測試架構。

Familiar with Go Modules and Packages

Mon, 26 Jan 2026 00:00:00 GMT

From JS to Go, I wasn't familiar with Go's approach to modularity. Although similar in places, Go's simple and opinionated design is very evident.

熟悉使用 Go Module 与 Package

Mon, 26 Jan 2026 00:00:00 GMT

从 JavaScript 转写 Go 我其实还是不太熟悉 Go 如何模组化处理代码，虽然它们有大致相似的地方，但使用体验感觉非常简单甚至到简陋的程度，当然简单并不意味着「容易」或「没用」，Go 简单且固执己见的哲学在各方面都感受得到。

熟悉使用 Go Module 與 Package

Mon, 26 Jan 2026 00:00:00 GMT

從 JavaScript 轉寫 Go 我其實還是不太熟悉 Go 如何模組化處理代碼，雖然它們有大致相似的地方，但使用體驗感覺非常簡單甚至到簡陋的程度，當然簡單並不意味著「容易」或「沒用」，Go 簡單且固執己見的哲學在各方面都感受得到。

Database query performance issue: N+1 problem

Tue, 20 Jan 2026 00:00:00 GMT

N+1 database query problem, its causes, and solutions: denormalization, DB-level joins ($lookup/JOIN), batch queries with assembly, and ORM/ODM eager loading.

数据库查询性能问题：N+1 问题

Tue, 20 Jan 2026 00:00:00 GMT

很早以前接触资料库就有听说过「N+1 问题」，不过一直没有写下笔记认真思考过一次，这次撰写问题成因与详细解方与图表。透过：资料结构设计（去正规化）、在 DB 层完成关联资料查询、批次查询并在应用层组装、ORM ODM Eager Loading 来解决。

資料庫查詢效能問題：N+1 問題

Tue, 20 Jan 2026 00:00:00 GMT

很早以前接觸資料庫就有聽說過「N+1 問題」，不過一直沒有寫下筆記認真思考過一次，這次撰寫問題成因與詳細解方與圖表。透過：資料結構設計（去正規化）、在 DB 層完成關聯資料查詢、批次查詢並在應用層組裝、ORM ODM Eager Loading 來解決。

研究現有流程如何使用 Agent Skills 模組化管理上下文

Wed, 14 Jan 2026 00:00:00 GMT

使用 Agentic AI 解決問題時上下文管理至關重要，而 Anthropic 推出的 Agent Skill 上下文管理模式近期也成為業界的一種主流標準，在 Claude Code、Codex、Opencode 等工具中都有支援，透過研究如何整合進入現有的流程來增加開發效率。

What is Marshal in Go?

Sun, 11 Jan 2026 00:00:00 GMT

Revisiting serialization/deserialization in Go and the origin of "Marshal", building on my earlier post about struct tags and reflect.

Go 进行数据序列化与 Marshal 名称的起源

Sun, 11 Jan 2026 00:00:00 GMT

处理传递资料时都快忘了有「序列化与反序列化资料」这个步骤，因为都被套件像是：Axios 抽象掉了，近期在写后端也重新温习相关知识，也延续先前文章：Go Struct Tag 是什么？如何透过 reflect 动态处理栏位？探讨 Go 如何处理序列化资料。

Go 進行資料序列化與 Marshal 名稱的起源

Sun, 11 Jan 2026 00:00:00 GMT

處理傳遞資料時都快忘了有「序列化與反序列化資料」這個步驟，因為都被套件像是：Axios 抽象掉了，近期在寫後端也重新溫習相關知識，也延續先前文章：Go Struct Tag 是什麼？如何透過 reflect 動態處理欄位？探討 Go 如何處理序列化資料。

How Programs Remember: Stack and Heap

Sun, 04 Jan 2026 00:00:00 GMT

High-level programming languages usually involves the concept that "unused variables are automatically garbage collected". How do programs manage memory?

程式如何记忆：Stack 与 Heap

Sun, 04 Jan 2026 00:00:00 GMT

学习高阶程序语言通常都会接受一个观念是：「没用到的变量会自动被垃圾回收掉」。不过越接近底层或开始探讨性能问题，发现自己对于程序语言核心的记忆体概念 Heap 与 Stack 并没有那么清楚。程序语言究竟是如何分配与管理记忆体的？所谓的垃圾回收（Garbage Collection, GC）具体来说又做了哪些事情？

程式如何記憶：Stack 與 Heap

Sun, 04 Jan 2026 00:00:00 GMT

學習高階程式語言通常都會接受一個觀念是：「沒用到的變數會自動被垃圾回收掉」。不過越接近底層或開始探討效能問題，發現自己對於程式語言核心的記憶體概念 Heap 與 Stack 並沒有那麼清楚。程式語言究竟是如何分配與管理記憶體的？所謂的垃圾回收（Garbage Collection, GC）具體來說又做了哪些事情？

Go context termination, timeouts, and passing values

Tue, 30 Dec 2025 00:00:00 GMT

Context is added to Go standard library in 1.7. It's primarily used for including deadlines, cancellation signals, and passing request-scoped values.

使用 Go Context 处理 goroutine 终止、超时、传递请求相关的值

Tue, 30 Dec 2025 00:00:00 GMT

Context 是 Go 1.7 添加于标准函式库的功能。常在存取资料库或其他服务时会遇到，初步看起来是用于「传递取消信号」用途的语法，用于处理 goroutine：背负期限（deadline）、取消信号（cancellation signal）、传递请求相关的值（request-scoped values）。

使用 Go Context 處理 goroutine 終止、超時、傳遞請求相關的值

Tue, 30 Dec 2025 00:00:00 GMT

Context 是 Go 1.7 添加於標準函式庫的功能。常在存取資料庫或其他服務時會遇到，初步看起來是用於「傳遞取消信號」用途的語法，用於處理 goroutine：背負期限（deadline）、取消信號（cancellation signal）、傳遞請求相關的值（request-scoped values）。

How and Why Two Factor Authentication

Thu, 25 Dec 2025 00:00:00 GMT

As more and more apps started promoting—or even requiring—two-factor authentication (2FA), I ended up installing Google Authenticator on my phone.

为什么需要双重因子验证（2FA）？

Thu, 25 Dec 2025 00:00:00 GMT

随着越来越多的软体推广与强制双重因子验证 2FA，我的手机也装上了 Google Authenticator，但老实说，很长一段时间我只知道「打开 App → 输入六位数字」，对于这组数字为什么会一直变、伺服器又是怎么验证的，其实没有真正了解过。直到最近在测试一些相关登入逻辑才回来补齐这块知识。

為什麼需要雙重因子驗證（2FA）？

Thu, 25 Dec 2025 00:00:00 GMT

隨著越來越多的軟體推廣與強制雙重因子驗證 2FA，我的手機也裝上了 Google Authenticator，但老實說，很長一段時間我只知道「打開 App → 輸入六位數字」，對於這組數字為什麼會一直變、伺服器又是怎麼驗證的，其實沒有真正了解過。直到最近在測試一些相關登入邏輯才回來補齊這塊知識。

如何於 2026 年建構前端自動化測試

Thu, 18 Dec 2025 00:00:00 GMT

前端測試一直存在龐大的需求，但具體討論如何實戰中建構合理測試體制的討論文章卻不多，隨著社群工具成熟與不同的嘗試下我摸索出一套實戰可採用的方式替團隊建構設施。這篇文章參雜主觀意見與特定的上下文，主要統整近期在工作中的經驗選擇某項解決方案之前必須知道自己選擇的原因以及未來的走向，有太多已經被淘汰的技術與陳舊代碼。

How is Time Calculated and Stored in Programming?

Tue, 16 Dec 2025 00:00:00 GMT

I always relying on convenient libraries like: dayjs for date conversion. This article aims to clarify the knowledge necessary for handling time in programming.

程序中时间是如何计算与存储的？

Tue, 16 Dec 2025 00:00:00 GMT

我一直对程式中日期存在个模糊不可靠的概念，通常依靠方便的库像是：dayjs 去处理日期转换，但底层的原理至今仍不是很清楚，只知道时间是相对的，且存储方式可能是某种标准格式，这篇文章将尽可能补全程式处理时间所需要的知识。关于时区的规则与电脑运算存储时间的概念。

程式中時間是如何計算與存儲的？

Tue, 16 Dec 2025 00:00:00 GMT

我一直對程式中日期存在個模糊不可靠的概念，通常依靠方便的庫像是：dayjs 去處理日期轉換，但底層的原理至今仍不是很清楚，只知道時間是相對的，且存儲方式可能是某種標準格式，這篇文章將盡可能補全程式處理時間所需要的知識。關於時區的規則與電腦運算存儲時間的概念。

How are Passwords Stored?

Mon, 15 Dec 2025 00:00:00 GMT

I found a simple explanatory video: You're Storing Passwords Wrong. Here's The Fix - LearnThatStack, so I will record knowledge related to password storage.

密码是如何被存储的？哪些机制预防密码泄漏？

Mon, 15 Dec 2025 00:00:00 GMT

虽然之前制作过一个笔记网站有建构用户注册的部份：my-note，但没有笔记下来发现忘了很多概念，碰巧看到我看过最简单好懂的解说影片：You're Storing Passwords Wrong. Here's The Fix - LearnThatStack，把密码保存相关的知识都纪录一下。

密碼是如何被存儲的？哪些機制預防密碼洩漏？

Mon, 15 Dec 2025 00:00:00 GMT

雖然之前製作過一個筆記網站有建構用戶註冊的部份：my-note，但沒有筆記下來發現忘了很多概念，碰巧看到我看過最簡單好懂的解說影片：You're Storing Passwords Wrong. Here's The Fix - LearnThatStack，把密碼保存相關的知識都紀錄一下。

ASCII, Unicode, UTF-8? How do computers process text?

Mon, 08 Dec 2025 00:00:00 GMT

I realized that I don't fully understand how strings work in Go. Explored documentation to understand the history and evolution of text encoding.

ASCII、Unicode、UTF-8、UTF-16？计算机是如何处理文本的？

Mon, 08 Dec 2025 00:00:00 GMT

近期在 Go 处理字串时发现对于电脑处理文字的原理不是很透彻，所以翻了更多教学文件了解电脑是如何处理文字的。历史上电脑如何处理文字？以及后续 ASCII、Unicode、UTF-8、UTF-16 相关演进特点与背后取舍，了解为什么现代文字编码都使用 UTF-8。

ASCII、Unicode、UTF-8、UTF-16？電腦是如何處理文字的？

Mon, 08 Dec 2025 00:00:00 GMT

近期在 Go 處理字串時發現對於電腦處理文字的原理不是很透徹，所以翻了更多教學文件了解電腦是如何處理文字的。歷史上電腦如何處理文字？以及後續 ASCII、Unicode、UTF-8、UTF-16 相關演進特點與背後取捨，了解為什麼現代文字編碼都使用 UTF-8。

String Handling in Go Using Rune

Sat, 06 Dec 2025 00:00:00 GMT

When indexing position `n` in a Go string, why isn't the `n`th character returned? In Go, you get a "Rune"; direct indexing gets you a byte.

Go 字符串处理使用 Rune

Sat, 06 Dec 2025 00:00:00 GMT

当在 Go 字串中索引位置 `n` 时，为什么没有得到第 `n` 个字元？相较于其他程式语言一串文字在遍历时会预期拿到单一个字符，在 Go 会拿到「Rune」；如果直接透过索引取得 string 内容会拿到 byte。透过实际解 Codewars 题目了解处理字串要留意的东西

Go 字串處理使用 Rune

Sat, 06 Dec 2025 00:00:00 GMT

當在 Go 字串中索引位置 `n` 時，為什麼沒有得到第 `n` 個字元？相較於其他程式語言一串文字在遍歷時會預期拿到單一個字符，在 Go 會拿到「Rune」；如果直接透過索引取得 string 內容會拿到 byte。透過實際解 Codewars 題目了解處理字串要留意的東西

Go Struct Tag and reflect

Sun, 30 Nov 2025 00:00:00 GMT

When interacting with MongoDB, I encountered unfamiliar syntax in Struct fields. This article explores why Go Struct Tags exist and the problems they solve.

Go Struct Tag 是什么？如何透过 reflect 动态处理栏位？

Sun, 30 Nov 2025 00:00:00 GMT

最近在与 MongoDB 互动时发现 Struct 栏位结尾有一段语法不是很熟悉，这篇文章探讨 Struct Tag 存在的原因以及解决什么问题。与其命令式的操纵资料，透过宣告式的方式来描述资料格式是 Struct Tag 的主要用途。

Go Struct Tag 是什麼？如何透過 reflect 動態處理欄位？

Sun, 30 Nov 2025 00:00:00 GMT

最近在與 MongoDB 互動時發現 Struct 欄位結尾有一段語法不是很熟悉，這篇文章探討 Struct Tag 存在的原因以及解決什麼問題。與其命令式的操縱資料，透過宣告式的方式來描述資料格式是 Struct Tag 的主要用途。

Go 非同步運算 (Goroutine)

Tue, 18 Nov 2025 00:00:00 GMT

Goroutine 是由 Go 語言本身管理的輕量級執行緒（User-space Thread），而不是由作業系統管理的執行緒（OS Thread）。背後使用 M:N 排程模型。這意味著，M 個 Goroutine 會被分配到 N 個作業系統執行緒（OS Threads）上執行。

Symmetric encryption and asymmetric encryption

Wed, 12 Nov 2025 00:00:00 GMT

Symmetric encryption uses the same key for encryption and decryption by both parties, posing risks such as key sharing and interception

对称加密与非对称加密

Wed, 12 Nov 2025 00:00:00 GMT

「对称加密」就是通讯双方进行加密与解密使用相同的金耀，但除了双方都要保守金钥外，怎么让双方都持有相同的金钥本身就是个问题，存在被劫持的风险（中间人攻击）。「非对称加密」透过一对金钥（Key Pair），也就是公钥与私钥来解决对称加密会遇到的问题。

對稱加密與非對稱加密

Wed, 12 Nov 2025 00:00:00 GMT

「對稱加密」就是通訊雙方進行加密與解密使用相同的金耀，但除了雙方都要保守金鑰外，怎麼讓雙方都持有相同的金鑰本身就是個問題，存在被劫持的風險（中間人攻擊）。「非對稱加密」透過一對金鑰（Key Pair），也就是公鑰與私鑰來解決對稱加密會遇到的問題。

Slicce vs Array in Go

Sun, 09 Nov 2025 00:00:00 GMT

In Go, there are two common data structures for "sequence data": Array and Slice. They are similar in syntax, but the differences in behavior.

Go Slice vs Array 差異與底層原理

Sun, 09 Nov 2025 00:00:00 GMT

在 Go 语言中，有两种常见的资料结构可用于表示「序列资料」：Array 与 Slice。这两者在语法上相似，但背后行为与使用情境差异非常关键。简单来说，Array 是固定长度（Static Array），而 Slice 是动态长度（Dynamic Array）。

Go Slice vs Array 差異與底層原理

Sun, 09 Nov 2025 00:00:00 GMT

在 Go 語言中，有兩種常見的資料結構可用於表示「序列資料」：Array 與 Slice。這兩者在語法上相似，但背後行為與使用情境差異非常關鍵。簡單來說，Array 是固定長度（Static Array），而 Slice 是動態長度（Dynamic Array）。

GitLab Mirror: Easy Syncing of Git Repos in 3 Minutes

Sat, 01 Nov 2025 00:00:00 GMT

My recent work involves migrating GitLab to GitHub, Fortunately, GitLab has had a feature called Mirroring for a long time.

GitLab Mirror 3 分钟轻松迁移与同步 Git Repo

Sat, 01 Nov 2025 00:00:00 GMT

近期工作上计划将 GitLab 迁移到 GitHub，但光是腾出时间进行专案迁移就感觉很麻烦，也因此很多计画被耽搁着，像是建构 CI 自动化测试环境、导入 AI 代码审核。幸好 GitLab 很早就有一项功能叫做 Mirroring。

GitLab Mirror 3 分鐘輕鬆遷移與同步 Git Repo

Sat, 01 Nov 2025 00:00:00 GMT

近期工作上計劃將 GitLab 遷移到 GitHub，但光是騰出時間進行專案遷移就感覺很麻煩，也因此很多計畫被耽擱著，像是建構 CI 自動化測試環境、導入 AI 代碼審核。幸好 GitLab 很早就有一項功能叫做 Mirroring。

Quickly Uderstand TypeScript Generics

Tue, 28 Oct 2025 00:00:00 GMT

I've always had a fear of TypeScript generics with all the , , extends. It seems daunting, but generics are essential for specific problems.

速通了解 TypeScript 泛型

Tue, 28 Oct 2025 00:00:00 GMT

对于 TypeScript 的泛型我一直有种恐惧，什么满满的 ``、``、`extends`、多层嵌套，看起来就很可怕。毕竟在日常开发里，好像也不太需要……对吧？的确解决小问题如此，但在特定问题下泛型将会非常必要。

速通了解 TypeScript 泛型

Tue, 28 Oct 2025 00:00:00 GMT

對於 TypeScript 的泛型我一直有種恐懼，什麼滿滿的 ``、``、`extends`、多層嵌套，看起來就很可怕。畢竟在日常開發裡，好像也不太需要……對吧？的確解決小問題如此，但在特定問題下泛型將會非常必要。

CPU Core / Process / Thread / Fiber / Coroutine 差異與解釋

Sun, 26 Oct 2025 00:00:00 GMT

程式是可被執行的代碼或指令，而作業系統透過統整不同概念達成有效率的執行程式，理解以下概念可以幫助更好理解多工程式的運作原理與運行效率最佳化：CPU Core（處理器核心）、Process（進程 / 程序）、Thread（線程 / 執行緒）。

Pitfalls Encountered in Frontend Automation Testing

Mon, 20 Oct 2025 00:00:00 GMT

The ever-changing complexity of frontend UI leads to various challenges in testing tools and methods. The difficulties along the way.

前端自动化测试会遇上的坑

Mon, 20 Oct 2025 00:00:00 GMT

前端 UI 一直是多变且复杂的题材，经历各种工具迭代与起伏，有很长一段时间其实并没有什么特别统一良好的方式进行测试。在经历过太多次的跌宕变化过后，纪录我认为现阶段怎么打造可被验证的前端与未来趋势与过程中实际遇到的各种困难。

前端自動化測試會遇上的坑

Mon, 20 Oct 2025 00:00:00 GMT

前端 UI 一直是多變且複雜的題材，經歷各種工具迭代與起伏，有很長一段時間其實並沒有什麼特別統一良好的方式進行測試。在經歷過太多次的跌宕變化過後，紀錄我認為現階段怎麼打造可被驗證的前端與未來趨勢與過程中實際遇到的各種困難。

JavaScript Array Lazy Evaluation Through Iterator Helper

Wed, 15 Oct 2025 00:00:00 GMT

Understand the Iterator Protocol and Generator, and arrays benefit from the new iterator helper for lazy evaluation.

JavaScript 数组惰性求值通过 iterator helper

Wed, 15 Oct 2025 00:00:00 GMT

之前提到 JavaScript 的 Iterator Protocol：什么让 JavaScript 数据结构能够被迭代？了解 Iterator Protocol 与 Generator，数组自然受惠于最近推出的 iterator helper 进行惰性求值。

JavaScript 陣列惰性求值透過 iterator helper

Wed, 15 Oct 2025 00:00:00 GMT

先前提到 JavaScript 的 Iterator Protocol：什麼讓 JavaScript 資料結構能夠被迭代？了解 Iterator Protocol 與 Generator，而陣列正是基於 iterator 實做，自然受惠於近期推出的 iterator helper 來進行惰性求值。

What makes JavaScript Iterables Iterable?

Tue, 14 Oct 2025 00:00:00 GMT

Have you wondered why arrays can be iterated (for...of) but objects cannot? Iterables rely on the Iterator Protocol to implement iterable data structures.

什么让 JavaScript 数据结构能够被迭代？了解 Iterator Protocol 与 Generator

Tue, 14 Oct 2025 00:00:00 GMT

你有想过为什么阵列可以被迭代处理（for...of）但物件不行吗？ Iterables 背后仰赖 Iterator Protocol 来实践可被迭代的资料结构。基于 Iterator Protocol 的概念更是伸展到 Generator Function 相关的知识点，可以创造更多特殊的资料结构。

什麼讓 JavaScript 資料結構能夠被迭代？了解 Iterator Protocol 與 Generator

Tue, 14 Oct 2025 00:00:00 GMT

你有想過為什麼陣列可以被迭代處理（for...of）但物件不行嗎？Iterables 背後仰賴 Iterator Protocol 來實踐可被迭代的資料結構。基於 Iterator Protocol 的概念更是伸展到 Generator Function 相關的知識點，可以創造更多特殊的資料結構。

A Simple Explanation of Monad

Tue, 07 Oct 2025 00:00:00 GMT

The benefit of Functor is: it allows us to operate on different "container types" in the same way, preserving the structure while we compute values inside.

实际简单的 Monad 解释

Tue, 07 Oct 2025 00:00:00 GMT

Functor 的好处是：它让我们能用同样的方式操作不同的「容器型别」，想像成一个「装值的盒子」，它允许我们对盒子里的值进行运算，但同时又保留了盒子的结构。 Functor 「提供了方式在容器里操作值」，遵循同一性（Identity）与合成性（Composition）。

實際簡白的 Monad 解釋

Tue, 07 Oct 2025 00:00:00 GMT

Functor 的好處是：它讓我們能用同樣的方式操作不同的「容器型別」，想像成一個「裝值的盒子」，它允許我們對盒子裡的值進行運算，但同時又保留了盒子的結構。Functor 「提供了方式在容器裡操作值」，遵循同一性（Identity）與合成性（Composition）。

Simple Explanation of Applicative Functor

Sun, 05 Oct 2025 00:00:00 GMT

The `map` of Functor can only operate on values, not "values within a container," necessitating the Applicative Functor.

实际简洁的 Applicative Functor 解释

Sun, 05 Oct 2025 00:00:00 GMT

从先前 Functor 的概念出发，Functor 的 `map` 只能作用在数值上，而不能是「存在于容器中的数值」上，所以才需要 Applicative Functor，一种比 Functor 更多功能的结构，除了满足 Functor 的功能外还能「让盒子里的函数作用（apply）到另一盒子的值」。

實際簡白的 Applicative Functor 解釋

Sun, 05 Oct 2025 00:00:00 GMT

從先前 Functor 的概念出發，Functor 的 `map` 只能作用在數值上，而不能是「存在於容器中的數值」上，所以才需要 Applicative Functor，一種比 Functor 更多功能的結構，除了滿足 Functor 的功能外還能「讓盒子裡的函數作用（apply）到另一盒子的值」。

Function Composition and Pointfree Coding Style

Sat, 04 Oct 2025 00:00:00 GMT

A coding style that emphasizes composing functions rather than handling specific data, defining functions without explicit parameters.

Pointfree 代码风格通过函数组合提升代码质量

Sat, 04 Oct 2025 00:00:00 GMT

一种代码风格，着重于函式的组合关系而非具体资料，定义函式时不显式提其参数（points），而是透过函式组合与高阶函式来表达资料流动。可以减少不必要的命名保持代码简洁与达成更好的通用组合性，但是额外的抽象须被理解与熟悉。透过两个实际案例熟悉 Pointfree 开发风格。

Pointfree 代碼風格透過函式組合提昇代碼品質

Sat, 04 Oct 2025 00:00:00 GMT

一種代碼風格，著重於函式的組合關係而非具體資料，定義函式時不顯式提其參數（points），而是透過函式組合與高階函式來表達資料流動。可以減少不必要的命名保持代碼簡潔與達成更好的通用組合性，但是額外的抽象須被理解與熟悉。透過兩個實際案例熟悉 Pointfree 開發風格。

A Simple and Clear Explanation of Functor

Thu, 02 Oct 2025 00:00:00 GMT

I'm not a mathematician and I'm not very interested in category theory, but it profoundly relates to advanced concepts of Functional Programming.

实际简单的 Functor 解释

Thu, 02 Oct 2025 00:00:00 GMT

我不是数学家也对于范畴论没有太大兴趣，但它深刻的与 Functional Programming 进阶理念挂勾，透过实战了解开发层面这些理论可以如何撰写更好维护的程式。 Functor 是一种具有 map 方法的结构，允许对其中的值进行转换同时保持结构不变、让函数可以基于容器进行组合，意味着可以被用于封装副作用或情境。

實際簡白的 Functor 解釋

Thu, 02 Oct 2025 00:00:00 GMT

我不是數學家也對於範疇論沒有太大興趣，但它深刻的與 Functional Programming 進階理念掛勾，透過實戰了解開發層面這些理論可以如何撰寫更好維護的程式。Functor 是一種具有 map 方法的結構，允許對其中的值進行轉換同時保持結構不變、讓函數可以基於容器進行組合，意味著可以被用於封裝副作用或情境。

Optimal Loading Times Contribute to a Better UX

Tue, 30 Sep 2025 00:00:00 GMT

Pursuing shorter wait times and faster feedback is crucial. However, rushing to present information may not be optimal.

探讨适当的加载时长如何打造更好的加载体验

Tue, 30 Sep 2025 00:00:00 GMT

最好的用户体验是即时的，因此追求更短的等待时间和更快的反馈非常重要，然而匆忙的将任何信息显示给用户未必是最佳体验，举例来说：1.进入网页 2.反馈“加载数据中……”3.显示加载完成的数据，以上流程简洁实在，会有什么问题呢？问题出在时机和时间。

探討適當的載入時長如何打造更好的載入體驗

Tue, 30 Sep 2025 00:00:00 GMT

最美好的使用體驗是即刻的，因此追求更短暫的等待時間越快越早的回饋很重要，然而倉促的將任何當下的資訊拋給用戶未必是最佳體驗，舉例來說：1.進入網頁 2.反饋「載入資料中……」3.顯示載入完成的資料，以上流程簡潔實在，會有什麼問題呢？問題出在時機和時間。

打造開發者友善的錯誤處理方式（feat. Java, Go, Rust, TS）

Mon, 22 Sep 2025 00:00:00 GMT

錯誤處理是所有程式都會遇到的問題，特別是在複雜的網頁開發中更是如此。本文將研究不同方法模式與語言探討如何「打造開發者友善的錯誤處理方式」。推薦演講：Unexpected Monad. Is Safe Error Handling Possible in JS/TS?

無痛導入的 Vue 無頭表單驗證：VeeValidate

Thu, 11 Sep 2025 00:00:00 GMT

近期在遷移舊的 Element Plus 專案是必要找到另一款客戶端表單驗證方案，而在使用 Shadcn Vue 過程中發現 VeeValidate 是一款針對 Vue 製作的無頭表單驗證工具，你可以攜帶自己的 UI 整合，使用原生表單元件也不是問題。

Learning Go Interface for Polymorphism

Wed, 10 Sep 2025 00:00:00 GMT

Understanding "Polymorphism" is like "doing something, but the way it is done varies" For example, various "shapes" can "calculate area,"

学习 Go interface 实践多型

Wed, 10 Sep 2025 00:00:00 GMT

对于「多型 Polymorphism」的概念理解像是「要做一件事，但这件事对不同对象来说实践的方式不同」。具体来说像是各种「形状」都可以「算面积」，但背后实践的方法却不同，而在 Go 当中 interface 就是方法的集合。

學習 Go interface 實踐多型

Wed, 10 Sep 2025 00:00:00 GMT

對於「多型 Polymorphism」的概念理解像是「要做一件事，但這件事對不同對象來說實踐的方式不同」。具體來說像是各種「形狀」都可以「算面積」，但背後實踐的方法卻不同，而在 Go 當中 interface 就是方法的集合。

Go Receiver Function like Class Method

Tue, 09 Sep 2025 00:00:00 GMT

The first time you see a Go Receiver function, you might wonder what this strange syntax is, with parameters accepted before the function name?

像 Class Method 的奇特 Go Receiver Function

Tue, 09 Sep 2025 00:00:00 GMT

第一次看到 Go 的 Receiver 函数会觉得这是啥怪语法，函数名前面还能接收参数？Go 语言提倡「Composition over inheritance」，并极力追求代码的简洁性，以此规避 class-based OOP 所带来的复杂性。

像 Class Method 的奇特 Go Receiver Function

Tue, 09 Sep 2025 00:00:00 GMT

第一次看到 Go 的 Receiver 函式會覺得這是啥怪語法，函式名前面還能接收參數？Go 語言提倡「Composition over inheritance」（組合優於繼承），並極力追求程式碼的簡潔性，以此迴避 class-based OOP 所帶來的複雜性。

Learn Go Pointer and Difference with Passing by Reference

Sun, 07 Sep 2025 00:00:00 GMT

Go's design has all values passed by value; to achieve passing by reference effect, Pointer must be used explicitly.

学习 Go Pointer 与 Passing by reference 的差异

Sun, 07 Sep 2025 00:00:00 GMT

Go 设计上一切数值都是直白的「Passing by value」，会有「Passing by value」的效果原因是因为 Reference Types 带有指标，复制时是复制指标值。要让 Value Types 有 Passing by Reference 的效果要显式的使用 Pointer。

學習 Go Pointer 與 Passing by reference 的差異

Sun, 07 Sep 2025 00:00:00 GMT

Go 設計上一切數值都是直白的「Passing by value」，會有「Passing by value」的效果原因是因為 Reference Types 帶有指標，複製時是複製指標值。要讓 Value Types 有 Passing by Reference 的效果要顯式的使用 Pointer。

Solve Any Data Table Problem using TanStack Table

Tue, 02 Sep 2025 00:00:00 GMT

TanStack Table is a awesome library that at first glance may seem overly complex but actually saves countless hours of time.

TanStack Table 拯救前端复杂的数据表格呈现问题

Tue, 02 Sep 2025 00:00:00 GMT

前端生涯中遇到无数攸关资料呈现的需求需要解决，而 TanStack Table 是一款第一眼看起来很多余复杂但实际上能省下无数时间的一个优质套件，如果有任何「大量表单、中大型表单应用」我会强烈推荐。在实际工作中我透过导入 TanStack Table 在几天时间内就能把现有表单大多复杂功能重现。

TanStack Table 拯救前端複雜的資料表格呈現問題

Tue, 02 Sep 2025 00:00:00 GMT

前端生涯中遇到無數攸關資料呈現的需求需要解決，而 TanStack Table 是一款第一眼看起來很多餘複雜但實際上能省下無數時間的一個優質套件，如果有任何「大量表單、中大型表單應用」我會強烈推薦。在實際工作中我透過導入 TanStack Table 在幾天時間內就能把現有表單大多複雜功能重現。

Create API Contracts (GraphQL, tRPC, oRPC) and Workarounds

Tue, 26 Aug 2025 00:00:00 GMT

Using TypeScript to ensure type safety in large frontend projects is common, but API communication can introduce vulnerabilities that compromise type safety.

打造前后端 API 数据合约（GraphQL、tRPC、oRPC）与相关变通方案

Tue, 26 Aug 2025 00:00:00 GMT

使用 TypeScript 确保程式型别安全以维持大型前端专案的品质和维护性已经是很成熟且常见的做法，但有一项最常见的破口会让程式变得脆弱且混乱：「程式间 API 沟通」。 TypeScript 本身虽然能静态检查程式内部的型别正确性，但只能在程式执行阶段验证资料格式才能真正确保型别安全。

打造前後端 API 資料合約（GraphQL、tRPC、oRPC）與相關變通方案

Tue, 26 Aug 2025 00:00:00 GMT

使用 TypeScript 確保程式型別安全以維持大型前端專案的品質和維護性已經是很成熟且常見的做法，但有一項最常見的破口會讓程式變得脆弱且混亂：「程式間 API 溝通」。TypeScript 本身雖然能靜態檢查程式內部的型別正確性，但只能在程式執行階段驗證資料格式才能真正確保型別安全。

Why Does Shadcn use cn() Helper Functions?

Wed, 20 Aug 2025 00:00:00 GMT

If you browse through Shadcn's component set, you'll find extensive use of a helper function cn, which uses twMerge(clsx(inputs)).

twMerge() + clsx() = cn() ？Shadcn 为什么要用这些辅助函数？

Wed, 20 Aug 2025 00:00:00 GMT

如果翻阅 Shadcn 组件集的组件会发现大量使用到一个辅助函数 cn，背后是使用 twMerge(clsx(inputs))，它实质是两个库的组合，方便构建 Tailwind 样式。为什么需要额外的库和方法来构建组件样式呢？

twMerge() + clsx() = cn() ？為啥 Shadcn 要用這些輔助函式？

Wed, 20 Aug 2025 00:00:00 GMT

如果翻閱 Shadcn 元件集的元件會發現大量使用到一個輔助函式 cn，背後使用 twMerge(clsx(inputs))，它其實是兩套函式庫的組成，用於更方便建構元件當中 Tailwind 的樣式。為什麼會需要額外的庫和方法來建構元件樣式呢？

什麼是單一登入（SSO）？它解決什麼問題？

Tue, 19 Aug 2025 00:00:00 GMT

不少網站登入時都有關於「Single Sign-On」的選項，像是只要登入 Google 帳號，就可以橫跨不同服務如 YouTube、Gmail，從痛點了解 SSO 如何解決多個服務間登入造成的潛在問題與相關流程，打造更方便與安全的登入體驗。

Integrate Figma MCP and Shadcn MCP to build UI

Mon, 18 Aug 2025 00:00:00 GMT

By integrating Figma MCP and Shadcn MCP Server, maybe we can precisely build frontend interfaces through chat with AI.

通过 Figma MCP 与 Shadcn MCP 通过与 AI 聊天打造前端界面

Mon, 18 Aug 2025 00:00:00 GMT

UI 通常仰赖设计者与前端耗费大量时间精力进行组织与维护，近期工作上进行前端翻新也遇到大量陈旧代码需要翻皮的作业，问题是谁有时间一个一个重新替换？尝试串上 Figma MCP 与 Shadcn MCP Server 让我们透过与 AI 聊天就能精准打造前端介面。

透過 Figma MCP 與 Shadcn MCP 透過與 AI 聊天打造前端介面

Mon, 18 Aug 2025 00:00:00 GMT

UI 通常仰賴設計者與前端耗費大量時間精力進行組織與維護，近期工作上進行前端翻新也遇到大量陳舊代碼需要翻皮的作業，問題是誰有時間一個一個重新替換？嘗試串上 Figma MCP 與 Shadcn MCP Server 讓我們透過與 AI 聊天就能精準打造前端介面。

Webpage lagging during rendering? Try List Virtualization

Sat, 09 Aug 2025 00:00:00 GMT

Rendering is performance bottleneck in web, especially in dashboard or large data lists. It skips the performance burden by "only rendering visible items."

网页渲染太多东西开始卡顿？让列表虚拟化来解决

Sat, 09 Aug 2025 00:00:00 GMT

渲染永远是网页运算中极度耗费效能的一块瓶颈之一，而在像是仪表板应用或是大量资料清单如社群媒体版面很容易会遇到前端渲染效率上的问题，透过「只渲染看得到的东西」来减少效能负担。这种模式通常称作 List Virtualization（虚拟化看不到的东西）或 Windowing（只渲染视窗内的东西）。

網頁渲染太多東西開始卡頓？讓 List Virtualization 來解決

Sat, 09 Aug 2025 00:00:00 GMT

渲染永遠是網頁運算中極度耗費效能的一塊瓶頸之一，而在像是儀表板應用或是大量資料清單如社群媒體版面很容易會遇到前端渲染效率上的問題，透過「只渲染看得到的東西」來減少效能負擔。這種模式通常稱作 List Virtualization（虛擬化看不到的東西）或 Windowing（只渲染視窗內的東西）。

What is the Model Context Protocol?

Fri, 08 Aug 2025 00:00:00 GMT

AI solves clear contextual problems like LeetCode with remarkable efficiency and accuracy. But in real situations, AI struggles. MCP would help.

模型上下文协议（Model Context Protocol）是什么？对现代开发者有什么影响？

Fri, 08 Aug 2025 00:00:00 GMT

AI 解决一些上下文清晰的小题目如 LeetCode 会发现它通常有惊人的效率与准确率，然而在真实情境下 AI 通常没有这么厉害，因为环境上下文和需求是模糊的，如何更好的让 AI 看清与外部世界互动能够达成更有效率的产出，而 MCP 是一种大型语言模型的统一协定帮助达成该目标。

模型上下文協定（Model Context Protocol）是啥？對現代開發者有什麼影響？

Fri, 08 Aug 2025 00:00:00 GMT

AI 解決一些上下文清晰的小題目如 LeetCode 會發現它通常有驚人的效率與準確率，然而在真實情境下 AI 通常沒有這麼厲害，因為環境上下文和需求是模糊的，如何更好的讓 AI 看清與外部世界互動能夠達成更有效率的產出，而 MCP 是一種大型語言模型的統一協定幫助達成該目標。

Better Server State Management through TanStack Query!

Wed, 06 Aug 2025 00:00:00 GMT

We discussed issues and solutions related to fetching external data. Explore building a better frontend data fetching experience through TanStack Query.

如何通过 TanStack Query 构建更好的前端数据获取体验

Wed, 06 Aug 2025 00:00:00 GMT

先前文章提到：如何优雅的于 Vue 正确的处理资料载入点出了一些获取外部资料延伸带来的问题与实际解方，这次我想透过 TanStack Query 的视角挖掘怎么建构更好的前端资料获取体验。本篇教学继续延续使用 Vue 框架，不过概念对主流框架基本相通。

如何透過 TanStack Query 建構更好的前端資料獲取體驗

Wed, 06 Aug 2025 00:00:00 GMT

先前文章提到：如何優雅的於 Vue 正確的處理資料載入點出了一些獲取外部資料延伸帶來的問題與實際解方，這次我想透過 TanStack Query 的視角挖掘怎麼建構更好的前端資料獲取體驗。本篇教學繼續延續使用 Vue 框架，不過概念對主流框架基本相通。

How to Organize Your TypeScript Types

Mon, 04 Aug 2025 00:00:00 GMT

TypeScript type definition files are often created as a global type.ts file, but this can cause confusion as projects grow.

如何管理 TypeScript 类型文件？

Mon, 04 Aug 2025 00:00:00 GMT

TypeScript 型别定义档案通常就是在全局创个 type.ts 档案并把所有型别丢里头，随处都能引用很方便，但很多专案初期沿用的习惯到了一定规模就会开始混乱，近期也遇到相关的问题因此研究一下一般有哪些方式管理型别档案。

如何管理 TypeScript 型別檔案？

Mon, 04 Aug 2025 00:00:00 GMT

TypeScript 型別定義檔案通常就是在全局創個 type.ts 檔案並把所有型別丟裡頭，隨處都能引用很方便，但很多專案初期沿用的習慣到了一定規模就會開始混亂，近期也遇到相關的問題因此研究一下一般有哪些方式管理型別檔案。

What Is Feature Flag and What Problem Does It Solve?

Sun, 03 Aug 2025 00:00:00 GMT

"Writing code is like building a church; once it's done, we start praying." and feature flags are a great technique to manage the risks.

什么是 Feature Flag 以及它解决什么问题？

Sun, 03 Aug 2025 00:00:00 GMT

还记得之前参与某个专案使用 Git Flow 的方式管理产品发布，但随着时间过去它与持续进行中的主支线差距越来越大，也是在那次问题之后我更认可 Trunk Based Development 流程的概念，其中提到 Feature Flag 是一种很好的技巧用来降低推送功能的风险与控制程度。

什麼是 Feature Flag 以及它解決什麼問題？

Sun, 03 Aug 2025 00:00:00 GMT

還記得之前參與某個專案使用 Git Flow 的方式管理產品發布，但隨著時間過去它與持續進行中的主支線差距越來越大，也是在那次問題之後我更認可 Trunk Based Development 流程的概念，其中提到 Feature Flag 是一種很好的技巧用來降低推送功能的風險與控制程度。

How Stacked PRs Improve Code Review Quality?

Wed, 30 Jul 2025 00:00:00 GMT

When there's a change of only 10 lines, one can carefully check the comments; with 1000 lines, everything is LGTM (Looks Good to Me)!

Stacked PR 如何改善代码审核质量？

Wed, 30 Jul 2025 00:00:00 GMT

当只有 10 行代码改动还可能会细心检查留言，当有 1000 行改动一切都 LGTM（Looks Good to Me）！要让人好好集中精神盯着几千行的代码改动本身就是很难得的事，身为提交的一方，有没有可以改善审核效率的方式？或许能试试看 Stacked PR。

Stacked PR 如何提昇代碼審查品質

Wed, 30 Jul 2025 00:00:00 GMT

當只有 10 行代碼改動還可能會細心檢查留言，當有 1000 行改動一切都 LGTM（Looks Good to Me）！要讓人好好集中精神盯著幾千行的代碼改動本身就是很難得的事，身為提交的一方，有沒有可以改善審核效率的方式？或許能試試看 Stacked PR。

Why Choose Shadcn in 2025?

Tue, 29 Jul 2025 00:00:00 GMT

If you are considering building a Tailwind-based component library, this article is worth a read. It examines the current frontend environment and challenges.

Shadcn 解决什么问题？为什么它是 2025 最好用的前端 UI 方案？

Tue, 29 Jul 2025 00:00:00 GMT

如果你在考虑建立基于 Tailwind 的元件库这篇文章值得一看，探讨当下前端环境背景与 UI 扩充难题与问题是如何保持元件弹性点出 Shadcn 如何成为 2025 最热门的 Tailwind 元件解决方案，正巧最近又在导入 Vue Shadcn 就来更齐全的回顾这项工具。

Shadcn 解決什麼問題？為什麼它是 2025 最好用的前端 UI 方案？

Tue, 29 Jul 2025 00:00:00 GMT

如果你在考慮建立基於 Tailwind 的元件庫這篇文章值得一看，探討當下前端環境背景與 UI 擴充難題與問題是如何保持元件彈性點出 Shadcn 如何成為 2025 最熱門的 Tailwind 元件解決方案，正巧最近又在導入 Vue Shadcn 就來更齊全的回顧這項工具。

How to Choose Between Cypress and Playwright?

Fri, 25 Jul 2025 00:00:00 GMT

E2E testing often mentions two options: Cypress and Playwright, both of which I've tried. While I prefer Playwright overall, there are more factors to consider.

Cypress 与 Playwright 如何选择？

Fri, 25 Jul 2025 00:00:00 GMT

在网页提到 E2E 测试通常有 Cypress 与 Playwright 两种选项，而两种测试工具我都尝试过。单论整体开发体验来说我更喜欢 Playwright，不过还有更多可以考虑的要素在选择合适的测试工具，纪录我会在意的细节与选择原因。

Cypress 與 Playwright 如何選擇？

Fri, 25 Jul 2025 00:00:00 GMT

在網頁提到 E2E 測試通常有 Cypress 與 Playwright 兩種選項，而兩種測試工具我都嘗試過。單論整體開發體驗來說我更喜歡 Playwright，不過還有更多可以考慮的要素在選擇合適的測試工具，紀錄我會在意的細節與選擇原因。

What is the Testing Pyramid? Does it Work?

Thu, 24 Jul 2025 00:00:00 GMT

Recently reviewing some testing concepts, I encountered the testing pyramid from Mike Cohn’s book “Succeeding with Agile: Software Development Using Scrum.”

什么是测试金字塔？它真的有用吗？

Thu, 24 Jul 2025 00:00:00 GMT

近期在回顾一些测试的概念，其中有个测试金字塔的概念来自于 Mike Cohn 的书《Succeeding with Agile: Software Development Using Scrum》。还没有看过这本书，但这个词汇只要有研究过测试多少都会接触到，这次来重新了解一下并输出自己对这个议题的理解。

什麼是測試金字塔？它真的有用嗎？

Thu, 24 Jul 2025 00:00:00 GMT

近期在回顧一些測試的概念，其中有個測試金字塔的概念來自於 Mike Cohn 的書《Succeeding with Agile: Software Development Using Scrum》。還沒有看過這本書，但這個詞彙只要有研究過測試多少都會接觸到，這次來重新了解一下並輸出自己對這個議題的理解。

Use Git Worktree to Reduce Burden of Context Switching

Tue, 22 Jul 2025 00:00:00 GMT

Recently, whether using AI Vibe Coding or switching functions at work, using git stash feels inconvenient. Let's learn how to use Git Worktree effectively.

使用 Git Worktree 快速切换复杂的项目情境

Tue, 22 Jul 2025 00:00:00 GMT

近期不管是用 AI Vibe Coding 还是工作上切换不同功能感觉使用 git stash 不是很方便，虽然大致知道有 git worktree 但都还懒得学直接先跳过。这次有空来学如何使用 Git Worktree 快速切换复杂的专案情境。

使用 Git Worktree 快速切換複雜的專案情境

Tue, 22 Jul 2025 00:00:00 GMT

近期不管是用 AI Vibe Coding 還是工作上切換不同功能感覺使用 git stash 不是很方便，雖然大致知道有 git worktree 但都還懶得學直接先跳過。這次有空來學如何使用 Git Worktree 快速切換複雜的專案情境。

What is Vue defineExpose?

Tue, 15 Jul 2025 00:00:00 GMT

You may know that Vue components communicate through props down and events up or Scoped Slots to pass info. Another approach is defineExpose.

Vue defineExpose 是啥？子组件如何沟通？

Tue, 15 Jul 2025 00:00:00 GMT

近期要重写很多的 Vue 发现多得是我需要多补充的知识。你可能了解 Vue 组件间通过 props down 与 event up 或是使用 Scoped Slots 来传递信息。还有一种做法是「显式地暴露某些变量或函数给父组件使用」。

Vue defineExpose 是啥？子元件如何溝通？

Tue, 15 Jul 2025 00:00:00 GMT

近期要重寫很多的 Vue 發現多得是我需要多補充的知識。你可能了解 Vue 元件間透過 props down 與 event up 或是使用 Scoped Slots 來傳遞資訊。還有一種做法是「顯式地暴露某些變數或函式給父組件使用」。

What is JWT and What Problem Does It Solve?

Sun, 06 Jul 2025 00:00:00 GMT

JWT stands for JSON Web Token, a standard based on RFC 751 that is used to transmit JSON objects between two entities.

什么是 JWT 以及它解决了什么问题？

Sun, 06 Jul 2025 00:00:00 GMT

JWT 也就是 JSON Web Token，一个基于 RFC 751 的标准，可用于在两个实体（如前端和后端）间进行 JSON 物件的传输。由 header、payload、signature 三种资料所构成，透过 . 来区隔并使用 Base64 编码以便传输。

什麼是 JWT 以及它解決了什麼問題？

Sun, 06 Jul 2025 00:00:00 GMT

JWT 也就是 JSON Web Token，一個基於 RFC 751 的標準，可用於在兩個實體（如前端和後端）間進行 JSON 物件的傳輸。由 header、payload、signature 三種資料所構成，透過 . 來區隔並使用 Base64 編碼以便傳輸。

Difference Between "Authentication" and "Authorization"

Sat, 05 Jul 2025 00:00:00 GMT

Authentication and Authorization are two concepts in access control, representing the questions: Who are you? What are you allowed to do?

了解「验证」和「授权」的差别

Sat, 05 Jul 2025 00:00:00 GMT

验证（Authentication）与授权（Authorization）是存取控制中两个常被混淆的概念，背后分别代表两种问题：你是谁？你被允许做哪些事？同时也将介绍几种常见的授权模式，例如 RBAC 与 ABAC 管理授权。

瞭解「驗證」和「授權」的差別

Sat, 05 Jul 2025 00:00:00 GMT

驗證（Authentication）與授權（Authorization）是存取控制中兩個常被混淆的概念，背後分別代表兩種問題：你是誰？你被允許做哪些事？同時也將介紹幾種常見的授權模式，例如 RBAC 與 ABAC 管理授權。

How Jamstack Solves the Problems

Tue, 17 Jun 2025 00:00:00 GMT

To understand what problems the Jamstack architecture solves, we need to review the history of web evolution, emphasizing pre-generated static pages.

从网页演进看 Jamstack 如何解决传统架构的痛点

Tue, 17 Jun 2025 00:00:00 GMT

要了解 Jamstack 架构解决什么问题，需要先回顾网页演变的历史，从静态档案到动态伺服器渲染再到客户端渲染，Jamstack 的核心概念是强调预先生成静态页面并解耦商业逻辑与内容，以提高网站效能、弹性与安全性。适合大多数动态资料不多的网站。

從網頁演進看 Jamstack 如何解決傳統架構的痛點

Tue, 17 Jun 2025 00:00:00 GMT

要了解 Jamstack 架構解決什麼問題，需要先回顧網頁演變的歷史，從靜態檔案到動態伺服器渲染再到客戶端渲染，Jamstack 的核心概念是強調預先生成靜態頁面並解耦商業邏輯與內容，以提高網站效能、彈性與安全性。適合大多數動態資料不多的網站。

Fade in and out Content through CSS Pseudo Element

Mon, 16 Jun 2025 00:00:00 GMT

I found the my online resume a bit off, resulting in a lack of indication to scroll down. To achieve a fade-in style using CSS pseudo elements.

通过渐变伪元素淡入淡出可滚动内容

Mon, 16 Jun 2025 00:00:00 GMT

近期预览我的线上履历时发现阅读体验有点生硬，甚至最糟的情况下会裁到文字行间，导致没有任何提示指明可以继续往下滑动，这篇文章描述如何透过 CSS 伪元素达成卷动元素淡入的样式。这个样式我应用于自己的线上履历或 CodePen 范例可以参考看看。

透過漸層偽元素淡入淡出可捲動內容

Mon, 16 Jun 2025 00:00:00 GMT

近期預覽我的線上履歷時發現閱讀體驗有點生硬，甚至最糟的情況下會裁到文字行間，導致沒有任何提示指明可以繼續往下滑動，這篇文章描述如何透過 CSS 偽元素達成捲動元素淡入的樣式。這個樣式我應用於自己的線上履歷或 CodePen 範例可以參考看看。

Draggable Element to Make Website More Interactive and Fun

Thu, 05 Jun 2025 00:00:00 GMT

Initially inspired by the Glitch website's draggable features, I created a DOM API-based solution instead of using additional packages.

实作可拖动 DOM 元素增添网站互动与趣味性

Thu, 05 Jun 2025 00:00:00 GMT

最初是看到 Glitch 网站图示像冰箱磁铁可以随意挪动的功能觉得充满趣味，背后是使用 react-draggable 套件制作。不过考虑到速度与维护性，部落格不打算因为一页特效就引入额外套件，所以从头用 DOM API 手刻了相关功能。

實作可拖動 DOM 元素增添網站互動與趣味性

Thu, 05 Jun 2025 00:00:00 GMT

最初是看到 Glitch 網站圖示像冰箱磁鐵可以隨意挪動的功能覺得充滿趣味，背後是使用 react-draggable 套件製作。不過考慮到速度與維護性，部落格不打算因為一頁特效就引入額外套件，所以從頭用 DOM API 手刻了相關功能。

Connect Postgres with Drizzle ORM

Fri, 30 May 2025 00:00:00 GMT

Communicate with databases via SQL can lead to development efficiency and security issues. Usually we choose a suitable ORM for better development experience.

设置 Drizzle ORM 连接 Postgres 为例

Fri, 30 May 2025 00:00:00 GMT

单纯透过 SQL 与关联式资料库直接沟通，可能会带来开发效率与安全性的问题，因此挑选一款合适的 ORM 多一层抽象是常见的选择，而 Drizzle ORM 是我最常使用也是接触 ORM 的起点。它在 TypeScript 生态中有出色支援，虽然相对新颖，但社群活跃，值得一试。

設置 Drizzle ORM 連接 Postgres 為範例

Fri, 30 May 2025 00:00:00 GMT

單純透過 SQL 與關聯式資料庫直接溝通，可能會帶來開發效率與安全性的問題，因此挑選一款合適的 ORM 多一層抽象是常見的選擇，而 Drizzle ORM 是我最常使用也是接觸 ORM 的起點。它在 TypeScript 生態中有出色支援，雖然相對新穎，但社群活躍，值得一試。

Getting Started with Docker and Building Postgres

Mon, 26 May 2025 00:00:00 GMT

When I first in backend development, I struggled to effectively reproduce services for other developers until I found Docker.

初学 Docker 并轻松构建 Postgres

Mon, 26 May 2025 00:00:00 GMT

刚接触后端时我还不清楚如何有效重现服务供其他开发者使用，直到遇见 Docker 才大幅简化各种设施的维护与重现的工作，是一项非常高回报的实用技能，本篇从实做角度透过 Docker 建构 Postgres 服务，了解它的便捷快速。

初學 Docker 並輕鬆建構 Postgres

Mon, 26 May 2025 00:00:00 GMT

剛接觸後端時我還不清楚如何有效重現服務供其他開發者使用，直到遇見 Docker 才大幅簡化各種設施的維護與重現的工作，是一項非常高回報的實用技能，本篇從實做角度透過 Docker 建構 Postgres 服務，了解它的便捷快速。

SQL vs SQL Builder vs ORM

Sat, 24 May 2025 00:00:00 GMT

Interacting with RDB through SQL, SQL Builder, and ORM. Understanding their differences helps us make better choices for project needs.

与关系数据库对话：SQL vs SQL Builder vs ORM

Sat, 24 May 2025 00:00:00 GMT

开发网站无可避免的会和关联式资料库打交道，而互动的方式有三种：SQL、SQL Builder、ORM。这三者有着不同的使用方式、优缺点与适用场景，了解它们的差异能帮助我们做出更适合专案需求的技术选择。分享我在 Node.js 的学习经历。

與關聯式資料庫對話：SQL vs SQL Builder vs ORM

Sat, 24 May 2025 00:00:00 GMT

開發網站無可避免的會和關聯式資料庫打交道，而互動的方式有三種：SQL、SQL Builder、ORM。這三者有著不同的使用方式、優缺點與適用場景，了解它們的差異能幫助我們做出更適合專案需求的技術選擇。分享我在 Node.js 的學習經歷。

Improve 104 HR Service Website Menu Loading Experience

Wed, 21 May 2025 00:00:00 GMT

Recently, I frequently use Taiwan's most famous job platform: 104 Job Bank, where the personal data menu experience has potential issues worth exploring.

挑战改善 104 人力银行网站清单载入体验

Wed, 21 May 2025 00:00:00 GMT

近期很频繁使用到台湾最知名的求职平台：104 人力银行，其中个人资料选单的体验有潜在的问题值得挖掘。就目前 104 的体验对我来说没什么好抱怨的，就是最少这个 `0` 如果能改成 `-` 或 `载入中` 代表无资料都清楚得多阿！就和 `0` 与 `null` 一样，它们相近的意义是不同的。

挑戰改善 104 人力銀行網站清單載入體驗

Wed, 21 May 2025 00:00:00 GMT

近期很頻繁使用到臺灣最知名的求職平台：104 人力銀行，其中個人資料選單的體驗有潛在的問題值得挖掘。就目前 104 的體驗對我來說沒什麼好抱怨的，就是最少這個 `0` 如果能改成 `-` 或 `載入中` 代表無資料都清楚得多阿！就和 `0` 與 `null` 一樣，它們相近的意義是不同的。

How to deal with conflict effectively: Disagree and commit

Sun, 18 May 2025 00:00:00 GMT

Here's a guide on "Disagree and Commit". Encourage discussion, Set decision deadlines, Avoid criticism after decisions are made.

有效面對冲突的方式：不同意但致力

Sun, 18 May 2025 00:00:00 GMT

在团队中冲突是不可避免的，发现遇到太多次需要解释对于团队冲突的看法：「不同意但致力（Disagree and Commit）」，所以特别重复习一次并写成文章推广。 1. 鼓励讨论 2. 设立决策停损点 3. 不要事成定局后，方才提出意见或办法。

有效面對衝突的方式：不同意但致力

Sun, 18 May 2025 00:00:00 GMT

在團隊中衝突是不可避免的，發現遇到太多次需要解釋對於團隊衝突的看法：「不同意但致力（Disagree and Commit）」，所以特別重複習一次並寫成文章推廣。1. 鼓勵討論 2. 設立決策停損點 3. 不要事成定局後，方才提出意見或辦法。

Finite and Infinite Games and Gaming Impotence

Tue, 13 May 2025 00:00:00 GMT

To clarify my feelings of Gaming impotence, I recalled a book recommendation, "Finite and Infinite Games," which discusses two game concepts.

有限与无限游戏看待电子阳痿

Tue, 13 May 2025 00:00:00 GMT

为了厘清自己电子阳痿或对事情提不起兴趣的念头，一直回忆起某天偶然读到一本书的推荐《有限与无限的游戏》，里面提到世上有两种游戏的概念发现对于梳理看待「游戏观」是有帮助的。不幸的是，时间确实在流逝。时间飞快地流逝。过去在增加，未来在减少。可能性在减少，遗憾在增加。

有限與無限遊戲看待電子陽痿

Tue, 13 May 2025 00:00:00 GMT

為了釐清自己電子陽痿或對事情提不起興趣的念頭，一直回憶起某天偶然讀到一本書的推薦《有限與無限的遊戲》，裡面提到世上有兩種遊戲的概念發現對於梳理看待「遊戲觀」是有幫助的。不幸的是，時間確實在流逝。時間飛快地流逝。過去在增加，未來在減少。可能性在減少，遺憾在增加。

What is hreflang meta in i18n Website?

Mon, 12 May 2025 00:00:00 GMT

When creating multilingual websites, many focus on translation accuracy or switching locale experience, often overlooking the crucial SEO setting: `hreflang`.

多语言网站当中的 hreflang 是什么？

Mon, 12 May 2025 00:00:00 GMT

在打造多语系网站时，许多人会关注翻译的准确度或切换体验，但往往忽略了一个对 SEO 非常关键的设定：`hreflang`。正好最近把部落格和个人网站模板的多语系都调整完成，它们都是需要重视 SEO 的静态内容网站类型，其中的经验我纪录于这篇文章当中。

多語系網站當中的 hreflang 是什麼？

Mon, 12 May 2025 00:00:00 GMT

在打造多語系網站時，許多人會關注翻譯的準確度或切換體驗，但往往忽略了一個對 SEO 非常關鍵的設定：`hreflang`。正好最近把部落格和個人網站模板的多語系都調整完成，它們都是需要重視 SEO 的靜態內容網站類型，其中的經驗我紀錄於這篇文章當中。

Build a Minecraft Server on AWS EC2 Using Docker

Thu, 01 May 2025 00:00:00 GMT

Minecraft is one of the world's most famous sandbox games. This article explores the use of different technologies (AWS EC2, Docker) to set up a MC server.

使用 Docker 在 AWS EC2 上建构 Minecraft 服务器

Thu, 01 May 2025 00:00:00 GMT

Minecraft 是一款全世界最有名的沙盒游戏，早些年和朋友一起游玩这款游戏时连线的方式还是于个人电脑区域网路（LAN）连线，使用 Hamachi 模拟区域网路达成连线，但很明显有各式各样的局限性。这篇文章探讨藉由不同的技术（AWS EC2、Docker）实现快速自建 MC 伺服器的目的。

使用 Docker 在 AWS EC2 上建構 Minecraft 伺服器

Thu, 01 May 2025 00:00:00 GMT

Minecraft 是一款全世界最有名的沙盒遊戲，早些年和朋友一起遊玩這款遊戲時連線的方式還是於個人電腦區域網路（LAN）連線，使用 Hamachi 模擬區域網路達成連線，但很明顯有各式各樣的侷限性。這篇文章探討藉由不同的技術（AWS EC2、Docker）實現快速自建 MC 伺服器的目的。

Monitor Website Performance by Self-Host Lighthouse Server

Mon, 28 Apr 2025 00:00:00 GMT

Self-hosting Lighthouse allows for long-term tracking of best practices. As it enhances the team's awareness regarding code quality over time.

Setting Up Uptime Kuma to Monitor Service Uptime

Mon, 28 Apr 2025 00:00:00 GMT

Maintenance becomes challenging. How to ensure your servers are working properly? Uptime Kuma is a free monitoring tool that can help.

自建 Lighthouse 服务器实现持续监控网站最佳实践

Mon, 28 Apr 2025 00:00:00 GMT

在先前的文章提到如何使用 Lighthouse 这款工具监控前端大大小小的最佳实践，例如：效能、SEO、适用性……等能被客观测量比较的数值，虽然很方便但你可能会希望自架 Lighthouse 服务，以便实现：搜集与管理自己的隐私资料、持续性监控同个网站的检测资料、减少依赖第三方伺服器服务。

设置 Uptime Kuma 监控服务在线状态

Mon, 28 Apr 2025 00:00:00 GMT

随着服务增多也出现了维护上的困难，要如何知道自己与第三方的伺服器有好好在运作？可以额外再开设一个伺服器再去专门监控其他伺服器的状态，而 Uptime Kuma 就是一款开源免费的监控工具。我用它来监控所有对外的服务确保在第一时间出问题或服务时好时坏时能得知并着手修理，算是一个简单但实用的好工具，展开监测服务的第一步。

自架 Lighthouse 伺服器實現持續監控網站最佳實踐

Mon, 28 Apr 2025 00:00:00 GMT

在先前的文章提到如何使用 Lighthouse 這款工具監控前端大大小小的最佳實踐，例如：效能、SEO、適用性……等能被客觀測量比較的數值，雖然很方便但你可能會希望自架 Lighthouse 服務，以便實現：蒐集與管理自己的隱私資料、持續性監控同個網站的檢測資料、減少依賴第三方伺服器服務。

設置 Uptime Kuma 監控服務在線狀態

Mon, 28 Apr 2025 00:00:00 GMT

隨著服務增多也出現了維護上的困難，要如何知道自己與第三方的伺服器有好好在運作？可以額外再開設一個伺服器再去專門監控其他伺服器的狀態，而 Uptime Kuma 就是一款開源免費的監控工具。我用它來監控所有對外的服務確保在第一時間出問題或服務時好時壞時能得知並著手修理，算是一個簡單但實用的好工具，展開監測服務的第一步。

Frontend Storage - Cookie vs LocalStorage vs SessionStorage

Sun, 20 Apr 2025 00:00:00 GMT

There are several browser storage solutions you must know, with key differences in capacity, expiration settings, interaction with the server, and more.

前端必知的存储方案：Cookie vs LocalStorage vs SessionStorage

Sun, 20 Apr 2025 00:00:00 GMT

身在前端有几个必须知道的浏览器存储方案，重点差异在于：容量上限、有效期限设置、是否与服务器互动，各自有不同的特性适合运用在不同场景。之外也有许多延伸的问题如： Cookie 与法规、资安漏洞防范相关设置、除存字符串以外的数据结构。

前端必知的存儲方案：Cookie vs LocalStorage vs SessionStorage

Sun, 20 Apr 2025 00:00:00 GMT

身在前端有幾個必須知道的瀏覽器存儲方案，重點差異在於：容量上限、有效期限設置、是否與伺服器互動，各自有不同的特性適合運用於不同場景。之外也有許多延伸的問題如： Cookie 與法規、資安漏洞防範相關設定、除存字串以外的資料結構。

Should I Guess Answer on the Test?

Fri, 18 Apr 2025 00:00:00 GMT

While discussing test questions in interviews with friends, I encountered the view that it’s better to leave blanks than to guess.

面试时不懂应该猜答案吗？为什么？

Fri, 18 Apr 2025 00:00:00 GMT

近期在面试考一些常见逻辑测验题目而在与朋友对谈到这件事的过程中，发现一种观点是「时间到也宁愿留白也不要乱填」，以免被发现了仰赖运气不懂装懂又要解释。我很讶异自己当过多年的学生，却是第一次反思这项行为背后的动机与取舍。人的偏见不是那么轻松就能够改变的，但透过思考能更明白自己是否知行合一。

面試時不懂應該猜答案嗎？為什麼？

Fri, 18 Apr 2025 00:00:00 GMT

近期在面試考一些常見邏輯測驗題目而在與朋友對談到這件事的過程中，發現一種觀點是「時間到也寧願留白也不要亂填」，以免被發現了仰賴運氣不懂裝懂又要解釋。我很訝異自己當過多年的學生，卻是第一次反思這項行為背後的動機與取捨。人的偏見不是那麼輕鬆就能夠改變的，但透過思考能更明白自己是否知行合一。

Utilize OG Edge Functions Reduced 90% OG Build Time

Wed, 16 Apr 2025 00:00:00 GMT

As the number of blog posts increases, the pressure on static generation rises, specifically about 10 minutes spent generating images for previews.

使用 Edge Function 生成 OG 图，构建时间缩短 90%

Wed, 16 Apr 2025 00:00:00 GMT

随着博客文章逐渐增多，静态生成压力也随之上升，例来说在日常开发会需要近 10 分钟的时间，大多是生成图片占据大多时间，建构预览图的数量是：`(语言 x 文章数量)`。延续最大程度的静态渲染是合理的选择，而针对 OG 图片渲染可以包成 Serverless Function 在需要时呼叫。

使用 Edge Function 生成 OG 圖，建構時間縮短 90%

Wed, 16 Apr 2025 00:00:00 GMT

隨著部落格文章逐漸增多，靜態生成壓力也隨之上升，舉例來說在日常開發會需要花費近 10 分鐘的時間，大多是生成圖片佔據大多時間，建構預覽圖的數量是：`(語言 x 文章數量)`。延續最大程度的靜態渲染是合理的選擇，而針對 OG 圖片渲染可以包成 Serverless Function 在需要時呼叫。

SEO Knowledge Related to HTML Anchor Tag

Mon, 07 Apr 2025 00:00:00 GMT

Search engines rely on the `` tags in HTML documents to understand the relationships between pages and to score them accordingly.

关于 HTML 锚点标签  相关的 SEO 知识

Mon, 07 Apr 2025 00:00:00 GMT

了解 `` 是网页资源相互连接、搜索引擎排序判断的关键，甚至与资安也有一定的关联，对于 SEO 与前端来说是必须了解的知识点之一。搜索引擎依赖 HTML 文件中的 `` 标签了解页面之间的关联并进而评分，理解 `` 能够更好地处理与标识页面与页面之间的关系。

關於 HTML 錨點標籤  相關的 SEO 知識

Mon, 07 Apr 2025 00:00:00 GMT

了解 `` 是網頁資源相互連結、搜尋引擎排序判斷的關鍵，甚至與資安也有一定的關聯，對於 SEO 與前端來說是必須了解的知識點之一。搜尋引擎仰賴 HTML 文件中的 `` 標籤了解頁面之間的關聯並進而評分，理解 `` 能夠更好的處理與標示頁面與頁面之間的關係。

Important Concepts for Beginners in n8n

Thu, 03 Apr 2025 00:00:00 GMT

Recently, while trying out n8n, I encountered quite a few troubles. However, after resolving the issues, I felt that they were small problems.

n8n 几个初学最重要的概念

Thu, 03 Apr 2025 00:00:00 GMT

近期在尝试 n8n 时碰上了不少麻烦，但在问题解决后觉得其实也不是什么太大的问题但就是莫名的卡住流失了许多时间，我踩过的坑或许也是你踩过的坑。这篇文章适合像我一样没特别看文件直接跳进去玩的开发者，后续细读文件反省把问题都列出来。

n8n 幾個初學最重要的概念

Thu, 03 Apr 2025 00:00:00 GMT

近期在嘗試 n8n 時碰上了不少麻煩，但在問題解決後覺得其實也不是什麼太大的問題但就是莫名的卡住流失了許多時間，我踩過的坑或許也是你踩過的坑。這篇文章適合像我一樣沒特別看文件直接跳進去玩的開發者，後續細讀文件反省把問題都列出來。

Integrate Different Git Repositories (Symink, Submodule)

Wed, 02 Apr 2025 00:00:00 GMT

The website's content are recorded in Git. This decision has its pros and cons, As the project matures, I've decided to separate the two.

整合不同 Git 仓库在一起（符号链接、Git 子模块）

Wed, 02 Apr 2025 00:00:00 GMT

网页东东至今仍完全以本地为主，所有代码、字体、图片影片与文章内容都记录于 Git 当中，并通过 Git LFS 来管理大文件。这样的决定有好有坏，其中一个问题便是内容与代码的耦合高，任何一个想维护的人要把我撰写的几百篇文章连带抓下来 😅，随着项目成熟我决定要将两者分离。

整合不同 Git 倉庫在一起（Symbolic Link、Git Submodule）

Wed, 02 Apr 2025 00:00:00 GMT

網頁東東至今仍完全以本地為主，所有代碼、字體、圖片影片與文章內容都紀錄於 Git 當中，並透過 Git LFS 來管理大檔案。這樣的決定有好有壞，其中一個問題便是內容與代碼的耦合高，任何一個想維護的人要把我撰寫的幾百篇文章連帶抓下來 😅，隨著專案成熟我決定要將兩者分離。

Feedback Loop for AI with n8n Human in the Loop

Mon, 31 Mar 2025 00:00:00 GMT

Restarting the entire AI process can be very time-consuming and costly. We can add human feedback, modifying prompts repeatedly until we are satisfied.

n8n Human in the Loop 替 AI 流程建構反饋

Mon, 31 Mar 2025 00:00:00 GMT

近期在琢磨刚玩上手的 n8n 的各式功能，其中在制作 AI 流程时发现如果其中一个环节不如预期整个流程重来十分的耗费时间与金钱，这时候我们就可以添加上人类的反馈，重复的修改提示词直到满意为止。在制作文章研究生成 AI 时我也运用了相关功能来达成与 AI 沟通动态调整需求的目的。

n8n Human in the Loop 替 AI 流程建構反饋

Mon, 31 Mar 2025 00:00:00 GMT

近期在琢磨剛玩上手的 n8n 的各式功能，其中在製作 AI 流程時發現如果其中一個環節不如預期整個流程重來十分的耗費時間與金錢，這時候我們就可以添加上人類的反饋，重複的修改提示詞直到滿意為止。在製作文章研究生成 AI 時我也運用了相關功能來達成與 AI 溝通動態調整需求的目的。

Start Build a n8n Feedback Form

Thu, 20 Mar 2025 00:00:00 GMT

n8n is a low-code / no-code solution that helps anyone quickly implement automation. This tutorial demonstrates through a simple integration.

简单自架 n8n 回馈表单小试水深

Thu, 20 Mar 2025 00:00:00 GMT

近期在熟悉 n8n 流程自动化的工具，发现值得推荐给任何人（特别是软件工程师）n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。

簡單自架 n8n 回饋表單小試水深

Thu, 20 Mar 2025 00:00:00 GMT

近期在熟悉 n8n 流程自動化的工具，發現值得推薦給任何人（特別是軟體工程師）n8n 算是一種 low-code / no-code 解決方案可以幫助任何人透過現有的整合來快速實踐流程自動化的目的。這次教學透過簡單的串接 Google 服務來展現它的靈活性和強大功能。

Quickly Generate Diagrams with Mermaid

Wed, 05 Mar 2025 00:00:00 GMT

I explored using Mermaid to generate diagrams. It's a tool that supports various types of diagrams, allowing us to focus on content rather than chart creation.

使用 Mermaid 通过文字快速生成图表

Wed, 05 Mar 2025 00:00:00 GMT

近期工作顺代研究到使用 Mermaid 来快速生成图表，这是一个很方便的工具，可以快速生成各种图表，例如流程图、心智图、圆饼图……等，你能想到的图表基本都有支援。大致纪录一下选择这项技术的原因以及使用上的心得。 Mermaid 与 AI 结合完美的免去了复杂度，让我们能够更专注在内容上，而不是花太多时间在制作图表上。

使用 Mermaid 透過文字快速生成圖表

Wed, 05 Mar 2025 00:00:00 GMT

近期工作順代研究到使用 Mermaid 來快速生成圖表，這是一個很方便的工具，可以快速生成各種圖表，例如流程圖、心智圖、圓餅圖……等，你能想到的圖表基本都有支援。大致紀錄一下選擇這項技術的原因以及使用上的心得。Mermaid 與 AI 結合完美的免去了複雜度，讓我們能夠更專注在內容上，而不是花太多時間在製作圖表上。

Slidev: A Web-Based Presentation Creation Solution

Mon, 24 Feb 2025 00:00:00 GMT

Recently, I researched using Slidev for presentations, a web-based tool integrating various packages to create presentations easily, built on Vite + Vue3.

Slidev：基于网页的简报创作方案

Mon, 24 Feb 2025 00:00:00 GMT

近期工作研究到使用 Slidev 来呈现简报，一个基于 Vite + Vue3 的简报工具整合了大大小小的套件方便用网页创作简报，主要以 Markdown 来撰写内容，这样的方式让我们可以专注在内容上，而不用花太多时间在花俏的简报软体操作。

Slidev：基於網頁的簡報創作方案

Mon, 24 Feb 2025 00:00:00 GMT

近期工作研究到使用 Slidev 來呈現簡報，一個基於 Vite + Vue3 的簡報工具整合了大大小小的套件方便用網頁創作簡報，主要以 Markdown 來撰寫內容，這樣的方式讓我們可以專注在內容上，而不用花太多時間在花俏的簡報軟體操作。

Create Accordion with Details and Summary (with Animation!)

Tue, 18 Feb 2025 00:00:00 GMT

The HTML `

` and `

` syntax helps achieve accordion quickly, along with interpolate-size and transition-behavior for smooth animations.

使用 Details 与 Summary 制作原生手风琴 (含收合动画！)

Tue, 18 Feb 2025 00:00:00 GMT

手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法

和

使用 Details 與 Summary 製作原生手風琴 (含收合動畫！)

Tue, 18 Feb 2025 00:00:00 GMT

手風琴是一種常見的網頁 UI 模式，通常是一系列垂直堆疊的標題可以用於展開收合顯示不同資訊，在 HTML 當中有項新穎的語法

和

Optimizing Assets (preload/fetch/dns-prefetch/preconnect)

Sat, 15 Feb 2025 00:00:00 GMT

I was asked about a SPA I created and its poor image loading experience. I shared all my thoughts, but lacked confidence in my answers.

使用 preload、prefetch、dns-prefetch、preconnect 最佳化资源加载顺序！

Sat, 15 Feb 2025 00:00:00 GMT

先前面试时面试官询问到我早期制作的一个 SPA 网站在换页后图片载入体验不太好的问题，当时我把脑袋能想的所有答案都提出来了😅，最终有答到一点边缘知识，但太少用所以回答的不是很确定，因此这次来补齐这方面浏览器提供的机制，主要介绍浏览器如何处理安排资源的加载。

使用 preload、prefetch、dns-prefetch、preconnect 最佳化資源載入順序！

Sat, 15 Feb 2025 00:00:00 GMT

先前面試時面試官詢問到我早期製作的一個 SPA 網站在換頁後圖片載入體驗不太好的問題，當時我把腦袋能想的所有答案都提出來了😅，最終有答到一點邊緣知識，但太少用所以回答的不是很確定，因此這次來補齊這方面瀏覽器提供的機制，主要介紹瀏覽器如何處理安排資源的加載。

後端入門可以了解的資料庫概念

Fri, 17 Jan 2025 00:00:00 GMT

資料庫就是一個儲存資料的軟體，根據儲存資料性質不同，合適的資料庫種類也會不同。了解 Transaction、ACID、Normalization……等核心概念非常重要。還有更多可以深掘的細節，先單純把學到的知識紀錄一下，未來個別用更多文章詳細描述 :)

Build a Membership System with Express.js Session

Fri, 27 Dec 2024 00:00:00 GMT

Due to HTTP being stateless, users need to re-validate on each login action. A solution is for the server to create a session upon request.

使用 Express.js Session 实作会员系统

Fri, 27 Dec 2024 00:00:00 GMT

依照先前的教学我们已经可以创建基本的CRUD 程式，但基于HTTP 是无状态的协议，如果单纯实作会员系统用户将会需要在每次操作登入会员相关的行为时重复验证，明显是糟糕的使用体验。一种解决方案是在请求时伺服器将会建立 Session。

使用 Express.js Session 實作會員系統

Fri, 27 Dec 2024 00:00:00 GMT

依照先前的教學我們已經可以創建基本的 CRUD 程式，但基於 HTTP 是無狀態的協議，如果單純實作會員系統用戶將會需要在每次操作登入會員相關的行為時重複驗證，明顯是糟糕的使用體驗。一種解決方案是在請求時伺服器將會建立 Session。

How to Build a Awesome Frontend Project in 2025

Mon, 23 Dec 2024 00:00:00 GMT

Few tutorials cover how to build a complete project. This is how I would build a Vue project from scratch in 2025!

如何架构一个超赞的前端专案于 2025 年 (feat. Vue)

Mon, 23 Dec 2024 00:00:00 GMT

随着前端演进，我们时常需要依靠现成的框架轮子协助，而其中Vue 又是继React 外第二热门且成熟的选项，但很少有教学提到一个完整的专案该如何建构，以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案，在 2025 年！

如何架構一個超讚的前端專案於 2025 年 (feat. Vue)

Mon, 23 Dec 2024 00:00:00 GMT

隨著前端演進，我們時常需要依靠現成的框架輪子協助，而其中 Vue 又是繼 React 外第二熱門且成熟的選項，但很少有教學提到一個完整的專案該如何建構，以及有哪些模式可以遵循。這次來介紹一下如果從頭開始我會怎麼建構一個 Vue 專案，在 2025 年！

Express.js Connects to MySQL to Implement Book App

Sat, 14 Dec 2024 00:00:00 GMT

The previous series discussed creating a simple CRUD App with Express.js using MVC. This time, connect the backend to a local MySQL.

Express.js 串接 MySQL 实作书本管理 App

Sat, 14 Dec 2024 00:00:00 GMT

先前系列提到使用 Express.js 简单的创造一个 CRUD App 并用 MVC 分层，这次流程差不多，目标是把后端接上本地的 MySQL 服务器并使用 MySQL2，一个专为 Node.js 应用设计的 MySQL 数据库连接工具。

Express.js 串接 MySQL 實作書本管理 App

Sat, 14 Dec 2024 00:00:00 GMT

先前系列提到使用 Express.js 簡單的創造一個 CRUD App 並用 MVC 分層，這次流程差不多，目標是把後端接上本地的 MySQL 伺服器並使用 MySQL2，一個專為 Node.js 應用設計的 MySQL 資料庫連接工具。

Auto Publish TypeScript Package with Semver to NPM

Wed, 11 Dec 2024 00:00:00 GMT

When using packages, one often wonders about the general process of managing package development. So I write the process of publish a TS package

撰写自动化发布语义化版本 TypeScript NPM 套件

Wed, 11 Dec 2024 00:00:00 GMT

使用套件时总是会好奇一般管理套件开发的流程是如何？我通过 Matt Pocock 的 Blazing Fast Tips: Publishing to NPM 教学视频顺手实作了一次，并且把自己之前遇过的需求写成一个独立的 TS 套件公开发布：edit-element。

撰寫自動化發布語意化版本 TypeScript NPM 套件

Wed, 11 Dec 2024 00:00:00 GMT

使用套件時總是會好奇一般管理套件開發的流程是如何？我透過 Matt Pocock 的 Blazing Fast Tips: Publishing to NPM 教學影片順手實作了一次，並且把自己之前遇過的需求寫成一個獨立的 TS 套件公開發布：edit-element。

Building Express.js project by Utilizing MVC Pattern

Fri, 29 Nov 2024 00:00:00 GMT

Express provides elegant APIs for handling requests, but having all code in one app.js is not ideal. Utilizing MVC architecture for better maintainability.

Express.js 入门构建 MVC 示例

Fri, 29 Nov 2024 00:00:00 GMT

Express 提供便捷优雅的API 让我们接收请求经过处理后回应，但会发现随着规模庞大起来路径、商业逻辑、资料……等代码都塞在一个 app.js 实在不是一个好做法，于是这篇文章介绍使用MVC 架构替代码进行用途上的切割，以方便维护。

Express.js 入門建構 MVC 範例

Fri, 29 Nov 2024 00:00:00 GMT

Express 提供便捷優雅的 API 讓我們接收請求經過處理後回應，但會發現隨著規模龐大起來路徑、商業邏輯、資料……等代碼都塞在一個 app.js 實在不是一個好做法，於是這篇文章介紹使用 MVC 架構替代碼進行用途上的切割，以方便維護。

Creating a Simple CRUD Todo List with Express.js

Mon, 25 Nov 2024 00:00:00 GMT

Express.js is the closest framework to frontend, ideal for full-stack engineers to quickly engage with both fields. Let's build a simple in-memory todo backend

Express.js 入门造个简单的增删查改待办事项

Mon, 25 Nov 2024 00:00:00 GMT

Express.js 入門造個簡單的增刪查改待辦事項

Mon, 25 Nov 2024 00:00:00 GMT

前端需要知道的無障礙網頁

Tue, 12 Nov 2024 00:00:00 GMT

近期看到 Web Dev Simplified 推出的教學促使我趕緊打開這篇文章記錄其中提到的網頁無障礙需要留意的地方，並且補充上一些我自己實驗有幫助的資訊。無障礙一直是我想重視但實際開發時優先順序總是排在最後的要求，差勁的無障礙對某些使用者來說會嚴重影響到網頁互動的體驗，身為前端讓網頁保持良好的無障礙是基本責任。

Why Object.keys returns string[] in TypeScript

Tue, 05 Nov 2024 00:00:00 GMT

TypeScript `Object.keys` returning `string[]` for object. Let's explores the reasons and provides solutions for different scenarios.

为什么 TypeScript 中 Object.keys 返回 string[] 型别？

Tue, 05 Nov 2024 00:00:00 GMT

TypeScript 存在一些不太直觉但背后却有合理因素的问题要留意，像是无论传入任何对象进 `Object.keys` 都仍会返回 `string[]` 型别是其中之一，本文探讨背后因素与提供不同方向的解套方法供不同情境使用。

為什麼 TypeScript 中 Object.keys 返回 string[] 型別？

Tue, 05 Nov 2024 00:00:00 GMT

TypeScript 存在一些不太直覺但背後卻有合理因素的問題要留意，像是無論傳入任何物件進 `Object.keys` 都仍會回傳 `string[]` 型別是其中之一，本文探討背後因素與提供不同方向的解套方法供不同情境使用。

How I write GitHub profile

Wed, 25 Sep 2024 00:00:00 GMT

"How to write a GitHub profile" is like "How developers create their business cards." Profile is the first impression.

如何编写 GitHub 个人档案

Wed, 25 Sep 2024 00:00:00 GMT

「如何编写 GitHub 个人档案」这个问题其实就像是「开发者怎么制作自己的名片」，毕竟对你感兴趣的人来说 GitHub 个人档案就是第一印象，所以可以斟酌放些「你热爱参与的专案或展示专业」基本不会错。像我有热情持续经营展现技术博客那就放上最大篇幅去介绍，把作品、博客或履历放上。

如何編寫 GitHub 個人檔案

Wed, 25 Sep 2024 00:00:00 GMT

「如何編寫 GitHub 個人檔案」這個問題其實就像是「開發者怎麼製作自己的名片」，畢竟對你感興趣的人來說 GitHub 個人檔案就是第一印象，所以可以斟酌放些「你熱愛參與的專案或展示專業」基本不會錯。像我有熱情持續經營展現技術部落格那就放上最大篇幅去介紹，把作品、部落格或履歷放上。

Build a Cinema Seats Layout by using CSS Grid and Form

Thu, 19 Sep 2024 00:00:00 GMT

Let's build a cinema seats layout! It's an interesting Frontend problem that required a comprehensive understanding to solve.

CSS Grid 与表单实现电影院座位选位系统

Thu, 19 Sep 2024 00:00:00 GMT

之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？

CSS Grid 與表單實作電影院座位選位系統

Thu, 19 Sep 2024 00:00:00 GMT

之前碰到一道有趣的前端 UI 題，發現需要對於前端有較為全面的認知才有辦法解出來，並且也可以針對感興趣的領域延伸提出更更多問題，於是特地紀錄一下我的思考解題過程。身為一名前端工程師，你會怎麼實作上圖的電影院座位選位系統？

Intersection Observer 真實案例：自動更新目錄

Mon, 16 Sep 2024 00:00:00 GMT

近期製作到內容大綱（Table of Contents）相關的功能，發現是一個很適合使用 Intersection Observer 的案例，透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗，現在這樣的需求就變得更加容易實現。

Real Use Case of CSS Grid: Extended Sidebar

Sun, 15 Sep 2024 00:00:00 GMT

Real-world web pages rarely require CSS Grid for special visuals. This article helps deepen understanding of CSS Grid through real-world cases.

CSS Grid 真实案例：凸出的侧栏

Sun, 15 Sep 2024 00:00:00 GMT

实际网页很少遇到特殊的视觉会需要动用到 CSS Grid 的情况，而我近期在制作一些比较特殊视觉的网页布局，事后感觉特别适合作为一个 CSS Grid 的启发教材，于是写下了本篇文章帮助透过真实世界案例更深刻了解 CSS Grid。

CSS Grid 真實案例：凸出的側欄

Sun, 15 Sep 2024 00:00:00 GMT

實際網頁很少遇到特殊的視覺會需要動用到 CSS Grid 的情況，而我近期在製作一些比較特殊視覺的網頁布局，事後感覺特別適合作為一個 CSS Grid 的啟發教材，於是寫下了本篇文章幫助透過真實世界案例更深刻了解 CSS Grid。

CORS for Web Developer

Mon, 02 Sep 2024 00:00:00 GMT

CORS (Cross-Origin Resource Sharing) is a mechanism that determines whether a web page can access resources from other origins.

写给网页开发者的 CORS 理解

Mon, 02 Sep 2024 00:00:00 GMT

CORS (Cross-Origin Resource Sharing) 跨来源资源共享，是一个机制用来决定网页是否能够存取其他来源的资源，能有效防止不同来源之间的不正当资源存取。透过 CORS，可以在保护用户资料的同时，允许合法的跨来源请求。

寫給網頁開發者的 CORS 理解

Mon, 02 Sep 2024 00:00:00 GMT

CORS (Cross-Origin Resource Sharing) 跨來源資源共享，是一個機制用來決定網頁是否能夠存取其他來源的資源，能有效防止不同來源之間的不正當資源存取。透過 CORS，可以在保護用戶資料的同時，允許合法的跨來源請求。

Let's solve FizzBuzz! Detailed problem-solving process

Sun, 01 Sep 2024 00:00:00 GMT

This time, I describe how to solve the problem by breaking down the FizzBuzz. It covers everything from basic solutions to advance you might need to aware.

解决 FizzBuzz 的详细思路

Sun, 01 Sep 2024 00:00:00 GMT

这次我透过一步一步拆解解题路径来描述如何解题。从基本解到分离资料与逻辑、保持 immutable 以及边缘案例还有文件编写都有涵盖。打印出 1 到 100 的数字、假如数字是 3 的倍数，则打印 Fizz、假如数字是 5 的倍数，则打印 Buzz、假如数字是 3 和 5 的公倍数，则打印 FizzBuzz。

來解 FizzBuzz 吧！附詳細解題思路

Sun, 01 Sep 2024 00:00:00 GMT

這次我透過一步一步拆解解題路徑來描述如何解題。從基本解到分離資料與邏輯、保持 immutable 以及邊緣案例還有文件編寫都有涵蓋。打印出 1 到 100 的數字、假如數字是 3 的倍數，則打印 Fizz、假如數字是 5 的倍數，則打印 Buzz、假如數字是 3 和 5 的公倍數，則打印 FizzBuzz。

CSRF for Web Developer

Sat, 31 Aug 2024 00:00:00 GMT

Regardless, one should never easily trust user requests to prevent CSRF. I've recently found my knowledge in this area lacking, so I'm catching up.

写给网页开发者的 CSRF 理解与防范

Sat, 31 Aug 2024 00:00:00 GMT

无论如何都不轻易相信用户请求即能最大程度防范 CSRF。最近在碰一些资安的东东，发现自己对于这一块知识都比较薄弱，身为前端工程师资安通常并不是首要关注的职责，但一但有漏洞保证后果不堪设想，于是近期来补足一下这方面的知识。

寫給網頁開發者的 CSRF 理解與防範

Sat, 31 Aug 2024 00:00:00 GMT

無論如何都不輕易相信用戶請求即能最大程度防範 CSRF。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。

XSS for Web Developer

Fri, 30 Aug 2024 00:00:00 GMT

The summary is to never easily trust user input to prevent XSS to the greatest extent. Recently, I found my knowledge in this area lacking.

写给网页开发者的 XSS 理解与防范

Fri, 30 Aug 2024 00:00:00 GMT

总结是无论如何都不轻易相信用户输入即能最大程度防范 XSS。最近在碰一些资安的东东，发现自己对这一块知识都比较薄弱，身为前端工程师资安通常并不是首要关注的职责，但一旦有漏洞保证后果不堪设想，于是近期来补足一下这方面的知识。现代齐全的工具与文件帮助下意外执行用户提供的恶意脚本的概率已经大幅降低。

寫給網頁開發者的 XSS 理解與防範

Fri, 30 Aug 2024 00:00:00 GMT

總結是無論如何都不輕易相信用戶輸入即能最大程度防範 XSS。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。現代齊全的工具與文件幫助下意外執行用戶提供的惡意腳本的機率已經大幅降低。

How to Manage Utility Functions

Wed, 14 Aug 2024 00:00:00 GMT

I found many common functions scattered throughout the project. So, I took the opportunity to organize a unified structural rule for the team to use.

如何管理工具函数

Wed, 14 Aug 2024 00:00:00 GMT

近期维护项目时发现有许多通用的函数散乱的分布在项目当中，于是趁有空时整理出一个统一的结构规则以便团队使用。很多时候我们对这些通用工具函数的印象只停留在要抽离到某个文件夹，至于要怎么管理或是维护这些函数就没有太多想法，导致许多乱象产生，像是：过度抽象、意义不明的命名、神级函数。

如何管理工具函式

Wed, 14 Aug 2024 00:00:00 GMT

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

What is Barrel File?

Tue, 30 Jul 2024 00:00:00 GMT

Vite does not perform Tree Shake during development, leading to a lot of unused code being bundled, severely affecting the development experience.

什么是桶文件（Barrel File）模式？

Tue, 30 Jul 2024 00:00:00 GMT

我之所以调查这个主题，是因为目前所在的团队大量使用这种模式，但 Vite 在开发中不进行 Tree Shake，导致每次开发环境都有大量无用代码被打包，严重影响开发体验。因此研究一下这种方法的理念与优缺点以架构更好的项目。

什麼是桶文件（Barrel File）模式？

Tue, 30 Jul 2024 00:00:00 GMT

會想調查這個主題是因為目前所在的團隊大量地使用到這樣的模式，但 Vite 並不會在開發中進行 Tree Shake 就導致每一次開發環境都有大量的無用代碼被打包進去，嚴重影響到開發體驗。因此研究一下這種方法的理念與優缺點以架構更好的專案。

Map vs WeakMap in JavaScript

Mon, 29 Jul 2024 00:00:00 GMT

I previously wrote an article about the built-in data structure in ES6 JavaScript: Map. This time, let's discuss WeakMap and how it differs from Map.

了解了 JavaScript Map，但 WeakMap 又是什么东西？

Mon, 29 Jul 2024 00:00:00 GMT

前面写了一篇文章关于 ES6 JavaScript 当中的内建数据结构： Map，这次来谈谈 WeakMap，它又与 Map 有什么不同呢？会发现 WeakMap 相较 `Map` 少了非常多可用的方法，这是因为它们的根本处理数据的方式不同，Map 是强引用，而 WeakMap 是弱引用。

了解了 JavaScript Map，但 WeakMap 又是什麼東西？

Mon, 29 Jul 2024 00:00:00 GMT

前面寫了一篇文章關於 ES6 JavaScript 當中的內建資料結構： Map，這次來談談 WeakMap，它又與 Map 有什麼不同呢？會發現 WeakMap 相較 `Map` 少了非常多可用的方法，這是因為它們的根本處理資料的方式不同，Map 是強引用，而 WeakMap 是弱引用。

Future of the Web - Native Web Components

Sat, 27 Jul 2024 00:00:00 GMT

Browsers began to introduce Web Components related APIs and standards, but I never had the chance to use this technology in practice.

了解网页组件化的未来：Web Components

Sat, 27 Jul 2024 00:00:00 GMT

从很早以前就大致知道浏览器开始推出 Web Components 相关 API 与标准，但一直没有机会在实战中使用这项技术。想撰写这篇文章记录是因为随着时间推移发现 Web Components 的应用范围越来越广，因此趁着有空也来了解一下相关知识，并且分析它与现有的解决方案有什么不同。

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

Sat, 27 Jul 2024 00:00:00 GMT

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

Why Should We Test Software?

Mon, 22 Jul 2024 00:00:00 GMT

Recently, I've set higher expectations for my programming, and testing has become a crucial area. But does a working program mean testing is unnecessary?

为什么要替软件进行测试？

Mon, 22 Jul 2024 00:00:00 GMT

近期我对自己看待撰写程式这件事有更高的期许，除了最基本的效能、阅读性、扩充性……之外还有一个非常重要的领域就是：测试。不过程式好端端的能动就代表测试没有必要了吗？在我刚工作时实际上做了一段时间的自动化 QA 工程一段时间，不过那时候的我其实也并不明白写测试的原因，就是有程式就拿来自动化测试，并没有想太多。

為什麼要替軟體進行測試？

Mon, 22 Jul 2024 00:00:00 GMT

近期我對自己看待撰寫程式這件事有更高的期許，除了最基本的效能、閱讀性、擴充性……之外還有一個非常重要的領域就是：測試。不過程式好端端的能動就代表測試沒有必要了嗎？在我剛工作時實際上做了一段時間的自動化 QA 工程一段時間，不過那時候的我其實也並不明白寫測試的原因，就是有程式就拿來自動化測試，並沒有想太多。

Map in ES6 JavaScript

Wed, 17 Jul 2024 00:00:00 GMT

There is a data structure in JavaScript ES6 similar to objects that I have never fully understood. — Map. Let's compare objects with Map.

了解 ES6 JavaScript 中的内建数据结构： Map

Wed, 17 Jul 2024 00:00:00 GMT

JavaScript ES6 中有一个用法与对象近似的数据结构我一直不是很清楚用途。—— Map，这篇文章将比较常见的对象与 Map，以辨别 Map 的特性与使用时机。总的来说可以把 Map 当作是用来频繁读写的对象，它具备更好的性能、更明确的语法。

了解 ES6 JavaScript 當中的內建資料結構： Map

Wed, 17 Jul 2024 00:00:00 GMT

JavaScript ES6 中有一個用法與物件近似的資料結構我一直不是很清楚用途。 —— Map，這篇文章會主要拿熟知常見的物件與 Map 來做比較以分辨出 Map 的特性與使用時機。總結來說可以把 Map 當作是用來頻繁讀寫的物件，它具備更好的性能、更明確的語法。

Why is Time Estimating Hard

Sat, 13 Jul 2024 00:00:00 GMT

I often just see problems and try to solve them. But if a project is on fire and the manager sets an unrealistic timeline, how do you explain it?

为什么项目时间预估这么难？具体可以如何解决时程预判问题

Sat, 13 Jul 2024 00:00:00 GMT

发现身为初阶打工人其实通常只是看见问题并拼命解决它，但换个角度思考：“如果现在手上项目烧起来，主管定个超乎预期的时程但你也没有自己一套说法，要如何交代？”，最贴近实作的人其实是最能开出真实预估的人。参考：The work is never just “the work” - Dave Stewart 文章。

為什麼專案時間預估這麼難？具體可以如何解決時程預判問題

Sat, 13 Jul 2024 00:00:00 GMT

發現身為初階打工人其實通常只是看見問題並拼命解決它，但換個角度思考：「如果現在手上專案燒起來，主管定個超乎預期的時程但你也沒有自己一套說法，要如何交代？」，最貼近實作的人其實是最能開出真實預估的人。參考：The work is never just “the work” - Dave Stewart 文章。

How to Manage Digital Product Variables

Fri, 05 Jul 2024 00:00:00 GMT

Recent projects have involved a complete visual design overhaul, leading to facing the challenge of how to synchronize the management of product visuals.

具体来说可以怎么建立与管理产品的设计令牌或变量

Fri, 05 Jul 2024 00:00:00 GMT

近期执行的专案在进行翻新包含了整体的视觉设计，因此前端也面临要如何同步管理产品视觉的问题。先说痛点，先前专案并没有具体的规范应该如何定义 UI 当中的数值，导致魔法数字（没有规范与描述的值）流窜于整个产品当中，造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。

具體來說可以怎麼建立與管理產品的設計令牌或變數

Fri, 05 Jul 2024 00:00:00 GMT

近期執行的專案在進行翻新包含了整體的視覺設計，因此前端也面臨要如何同步管理產品視覺的問題。先說痛點，先前專案並沒有具體的規範應該如何定義 UI 當中的數值，導致魔法數字（沒有規範與描述的值）流竄於整個產品當中，造成了非常大的的困擾。我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值。

How to Let Elements Escape the Container with CSS Grid

Wed, 03 Jul 2024 00:00:00 GMT

To keep page content within reasonable limits, a fixed-size container is often needed. Unique layouts have emerged using CSS Grid for more flexibility.

如何通过 CSS Grid 让元素跳脱容器

Wed, 03 Jul 2024 00:00:00 GMT

为了确保页面内容保持在合理的范围内，很多时候会需要在外层使用固定的尺寸作为网页内容的容器。而近期在翻新的页面有一些独特的布局样式，透过 CSS Grid 来更灵活的让容器内容也能跳脱安排在各处，主要参考 Kevin Powell 的做法。

如何透過 CSS Grid 讓元素跳脫容器

Wed, 03 Jul 2024 00:00:00 GMT

為了確保頁面內容保持在合理的範圍內，很多時候會需要在外層使用固定的尺寸作為網頁內容的容器。而近期在翻新的頁面有一些獨特的布局樣式，透過 CSS Grid 來更靈活的讓容器內容也能跳脫安排在各處，主要參考 Kevin Powell 的做法。

Build Dark Mode (or Any Website Style) the Right Way

Tue, 25 Jun 2024 00:00:00 GMT

"the cost of adding dark mode" inevitably increases costs more than expected, but using the right approach from the start can avoid many issues.

用正确的方式制作深色模式（或任何网站风格）

Tue, 25 Jun 2024 00:00:00 GMT

先前提到「添加深色模式要考虑的代价」无可避免的会增加比预想中还要多的成本，但如果能在一开始用正确的方式制作网页风格，那么可以有效的避免掉许多问题。如果你希望制作不同风格的数字产品都可以参考本篇文章，用更省力的方式定义风格。

用正確的方式製作深色模式（或任何網站風格）

Tue, 25 Jun 2024 00:00:00 GMT

先前提到「添加深色模式要考慮的代價」無可避免的會增加比預想中還要多的成本，但如果能在一開始用正確的方式製作網頁風格，那麼可以有效的避免掉許多問題。如果你希望製作不同風格的數位產品都可以參考本篇文章，用更省力的方式定義風格。

Embrace Every Unproductive Day

Tue, 11 Jun 2024 00:00:00 GMT

While managing this blog, I gradually developed the habit of "pushing new progress no matter how busy I am," forcing myself to refine my thoughts.

拥抱低效率的一天

Tue, 11 Jun 2024 00:00:00 GMT

经营这个部落格时我逐渐养成了「不管再忙也要推新进度上来」的习惯，不管是写文章、小短文、找题材、修复BUG 推新功能……总之每天都要尽量以让部落格更好这个方向努力进而强制自己去精炼思考。这种生产力非线性与专注在目标大方向的概念帮助我建立了不少习惯。

擁抱低效率的一天

Tue, 11 Jun 2024 00:00:00 GMT

經營這個部落格時我逐漸養成了「不管再忙也要推新進度上來」的習慣，不管是寫文章、小短文、找題材、修復 BUG 推新功能……總之每天都要盡量以讓部落格更好這個方向努力進而強制自己去精煉思考。這種生產力非線性與專注在目標大方向的概念幫助我建立了不少習慣。

How to Achieve a Smoother Code Review Process?

Sat, 08 Jun 2024 00:00:00 GMT

How to effectively conduct code reviews? This article aims to explore how to perform code reviews and improve overall code quality.

如何达成更为流畅的代码审核？

Sat, 08 Jun 2024 00:00:00 GMT

开发到现在为止都没有特别去了解如何好好的进行代码审核，大家默认会写代码就代表你也有能力去审核别人的代码，但我想这是一门额外的学习问题，从而促使我写下这篇文章去了解如何进行代码审核。审核代码是最直接可以养护并改善问题的阶段，主持得当的代码审核能够补足团队成员间的知识盲区进一步提升整体代码水平。

如何達成更為流暢的代碼審核？

Sat, 08 Jun 2024 00:00:00 GMT

開發至今從來都沒有特別去了解如何好好的執行代碼審核，大家都默認會寫代碼就代表你也有能力去審核別人代碼，但我想這是一門額外的學問，因而促使我寫下這篇文章去了解如何進行代碼審核。審核代碼是最直接可以發掘並改善問題的環節，主持得當的代碼審核能夠補足團隊成員間的知識盲區進而提升整體代碼水平。

Writing like gardening, concept of digital garden blog

Mon, 03 Jun 2024 00:00:00 GMT

In the development field, much of the work involves structuring information, so I find it fitting to call myself a "🌵 Software Gardener."

写作就像是在经营花园，替博客导入数字花园的概念

Mon, 03 Jun 2024 00:00:00 GMT

身处开发领域会发现很多时候都是在做架构信息的工作，所以我觉得称呼自己的日常工作像是「🌵 软件园丁」是十分贴切的。如果你也同意写作是为了思考更多，并期望透过输出写作来精炼自己的思考那么「数字花园」这个概念你应该也会有兴趣。

寫作就像是在經營花園，替部落格導入數位花園的概念

Mon, 03 Jun 2024 00:00:00 GMT

身處開發領域會發現很多時候都是在做架構資訊的工作，所以我會覺得稱呼自己的日常工作像是「🌵 軟體園丁」是十分貼切的，如果你也同意寫作是為了思考更多，並期望透過輸出寫作來精煉自己的思考，那麼「數位花園」這個概念你應該也會有興趣。

Death of CSS vendor prefix

Thu, 30 May 2024 00:00:00 GMT

Browser engine prefixes were used to allow developers to implement new CSS features before support. But the need for prefixes has decreased.

逐渐凋零的浏览器引擎前缀

Thu, 30 May 2024 00:00:00 GMT

浏览器引擎前缀是为了让开发者在浏览器尚未正式支援的情况下先使用这些前缀来实现一些新的 CSS 特性，甚至当时还时常会使用 PostCSS 这类预处理器的 autoprefixer 插件来预处理 CSS 添加上这些前缀。近期发现需要前缀的属性越来越少，未来也大机率不会再有新的前缀被加入了。

逐漸凋零的瀏覽器引擎前綴

Thu, 30 May 2024 00:00:00 GMT

瀏覽器引擎前綴是為了讓開發者在瀏覽器尚未正式支援的情況下先使用這些前綴來實現一些新的 CSS 特性，甚至當時還時常會使用 PostCSS 這類預處理器的 autoprefixer 插件來預處理 CSS 添加上這些前綴。近期發現需要前綴的屬性越來越少，未來也大機率不會再有新的前綴被加入了。

How I Use Git LFS to Manage Large Git Files?

Wed, 29 May 2024 00:00:00 GMT

Git allows us to track changes to any file and easily revert to any version, but it struggles with large files. Git LFS is an extension to solve this issue.

我如何使用 Git LFS 来管理大型 Git 档案？

Wed, 29 May 2024 00:00:00 GMT

Git 允许我们纪录任何档案的变更，并且可以轻松地回溯到任何一个版本，但是当需要储存大型档案时Git 就会显得力不从心，因为Git 并不是为了储存大型档案（图片、影片、音乐……等二进制档案）而设计的。而这次介绍的 Git Large File Storage 是 Git 的扩充，专门用于解决以上问题。

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

Wed, 29 May 2024 00:00:00 GMT

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

How to Code Review Using GitHub

Mon, 27 May 2024 00:00:00 GMT

Git and GitHub have become mainstream in the industry. This article explores built-in features on GitHub that can enhance code review efficiency.

3 招提高 GitHub 代码审查效率

Mon, 27 May 2024 00:00:00 GMT

如今 Git 与 GitHub 已经成为业界主流，有很大机率你的专案也会使用到它们来进行版本控制，但由于 GitHub 是一款基于 Git 附加的服务，所以我们时常会轻视它的功能，其实 GitHub 有许多不错的功能却不是那么明显，因此主要分享一些我认为有用但日常使用没有查觉到的功能。

3 招提高 GitHub 代碼審查效率

Mon, 27 May 2024 00:00:00 GMT

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

Rethink RWD through CSS Container Queries

Sun, 26 May 2024 00:00:00 GMT

I first heard the term CSS Container Queries a year or two ago. As web evolves, this technology will be a key piece for future RWD web development.

重新思考如何构建 RWD 网页，透过 CSS Container Queries

Sun, 26 May 2024 00:00:00 GMT

一开始听到CSS Container Queries 这个名词还是在一两年前，随着时间演进建构网页的模式也变动了许多次，我也越来越确信这项技术会是未来建构 RWD 网页的一块重要拼图，文章将介绍现有的Media Queries 有哪些缺陷，新解方则具备哪些优势？

重新思考如何建構 RWD 網頁，透過 CSS Container Queries

Sun, 26 May 2024 00:00:00 GMT

一開始聽到 CSS Container Queries 這個名詞還是在一兩年前，隨著時間演進建構網頁的模式也變動了許多次，我也越來越確信這項技術會是未來建構 RWD 網頁的一塊重要拼圖，文章將介紹現有的 Media Queries 有哪些缺陷，新解方則具備哪些優勢？

Nx Migrate to Solve Upgrade Problem

Fri, 24 May 2024 00:00:00 GMT

Recently, I added an automatic package update feature to the new Nx Monorepo project via GitHub Action, hoping for a more automated way to update dependencies.

来看看 Nx 如何解决套件框架更新的问题 - nx migrate

Fri, 24 May 2024 00:00:00 GMT

近期将公司的新 Nx Monorepo 架构专案透过 GitHub Action 添加了自动更新套件的功能，会想实践该功能是因为旧专案疏于更新导致吃了非常多的苦头，希望在新架构下可以有更轻松且自动化的方式去执行更新。其中 Nx 有专属的 nx migrate 指令帮助我们达成这件事，并且背后有些非常有趣的机制与理念。

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

Fri, 24 May 2024 00:00:00 GMT

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

The Cost of Implementing Dark Mode

Mon, 20 May 2024 00:00:00 GMT

Recently, a project I maintain planning to introduce Dark Mode, but I believe it's not a cost-effective choice. This article discusses why I think so.

添加深色模式需要考虑的代价

Mon, 20 May 2024 00:00:00 GMT

近期维护的项目希望引入深色模式，但分析后我认为实现这个需求并不是一个划算的选择，本文将讨论原因。如今许多网站和应用程序默认提供深色模式，这是一种将背景色转为深色，前景色转为浅色的设计手段，具备各种功能性和情感上的特点，例如：节省设备电力、降低眼睛疲劳……

添加深色模式要考慮的代價

Mon, 20 May 2024 00:00:00 GMT

近期維護的專案希望導入深色模式（Darkmode），但分析下來我認為實踐這個需求並不是一項划算的選擇，這篇文章將會討論為什麼我會這樣認為。如今許多網站和應用程式預設都提供了深色模式，這是一種將背景色轉為深色，前景色轉為淺色的設計手段，具備各種功能性和情感上的特點，例如：節省裝置電力、降低眼睛疲勞……

Differences in Usage Between @ts-ignore and @ts-expect-error

Sun, 19 May 2024 00:00:00 GMT

While refactoring a project, I encountered type issues that I initially ignored using `@ts-ignore` or `@ts-expect-error`.

@ts-ignore 与 @ts-expect-error 的使用时机差异

Sun, 19 May 2024 00:00:00 GMT

近期在替项目做大型重构，其中就有将技术转换为 TypeScript 与 Monorepo，途中一些还没有头绪如何解决的类型问题，就会使用 `@ts-ignore` 或 `@ts-expect-error` 来先行忽略，但这两者的使用时机有所不同，这篇文章就来谈谈这两者的差异。

@ts-ignore 與 @ts-expect-error 的使用時機差異

Sun, 19 May 2024 00:00:00 GMT

近期在替專案做大型重構，其中就有將技術轉換為 TypeScript 與 Monorepo，途中一些還沒有頭緒如何解決的型別問題，就會使用 `@ts-ignore` 或 `@ts-expect-error` 來先行忽略，但這兩者的使用時機有所不同，這篇文章就來談談這兩者的差異。

Git Flow, GitHub Flow, GitLab Flow, Trunk Based Development

Fri, 17 May 2024 00:00:00 GMT

In maintaining projects of varying scales, to Understand the pros and cons of different Git branching strategies to select suitable ones for development.

完整介绍 Git 分支策略 feat. Git Flow, GitHub Flow, GitLab Flow, TBD

Fri, 17 May 2024 00:00:00 GMT

近期在维护不同规模的专案，想说可以了解一下不同 Git 分支策略的优缺点来替专案选择适合的开发策略。现阶段我最常接触的是 Gitflow 的方式来进行开发，但发现这样的策略在小型规模的专案（5 人以下）并没有这么灵活好用，恰巧可以在全新的专案上尝试其他策略。

完整介紹 Git 分支策略 feat. Git Flow, GitHub Flow, GitLab Flow, TBD

Fri, 17 May 2024 00:00:00 GMT

近期在維護不同規模的專案，想說可以了解一下不同 Git 分支策略的優缺點來替專案選擇適合的開發策略。現階段我最常接觸的是 Gitflow 的方式來進行開發，但發現這樣的策略在小型規模的專案（5 人以下）並沒有這麼靈活好用，恰巧可以在全新的專案上嘗試其他策略。

5 Tailwind Anti-Patterns You Must Avoid

Sun, 05 May 2024 00:00:00 GMT

I've encountered very user-unfriendly Tailwind projects. Some anti-patterns can be easily avoided early on, but become huge issues as the project scales.

绝对要避免的 5 项 Tailwind 反模式

Sun, 05 May 2024 00:00:00 GMT

撰写这篇文章是因为接手过非常反人类的 Tailwind 项目，一些不应该出现的反模式其实都可以在早期被轻松避免，随着项目规模变大，这些反模式就会变成一个巨大的问题难以修正。本文将介绍一些我在项目中看到的反模式，并提醒你千万不要这样做！

絕對要避免的 5 項 Tailwind 反模式

Sun, 05 May 2024 00:00:00 GMT

撰寫這篇文章是因為接手過非常反人類的 Tailwind 專案，一些不應該出現的反模式其實都可以在早期被輕鬆避免，當專案規模變大時，這些反模式就會變成一個巨大的問題難以修正。這篇文章將會介紹一些我在專案中看到的反模式，並且提醒你千萬不要這麼做！

The Story of How I Choose My Keyboard

Sat, 27 Apr 2024 00:00:00 GMT

I only replace items when they are worn out. It wasn't until my frequently used membrane keyboard broke that I started looking for a new keyboard.

我如何选择自己键盘的故事

Sat, 27 Apr 2024 00:00:00 GMT

我是一个物欲非常低的人，日常东西就是用到坏才换新，直到某天常用的薄膜键盘坏了才开始寻找新的键盘。在挑选新键盘的过程中让我想到选择键盘的一些故事促使写下这篇文章。作为软件工程师不外乎每天接触到的硬件生产力工具大概就是：键盘、鼠标、电脑、屏幕、椅子、笔电、大水杯（喝水非常重要），其中键盘绝对是情感最深厚的一一个。

我如何選擇自己鍵盤的故事

Sat, 27 Apr 2024 00:00:00 GMT

我是一個物慾非常低的人，日常東西就是用到壞才換新，直到某天常用的薄膜鍵盤壞了才開始尋找新的鍵盤。在挑選新鍵盤的過程中讓我想到選擇鍵盤的一些故事促使寫下這篇文章。作為軟體工程師不外乎每天接觸到的硬體生產力工具大概就是：鍵盤、滑鼠、電腦、螢幕、椅子、筆電、大水杯（喝水非常重要），其中鍵盤絕對是情感最深厚的一個。

enum, const enum, as const - Enumeration in TypeScript

Fri, 26 Apr 2024 00:00:00 GMT

To avoid hard-coded values and ensure clarity, I document some findings. The conclusion is to use as const for data management.

enum、const enum 和 as const，应该如何列举资料于 TypeScript 当中？

Fri, 26 Apr 2024 00:00:00 GMT

近期重写的专案中有许多状态需要管理，会需要统一管理资料于专案中，为了避免写死代码（Hard Coded）并且让接手的人都能轻易地了解资料型态，这里记录一些过程中的发现。结论是应该使用 as const 来达成列举资料管理，因为它更加直觉没有什么认知负担，并且更加灵活。

enum、const enum 和 as const，應該如何列舉資料於 TypeScript 當中？

Fri, 26 Apr 2024 00:00:00 GMT

近期重寫的專案中有許多狀態需要管理，會需要統一管理資料於專案中，為了避免寫死代碼（Hard Coded）並且讓接手的人都能輕易地瞭解資料型態，這裡記錄一些過程中的發現。結論是應該使用 as const 來達成列舉資料管理，因為它更加直覺沒有什麼認知負擔，並且更加靈活。

Boring UI is Good UX: Why Do Websites Look Similar Now?

Thu, 25 Apr 2024 00:00:00 GMT

Why do most websites look similar today, even in experience? Guides readers through web development history to conclude that "boring UI is good UX."

无聊的 UI 是好的 UX，为什么现在的网站都长得差不多？

Thu, 25 Apr 2024 00:00:00 GMT

为什么如今网站大多数都长得差不多，就连体验也差不多？我们时常会联想设计网页是一门富含创意创新的工作，但对使用者来说创新并不全然是一件好事。本篇文章希望引导读者了解网页发展的经历并推导出为什么「无聊的使用者介面是好的使用者体验」这个结论。

無聊的 UI 是好的 UX，為什麼現在的網站都長得差不多？

Thu, 25 Apr 2024 00:00:00 GMT

為什麼如今網站大多數都長得差不多，就連體驗也差不多？我們時常會聯想設計網頁是一門富含創意創新的工作，但對使用者來說創新並不全然是一件好事。本篇文章希望引導讀者了解網頁發展的經歷並推導出為什麼「無聊的使用者介面是好的使用者體驗」這個結論。

Building UI Without Burden

Sun, 21 Apr 2024 00:00:00 GMT

As a front-end engineer, my recent work experience has shown me that many development issues still revolve around the appearance.

建构正确的网页 UI 不应该是个麻烦的问题

Sun, 21 Apr 2024 00:00:00 GMT

身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上，并不是说花时间制作这些层面的事情就很逊，它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构，例如有许多要留意的事：性能、适用性、可维护性、可测试性、搜索引擎优化、跨平台兼容性、多语言……

建構正確的網頁 UI 不應該是個麻煩的問題

Sun, 21 Apr 2024 00:00:00 GMT

身為前端工程近期工作的感悟是很多時候開發問題還是陷於介面的外觀、行為或互動層面上，並不是說花時間製作這些層面的事情就很遜，它們實際需要依靠經驗豐富的開發者透過多方面的研究與考量才能打造合理的架構，例如有許多要留意的事：效能、適用性、可維護性、可測試性、搜尋引擎最佳化、跨平台相容性、多語系……

Future-Proof Your Career in the Age of AI

Mon, 15 Apr 2024 00:00:00 GMT

AI will not leave our lives; it will only become more common, impacting our lives. What can humans do that AI cannot? What will future jobs look like?

如何在 AI 时代保障未来

Mon, 15 Apr 2024 00:00:00 GMT

AI 并不会离开我们的生活，并且只会越来越普及，这也意味着我们的生活将受到影响。什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？思考以上问题。

在 AI 時代應該如何保障未來

Mon, 15 Apr 2024 00:00:00 GMT

AI 並不會離開我們的生活，並且只會越來越普及，這也意味著我們的生活將受到影響。什麼事情是人類能 AI 不能的？未來的工作會是怎麼樣？人們能做什麼來保證未來？什麼事情是人類能 AI 不能的？未來的工作會是怎麼樣？人們能做什麼來保證未來？思考以上問題。

Chcek Website Performance with Lighthouse CI in 3 Steps

Sun, 14 Apr 2024 00:00:00 GMT

Manual testing has issues like unstable results and is time-consuming. Let’s try using Lighthouse CI for automated performance checks!

只要三步骤透过 Lighthouse CI 自动化检测网站效能

Sun, 14 Apr 2024 00:00:00 GMT

Lighthouse 是一款开源的自动化网页性能检测工具，通常在遇到网页性能问题时才逐个打开网页测试，手动测试总是会有：单次的测试结果不稳定、耗时费力、不利于团队开发的问题，今天来尝试使用 Lighthouse CI 自动化在每次代码更动时检测网页的性能问题吧！

只要三步驟透過 Lighthouse CI 自動化檢測網站效能

Sun, 14 Apr 2024 00:00:00 GMT

Lighthouse 是一款開源的自動化網頁效能檢測工具，通常都是遇上網頁效能問題才一個一個開網頁開來測試效能，手動測試總是會有：單次的測驗結果不穩、耗時費力、不利於團隊開發的問題，今天來嘗試使用 Lighthouse CI 自動化的在每次代碼更動時檢測網頁的效能問題吧！

How to Add Search to Any Kind of Static Site Using Pagefind

Sat, 13 Apr 2024 00:00:00 GMT

Give your site a custom search powered by WebAssembly. With the release of Pagefind 1.0, I replaced my custom fuse.js search with Pagefind.

使用 Pagefind 替任何静态网站添加搜寻功能

Sat, 13 Apr 2024 00:00:00 GMT

不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求，恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind，分享如何在任何静态网站上加入搜寻功能。

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

Sat, 13 Apr 2024 00:00:00 GMT

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

What is Shadcn UI? Why is it so popular?

Mon, 01 Apr 2024 00:00:00 GMT

Recently, I used Shadcn for Vue to build web UI. It's a customizable component library based on Tailwind, allowing quick creation of web interfaces.

什么是 Shadcn UI？为什么在前端圈这么火爆？

Mon, 01 Apr 2024 00:00:00 GMT

近期工作接触使用 Shadcn for Vue 来打造网页 UI，这是一款基于 Tailwind 可弹性客制化的组件组合，让我们可以快速建立出符合需求的网页界面。本文将介绍现有样式库的问题及 Shadcn UI 的特色，以及为什么在前端圈这么火爆。

什麼是 Shadcn UI？為什麼在前端圈這麼火爆？

Mon, 01 Apr 2024 00:00:00 GMT

近期工作接觸使用 Shadcn for Vue 來打造網頁 UI，這是一款基於 Tailwind 可彈性客製化的元件組合，讓我們可以快速建立出符合需求的網頁介面。這篇文章將會介紹現有樣式庫的問題以及 Shadcn UI 的特色，以及為什麼在前端圈這麼火爆。

Design Forms Correctly, Essential UX for User Input

Sun, 31 Mar 2024 00:00:00 GMT

Forms are the most common website elements and the bridge to users. This post summarizes essential form UX and why design choices matter.

如何正确地设计表单？必须知道的用户输入 UX 基础

Sun, 31 Mar 2024 00:00:00 GMT

表单是是网站中最常见的功能性元素也是与用户沟通的桥梁，像是购买商品、注册会员、问卷填写……等各项行动都离不开它，然而这么重要的体验却时常被忽略，于是我决定整理一个良好的表单应该具备的体验以及为什么应该这样设计，供所有人了解常见的表单设计问题。

如何正確的設計表單？必須知道的用戶輸入 UX 基礎

Sun, 31 Mar 2024 00:00:00 GMT

表單是是網站中最常見的功能性元素也是與用戶溝通的橋樑，像是購買商品、註冊會員、問卷填寫……等各項行動都離不開它，然而這麼重要的體驗卻時常被忽略，於是我決定整理一個良好的表單應該具備的體驗以及為什麼應該這樣設計，供所有人了解常見的表單設計問題。

How to Handle TypeScript Error?

Sat, 30 Mar 2024 00:00:00 GMT

JavaScript has try...catch syntax for capturing errors. How can we ensure the type of errors thrown in TypeScript?

Type Safety at Runtime with Zod

Sat, 30 Mar 2024 00:00:00 GMT

Zod is a schema declaration and validation library led by TypeScript. The purpose of Zod is to easily write runtime data validation.

如何处理 TypeScript 抛出的错误？

Sat, 30 Mar 2024 00:00:00 GMT

JavaScript 有 try...catch 语法用于捕捉程序中的错误情境，在需要时使用 throw 语法来抛出「任何错误」，通常建议会抛出 JS 默认的错误对象，但在 TypeScript 要怎么做才能确保抛出的错误的类型？

使用 Zod 于运行时检验类型

Sat, 30 Mar 2024 00:00:00 GMT

Zod 是以 TypeScript 为首的 Schema 声明和验证库，为什么有了 TypeScript 还需要 Zod？轻易的撰写运行时数据验证就是 Zod 的目的，像是验证第三方 API 传递的数据、用户输入在 URL 中或表单中的数据使用 Zod 来验证都很方便。

如何處理 TypeScript 拋出的錯誤？

Sat, 30 Mar 2024 00:00:00 GMT

JavaScript 有 try...catch 語法用於捕捉程式中的錯誤情境，在需要時使用 throw 語法來拋出「任何錯誤」，通常建議會丟出 JS 預設的錯誤物件，但在 TypeScript 要怎麼做才能確保拋出的錯誤的型別？

使用 Zod 於 Runtime 檢驗型別

Sat, 30 Mar 2024 00:00:00 GMT

Zod 是以 TypeScript 為首的 Schema 聲明和驗證庫，為什麼有了 TypeScript 還需要 Zod？輕易的撰寫 Runtime 資料驗證就是 Zod 的目的，像是驗證三方 API 傳遞的資料、用戶輸入在 URL 中或表單中的資料使用 Zod 來驗證都很方便。

Describing Consensus: Goals, Problems, Solutions

Thu, 28 Mar 2024 00:00:00 GMT

Recently reading about Goals, Problem, Solutions in Stay SasSy made me realize this is how I break down problems at work!

达成共识的描述方式：目标、问题、解方

Thu, 28 Mar 2024 00:00:00 GMT

最近阅读 Stay SasSy 提到的 Goals, Problem, Solutions 猛然察觉这不是我日常工作拆分问题的方式吗！简直是不谋而合，正好也想写一篇文章来分享这个达成共识的方法，同时这也是一个很好向上沟通的方式，不管是对团队还是对上级沟通都有帮助。

達成共識的描述方式：目標、問題、解方

Thu, 28 Mar 2024 00:00:00 GMT

最近閱讀 Stay SasSy 提到的 Goals, Problem, Solutions 猛然察覺這不是我日常工作拆分問題的方式嗎！簡直是不謀而合，正好也想寫一篇文章來分享這個達成共識的方法，同時這也是一個很好向上溝通的方式，不管是對團隊還是對上級溝通都有幫助。

Why you shouldn't disable input and how to do it correctly

Sun, 24 Mar 2024 00:00:00 GMT

Using the `disabled` attribute blocks users and creates confusion—explain the reason instead of just preventing actions.

为什么禁用输入通常是个糟糕的决定，以及如何正确禁用用户输入

Sun, 24 Mar 2024 00:00:00 GMT

网页原先是静态文件，但随着需求增加，动态的改动网页的状态已变得普遍，随意使用 `disabled` 属性就像是在用户路上堵上一颗巨石，这样的设计不仅无法帮助用户解决问题，还会让用户感到困惑。我们应该尽全力让用户知道问题原因，而不是只做到「阻止用户的错误行为」。

為什麼禁用輸入通常是個糟糕的決定，以及如何正確禁用用戶輸入

Sun, 24 Mar 2024 00:00:00 GMT

網頁原先是靜態文件，但隨著需求增加，動態的改動網頁的狀態已變得普遍，隨意使用 `disabled` 屬性就像是在用戶路上堵上一顆巨石，這樣的設計不僅無法幫助用戶解決問題，還會讓用戶感到困惑。我們應該盡全力讓用戶知道問題原因，而不是只做到「阻止用戶的錯誤行為」。

Astro Custom Component in MDX

Sat, 23 Mar 2024 00:00:00 GMT

MDX in Astro gives me flexibility, but I prefer writing in Markdown. Can custom components be mapped to Markdown syntax?

在 Astro MDX 中使用自定义组件

Sat, 23 Mar 2024 00:00:00 GMT

在 Astro 中使用 MDX 撰写文章给我非常多的弹性，但绝大多数文章我还是希望使用 Markdown 现有的语法来撰写，像是：图片、程式码区块、列表……等，有没有办法将自定义的元件对应于 Markdown 语法呢？这样就不用每次都要再 MDX 中特地引入元件并使用，单纯的撰写 Markdown 即可。

使用客製化元件在 Astro MDX 當中

Sat, 23 Mar 2024 00:00:00 GMT

在 Astro 中使用 MDX 撰寫文章給我非常多的彈性，但絕大多數文章我還是希望使用 Markdown 現有的語法來撰寫，像是：圖片、程式碼區塊、列表……等，有沒有辦法將自定義的元件對應於 Markdown 語法呢？這樣就不用每次都要再 MDX 中特地引入元件並使用，單純的撰寫 Markdown 即可。

Problem Between UI and Development

Sun, 17 Mar 2024 00:00:00 GMT

why are UI design and development so uncoordinated? Can teams consistently deliver products that truly meet user needs?

TDD is Awesome You Should Try It! (Tutorial With Example)

Sun, 17 Mar 2024 00:00:00 GMT

TDD Test-Driven Development is a development methodology where tests are written before the implementation code.

存在于 UI 设计与开发之间的大问题

Sun, 17 Mar 2024 00:00:00 GMT

Continuous Delivery 在《The Biggest Problem With UI》影片中指出我多年对产品 UI 开发流程的疑惑：为什么 UI 设计与开发总是如此不顺畅？本文探讨如何让团队稳定高效地产出真正满足用户需求的产品。

TDD 测试驱动开发超赞可以试试看（附实际操作范例）

Sun, 17 Mar 2024 00:00:00 GMT

TDD 测试驱动开发是一种开发方法论，先写测试再实践代码，应该如何撰写测试？或许听过 TDD 但不清楚与单纯写测试差别在哪？这篇文章详细描述 TDD 的优势与实际操作范例快速了解 TDD 为什么这么赞。TDD 目的便是打造一个工作流程能够验证代码的行为，让开发者能够更有信心的重构、更动代码。

存在於 UI 設計與開發之間的大問題

Sun, 17 Mar 2024 00:00:00 GMT

Continuous Delivery 在 The Biggest Problem With UI 影片中點出了我多年來對於產品 UI 開發流程最大的疑惑：為什麼 UI 設計與開發的流程總是如此不順暢不協調？「有沒有辦法讓團隊穩定高效的產出真實滿足用戶需求的產品？」是本篇文章探討的核心問題。

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

Sun, 17 Mar 2024 00:00:00 GMT

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

3 Virtues From a Good Software Engineer

Sat, 16 Mar 2024 00:00:00 GMT

Patience, communication, and thinking outside the box are the virtues I believe a software engineer should have. Do you agree with this idea?

软件工程师可以具备的三种优良美德

Sat, 16 Mar 2024 00:00:00 GMT

观察并厘清什么样的「品格」是一位软件工程师可以具备的，以及普遍工作环境和社群带给我的感受，总结出几点可以解决问题的模式，在日常也作为我自己参考与努力的依据。有耐心、能沟通、跳脱框架是我理想中软件工程师可以具备的美德，不知道你是不是也认同这样的想法？

軟體工程師可以具備的 3 種優良美德

Sat, 16 Mar 2024 00:00:00 GMT

觀察並釐清什麼樣的「品格」是一位工程師可以具備的，以及普遍工作環境和社群帶給我的感受，總結出幾點可以解決問題的模式，在日常也作為我自己參考與努力的依據。有耐心、能溝通、跳脫框架是我理想中軟體工程師可以具備的美德，不知道你是不是也認同這樣的想法？

2 Ways to Verify if JSON-LD is Working

Tue, 12 Mar 2024 00:00:00 GMT

JSON-LD is a way to embed additional data to describe web content. This article shares my experience and how to verify JSON-LD is interpreted correctly.

2 种方法验证 JSON-LD 是否正确运作？

Tue, 12 Mar 2024 00:00:00 GMT

2 種方法驗證 JSON-LD 是否正確運作

Tue, 12 Mar 2024 00:00:00 GMT

How to Rewrite a Legacy System: The Ship of Theseus

Mon, 12 Feb 2024 00:00:00 GMT

Recently faced with many issues of maintaining legacy code, documenting the dilemmas and solutions in rewriting legacy systems.

The Dailies: A Good Way to Eliminate Team Learning Debt

Mon, 12 Feb 2024 00:00:00 GMT

Developers' "failures" transferring knowledge are not due to laziness. Instead, [pressures] create a complex tension between performance and learning goals.

如何重写陈旧系统：就像忒修斯之船

Mon, 12 Feb 2024 00:00:00 GMT

近期面对许多陈旧代码维护的问题，碰巧我翻找到这个博客：Understand Legacy Code，记录一下「重写」陈旧系统可能会遇到的困境与解套方案。以我自己手上的项目为例，在进行项目升级评估时发现事情比原先想象还要复杂！

消除团队学习债务：每日小会

Mon, 12 Feb 2024 00:00:00 GMT

开发者在记录或转移知识方面的「失败」并不是因为懒惰或缺乏关心。相反，[环境压力]促使他们在绩效和学习目标之间的复杂紧张关系中找到平衡。当让学习变得显见并不安全时，绩效文化就会获胜。透过每日小会的方式，每天花费短小的时间让学习在团队中被提倡鼓励。

如何重寫陳舊系統：就像忒修斯之船

Mon, 12 Feb 2024 00:00:00 GMT

近期面對許多陳舊代碼維護的問題，碰巧我翻找到這個部落格：Understand Legacy Code，紀錄一下「重寫」陳舊系統可能會遇到的困境與解套方案。以我自己手上的專案為例，在進行專案升級評估時發現事情比原先想像還要複雜！

消除團隊學習債務：每日小會

Mon, 12 Feb 2024 00:00:00 GMT

開發者在記錄或轉移知識方面的「失敗」並不是因為懶惰或缺乏關心。相反，[環境壓力]促使他們在績效和學習目標之間的複雜緊張關係中找到平衡。當讓學習變得顯見並不安全時，績效文化就會獲勝。透過每日小會的方式，每天花費短小的時間讓學習在團隊中被提倡鼓勵。

內容於設計之前：給設計者的寫作建議

Mon, 05 Feb 2024 00:00:00 GMT

UI 介面當中文字佔據了絕大多數的內容，文字充斥在設計的每個角落，它們是最有威力的設計元素之一，以極為精簡的形式傳遞深刻的意涵。這篇文章想分享設計與內容可以是相輔相成的概念，並且討論設計者在沒有內容的情況下設計可能造成什麼樣的問題。

What is Monorepo? A straightforward explanation

Thu, 01 Feb 2024 00:00:00 GMT

As the complexity of development increases, the term Monorepo frequently appears, To clarify my understanding of Monorepo, I wrote this post.

故事化直白的解释 Monorepo 是什么

Thu, 01 Feb 2024 00:00:00 GMT

随着前端的复杂程度增加，Monorepo 这个词汇也时常出现，可惜的是相关介绍资源非常不足，趁着近期较为闲暇的时间来统整记录一下我对 Monorepo 的理解。受到不同好文章与影片的启发，我想写一篇最直白的 Monorepo 解释，希望能够帮助更多人理解 Monorepo 的概念。

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

Thu, 01 Feb 2024 00:00:00 GMT

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

Build Scalable User Interfaces through Componentization

Wed, 31 Jan 2024 00:00:00 GMT

For those with no prior knowledge of web pages, introducing the concept of "UI componentization." Is a piece of a puzzle, a building block, a gear...

通过元件化以构建可扩展的用户界面

Wed, 31 Jan 2024 00:00:00 GMT

近期在大改造现有产品的设计系统，预期会与来自不同领域的人合作，因此这篇文章是写给对网页无任何前置知识的人的，主要介绍「界面组件化」这个概念。组件是一块拼图、一个积木、一个齿轮……，就是一个可以被重复使用并且可被组合成更大物件的概念。

透過元件化以建構可擴展的使用者介面

Wed, 31 Jan 2024 00:00:00 GMT

近期在大改造現有產品的設計系統，預期會與來自不同領域的人合作，因此這篇文章是寫給對網頁無任何前置知識的人的，主要介紹「介面元件化」這個概念。元件是一塊拼圖、一個積木、一個齒輪……，就是一個可以被重複使用並且可被組合成更大物件的概念。

Build Product From Scratch - Tokens

Mon, 29 Jan 2024 00:00:00 GMT

Design tokens are a way to manage design properties and values for building UI components. It is essential for anyone involved with design systems.

记录如何从头打造数字产品 - 设计令牌篇

Mon, 29 Jan 2024 00:00:00 GMT

设计令牌（Design Tokens）或令牌是一种管理设计属性与数值的方式，用于建构 UI 最细小的元素，适当的使用设计令牌可以让设计系统更加弹性与可扩展，不论是任何职位，只要与设计系统相关的人士都应当了解设计令牌的概念。

紀錄如何從頭打造數位產品 - 設計令牌篇

Mon, 29 Jan 2024 00:00:00 GMT

設計令牌（Design Tokens）或令牌是一種管理設計屬性與數值的方式，用於建構 UI 最細小的元素，適當的使用設計令牌可以讓設計系統更加彈性與可擴展，不論是任何職位，只要與設計系統相關的人士都應當了解設計令牌的概念。

How To Drive Meetings, Before, During and After a Meeting

Sun, 28 Jan 2024 00:00:00 GMT

Meetings are an art and a vital soft skill for team. Poorly structured meetings can impact individual and team productivity, especially in remote work.

如何开会？开会前、开会中、开会后应当注意的事项！

Sun, 28 Jan 2024 00:00:00 GMT

开会是一门学问，也是身为团队领袖必备的软技能之一，架构差劲的会议会不只影响个人更甚至会整体团队的生产力，特别是在远端工作盛行的时代沟通技巧更尤为重要，架构差劲的会议会不只影响个人更甚至会整体团队的生产力，本篇文章探讨开会前中后有哪些细节是可以注意的。

如何開會？開會前、開會中、開會後應當注意的事項！

Sun, 28 Jan 2024 00:00:00 GMT

開會是一門學問，也是身為團隊領袖必備的軟技能之一，架構差勁的會議會不只影響個人更甚至會整體團隊的生產力，特別是在遠端工作盛行的時代溝通技巧更尤為重要，架構差勁的會議會不只影響個人更甚至會整體團隊的生產力，本篇文章探討開會前中後有哪些細節是可以注意的。

How to Build Digital Products from Scratch - Color

Tue, 23 Jan 2024 00:00:00 GMT

Recently, the company purchased design-related courses to improve collaboration efficiency through design research. I plan to document my notes and thoughts.

记录如何从头打造数字产品 - 颜色篇

Tue, 23 Jan 2024 00:00:00 GMT

紀錄如何從頭打造數位產品 - 顏色篇

Tue, 23 Jan 2024 00:00:00 GMT

Insights on E2E Testing and BDD After 4 Months at New Job

Sun, 21 Jan 2024 00:00:00 GMT

I wrote nearly a hundred E2E tests and aim to solidify my knowledge while helping my team quickly adapt to the E2E Cypress testing project.

新工作 4 个月以来接触 E2E 测试与 BDD 的心得

Sun, 21 Jan 2024 00:00:00 GMT

在加入新工作的数个月内我撰写了接近百支大大小小功能的E2E 测试，打算透过边撰写这篇文章边阅读文件稳固自己的知识，同时也方便团队成员能够快速上手我从零开始建立的E2E Cypress 测试专案，并且最终期望能够尝试实验导入BDD 流程到团队开发流程当中。

新工作 4 個月以來接觸 E2E 測試與 BDD 的心得

Sun, 21 Jan 2024 00:00:00 GMT

在加入新工作的數個月內我撰寫了接近百支大大小小功能的 E2E 測試，打算透過邊撰寫這篇文章邊閱讀文件穩固自己的知識，同時也方便團隊成員能夠快速上手我從零開始建立的 E2E Cypress 測試專案，並且最終期望能夠嘗試實驗導入 BDD 流程到團隊開發流程當中。

Why is CSS so Difficult and Weird to Learn?

Mon, 01 Jan 2024 00:00:00 GMT

Developers have mixed opinions about CSS; some find it simple, others find it hard to master. This article summarizes why CSS is both loved and hated.

为什么 CSS 这么难学这么诡异？

Mon, 01 Jan 2024 00:00:00 GMT

开发者们对 CSS 有不同的意见，有的人说它很简单、有的人说它难以驾驭，这些都是事实。我时常听到苦恼的后端或是与其打交道多年的自己脱口而出：「CSS 真的好诡异阿！」，这篇文章来总结为什么CSS 是一个让人又爱又恨的存在，它为什么这么难学这么诡异？

為什麼 CSS 這麼難學這麼詭異？

Mon, 01 Jan 2024 00:00:00 GMT

開發者們對 CSS 有不同的意見，有的人說它很簡單、有的人說它難以駕馭，這些都是事實。我時常聽到苦惱的後端或是與其打交道多年的自己脫口而出：「CSS 真的好詭異阿！」，這篇文章來總結為什麼 CSS 是一個讓人又愛又恨的存在，它為什麼這麼難學這麼詭異？

Integrate AI into your coding workflow - GitHub Copilot

Tue, 26 Dec 2023 00:00:00 GMT

The nature of developers' work puts us on the front lines alongside AI, and GitHub Copilot has significantly boosted my productivity and learning efficiency.

将 AI 应用到你的 Coding 工作流当中 - GitHub Copilot

Tue, 26 Dec 2023 00:00:00 GMT

开发者的工作性质造就我们注定要站在最前线与 AI 并肩作战，而 GitHub Copilot 这些年的陪伴显著的提升了我的开发生产力与更有效率的学习开发技巧，是少数我觉得真正值得付费的服务之一，不管你是新手还是老鸟 Copilot 都有对应的定位帮助你加速开发。

將 AI 應用到你的 Coding 工作流當中 - GitHub Copilot

Tue, 26 Dec 2023 00:00:00 GMT

開發者的工作性質造就我們注定要站在最前線與 AI 並肩作戰，而 GitHub Copilot 這些年的陪伴顯著的提升了我的開發生產力與更有效率的學習開發技巧，是少數我覺得真正值得付費的服務之一，不管你是新手還是老鳥 Copilot 都有對應的定位幫助你加速開發。

三步驟了解並實踐無限滾動加載 feat.Vue / Intersection Observer API

Sat, 23 Dec 2023 00:00:00 GMT

近期工作剛好接觸很多介面開發的部分，其中一個需求實作「無限滾動加載功能」，當使用者滾動到頁面底部時會自動加載更多的資料，不用點擊按鈕就能瀏覽更多的資料，就像是自動版的加載按鈕。近期工作剛好接觸很多相關的介面功能開發，讓我們用 Vue Composition API 來實作。

What is the Concept of Optimistic UI?

Thu, 14 Dec 2023 00:00:00 GMT

The longer the wait, the more likely users will drop off. Optimistic UI emphasizes immediate, optimistic feedback.

乐观 UI (Optimistic User Interface) 是什么？有哪些实践细节是你应该注意的？

Thu, 14 Dec 2023 00:00:00 GMT

不要让使用者等待！越多的等待时间，就越容易让使用者流失，因此让应用程式的回馈即时，是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后，系统即时假定成功，迅速更新介面，提升使用者体验。这种方法有效缩短用户等待时间，创造更流畅、令人满意的互动体验。

樂觀 UI (Optimistic User Interface) 是什麼？有哪些實踐細節是你應該注意的？

Thu, 14 Dec 2023 00:00:00 GMT

How many breakpoints should you use? The less, the better.

Sun, 10 Dec 2023 00:00:00 GMT

How many sizes of web pages do I need to create? Share why you should use fewer breakpoints to create a responsive web page.

制作响应式网页需要多少尺寸版本？三个论点说服你越少越好。

Sun, 10 Dec 2023 00:00:00 GMT

我既设计网页也开发网页，并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是：我需要绘制多少种尺寸的网页？我需要为网页设置多少个断点？这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。

製作響應式網頁需要多少尺寸版本？三個論點說服你越少越好。

Sun, 10 Dec 2023 00:00:00 GMT

我既設計網頁也開發網頁，並且在過去幾年經驗中總結發現設計與開發配合上容易遇到的問題像是：我需要繪製多少種尺寸的網頁？我需要替網頁設置多少個斷點？這篇文章我分享自己身為設計者與開發者的經歷以及你為何應該使用越少的斷點來製作響應式網頁越好。

How to Manage Z-index

Wed, 29 Nov 2023 00:00:00 GMT

By giving web elements relative relationships instead of absolute values. Using CSS Variables for relative `z-index` values, which is an elegant method!

一个简单聪明的方法让你永远不用烦恼管理 Z-index 的问题

Wed, 29 Nov 2023 00:00:00 GMT

赋予网页元素相对的关系而非绝对的数值，让我们强烈联系元素之间的差异，而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章，作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值，真是优雅简洁的方法！完美的发挥了 CSS 变量的优势，促使我写下这篇文章。

一個簡單聰明的方法讓你永遠不用煩惱管理 Z-index 的問題

Wed, 29 Nov 2023 00:00:00 GMT

賦予網頁元素相對的關係而非絕對的數值，讓我們強烈聯繫元素之間的差異，而非取決於某個魔法數字可以避免很多折騰。最近看到一篇文章，作者提到用 CSS Variable 來賦予相對而非絕對數值的 `z-index` 值，真是優雅簡潔的方法！完美的發揮了 CSS 變數的優勢，促使我寫下這篇文章。

How to Handle Data Loading Elegantly in Vue

Tue, 21 Nov 2023 00:00:00 GMT

Fetching and displaying data is routine for front-end developers, but as more states arise, projects can become chaotic.

如何优雅的于 Vue 正确的处理数据加载

Tue, 21 Nov 2023 00:00:00 GMT

索取并显示资料对前端工程师来说是家常便饭的事，但随着背后延伸的状态越来越多，就会让整个专案极度混乱，因此想要藉由这篇文章点出现有问题并提出一些可行的方案，纪录寻找更高效解法的过程。在索取资料时连带的有许多状态需要被管理和调整，文章透过 Vue 来探讨如何更优雅的处理这些状态。

如何優雅的於 Vue 正確的處理資料載入

Tue, 21 Nov 2023 00:00:00 GMT

索取並顯示資料對前端工程師來說是家常便飯的事，但隨著背後延伸的狀態越來越多，就會讓整個專案極度混亂，因此想要藉由這篇文章點出現有問題並提出一些可行的方案，紀錄尋找更高效解法的過程。在索取資料時連帶的有許多狀態需要被管理和調整，文章透過 Vue 來探討如何更優雅的處理這些狀態。

Integrate Client-Side Form Validation into Legacy Code

Tue, 14 Nov 2023 00:00:00 GMT

This article describes recent experiences in maintaining legacy code, where various validation methods need to be unified, avoiding more legacy code.

如何替陈旧代码导入 HTML 原生客户端验证的故事

Tue, 14 Nov 2023 00:00:00 GMT

本文描述近期在维护既有代码时的故事，目前的专案中有各式各样前人尚未统一的验证方式，例如：有些是使用 HTML 原生客户端验证、伺服器端验证、第三方套件、自造的验证方法，如何统一规范验证方式是一大问题，同时也要思考：「要如何避免创造更多的陈旧代码？」

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

Tue, 14 Nov 2023 00:00:00 GMT

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

Astro 系列文第三十日：系列回顧與反省

Sun, 15 Oct 2023 00:00:00 GMT

本系列 Astro 文章終於完結了，必須說連續 30 天到了後段有點寫不太出來任何東西，秉持著有寫任何東西無論如何都比沒寫強的精神完成了這次的挑戰！本系列文章是當完兵出來沒多久馬上開始寫的，因此是在最後一天開賽而且還只有不到 10 篇的屯稿的狀態下進行的，加上日後工作也忙碌起來，能夠完賽算是很幸運。

Astro 系列文第二十九日：製作作品集參考

Sat, 14 Oct 2023 00:00:00 GMT

終於到第 29 天了……前面寫太多沒有規劃好反而到後面也不知道要多寫什麼。其實在撰寫這 30 天文章之前我有先試寫紀錄一下我用 Astro 製作個人網站的過程，可以參考看看：製作個人前端作品集 - 準備篇以及實作篇，裡面有記錄從發想草稿到實作的過程，如果想要製作個小網站試試水溫可以參考看看。

Astro 系列文第二十八日：近期與資源雜談

Fri, 13 Oct 2023 00:00:00 GMT

感覺 30 天真的要寫不下去了 😅，感覺要寫的前面都寫過了，今天這一篇來介紹 Astro 有那些資源可以入門以及近期的新聞。就在昨天 Astro 發布了 3.3 版本，來了嶄新的實驗性圖片組件，改進了語法突出顯示的相容性，引入了套件的可信性證明，以及其他一些提升使用體驗的改進。

Astro 系列文第二十七日：視圖過度

Wed, 11 Oct 2023 00:00:00 GMT

本章節來談談 Astro 3.0 版本最吸睛的一項功能：View Transitions ，讓你的靜態網頁也能達成 App 應用一樣的絲滑感受。由於這項技術還在實驗階段，因此放在後面的章節補充。View Transitions API 是瀏覽器正推出的一項 API，提供簡易的方法對任何 DOM 狀態更換提供轉場特效。

Astro 系列文第二十六日：建構網頁概念篇

Wed, 11 Oct 2023 00:00:00 GMT

很多時候建構網站都太著重在技術層面該如何應對，但要怎麼經營自己的網站或產品好像卻沒什麼概念，因此這裡添加一下我建構網站的歷程與收穫。我從幾年前剛學習網頁到現在一直在為寫部落格做準備，期間嘗試用很多不同技術與挑戰，但一直以來都沒有特別滿意的成果，直到近期才比較有「寫部落格」這件事究竟是什麼的體會。

Astro 系列文第二十五日：基礎指令與設定

Tue, 10 Oct 2023 00:00:00 GMT

在 Astro 中串接 CMS 是一件非常容易的事情。內容管理系統（Content Management System）是一種用於編寫和管理網站內容的工具，可以讓幫助撰寫內容與管理網站資產，不同的 CMS 廠商有各式各樣的特色像是：排程發布、編輯器、合作編輯、資產管理……等特色。

Astro 系列文第二十四日：添加 ESLint 與 Prettier

Mon, 09 Oct 2023 00:00:00 GMT

我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理，因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯，還有額外添加 TypeScript 的檢查與 VSCode 提示。本篇文章將帶你認識我如何替自己的 Astro 部落格添加 ESLint 與 Prettier。

Astro 系列文第二十三日：路徑別名

Sun, 08 Oct 2023 00:00:00 GMT

當網站規模愈複雜，使用相對關係路徑就會需要花費很多心力去解讀與撰寫，在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護，可以透過額外設置路徑別名來解決這個問題。本篇文章介紹如何透過設定 Astro 中的 TS 設定檔來達成路徑別名。

Astro 系列文第二十二日：環境變數

Sat, 07 Oct 2023 00:00:00 GMT

環境變數提供在不同開發階段切換伺服器地址的靈活性，避免硬編碼，同時安全存儲敏感信息，如 API 金鑰或數據庫密碼，使程式更具適應性和安全性。如果你熟悉 Vite 的話應該會非常熟悉，因為 Astro 即是使用 Vite 作為底層。

Astro 系列文第二十一日：部屬升空

Fri, 06 Oct 2023 00:00:00 GMT

到這個章節介紹了絕大多數會使用到的 Astro 功能，後續的章節會著重在講解一些額外的環境設置。讓我們把製作好的網站放到伺服器上可以被其他人造訪吧。到目前為止教學都是以靜態生產的方式的使用 Astro，也就是預先渲染的網頁文件可以被靜態的放置在伺服器上被索取。

Astro 系列文第二十日：實作搜尋功能

Thu, 05 Oct 2023 00:00:00 GMT

前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步，這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。隨著文章愈來愈多會需要一個查詢文章的功能，透過用戶輸入文章相關的訊息，比對文章資訊（標題、文章短描述）並顯示出最相關的文章。

Astro 系列文第十九日：RSS 端點

Wed, 04 Oct 2023 00:00:00 GMT

前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的資料，並實作生成一個 RSS 檔案作為練習，RSS 是一種標準化的方式，一種特定格式的 XML 檔案，設計來推播最新資訊給網站用戶。

Astro 系列文第十八日：實作集合分類功能

Tue, 03 Oct 2023 00:00:00 GMT

前面學習了內容集合與頁籤的製作，今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。隨著內容集合發布的文章越來越多，裡面可能會有許多相同性質的文章你會想要集合起來並替他們分類，並且自動根據類別自動創建頁面方便查閱。

Astro 系列文第十七日：頁籤

Mon, 02 Oct 2023 00:00:00 GMT

透過內容集合動態的生成 Route 是件方便美好的事情，但一旦數量一多就必須要想辦法分批次顯示這些資料，恰好 Astro 內建頁籤可以幫助我們打造這方面功能，會建議等到網站真的有這麼大量的內容再來考慮製作頁籤，嘗試添加分頁功能並創建分頁元件吧。

Astro 系列文第十六日：內容集合

Sun, 01 Oct 2023 00:00:00 GMT

除了定義資料在元件中、在 `src` 中 `import` 進來或者是 `fetch` 遠端資料之外有其他撰寫內容的方式嗎？有的！內容集合於 2.0 版本推出，用於替網站的本地內容提供易於使用管理、自動化型別驗證的功能。如果你有大量文件需要注入網頁中便可以使用該項功能。

Astro 系列文第十五日：基礎布局

Sat, 30 Sep 2023 00:00:00 GMT

先前了解了如何使用 Markdown 與 MDX 來撰寫網頁，接著這個章節將會學習到如何替這些檔案設置畫面布局 (Layout)。布局可以想像成是常見的頁面的模板用於管理頁面常見的模式，定義布局頁面可以解省重複並統一管理頁面。

Astro 系列文第十四日：圖片最佳化

Fri, 29 Sep 2023 00:00:00 GMT

通常文件會伴隨著圖片，而圖片可以佔據一個頁面絕大多數的運算資源與流量！你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗，Astro 預設自帶相關的元件與方法幫助你處理這些事務。了解儲存圖片位址 src/ 和 public/ 的差異與如何最佳化圖片。

Astro 系列文第十三日：Markdown 與 MDX

Thu, 28 Sep 2023 00:00:00 GMT

撰寫網站最終還是要回歸到易於維護，能不能不需要接觸程式，只需透過編寫文件就能更改頁面內容呢？也就是將內容與版面、邏輯做分離。本章節我們將會學習 Markdown 與 MDX 來達成這件事，它們主要用途是作為傳達與標記內容。

Astro 系列文第十二日：基礎路由

Wed, 27 Sep 2023 00:00:00 GMT

在上一章節介紹了基礎元件的使用，並且你也大概猜到了，只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面，在本章節會更細緻的介紹關於 Astro 的路由設置。Astro 採用的路由策略被稱為「基於檔案的路由 File-based Routing」。

Astro 系列文第十一日：全域狀態管理

Tue, 26 Sep 2023 00:00:00 GMT

前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情，但這些元件中的狀態要怎麼去管理呢？在一些 UI 框架中會提供創建 `context` 的方式來管理狀態，但由於 Astro 採用「局部 Hydration」的方式來渲染頁面，因此無法辦到，但我們可以額外使用 Nano Stores 來達成這點。

Astro 系列文第十日：整合 UI 框架

Mon, 25 Sep 2023 00:00:00 GMT

前面提到如何在 `.astro` 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件之中，享受不同技術與其生態域帶來的便利與好處。在本章節將會從安裝整合到製作一個 React 元件。

Astro 系列文第九日：腳本

Sat, 23 Sep 2023 00:00:00 GMT

當你希望 Astro 處理腳本時可以直接撰寫