為什麼 CSS 這麼難學這麼詭異？
開發者們對 CSS 有不同的意見，有的人說它很簡單、有的人說它難以駕馭，這些都是事實。我時常聽到苦惱的後端或是與其打交道多年的自己脫口而出：「CSS 真的好詭異阿！」，這篇文章來總結為什麼 CSS 是一個讓人又愛又恨的存在，它為什麼這麼難學這麼詭異？
開發者們對 CSS 有不同的意見，有的人說它很簡單、有的人說它難以駕馭，這些都是事實。我時常聽到苦惱的後端或是與其打交道多年的自己脫口而出：「CSS 真的好詭異阿！」，這篇文章來總結為什麼 CSS 是一個讓人又愛又恨的存在，它為什麼這麼難學這麼詭異？
開發者的工作性質造就我們注定要站在最前線與 AI 並肩作戰，而 GitHub Copilot 這些年的陪伴顯著的提升了我的開發生產力與更有效率的學習開發技巧，是少數我覺得真正值得付費的服務之一，不管你是新手還是老鳥 Copilot 都有對應的定位幫助你加速開發。
近期工作剛好接觸很多介面開發的部分，其中一個需求實作「無限滾動加載功能」，當使用者滾動到頁面底部時會自動加載更多的資料，不用點擊按鈕就能瀏覽更多的資料，就像是自動版的加載按鈕。近期工作剛好接觸很多相關的介面功能開發，讓我們用 Vue Composition API 來實作。
不要讓使用者等待！越多的等待時間，就越容易讓使用者流失，因此讓應用程式的回饋即時，是很基礎重要的原則。Optimistic UI 強調即時、樂觀的使用者介面回饋。在用戶觸發操作後，系統即時假定成功，迅速更新介面，提升使用者體驗。這種方法有效縮短用戶等待時間，創造更流暢、令人滿意的互動體驗。
我既設計網頁也開發網頁，並且在過去幾年經驗中總結發現設計與開發配合上容易遇到的問題像是：我需要繪製多少種尺寸的網頁？我需要替網頁設置多少個斷點？這篇文章我分享自己身為設計者與開發者的經歷以及你為何應該使用越少的斷點來製作響應式網頁越好。
賦予網頁元素相對的關係而非絕對的數值，讓我們強烈聯繫元素之間的差異，而非取決於某個魔法數字可以避免很多折騰。最近看到一篇文章，作者提到用 CSS Variable 來賦予相對而非絕對數值的 `z-index` 值，真是優雅簡潔的方法！完美的發揮了 CSS 變數的優勢，促使我寫下這篇文章。
索取並顯示資料對前端工程師來說是家常便飯的事，但隨著背後延伸的狀態越來越多，就會讓整個專案極度混亂，因此想要藉由這篇文章點出現有問題並提出一些可行的方案，紀錄尋找更高效解法的過程。在索取資料時連帶的有許多狀態需要被管理和調整，文章透過 Vue 來探討如何更優雅的處理這些狀態。
本文描述近期在維護既有代碼時的故事，目前的專案中有各式各樣前人尚未統一的驗證方式，例如：有些是使用 HTML 原生客戶端驗證、伺服器端驗證、第三方套件、自造的驗證方法，如何統一規範驗證方式是一大問題，同時也要思考：「要如何避免創造更多的陳舊代碼？」
本系列 Astro 文章終於完結了，必須說連續 30 天到了後段有點寫不太出來任何東西，秉持著有寫任何東西無論如何都比沒寫強的精神完成了這次的挑戰！本系列文章是當完兵出來沒多久馬上開始寫的，因此是在最後一天開賽而且還只有不到 10 篇的屯稿的狀態下進行的，加上日後工作也忙碌起來，能夠完賽算是很幸運。
終於到第 29 天了……前面寫太多沒有規劃好反而到後面也不知道要多寫什麼。其實在撰寫這 30 天文章之前我有先試寫紀錄一下我用 Astro 製作個人網站的過程，可以參考看看：製作個人前端作品集 - 準備篇以及實作篇，裡面有記錄從發想草稿到實作的過程，如果想要製作個小網站試試水溫可以參考看看。
感覺 30 天真的要寫不下去了 😅，感覺要寫的前面都寫過了，今天這一篇來介紹 Astro 有那些資源可以入門以及近期的新聞。就在昨天 Astro 發布了 3.3 版本，來了嶄新的實驗性圖片組件 <Picture />，改進了語法突出顯示的相容性，引入了套件的可信性證明，以及其他一些提升使用體驗的改進。
本章節來談談 Astro 3.0 版本最吸睛的一項功能：View Transitions ，讓你的靜態網頁也能達成 App 應用一樣的絲滑感受。由於這項技術還在實驗階段，因此放在後面的章節補充。View Transitions API 是瀏覽器正推出的一項 API，提供簡易的方法對任何 DOM 狀態更換提供轉場特效。
很多時候建構網站都太著重在技術層面該如何應對，但要怎麼經營自己的網站或產品好像卻沒什麼概念，因此這裡添加一下我建構網站的歷程與收穫。我從幾年前剛學習網頁到現在一直在為寫部落格做準備，期間嘗試用很多不同技術與挑戰，但一直以來都沒有特別滿意的成果，直到近期才比較有「寫部落格」這件事究竟是什麼的體會。
在 Astro 中串接 CMS 是一件非常容易的事情。內容管理系統 （Content Management System）是一種用於編寫和管理網站內容的工具，可以讓幫助撰寫內容與管理網站資產，不同的 CMS 廠商有各式各樣的特色像是：排程發布、編輯器、合作編輯、資產管理……等特色。
我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理，因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯，還有額外添加 TypeScript 的檢查與 VSCode 提示。本篇文章將帶你認識我如何替自己的 Astro 部落格添加 ESLint 與 Prettier。