❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
要選 Redux 還是 context API + useReducer 來做狀態管理呢？context API + useReducer 能完全取代 Redux 嗎？
May 25, 2023 react hooks react.js redux Web Vitals Loading Performance Rendering Performance front-end architecture Core Web Vitals 加載效能 效能調校 sharing · 留言
使用 React Hooks 重構 React Class Component 的改造筆記。
January 30, 2021 react hooks functional programming react.js 吃什麼 redux · 留言
本文主要由此投影片「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 · 留言
Scheduler 這個 package 本來是 React Core 內部在使用的，但是現在開放出來可用於瀏覽器環境，解決 App 效能不佳的問題，我們也可藉此了解 Scheduler 到底是怎麼運作的。
July 25, 2019 react core react.js · 留言
本文會先從為何要做表單狀態管理說起，接著看目前市面上有哪些好的表單函式庫和條列挑選原則，並探討三個表單函式庫 Redux Form、React Final Form、Formik & Yup，最後做比較和總結。
April 30, 2019 react.js form react.js redux virtual dom sharing · 留言
從 curry -> decorator -> HOC 的漫漫長路。
February 6, 2019 javascript react.js functional programming · 留言
小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。
August 20, 2018 SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
樣式管理一直是前端工程師的痛點（很煩 (╯‵□′)╯︵┴─┴），因此 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 吃什麼 · 留言
「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染，會 console 出這個元件先前與目前的 props 和 state 資訊和建議，作為開發者調整的依據。
June 21, 2018 react.js Rendering Performance 效能調校 轉譯效能 前端效能 系列文 · 留言
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 · 留言
Higher-Order Components（HOC）是一個函數，可代入元件（Component）作為參數，並回傳一個新的元件。使用 HOC 的目的是將通用的邏輯放在 HOC 中，變動的部分就由代入 Component 的 props 和 state 傳入即可。
May 20, 2018 react.js 吃什麼 · 留言
簡單記錄如何建立一個 React Component 並發佈到 NPM 上。
April 25, 2018 react.js styled-components npm css BEM · 留言
比較 Container Components 與 Presentational Components。
April 14, 2018 react.js · 留言
Functional Components、Class-based Components 與 Pure Components。
April 9, 2018 react.js · 留言
使用 React、Redux 和 React-Bootstrap 實作 Todo List。
April 1, 2017 react.js redux immutable todo list immutable.js · 留言
Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM，而改操作這些物件。待一個段落後，再將這些變更更新回真實的 DOM 上，以期提升效能。
March 31, 2017 vue.js react.js virtual dom · 留言
這陣子為了使用 react.js 重構專案，看了不少相關資料，來整理一下 immutable.js 的部份吧。以下的內容包含 immutablility、immutable.js 和 seamless-immutable。
February 12, 2017 immutable seamless-immutable react.js immutable.js · 留言