Open in app

Sign In

Write

Sign In

Milk Midi
Milk Midi

715 Followers

Home

Lists

About

Feb 27

New React Hook, React.use

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

React

4 min read

React

4 min read


Jan 9

React — 神奇的 preact/signals-react

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

React

4 min read

React

4 min read


Sep 4, 2022

你不知道的 vue transition-group

大家好,我是奶綠茶,今天來聊聊 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

JavaScript

2 min read

JavaScript

2 min read


Aug 19, 2022

React useWindowVariable

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

React

4 min read

React

4 min read


May 3, 2022

React 18 — useSyncExternalStore

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

React

8 min read

React

8 min read


Mar 25, 2022

前端好朋友 — tailwindcss

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

Front End Development

8 min read

前端好朋友 — tailwindcss
前端好朋友 — tailwindcss
Front End Development

8 min read


Jan 20, 2022

深入但不淺出 — 來個 playwright e2e 測試吧

大家好,我是奶綠茶,今天來聊聊 e2e 的好用工具,playwright。 滿多工具都可以做到 e2e 測試,像是 cypress、puppeteer , 而奶綠我經過試玩了一陣子後,決定在團隊裡導入 playwright。 其實 playwright 也是從 puppeteer fork 出來的 (印象中有看過文章,但一時找不到原文,如有錯還請指 …

Front End Development

7 min read

深入但不淺出 — 來個 playwright e2e 測試吧
深入但不淺出 — 來個 playwright e2e 測試吧
Front End Development

7 min read


Jan 4, 2022

nextjs SSR useState 初始化踩雷記錄

大家好,我是奶綠茶 為了要優化 React render,有時會在 useState 初始化時就判斷值。 const [device, setDevice] = React.useState(()=> { return window.innerWidth < 768 ? 'mobile' : 'desktop'; }); React.useEffect(()=> { const resizeHandler = () => { setDevice(window.innerWidth < 768 ? 'mobile' : 'desktop'); } resizeHandler(); window.addEventListener('resize', resizeHandler); return () => { window.removeEventListener('resize', resizeHandler); } }, []);

React

3 min read

React

3 min read


Dec 17, 2021

2022 前端 CSS framework 大亂鬥

大家好,我是奶綠茶 今天來分享 2022 前端相關的 CSS 工具(framework) 1 CSS/SCSS 在接觸任何 framework 之前,當然要對 CSS 的屬性熟悉。 2 bootstrap 老牌的 framework, 現在已推出到 v5 版。 優:方便使用,html link tag 掛 CDN 路徑直接使用。 缺:整包 css 都會被載入,就算沒用到的 class 也一樣 …

Front End Development

4 min read

Front End Development

4 min read


Jun 24, 2021

React 18 推出啦

大家好,我是奶綠茶 startTransition API 下方放一個 render 非常貴的 ExpensiveView 由 input range, 用來控制要 render 的數量 React18 將 setState 拆分成二種 urgent:需要立即反應在畫面上的,像 input range non-urgent:中間過程不重要,只需要知道最終結果 如果在 React18 版 …

React

7 min read

React

7 min read

Milk Midi

Milk Midi

715 Followers
Following
  • Muzli

    Muzli

  • Lee Hsuan

    Lee Hsuan

  • Paul Li

    Paul Li

  • tubik

    tubik

  • Sasha Chen

    Sasha Chen

See all (105)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech