CSS (10 篇文章)

JavaScript (81) TypeScript (48) React.js (15) Vite (6) Vue.js (4) CSS (10) 前端性能優化 (5)

styled-components 進入維護模式：技術演進與生態系變遷分析

在 2025 年 3 月 18 日，styled-components 核心維護者 Evan Jacobs（quantizor）宣布曾經風靡 React 社群的 CSS-in-JS 解決方案正式進入維護模式。這個消息對於前端開發社群產生了相當大的迴響，也標誌著前端樣式處理技術的一個重要轉折點。

2025年3月29日

CSS-in-JS：現代 React 開發的樣式解決方案

CSS-in-JS 是一種革命性的樣式技術，它使用 JavaScript 來創建、添加和管理樣式。當 JavaScript 被解析時，CSS 會被動態生成並附加到 DOM 中。這種方法將樣式的抽象提升到了組件級別，使開發者能夠使用 JavaScript 以聲明性和可維護的方式描述樣式。這篇文章將深入探討 CSS-in-JS 的優勢以及如何在 React.js 應用中實現它。

2025年3月27日

Tailwind CSS 與 React.js：打造現代前端開發環境

本文深入探討了 Tailwind CSS 的眾多優勢，以及如何在 Vite 驅動的 React.js 專案中有效實施它。通過整合這兩種強大技術，開發者可以顯著提升開發效率，同時維持高度自訂的設計靈活性。本文還將展示如何構建一個精美的登入表單，並探討如何結合 SCSS 與 Tailwind CSS 來優化您的前端開發流程。

2025年3月26日

PostCSS：現代化的 CSS 處理工具及其在 Vite 中的應用

PostCSS 作為一個強大且靈活的 CSS 處理工具，已經在前端開發社區獲得了廣泛的認可和應用。本文將深入探討 PostCSS 的本質、使用 PostCSS 的諸多優勢，以及如何在 Vite 項目中高效地集成和配置 PostCSS。

2025年3月25日

2025 前端技能圖譜：系統化學習之路—基於台灣招聘市場的研究與實踐

前端開發作為一個不斷演進的領域，每年都有新的技術和框架湧現。作為一名全棧開發者，我長期以來一直在思考如何系統化地組織前端知識，並將這些知識有效地傳遞給更多人。這篇文章將分享我如何基於台灣招聘市場的研究，構建了一套全面的前端技能圖譜，以及我未來的寫作計劃。

2025年3月25日

Medium-Zoom：提升網站圖像交互體驗的現代解決方案

Medium-Zoom 是一個專注於提供類似 Medium 網站風格圖像縮放效果的輕量級 JavaScript 庫。這款工具能讓使用者點擊圖像後獲得沉浸式的放大視圖，提供更好的圖像細節瀏覽體驗，同時保持網站的整體美觀和用戶體驗流暢度。本文將深入探討 Medium-Zoom 的核心功能、使用優勢，以及與市場上其他類似解決方案的比較。

2025年3月25日

SCSS 技術詳解：優勢、與 CSS 的區別及在 React TypeScript 項目中的應用

SCSS 作為現代 Web 開發中日益流行的樣式預處理器，為前端開發人員提供了比傳統 CSS 更強大的功能和更高效的工作流程。本文將深入探討 SCSS 的優勢、與 CSS 的主要區別，以及如何在 React TypeScript 項目中有效地使用它，幫助開發者提升樣式編寫效率和代碼可維護性。

2025年3月25日

一個 Full Stack Developer 的日常

我在今年 3 月初的時候，透過 Mind Map 整理自己作爲 Full Stack Developer 的日常，並且花了很多時間去改善日常工作流程。最近我有點時間，於是就把那份 Mind Map 寫成文章，希望可以繼續拋磚引玉。謝謝大家支持

2022年5月30日

lozad.js ﹣ 高性能、無依賴的純 JS 任意元素懶加載插件

為了提升用戶的加載頁面速度，我們可以使用懶加載這個方法。當用戶打開頁面的時候，只需要載入首屏的資源，從而節省流量，提升加載速度。而用戶滾動到圖片佔用位置，瀏覽器才載入圖片資源。利用 `lozad.js`，我們可以簡單容易地懶加載圖片。它是一個可以單獨運行的工具，gzip 後的體積只有 910B，可以說是超輕量的工具庫。除了加載圖片之外，它還可以加載任意元素，例如 iframe，影片。在過去的一年，博客就已經啟動這個懶加載的功能了，也算是通過了眾多不同用戶的考驗了。

2018年9月27日

【翻譯】前端性能優化必備工具清單

在網頁開發的世界裡，尤其是前端開發，我們會用很多時間尋找最好的設計，以及最好的內容。雖然這是沒有錯的，但是，我們會忘記去優化我們的網頁。這會讓用戶需要很久的時間，比如說，瀏覽器需要六秒到十秒以上才能完成整個渲染過程。在這篇文章，我會分享優化網頁的檢查清單。如果你覺得我有錯漏的地方，請在下面留言。這張清單會包含一些優化搜尋引擎排名 (SEO) 的技巧，以及減少網頁加載時間的最佳實踐。

2017年6月19日