CSS :has() 選擇器我們寫 CSS 時常常需要往下層選元素，例如「套用樣式到 <article底下的 <h1>」。如果能根據下層元素改變上層的樣式，一定很方便吧？這樣的需求，現在可以透過純 CSS 做到囉！CSS :has() 選擇器某種程度可以做到「往上層選」的效果⋯⋯（閱讀完整文章）Feb 22, 2024Feb 22, 2024
以 <dialog> 實作 modal dialog以往實作 modal dialog 時，通常得搭配 position: fixed 以及 z-index，做出「覆蓋在目前畫面之上」的對話框。如今只要透過 <dialog> 元素，就可以更輕鬆地做到同樣⋯⋯（閱讀完整文章）Nov 6, 2023Nov 6, 2023
使用 Array.at 存取陣列裡的值一講到透過 index 存取 JavaScript 陣列裡的值，應該不少人第一個念頭是用 bracket notation（中括號）吧？今天要介紹另一個方法：Array.at。Sep 8, 2023Sep 8, 2023
讓人一看就想回覆的誠懇提問術去年起有幸跟一位發問技巧高超的夥伴共事。觀察對方如何發問後，再對比自己和其他同事問問題的方式，發現有許多值得學習之處。於是我把觀察到的發問技巧，加上我自己的心得，整理成一篇文章，供大家參考。Aug 10, 2023Aug 10, 2023
你的 onscroll 不是你的 onscroll前陣子同事處理滾動事件時，發現了 window.onscroll 跟 document.body.onscroll 連動的奇妙現象。我覺得很有趣，便嘗試釐清背後的原因，整理後跟大家分享。Dec 26, 2020Dec 26, 2020
2020 非本科轉職網頁前端工程師心得我 1993 年出生，教育大學心理諮商系畢業。第一份工作在研究所擔任研究助理，可以說是完全與工程師無關的經歷。2018 年 8 月我開始接觸網頁前端開發，學習時長約一年半，中途一度個人因素沈澱了半年，最終在 2020 年 6 月順利轉職成為網頁前端工程師。Jun 27, 20206Jun 27, 20206
使用 WebP 格式減少圖片載入時間根據 Can I Use 網站的資料，WebP 的支援程度已經達到 80%，除了 IE 和 Safari 不支援外，其他大部分瀏覽器都可以使用。Sep 6, 20191Sep 6, 20191
透過 lazy loading 延遲載入圖片Lazy loading（延遲載入）是網頁開發很實用的技巧，如果用在圖片很多的網站，不僅可以大幅提升頁面載入速度，還能節省使用者和伺服器雙方的網路流量。Aug 8, 20191Aug 8, 20191
