❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
本文主要由此投影片「Start your app the better way with Styled System」之講稿改寫。本文會從 CSS 歷史開始談起，接著會來看過去我們在使用元件庫上遇到的問題，以及怎麼使用 Styled System 來解決這些問題。
February 25, 2020 styled-system styled-components CSS Modules CSS in JS BEM css End-to-End Testing 端對端測試 Media Query Modern Web Loading Performance Responsive Web Design react.js webpack 自動化測試 響應式網頁 加載效能 sharing · 留言
利用 Styled System 建立一個更好的 UI 元件庫！
November 30, 2019 styled-system styled-components CSS Modules CSS in JS OOCSS BEM SMACSS css Bootstrap Critical Rendering Path End-to-End Testing 端對端測試 Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing 趨勢科技 Trend Micro · 留言
在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。
August 24, 2018 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query Core Web Vitals Web Vitals 前端效能 系列文 · 留言
樣式管理一直是前端工程師的痛點（很煩 (╯‵□′)╯︵┴─┴），因此 CSS 的模組化方法從過去的 OOCSS、SMACSS，到近代的 BEM，還有最近的 CSS Modules 與 CSS in JS，企圖讓程式碼簡潔易懂、可重用，進而有效率地開發和維護。這裡記錄我的玩具「吃什麼，どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。
August 14, 2018 CSS Modules CSS in JS styled-components babel react.js BEM css webpack Media Query 吃什麼 · 留言
Responsive Patterns 是一個蒐集響應式設計與實作的元件庫，舉凡 Layout、Navigation、Forms、Carousel、Tabs、Accordion 和 Lightbox 等皆有，很適合當成學習教材。先來玩玩 Layout 吧 - 分成這幾類：Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists 和 Grid Block。
April 22, 2015 Media Query Responsive Web Design css 響應式網頁 · 留言
利用 Bootstrap Grid System 來排版真是一個方便的方法－若頁面上有許多小方格會隨著解析度而有不同的排列方式，就很適合用 Grid System 來排版。
April 7, 2015 Bootstrap Media Query Responsive Web Design 響應式網頁 css · 留言
使用 Bootstrap 建立一個 RWD Template 的筆記。
February 27, 2015 Bootstrap Media Query Responsive Web Design 響應式網頁 · 留言
響應式網頁（Responsive Web Design）是一種設計概念，希望能讓網頁適用在不同的平台上。公司最近想對產品大改版，於是又來練練 RWD 摟！
October 19, 2014 Media Query Responsive Web Design 響應式網頁 · 留言