✏️全部文章
HTML img 標籤的三個實用方法
前端基礎-限制圖片大小 如果我們用 width: 100%，圖片會跟著父元素的寬度，當父元素越大，圖片也會變大，如下👇 有時候我們希望圖片的大小不要超過原始尺寸，此時就可以用 max-width: 100...
前往HTML img 標籤的三個實用方法文章如何用 CSS 做 Accordion 手風琴？不再需要用 JS 計算高度
前端特效-accordion 是前端非常常見的組件，他長這個樣子 👇 點擊時候展開顯示內容，再次點擊就關閉。 因為 css height 屬性如果從 0 到 auto 是吃不到 transition 效果...
前往如何用 CSS 做 Accordion 手風琴？不再需要用 JS 計算高度文章React Compiller 是什麼？他有哪些好處？
前端框架-React 19 除了更新了很多有關表單和異步操作的 hook 以外，最令人興奮的還是 React Compiler 的消息。 那究竟 React Compiler 是甚麼？又為什麼讓人興奮？今天這...
前往React Compiller 是什麼？他有哪些好處？文章JS 實現深拷貝的三種方法 - 面試必考的 DeepClone
前端進階-前言 深淺拷貝是面試很常問的問題，今天就來好好聊一聊在 JS 中的深淺拷貝，以及為甚麼要用深淺拷貝吧！ 為甚麼要用淺拷貝？ 對於一般的原始型別(Primitive Type)，像是 boolea...
前往JS 實現深拷貝的三種方法 - 面試必考的 DeepClone文章JS - Intersection Observer 交叉觀察器
前端進階-Intersection Observer 交叉觀察器 前陣子做網站時遇到一個需求，當使用者滑到底部時，要獲取新的資料，就是所謂的懶加載 lazy loading。 最一開始的想法是用 scrol...
前往JS - Intersection Observer 交叉觀察器文章如何轉換網頁中的貨幣單位、日期格式？- JS Intl 詳解
前端進階-你知道 JS Intl 這很有意思的 API 嗎？ 他提供許多方法來處理不同地區和語言的文法、日期、貨幣格式，讓你在解決網站需要國際化時可能會遇到的格式問題。 我們可以直接在控制台裡輸入 Intl...
前往如何轉換網頁中的貨幣單位、日期格式？- JS Intl 詳解文章5 種你一定要會的 CSS 選擇器 - 大幅減少 JS 的使用，製作網頁更有效率
前端基礎-相信 CSS 選擇器對寫網頁的人都不陌生，除了常用的 :hover、:actived、::after 之外，還有其它超很好用的 CSS 選擇器，用的好的話甚至可以取代部份的 JS 程式碼，今天我就整理...
前往5 種你一定要會的 CSS 選擇器 - 大幅減少 JS 的使用，製作網頁更有效率文章React useOptimistic Hook 詳解 - 如何在 React 實作 Optimistic Update？
前端框架-React 19 推出了一個新的 Hook，專門用來樂觀更新 - useOptimistic。如果你不知道甚麼是樂觀更新，可以參考我寫的這篇文章，裡面有詳細的介紹。 在 React 中如何實現樂觀更...
前往React useOptimistic Hook 詳解 - 如何在 React 實作 Optimistic Update？文章為甚麼你寫的 CSS 沒有效果 - CSS 選擇器的優先級、權重
前端基礎-為甚麼你寫的 CSS 沒有效生效呢？ 在 CSS 中優先級可以分成 0 ~ 5 共 6 個等級，數字越大，優先級越大，比如說 !important 就是 5 級優先級，所以他可以覆蓋所有的選擇器。 ...
前往為甚麼你寫的 CSS 沒有效果 - CSS 選擇器的優先級、權重文章如何用 CSS 做出邊緣模糊的圖片？ 三種做 CSS Fuzzy Border 的方法
前端特效-前這子公司遇到這樣設計的需求 👇 我第一個想法試用 mask 製作，後來 mask 遇到一些問題，就又想了另外兩個思路來製作，你知道怎麼做嗎？ 邊緣模糊圖片的 HTML 和 CSS 先簡單看一...
前往如何用 CSS 做出邊緣模糊的圖片？ 三種做 CSS Fuzzy Border 的方法文章