用 CSS Grid 創造蒙德里安藝術
前言前陣子 netflix 上了最新一季的夜魔俠，其中的反派角色很愛在家中擺設畫作，有了藝術品襯托，壞人在我的腦海裡突然就變成看似很有深度的角色。這讓我覺得應該也該擺點畫作在家裡，看看能不能提高自己的層次。 而宅宅如我當然無法做如此的投資，不過如果能夠自己用 Web 技術產生一些藝術作品，然後投影在家中呢？應該很酷吧！然後就在 codepen 上發現了一個有趣的東西： See the Pen Randomly generate Mond
進階 React Component Patterns 筆記（下）
前言上次我們介紹了三種 Rect Component Patterns，包含 Compound component、Render props component 與 Prop collections & getters，而今天要繼續往下介紹剩下的五個 Patterns: State Initializers State Reducer Control Props Provider Higher-order component
進階 React Component Patterns 筆記（上）
前言前不久在 Frontend masters 看到一部影片 Advanced React Patterns，是 Paypal 的工程師 Kent C. Dodds 在某場 workshop 介紹他實作 React component 時所使用的進階 React Patterns（目前似乎要付費觀看，而他在 egghead.io 上也有一系列教學，同樣要收費就是了…），內容非常豐富扎實，若是想提供一些可高度客製化的共用元件，使用這些 P
React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate
前陣子正在重構公司的專案，試了一些東西之後發現自己對於 React 的渲染機制其實不太了解，不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣，其實還有滿多人對這整個機制不太熟悉，因此決定寫這篇來分享自己的心得。 其實不知道怎麼優化倒還好，更慘的事情是你自以為在優化，其實卻在拖慢效能，而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了！這個就嚴重了。 因此，這篇文章會涵蓋到