大家好我是奶綠，今天來分享二個 React experimental 新的 Hooks。 1 — useEffectEvent 這個 hook 是專門搭配 useEffect 一起使用， 過去在使用 useEffect 時，為了要取得最新的值，只要函式裡有用到的變數都要放到 useEffect dependency 裡。 假設要做一個聊天室 Connection 功能，當 roomI …

大家好，我是奶綠 今天來聊聊將 Webpack 更換至 Vite 的心得。 Webpack 的缺點就是當專案越來越大時，速度就越慢，再加上現在瀏覽器都原生支援 type=”module” 了，就不需要再像過去透過 Webpack 來 chunk 共用 module。 分享一下將公司專案由 Webpack 換到 Vite 的心得。 不一樣 1：package.json Vite 採用 Ja …

大家好，我是奶綠茶 今天來分享在 WebConf 2023 研討會所講的主題 WebComponent 其中包含了 WebCompnent 的基本語法 WebComponent 生命週期 WebComponent 與 petit-vue 的應用。 祝大家學習愉快

大家好，我是奶綠 最近在研究 Next.js 13，發現官方的範例使用到了一個新的 React.use 函式，深入追下去後，發現這是 React 下一版將加入的新 hook，他可以讓我們用更少的程式碼來 fetch Data。 因為新版還沒發佈，所以先需要手動將 React 升級到 18.3.xxxx 版。 先來看目前怎麼使用 React 來 fetch …

大家好，我是奶綠茶，除了 React 外，還有一套叫 preact，簡單來說就是另一個開發團隊推出的 JS framework，語法和 React 99% 都一樣。 其中最酷的他使用 Signals 來取代 React.useState，語法更簡單，也不需要用什麼 useEffect 來掛一堆相依性判斷。而且還有同步推出 React 可以用的 sign …

大家好，我是奶綠茶，今天來聊聊 vue 裡的 transition-group 先來看一下官方的範例： https://vuejs.org/examples/#list-transition 在 v-for 的外層新增一個 TransitionGroup Component，當元素新增或刪除時，就可以有動態效果，簡單又好用。 當新增元素時，下方的元素會有個往下移的態動效果，單看 CSS 的部份， 怎麼想都不可能只用純 CSS 就做到。 還好官網的範例給了一個重要的連結。 FLIP list transitions with the built-in <TransitionGroup>. https://aerotwist.com/blog/flip-your-animations/ 然後再去翻 vue 的原始碼，就可以看到 TransitionGroup 就是使用上方的 FLIP 手法。 https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/TransitionGroup.ts

大家好，我是奶綠 今天來聊聊在 React 裡如何取存 window 變數。 window 很好用，因為他只有一個，所以全站可以共用變數，但 window 裡的變數有更動時，react 不會知道，所以我們要加工一下。 宣告一個 window.update 的函式，改變數的同時，也 dispatch CustomEvent。 window.myVari …

大家好，我是奶綠茶 今天來分享 React 18 新的 hooks — useSyncExternalStore 之前如果要跨組件溝通，可以使用 React Context, 但他會有強制 rerender 的問題。 或是使用 redux 這樣的套件，現在可以直接用 useSyncExternalStore 來取代。 (如果是超大專案要使用，奶綠我 …

大家好，我是奶綠茶 分享我在 2022 台灣 vue 社群介紹 tailwindcss 文件連結在這，針對大家的問題我來整理一下。 (技術本質沒有好或壞，以下內文都是個人的心得，沒有絕對的對或錯) 當要修改 style 時，你會 1. 開 devtools, 找到該 class，例如：banner__heading-title 2.進 code 想 …