前端必知的存儲方案：Cookie vs LocalStorage vs SessionStorage
身在前端有幾個必須知道的瀏覽器存儲方案，重點差異在於： 容量上限、有效期限設置、是否與伺服器互動 ，各自有不同的特性適合運用於不同場景。之外也有許多延伸的問題如： Cookie 與法規、資安漏洞防範相關設定、除存字串以外的資料結構。
身在前端有幾個必須知道的瀏覽器存儲方案，重點差異在於： 容量上限、有效期限設置、是否與伺服器互動 ，各自有不同的特性適合運用於不同場景。之外也有許多延伸的問題如： Cookie 與法規、資安漏洞防範相關設定、除存字串以外的資料結構。
近期在面試考一些常見邏輯測驗題目而在與朋友對談到這件事的過程中，發現一種觀點是「時間到也寧願留白也不要亂填」，以免被發現了仰賴運氣不懂裝懂又要解釋。我很訝異自己當過多年的學生，卻是第一次反思這項行為背後的動機與取捨。人的偏見不是那麼輕鬆就能夠改變的，但透過思考能更明白自己是否知行合一。
隨著部落格文章逐漸增多，靜態生成壓力也隨之上升，舉例來說在日常開發會需要花費近 10 分鐘的時間，大多是生成圖片佔據大多時間，建構預覽圖的數量是：`(語言 x 文章數量)`。延續最大程度的靜態渲染是合理的選擇，而針對 OG 圖片渲染可以包成 Serverless Function 在需要時呼叫。
了解 `<a>` 是網頁資源相互連結、搜尋引擎排序判斷的關鍵，甚至與資安也有一定的關聯，對於 SEO 與前端來說是必須了解的知識點之一。搜尋引擎仰賴 HTML 文件中的 `<a>` 標籤了解頁面之間的關聯並進而評分，理解 `<a>` 能夠更好的處理與標示頁面與頁面之間的關係。
近期在嘗試 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 製作滑順的展開閉合動畫。
先前面試時面試官詢問到我早期製作的一個 SPA 網站在換頁後圖片載入體驗不太好的問題，當時我把腦袋能想的所有答案都提出來了😅，最終有答到一點邊緣知識，但太少用所以回答的不是很確定，因此這次來補齊這方面瀏覽器提供的機制，主要介紹瀏覽器如何處理安排資源的加載。
資料庫就是一個儲存資料的軟體，根據儲存資料性質不同，合適的資料庫種類也會不同。了解 Transaction、ACID、Normalization……等核心概念非常重要。還有更多可以深掘的細節，先單純把學到的知識紀錄一下，未來個別用更多文章詳細描述 :)
依照先前的教學我們已經可以創建基本的 CRUD 程式，但基於 HTTP 是無狀態的協議，如果單純實作會員系統用戶將會需要在每次操作登入會員相關的行為時重複驗證，明顯是糟糕的使用體驗。一種解決方案是在請求時伺服器將會建立 Session。
隨著前端演進，我們時常需要依靠現成的框架輪子協助，而其中 Vue 又是繼 React 外第二熱門且成熟的選項，但很少有教學提到一個完整的專案該如何建構，以及有哪些模式可以遵循。這次來介紹一下如果從頭開始我會怎麼建構一個 Vue 專案，在 2025 年！