Intersection Observer 真實案例：自動更新目錄
近期製作到內容大綱（Table of Contents）相關的功能，發現是一個很適合使用 Intersection Observer 的案例，透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗，現在這樣的需求就變得更加容易實現。
近期製作到內容大綱（Table of Contents）相關的功能，發現是一個很適合使用 Intersection Observer 的案例，透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗，現在這樣的需求就變得更加容易實現。
實際網頁很少遇到特殊的視覺會需要動用到 CSS Grid 的情況，而我近期在製作一些比較特殊視覺的網頁布局，事後感覺特別適合作為一個 CSS Grid 的啟發教材，於是寫下了本篇文章幫助透過真實世界案例更深刻了解 CSS Grid。
這次我透過一步一步拆解解題路徑來描述如何解題。從基本解到分離資料與邏輯、保持 immutable 以及邊緣案例還有文件編寫都有涵蓋。打印出 1 到 100 的數字、假如數字是 3 的倍數，則打印 Fizz、假如數字是 5 的倍數，則打印 Buzz、假如數字是 3 和 5 的公倍數，則打印 FizzBuzz。
記錄一下我是如何製作自己的前端作品集的，隨著從大學畢業，很快也要步入社會尋找正職工作，因此急需一個可以展示自己作品的平台，既然身為前端開發者，何不動手製作一個作品集網站呢？製作自己的作品集是必經歷的體驗，也是一趟很有趣的體驗。
Astro 作為一個靜態內容為主的生產器非常適合用於打造靜態網頁，這次我將用自己的作品集為案例教你打造一個實際的靜態網站，透過以自己的作品集網站為範例，借助這個機會來展示這個框架好用與強大的地方。只需要有基礎的 HTML 與 CSS 知識就能跟著這篇文章創造一個屬於自己的作品集。
防抖與節流是前端效能主題中必定會出現的模式，對用戶的輸入進行適當的防抖與節流處理，除了有助於提升使用者體驗之外，對開發者來說也節省掉許多潛在的資源浪費，透過實際案例還有動畫圖片一起來了解防抖與節流如何幫助我們提升程式效率。
代辦事項是非常常見的習題，其中需求含括了增、刪、讀、改資料，充分的模擬到未來在操縱資料時會碰上的各種情境與問題。可以說各式各樣的軟體都是一種客製化的代辦事項，透過製作代辦事項足以熟悉編寫應用的方方面面，跟著步驟寫一次來練習基本的應用撰寫。