Slack archive

frontend-tech

Month: 2019-08

2019-08-09

mofas 12:16:07
https://reactjs.org/docs/testing-recipes.html

reactjs.org

Testing Recipes – React

A JavaScript library for building user interfaces

mofas 12:16:22
原來現在React test已經進化到這地步了
mofas 12:16:34
可以mock global, module, event, timer
mrorz 13:00:39
jest 魔法
`act()` 我還真沒用過
jihchi 22:49:28
Finally I am able to get rid of act warning in react-testing-library!!
➕ 1

2019-08-11

Nicolas 15:26:33
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)
This is a good question
👍 1

2019-08-14

mrorz 19:33:54
“Native lazy loading has arrived!” by Andy Potts https://link.medium.com/gOoX3I228Y

`<img loading=lazy>`
Google Chrome 自創 property，非 HTML spec

link.medium.com

Native lazy loading has arrived!

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

mrorz 09:45:21
React devtools 大改版唷
https://reactjs.org/blog/2019/08/15/new-react-devtools.html

reactjs.org

Introducing the New React DevTools – React Blog

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…

關於「預設隱藏 div」與「不顯示 prop」，基本上會讓使用 CSS modules、一般 CSS、styled-jsx 等 selector based styling 的人有點難 debug react comonent 與 DOM 的巢狀結構。 用其他 CSS-in-JS 的人則不受影響。

我自己用 CSS modules ，不過通常開 react devtools 的時候，絕大多數確實也只看 react components而已。感覺是個很不錯的改版，
❤️ 2

2019-08-17

2019-08-20

mofas 11:50:51
https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Google Developers

Rendering on the Web  |  Web  |  Google Developers

集近年 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 的東西來做事情。
工程上方便（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 恩 就是那個
2
mrorz 14:30:20
但老實講，雖然 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 的東西來做事情。

2019-08-21

csdannixxx 17:27:54
@superdannychang has joined the channel

2019-08-23

mofas 14:52:00
https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

Figma

How to build a plugin system on the web and also sleep well at night

The solution we found helps us run Figma plugins in a safe way — i.e. not eval(UNTRUSTED_CODE).

2019-08-26

mofas 14:03:48
Leak: Facebook has something called "unredux"
mofas 14:05:34
The main philosophy is put everything in the context and you can get/set as global variable.
mofas 14:06:12
However, you need declare what global variables you want to use in a component.
mofas 14:06:49
Kind of context version redux with dependency injection.
mofas 14:09:18
```
function (){
[user, setUser] = useGlobalVariable('user');
}
```
mofas 14:10:09
當然你也要在外面先declare user這個reducer長怎樣..
mofas 14:10:23
有人有興趣可以寫寫看這個hook lol
👍 3