Open in app

Sign In

Write

Sign In

Milk Midi
Milk Midi

769 Followers

Home

Lists

About

2 days ago

Override XHR and fetch requests with Chrome

大家好,我是奶綠, 日常開發上要直接在 Production 站上捉 Bug,總不能一直傳檔上去測試吧, 過去可以使用一套 Chrome Extension Resource Override 來攔劫遠端的 fetch,改讀本機的檔。 現在新版的 Chrome 也內建了啦。 What's New in DevTools (Chrome 117) - Chrome Developers Override XHR/fetch requests and hide extension requests from the Network panel, see changes in fetch priority in the…developer.chrome.com 使用方法也很簡單 1 Open devtool 2 switch Network Tab 3 找到你想要 override 的連結,點擊右鍵就會看到 override 的選項 4 Chrome 的需要讀取本機的權限,並選擇一個資料夾。 5 如影片,就可以直接在 chrome 上改寫原始碼,就會自動同步回剛剛指定的資料夾。

Front End Development

1 min read

Front End Development

1 min read


6 days ago

React useEffectEvent, useOptimistic

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

React

6 min read

React useEffectEvent, useOptimistic
React useEffectEvent, useOptimistic
React

6 min read


Sep 1

Webpack to Vite

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

Front End Development

10 min read

Webpack to Vite
Webpack to Vite
Front End Development

10 min read


Aug 12

2023-WebComponent

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

Front End Development

1 min read

Front End Development

1 min read


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

Milk Midi

Milk Midi

769 Followers
Following
  • Daniel Kao

    Daniel Kao

  • Sasha Chen

    Sasha Chen

  • Muzli

    Muzli

  • tubik

    tubik

  • Dan Abramov

    Dan Abramov

See all (108)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams