Feb 27New React Hook, React.use大家好，我是奶綠 最近在研究 Next.js 13，發現官方的範例使用到了一個新的 React.use 函式，深入追下去後，發現這是 React 下一版將加入的新 hook，他可以讓我們用更少的程式碼來 fetch Data。 因為新版還沒發佈，所以先需要手動將 React 升級到 18.3.xxxx 版。 先來看目前怎麼使用 React 來 fetch …React4 min readReact4 min read
Jan 9React — 神奇的 preact/signals-react大家好，我是奶綠茶，除了 React 外，還有一套叫 preact，簡單來說就是另一個開發團隊推出的 JS framework，語法和 React 99% 都一樣。 其中最酷的他使用 Signals 來取代 React.useState，語法更簡單，也不需要用什麼 useEffect 來掛一堆相依性判斷。而且還有同步推出 React 可以用的 sign …React4 min readReact4 min read
Sep 4, 2022你不知道的 vue transition-group大家好，我是奶綠茶，今天來聊聊 vue 裡的 transition-group 先來看一下官方的範例： https://vuejs.org/examples/#list-transition 在 v-for 的外層新增一個 TransitionGroup Component，當元素新增或刪除時，就可以有動態效果，簡單又好用。 當新增元素時，下方的元素會 …JavaScript2 min readJavaScript2 min read
Aug 19, 2022React useWindowVariable大家好，我是奶綠 今天來聊聊在 React 裡如何取存 window 變數。 window 很好用，因為他只有一個，所以全站可以共用變數，但 window 裡的變數有更動時，react 不會知道，所以我們要加工一下。 宣告一個 window.update 的函式，改變數的同時，也 dispatch CustomEvent。 window.myVari …React4 min readReact4 min read
May 3, 2022React 18 — useSyncExternalStore大家好，我是奶綠茶 今天來分享 React 18 新的 hooks — useSyncExternalStore 之前如果要跨組件溝通，可以使用 React Context, 但他會有強制 rerender 的問題。 或是使用 redux 這樣的套件，現在可以直接用 useSyncExternalStore 來取代。 (如果是超大專案要使用，奶綠我 …React8 min readReact8 min read
Mar 25, 2022前端好朋友 — tailwindcss大家好，我是奶綠茶 分享我在 2022 台灣 vue 社群介紹 tailwindcss 文件連結在這，針對大家的問題我來整理一下。 (技術本質沒有好或壞，以下內文都是個人的心得，沒有絕對的對或錯) 當要修改 style 時，你會 1. 開 devtools, 找到該 class，例如：banner__heading-title 2.進 code 想 …Front End Development8 min readFront End Development8 min read
Jan 20, 2022深入但不淺出 — 來個 playwright e2e 測試吧大家好，我是奶綠茶，今天來聊聊 e2e 的好用工具，playwright。 滿多工具都可以做到 e2e 測試，像是 cypress、puppeteer ， 而奶綠我經過試玩了一陣子後，決定在團隊裡導入 playwright。 其實 playwright 也是從 puppeteer fork 出來的 (印象中有看過文章，但一時找不到原文，如有錯還請指 …Front End Development7 min readFront End Development7 min read
Jan 4, 2022nextjs SSR useState 初始化踩雷記錄大家好，我是奶綠茶 為了要優化 React render，有時會在 useState 初始化時就判斷值。 const [device, setDevice] = React.useState(()=> { return window.innerWidth < 768 ? 'mobile' : 'desktop'; }); React.useEffe …React3 min readReact3 min read
Dec 17, 20212022 前端 CSS framework 大亂鬥大家好，我是奶綠茶 今天來分享 2022 前端相關的 CSS 工具(framework) 1 CSS/SCSS 在接觸任何 framework 之前，當然要對 CSS 的屬性熟悉。 2 bootstrap 老牌的 framework, 現在已推出到 v5 版。 優：方便使用，html link tag 掛 CDN 路徑直接使用。 缺：整包 css 都會被載入，就算沒用到的 class 也一樣 …Front End Development4 min readFront End Development4 min read
Jun 24, 2021React 18 推出啦大家好，我是奶綠茶 startTransition API 下方放一個 render 非常貴的 ExpensiveView 由 input range, 用來控制要 render 的數量 React18 將 setState 拆分成二種 urgent：需要立即反應在畫面上的，像 input range non-urgent：中間過程不重要，只需要知道最終結果 如果在 React18 版 …React7 min readReact7 min read
