#frontend-tech
2019-08-09
原來現在React test已經進化到這地步了
可以mock global, module, event, timer
jest 魔法
`act()` 我還真沒用過
`act()` 我還真沒用過
Finally I am able to get rid of act warning in react-testing-library!!
- ➕1
2019-08-11
The link to #frontend-tech is a bit borderline but people here might know: what is the best alternative to Stripe or Braintree in Taiwan? (considering most importantly flexibility of the dev API and integration options)
- 👍1
This is a good question
2019-08-14
“Native lazy loading has arrived!” by Andy Potts https://link.medium.com/gOoX3I228Y
`<img loading=lazy>`
Google Chrome 自創 property，非 HTML spec
`<img loading=lazy>`
Google Chrome 自創 property，非 HTML spec
link.medium.com
This article will talk you through Chrome’s new native lazy loading feature and my experience using it at the BBC
- 👍2
2019-08-16
React devtools 大改版唷
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
reactjs.org
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What’s changed? A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. Visit the interactive tutorial to try out the new version or see the changelog for demo videos and more details. Which…
- ❤️2
關於「預設隱藏 div」與「不顯示 prop」，基本上會讓使用 CSS modules、一般 CSS、styled-jsx 等 selector based styling 的人有點難 debug react comonent 與 DOM 的巢狀結構。 用其他 CSS-in-JS 的人則不受影響。
我自己用 CSS modules ，不過通常開 react devtools 的時候，絕大多數確實也只看 react components而已。感覺是個很不錯的改版，
我自己用 CSS modules ，不過通常開 react devtools 的時候，絕大多數確實也只看 react components而已。感覺是個很不錯的改版，
關於「預設隱藏 div」與「不顯示 prop」，基本上會讓使用 CSS modules、一般 CSS、styled-jsx 等 selector based styling 的人有點難 debug react comonent 與 DOM 的巢狀結構。 用其他 CSS-in-JS 的人則不受影響。
我自己用 CSS modules ，不過通常開 react devtools 的時候，絕大多數確實也只看 react components而已。感覺是個很不錯的改版，
我自己用 CSS modules ，不過通常開 react devtools 的時候，絕大多數確實也只看 react components而已。感覺是個很不錯的改版，
2
2019-08-17
This is a good question
2019-08-20
Google Developers 
- 2
集近年 paradigm 之大成呢
但老實講，雖然 next.js 這類 rehydration 在 initial load 很 heavy，但接下來的 page navigation 都是 client side 接手，透過 API 完成，就不會有很慢的問題了。
這件事情若要透過 server render 或 predender 達成，可能要用類似 Rails 的 turbolinks，而且未來開發新功能時，還是要去考慮每一個頁面的每個 component 到底要做在 server-side 還是 client side JS 的問題。server render 與 pre-render 的 interactivity 最後應該都只能走 unubstrusive JS、client side JS 直接操作 DOM 來做，很難搭配 react.js 這種整個接手 UI 的東西來做事情。
這件事情若要透過 server render 或 predender 達成，可能要用類似 Rails 的 turbolinks，而且未來開發新功能時，還是要去考慮每一個頁面的每個 component 到底要做在 server-side 還是 client side JS 的問題。server render 與 pre-render 的 interactivity 最後應該都只能走 unubstrusive JS、client side JS 直接操作 DOM 來做，很難搭配 react.js 這種整個接手 UI 的東西來做事情。
工程上方便（next.js 等 isomorphic JS 實現 server-side rendering logic 與 client-side rendering logic 合一）與 *initial* web page performance 就是個 trade-off 囉。
Google 內部有server render有解決上面那個問題..
不過很難寫... 極度囉唆
而且在調動DOM方面真的不方便... 不過Google就是靠unit test 應幹下去
你假如看到Google project裡面DOM出現 jscontroller / jsaction 恩 就是那個
集近年 paradigm 之大成呢
Replied to a thread: 2019-08-20 11:50:51
但老實講，雖然 next.js 這類 rehydration 在 initial load 很 heavy，但接下來的 page navigation 都是 client side 接手，透過 API 完成，就不會有很慢的問題了。
這件事情若要透過 server render 或 predender 達成，可能要用類似 Rails 的 turbolinks，而且未來開發新功能時，還是要去考慮每一個頁面的每個 component 到底要做在 server-side 還是 client side JS 的問題。server render 與 pre-render 的 interactivity 最後應該都只能走 unubstrusive JS、client side JS 直接操作 DOM 來做，很難搭配 react.js 這種整個接手 UI 的東西來做事情。
這件事情若要透過 server render 或 predender 達成，可能要用類似 Rails 的 turbolinks，而且未來開發新功能時，還是要去考慮每一個頁面的每個 component 到底要做在 server-side 還是 client side JS 的問題。server render 與 pre-render 的 interactivity 最後應該都只能走 unubstrusive JS、client side JS 直接操作 DOM 來做，很難搭配 react.js 這種整個接手 UI 的東西來做事情。
工程上方便（next.js 等 isomorphic JS 實現 server-side rendering logic 與 client-side rendering logic 合一）與 *initial* web page performance 就是個 trade-off 囉。
2019-08-21
@superdannychang has joined the channel
2019-08-23
Figma
The solution we found helps us run Figma plugins in a safe way — i.e. not eval(UNTRUSTED_CODE).
Google 內部有server render有解決上面那個問題..
1
不過很難寫... 極度囉唆
而且在調動DOM方面真的不方便... 不過Google就是靠unit test 應幹下去
你假如看到Google project裡面DOM出現 jscontroller / jsaction 恩 就是那個
2019-08-26
Leak: Facebook has something called "unredux"
The main philosophy is put everything in the context and you can get/set as global variable.
However, you need declare what global variables you want to use in a component.
Kind of context version redux with dependency injection.
```
function (){
[user, setUser] = useGlobalVariable('user');
}
```
function (){
[user, setUser] = useGlobalVariable('user');
}
```
當然你也要在外面先declare user這個reducer長怎樣..
有人有興趣可以寫寫看這個hook lol
- 👍3