Frontend
簡單的壓縮 HTML、CSS、JavaScript
在網站開發中，壓縮 HTML、CSS 和 JavaScript 是提升性能的關鍵步驟之一。這篇文章介紹了幾個實用的套件，能有效減少檔案大小，縮短加載時間。
console.log() 印出樣式
在網頁開發中，我們經常會使用 console.log() 來印出訊息，方便我們追蹤程式碼的執行狀況。然而，你知道嗎？console.log() 不僅可以印出一般文字，還可以印出帶有樣式的字串！透過在 console.log() 中加入樣式資訊，可以讓印出的訊息更加醒目易讀，提高除錯效率。例如，你可以將錯誤訊息標記為紅色，或是將重要訊息加粗顯示。
用 CSS 控制 SVG 樣式
這篇文章將帶你了解 SVG 圖片與 CSS 的強大結合，學習如何透過 CSS 來操控 SVG 圖形的樣式，賦予你的網頁設計更多彈性和創意。
Vue 3 plugin: 自製 $ 方法
在 Vue 3 中，自製 plugin 是一種擴充 Vue 功能的方式。透過自製 plugin，我們可以向 Vue 添加新的全局方法、屬性或指令。在本篇文章中，我們將介紹如何自製一個 $ 方法。
前端檔案上傳: 圖片預覽
網頁前端上傳圖片預覽是提升使用者體驗的重要功能之一，在檔案上傳的情境中，很常是要上傳圖片檔案，本篇文章將來實作圖片上傳後產生該圖片的預覽圖。使用者上傳圖片，透過 File API 讀取該檔案，並轉換成 DataURL，接著將該 URL 設定為圖片元素的 src 屬性，即可實現即時預覽。
前端檔案上傳: 選擇檔案與拖曳檔案
製作網頁上傳區域，結合拖曳及點擊選擇檔案功能，提升使用者體驗。透過直覺的拖曳動作或傳統的點擊方式，輕鬆選取檔案，使整個上傳流程更為靈活且方便，凸顯網頁互動設計的創新與便利性。
GSAP 教學： ScrollTrigger
ScrollTrigger 是 GSAP 的一個擴充套件，用來製作滑鼠滾動觸發動畫。ScrollTrigger 提供強大的滾動控制，讓網頁動畫輕鬆實現。透過簡單的 API，你能精確掌握動畫觸發點、速度和方向，呈現更流暢、自然的視覺效果。
GSAP 教學： Timeline
Timeline 是 Tween 或者其他 Timeline 的容器，讓我們可以更簡單的製作複雜的動畫。舉例來說，如果沒有 Timeline 我們就只能用 Tween 上的 delay 屬性來決定動畫的先後，但透過 Timeline，我們就可以直接指定動畫的先後順序
GSAP 教學： Tween
在 GSAP 中，可以將 Tween 視為一個 CSS 屬性設定器，我們可以在指定元素上，賦予起始屬性或終止屬性，隨後 GSAP 就會幫我們把動畫產生出來。
Astro 專案中使用 TailwindCSS 並配置 class 自動排版
本文章講解如何在 Astro 專案中安裝 TailwindCSS 套件，以及使用 Prettier 來做 class 的自動排版。