自架 Lighthouse 伺服器實現持續監控網站最佳實踐
在先前的文章提到如何使用 Lighthouse 這款工具監控前端大大小小的最佳實踐，例如：效能、SEO、適用性……等能被客觀測量比較的數值，雖然很方便但你可能會希望自架 Lighthouse 服務，以便實現：蒐集與管理自己的隱私資料、持續性監控同個網站的檢測資料、減少依賴第三方伺服器服務。
在先前的文章提到如何使用 Lighthouse 這款工具監控前端大大小小的最佳實踐，例如：效能、SEO、適用性……等能被客觀測量比較的數值，雖然很方便但你可能會希望自架 Lighthouse 服務，以便實現：蒐集與管理自己的隱私資料、持續性監控同個網站的檢測資料、減少依賴第三方伺服器服務。
隨著服務增多也出現了維護上的困難，要如何知道自己與第三方的伺服器有好好在運作？可以額外再開設一個伺服器再去專門監控其他伺服器的狀態，而 Uptime Kuma 就是一款開源免費的監控工具。我用它來監控所有對外的服務確保在第一時間出問題或服務時好時壞時能得知並著手修理，算是一個簡單但實用的好工具，展開監測服務的第一步。
身在前端有幾個必須知道的瀏覽器存儲方案，重點差異在於： 容量上限、有效期限設置、是否與伺服器互動 ，各自有不同的特性適合運用於不同場景。之外也有許多延伸的問題如： Cookie 與法規、資安漏洞防範相關設定、除存字串以外的資料結構。
近期在面試考一些常見邏輯測驗題目而在與朋友對談到這件事的過程中，發現一種觀點是「時間到也寧願留白也不要亂填」，以免被發現了仰賴運氣不懂裝懂又要解釋。我很訝異自己當過多年的學生，卻是第一次反思這項行為背後的動機與取捨。人的偏見不是那麼輕鬆就能夠改變的，但透過思考能更明白自己是否知行合一。
隨著部落格文章逐漸增多，靜態生成壓力也隨之上升，舉例來說在日常開發會需要花費近 10 分鐘的時間，大多是生成圖片佔據大多時間，建構預覽圖的數量是：`(語言 x 文章數量)`。延續最大程度的靜態渲染是合理的選擇，而針對 OG 圖片渲染可以包成 Serverless Function 在需要時呼叫。
近期在嘗試 n8n 時碰上了不少麻煩，但在問題解決後覺得其實也不是什麼太大的問題但就是莫名的卡住流失了許多時間，我踩過的坑或許也是你踩過的坑。這篇文章適合像我一樣沒特別看文件直接跳進去玩的開發者，後續細讀文件反省把問題都列出來。
網頁東東至今仍完全以本地為主，所有代碼、字體、圖片影片與文章內容都紀錄於 Git 當中，並透過 Git LFS 來管理大檔案。這樣的決定有好有壞，其中一個問題便是內容與代碼的耦合高，任何一個想維護的人要把我撰寫的幾百篇文章連帶抓下來 😅，隨著專案成熟我決定要將兩者分離。
近期在琢磨剛玩上手的 n8n 的各式功能，其中在製作 AI 流程時發現如果其中一個環節不如預期整個流程重來十分的耗費時間與金錢，這時候我們就可以添加上人類的反饋，重複的修改提示詞直到滿意為止。在製作文章研究生成 AI 時我也運用了相關功能來達成與 AI 溝通動態調整需求的目的。
近期在熟悉 n8n 流程自動化的工具，發現值得推薦給任何人（特別是軟體工程師）n8n 算是一種 low-code / no-code 解決方案可以幫助任何人透過現有的整合來快速實踐流程自動化的目的。這次教學透過簡單的串接 Google 服務來展現它的靈活性和強大功能。
近期工作順代研究到使用 Mermaid 來快速生成圖表，這是一個很方便的工具，可以快速生成各種圖表，例如流程圖、心智圖、圓餅圖……等，你能想到的圖表基本都有支援。大致紀錄一下選擇這項技術的原因以及使用上的心得。Mermaid 與 AI 結合完美的免去了複雜度，讓我們能夠更專注在內容上，而不是花太多時間在製作圖表上。
近期工作研究到使用 Slidev 來呈現簡報，一個基於 Vite + Vue3 的簡報工具整合了大大小小的套件方便用網頁創作簡報，主要以 Markdown 來撰寫內容，這樣的方式讓我們可以專注在內容上，而不用花太多時間在花俏的簡報軟體操作。
手風琴是一種常見的網頁 UI 模式，通常是一系列垂直堆疊的標題可以用於展開收合顯示不同資訊，在 HTML 當中有項新穎的語法 <details> 和 <summary> 可幫助快速實現類似的功能，並且配合上最新的 interpolate-size 和 transition-behavior 製作滑順的展開閉合動畫。
資料庫就是一個儲存資料的軟體，根據儲存資料性質不同，合適的資料庫種類也會不同。了解 Transaction、ACID、Normalization……等核心概念非常重要。還有更多可以深掘的細節，先單純把學到的知識紀錄一下，未來個別用更多文章詳細描述 :)
隨著前端演進，我們時常需要依靠現成的框架輪子協助，而其中 Vue 又是繼 React 外第二熱門且成熟的選項，但很少有教學提到一個完整的專案該如何建構，以及有哪些模式可以遵循。這次來介紹一下如果從頭開始我會怎麼建構一個 Vue 專案，在 2025 年！
TypeScript 存在一些不太直覺但背後卻有合理因素的問題要留意，像是無論傳入任何物件進 `Object.keys` 都仍會回傳 `string[]` 型別是其中之一，本文探討背後因素與提供不同方向的解套方法供不同情境使用。
CORS (Cross-Origin Resource Sharing) 跨來源資源共享，是一個機制用來決定網頁是否能夠存取其他來源的資源，能有效防止不同來源之間的不正當資源存取。透過 CORS，可以在保護用戶資料的同時，允許合法的跨來源請求。
總結是無論如何都不輕易相信用戶輸入即能最大程度防範 XSS。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。現代齊全的工具與文件幫助下意外執行用戶提供的惡意腳本的機率已經大幅降低。
會想調查這個主題是因為目前所在的團隊大量地使用到這樣的模式，但 Vite 並不會在開發中進行 Tree Shake 就導致每一次開發環境都有大量的無用代碼被打包進去，嚴重影響到開發體驗。因此研究一下這種方法的理念與優缺點以架構更好的專案。
近期我對自己看待撰寫程式這件事有更高的期許，除了最基本的效能、閱讀性、擴充性……之外還有一個非常重要的領域就是：測試。不過程式好端端的能動就代表測試沒有必要了嗎？在我剛工作時實際上做了一段時間的自動化 QA 工程一段時間，不過那時候的我其實也並不明白寫測試的原因，就是有程式就拿來自動化測試，並沒有想太多。
發現身為初階打工人其實通常只是看見問題並拼命解決它，但換個角度思考：「如果現在手上專案燒起來，主管定個超乎預期的時程但你也沒有自己一套說法，要如何交代？」，最貼近實作的人其實是最能開出真實預估的人。參考：The work is never just “the work” - Dave Stewart 文章。
近期執行的專案在進行翻新包含了整體的視覺設計，因此前端也面臨要如何同步管理產品視覺的問題。先說痛點，先前專案並沒有具體的規範應該如何定義 UI 當中的數值，導致魔法數字（沒有規範與描述的值）流竄於整個產品當中，造成了非常大的的困擾。我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值。
先前提到「添加深色模式要考慮的代價」無可避免的會增加比預想中還要多的成本，但如果能在一開始用正確的方式製作網頁風格，那麼可以有效的避免掉許多問題。如果你希望製作不同風格的數位產品都可以參考本篇文章，用更省力的方式定義風格。
近期將公司的新 Nx Monorepo 架構專案透過 GitHub Action 添加了自動更新套件的功能，會想實踐該功能是因為舊專案疏於更新導致吃了非常多的苦頭，希望在新架構下可以有更輕鬆且自動化的方式去執行更新。其中 Nx 有專屬的 nx migrate 指令幫助我們達成這件事，並且背後有些非常有趣的機制與理念。
近期維護的專案希望導入深色模式 （Darkmode），但分析下來我認為實踐這個需求並不是一項划算的選擇，這篇文章將會討論為什麼我會這樣認為。如今許多網站和應用程式預設都提供了深色模式，這是一種將背景色轉為深色，前景色轉為淺色的設計手段，具備各種功能性和情感上的特點，例如：節省裝置電力、降低眼睛疲勞……
近期在替專案做大型重構，其中就有將技術轉換為 TypeScript 與 Monorepo，途中一些還沒有頭緒如何解決的型別問題，就會使用 `@ts-ignore` 或 `@ts-expect-error` 來先行忽略，但這兩者的使用時機有所不同，這篇文章就來談談這兩者的差異。
我是一個物慾非常低的人，日常東西就是用到壞才換新，直到某天常用的薄膜鍵盤壞了才開始尋找新的鍵盤。在挑選新鍵盤的過程中讓我想到選擇鍵盤的一些故事促使寫下這篇文章。作為軟體工程師不外乎每天接觸到的硬體生產力工具大概就是：鍵盤、滑鼠、電腦、螢幕、椅子、筆電、大水杯（喝水非常重要），其中鍵盤絕對是情感最深厚的一個。
近期重寫的專案中有許多狀態需要管理，會需要統一管理資料於專案中，為了避免寫死代碼（Hard Coded）並且讓接手的人都能輕易地瞭解資料型態，這裡記錄一些過程中的發現。結論是應該使用 as const 來達成列舉資料管理，因為它更加直覺沒有什麼認知負擔，並且更加靈活。
為什麼如今網站大多數都長得差不多，就連體驗也差不多？我們時常會聯想設計網頁是一門富含創意創新的工作，但對使用者來說創新並不全然是一件好事。本篇文章希望引導讀者了解網頁發展的經歷並推導出為什麼「無聊的使用者介面是好的使用者體驗」這個結論。
身為前端工程近期工作的感悟是很多時候開發問題還是陷於介面的外觀、行為或互動層面上，並不是說花時間製作這些層面的事情就很遜，它們實際需要依靠經驗豐富的開發者透過多方面的研究與考量才能打造合理的架構，例如有許多要留意的事：效能、適用性、可維護性、可測試性、搜尋引擎最佳化、跨平台相容性、多語系……
AI 並不會離開我們的生活，並且只會越來越普及，這也意味著我們的生活將受到影響。什麼事情是人類能 AI 不能的？未來的工作會是怎麼樣？人們能做什麼來保證未來？什麼事情是人類能 AI 不能的？未來的工作會是怎麼樣？人們能做什麼來保證未來？思考以上問題。
不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求，恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind，分享如何在任何靜態網站上加入搜尋功能。
近期工作接觸使用 Shadcn for Vue 來打造網頁 UI，這是一款基於 Tailwind 可彈性客製化的元件組合，讓我們可以快速建立出符合需求的網頁介面。這篇文章將會介紹現有樣式庫的問題以及 Shadcn UI 的特色，以及為什麼在前端圈這麼火爆。
JavaScript 有 try...catch 語法用於捕捉程式中的錯誤情境，在需要時使用 throw 語法來拋出「任何錯誤」，通常建議會丟出 JS 預設的錯誤物件，但在 TypeScript 要怎麼做才能確保拋出的錯誤的型別？
TDD 測試驅動開發是一種開發方法論，先寫測試再實踐代碼，應該如何撰寫測試？或許聽過 TDD 但不清楚與單純寫測試差別在哪？這篇文章詳細描述 TDD 的優勢與實際操作範例快速了解 TDD 為什麼這麼讚。TDD 目的便是打造一個工作流程能夠驗證程式碼的行為，讓開發者能夠更有信心的重構、更動程式碼。
觀察並釐清什麼樣的「品格」是一位工程師可以具備的，以及普遍工作環境和社群帶給我的感受，總結出幾點可以解決問題的模式，在日常也作為我自己參考與努力的依據。有耐心、能溝通、跳脫框架是我理想中軟體工程師可以具備的美德，不知道你是不是也認同這樣的想法？
JSON-LD 是一種夾帶更多資料以描述網頁網頁內容的方式之一。通常不會多留意它，直到真正實作下來也不知道有沒有任何用處？該如何檢驗搜尋引擎有正確抓到這筆資料？這篇文章分享我的經驗以及讓你實際驗證 JSON-LD 是否和規且有被正確解讀。
設計令牌（Design Tokens）或令牌是一種管理設計屬性與數值的方式，用於建構 UI 最細小的元素，適當的使用設計令牌可以讓設計系統更加彈性與可擴展，不論是任何職位，只要與設計系統相關的人士都應當了解設計令牌的概念。
近期公司購買了設計相關的課程，期望透過研究改良目前的設計來提升與開發合作的效率，恰好我之前的工作領域也與設計相關，而且我很早就想跨領域多寫與網頁相關的文章！因此打算特地開一系列文章記錄課程筆記以及我自己補充的想法與資源。
NPM 是 JavaScript 開發環境中一定會使用到的一款套件管理器，本篇文章將比喻導演一部電影來解釋 NPM 如何運作。寫程式就像在拍攝一部電影，可以親自上陣設計並打理演員，也可以聘請別人設計好的，NPM 就像一個平台可以在上面找到很多現成的演員，這些演員就是套件（Package）。
通常寫多個 h1 都會被教育這是錯誤的做法，但實際上真的是如此嗎？我深入的研究各方面說法。整理 Google 與 MDN 文件的說法，一個頁面有很多個「重磅級標題」的情況非常少見的，如果這麼寫在閱讀架構上是合理的話，使用多個 <h1> 在單個頁面之中是完全沒問題的，此外有許多更值得探討的細節。
useEffect 是 react 中一個相當基礎常見的 Hook，要真正學會它就必須要對 React 如何運作有基礎的認識才行，它是 React 提供的一個 Hook 用於操作副作用，舉例來說：送出請求、操縱 DOM、設定監聽器……等都是副作用。
記錄一下我是如何製作自己的前端作品集的，隨著從大學畢業，很快也要步入社會尋找正職工作，因此急需一個可以展示自己作品的平台，既然身為前端開發者，何不動手製作一個作品集網站呢？製作自己的作品集是必經歷的體驗，也是一趟很有趣的體驗。
Astro 作為一個靜態內容為主的生產器非常適合用於打造靜態網頁，這次我將用自己的作品集為案例教你打造一個實際的靜態網站，透過以自己的作品集網站為範例，借助這個機會來展示這個框架好用與強大的地方。只需要有基礎的 HTML 與 CSS 知識就能跟著這篇文章創造一個屬於自己的作品集。
總結在六角學院擔任線上助教一年來總結的三大心得以及給同學助教老師們的話。從去年七月至今已在六角學院擔任近一整年遠端助教，準備在下個月畢業、服兵役並開始下段旅程，打算藉由這篇文章談談這段時間的心路歷程與未來的規劃。期待六角學院未來的發展，培養更多新一代的工程師。
「什麼是 Ajax 以及為什麼不是 Ajaj？」，這個問題一直在腦海中停留許久，有人和我一樣思考 Ajaj 之類的稱呼的可能性嗎？經過一些調查了解背後的原因並寫成文章，關於 Ajax 的歷史以及名稱的由來可以參考看看我的發現。
「為什麼想經營網站？」在製作之前要好好想清楚這件事，製作網站與經營網站是完全不同的技能。舉我自己的部落格「網頁東東」為例，直到近期才比較有「寫部落格」這件事究竟是什麼的體會，透過探討分析我自己經營網站內外動力，希望能幫助你重新思考自己經營網站的真正的目標與動機。
Hoppscotch 是一個線上工具，可以讓你在瀏覽器上迅捷的測試後端提供的 API。很常遇到到後端的文件就直接上手寫程式，導致在寫程式的時候常常疏漏許多問題，像是請求方式錯誤、少夾帶參數、網址錯誤、資料不存在……等，因此我都會建議先熟悉怎麼用現成的工具來測試 API，使用圖形化的介面可以更直觀的管理 API 們。
React Hook 是 React 16.8 版本新增的功能，可以讓你在不寫 class 的情況下使用 React 的功能。「要如何區分 Hook 與方法的差別？什麼情況下在 React 裡稱為 Hook？什麼時候才只能稱為方法？」於是寫這篇文章來解釋清楚。
OBS 是 Open Broadcaster Software 的縮寫，是一個在開源社群非常熱門的錄影軟體，由於時常有錄製影片的需求，於決定把設定 OBS 的過程記錄下來，讓有需要的人可以依照簡單的圖示快速上手，從安裝到實際錄影。
總結作為六角學院助教一直以來審核作業上最容易碰上的問題，以及可以怎麼應對。本篇文章集合了各大 4 個要點與提醒幫助你寫出更好的 HTML 結構。了解整篇文章將可以迴避掉很多同學最常踩的坑！推薦身為網頁開發新手的你看看這篇文章。
CodePen 是一個線上的模擬開發環境，功能很簡單，就是一個網頁可以在上面寫 HTML、CSS、JavaScript，並且可以直接在網頁上看到結果，而且還直接分享連結給別人看，對初學者來說介面友好基本沒有上手難度，我是非常推薦的。
寫程式久了會發現撰寫乾淨可被維護的程式是一件相當困難的事情，其中一個造成難維護的原因是因為「函式除了運算並回傳結果之外過程中產生變化影響到其餘的程式」，換句話說問題就是「不必要的副作用，讓程式變得捉摸不定難以理解」，因此應該了解純粹函式的定義以及如何使用，為了更進一步撰寫撰寫乾淨的代碼。
防抖與節流是前端效能主題中必定會出現的模式，對用戶的輸入進行適當的防抖與節流處理，除了有助於提升使用者體驗之外，對開發者來說也節省掉許多潛在的資源浪費，透過實際案例還有動畫圖片一起來了解防抖與節流如何幫助我們提升程式效率。
了解單線程的 JavaScript 背後如何運作、併發處理事件背後的奧妙、拆解晦澀難懂的專有名詞。瀏覽器執行環境中的 JavaScript 是單線程的，也就是一次只能執行一件事，如此一來其他事情就都會被擱置在後，讓使用者等待。這是非常大的問題，但解決方法也非常的簡單：「不要呆呆站在那裏等！」。
在介紹到同步與非同步代碼時，常常會以 setTimeout 或 setInterval 來模擬程式被非同步執行的狀況，這兩種「方法」都不算是 JavaScript 的一部分，不過大多主流執行環境都有提供 (瀏覽器、Node.js)，是很好練習非同步處理 JavaScript 的起點，本文將會詳細講解其背後的故事與原理。
身為前端必學如何操控網頁就需要學習 DOM，用一篇文章快速教你如何程序化的更動網頁，一起來學會如何存取、編輯與監聽 DOM，還有綜合懶人包！如果對 Javascript 物件有一定的了解，代表你已經差不多會操縱 DOM 了，如果還不熟悉，建議可以先了解後再學習 DOM API。
CSS 預處理器已經深深地改變了前端開發的方式，成為一項必備的工具。但隨著時間的轉變，新的標準持續地推出，我們仍然還需要它們嗎？在前端開發領域，常常會聽見的一些預處理器 (Pre-processor)，像是 Sass、less、stylus，是什麼？為什麼存在？這篇文章主要會探討以下幾個重點 (附帶範例)。
BEM 是一種管理 CSS 撰寫方式的一種規範。撰寫小型的網站時通常不需要特別考慮到未來樣式的命名與權級的規劃，但隨著網站的複雜度增長就必須需要一套可預測與可擴充的方式，BEM CSS 由於概念簡潔好懂，成效顯著，並且有著相對長遠的歷史被測試與應用過，很適合作為初學者第一套管理 CSS 的辦法。
前端開發者在開發過程中一些沒有想到過可能存在的小工具與網站，都打包好放在這裡，強化網站開發體驗！網頁總是有太多需要留意的技術細節，需要一個更快速簡便的方式來測試網站是某可靠？某項功能是否到位？可以參考底下的工具協助開發。
我們每天都會囤積大量的文件、筆記、素材、累積下來就像亂糟糟的房間一樣需要整理，如果你也同樣在困擾這樣的問題，這篇文章是為你準備的。本次文章想分享我們團隊是如何建立一個系統應對基本的檔案分工與備份的流程。好的檔案管理是可以被追溯、被規範的，這樣才好合作，好在未來被回顧。
字體是版面的靈魂，好的字體能夠更好的表達文詞間的情緒與情境！本篇文章蒐集了實用且來源可靠、授權清楚的字體網站並且是我平時設計時會考慮參考的網素材網站，像是：Google Fonts、FontShare……在使用時請務必要注意授權範圍限制。