❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記,歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
過去在實作功能的時候,大致都切分成三部份:HTML、CSS 和 JavaScript,各自有各自的任務。HTML 負責版面與元件要怎麼安排、CSS 負責樣式呈現,以及 JavaScript 負責動作,而 CSS 會用 class 作為三者連接的橋樑。
February 10, 2024 Tailwind CSS Atomic CSS css OOCSS 學不動了 CSS in JS styled-components · 留言
Tipping Point Front-End Case Study and Practice: CSS
June 24, 2021 styled-system styled-components Tonic Styled UI CSS Modules CSS in JS BEM css Modern Web Loading Performance Responsive Web Design 響應式網頁 加載效能 趨勢科技 Trend Micro sharing · 留言
本文主要由此投影片「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 · 留言
Styled System 學習筆記。
November 8, 2019 styled-components styled-system CSS in JS css · 留言
樣式管理一直是前端工程師的痛點(很煩 (╯‵□′)╯︵┴─┴),因此 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 吃什麼 · 留言
PostCSS 是一個使用 JavaScript 轉換 CSS 的工具,它可以做的事情很多,像是加入各家瀏覽器的前綴詞(prefix)、將先進的功能轉為目前主流瀏覽器所能支援的語法、語法檢查和報錯、支援 Grid System、使用類似 SASS 的功能等。
August 10, 2018 PostCSS css webpack · 留言
使用 Newsticker 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。
July 22, 2018 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言
使用 News Aggregator 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。
July 21, 2018 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Forced Synchronous Layout Layout Thrashing Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言
更詳細探討如何優化像素管道(Browser Rendering Pipeline)的繪製(Paint)和合成(Composite)這兩個階段。
July 20, 2018 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change css css3 animations 前端效能 系列文 · 留言
更詳細探討如何優化像素管道(Browser Rendering Pipeline)的樣式計算(Recalculate Styles)和版面配置(Recaculate Layout / Reflow)這兩個階段。
July 19, 2018 Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path BEM Chrome DevTools css css3 animations 前端效能 系列文 · 留言
避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。
July 19, 2018 requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css 前端效能 系列文 · 留言
以更高階的角度來看如何優化效能-App 的生命週期,讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。
July 16, 2018 RAIL 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance css3 animations css 前端效能 系列文 · 留言
現今裝置更新畫面的頻率是每秒 60 幀(60Hz 或稱 60fps),意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面,還有很多事情要忙,因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面,就會產生顫動(Juddering)。想提高更新畫面的頻率、避免顫動,就要了解瀏覽器如何渲染畫面。
July 13, 2018 關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance Chrome DevTools Layout Thrashing Forced Synchronous Layout css3 animations css will-change flexbox BEM 前端效能 系列文 · 留言
動畫效能優化筆記。這裡提供三個方向:使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。
June 26, 2018 requestAnimationFrame will-change 關鍵轉譯路徑 效能調校 轉譯效能 css3 animations Rendering Performance Critical Rendering Path javascript css 前端效能 系列文 · 留言
OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。
June 5, 2018 CSS Modules CSS in JS BEM styled-components css react.js vue.js babel · 留言
BEM 是一種 CSS class 命名的設計模式,將介面切割成許多獨立的區塊,以區塊(Block)、元素(Element)和修飾子(Modifier)來命名,優點是以元件觀念進行開發,具有重用性。 它擁有 OOCSS 的架構清楚的美好,也沒有 SMACSS 複雜或令人混淆的部份,因此 BEM 是一個很優秀的 CSS 架構指南。
May 22, 2018 BEM css · 留言
簡單記錄如何建立一個 React Component 並發佈到 NPM 上。
April 25, 2018 react.js styled-components npm css BEM · 留言
使用 CSS3 Transition 和 Animation 製作動畫、效能優化。
August 27, 2017 css3 animations will-change Critical Rendering Path 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Chrome DevTools css · 留言
圖解 Flexbox 進階屬性。
April 6, 2017 flexbox css · 留言
圖解 Flexbox 基本屬性。
April 4, 2017 flexbox css · 留言
一直以來我對 CSS3 動畫這件事情並沒有特別專注研究(如果需要也是用 JavaScript 完成 XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。
March 5, 2016 css3 animations css · 留言
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 · 留言
以往我們都是將小圖示(icon)用切圖的方式放入網頁,而我們也可以將這些 icon 用 CSS「畫」出來。
October 8, 2013 icon fonts Loading Performance 效能調校 css 加載效能 SVG · 留言