Slack archive

frontend-tech

Month: 2019-01

2019-01-01

jihchi 07:55:44
https://github.com/revery-ui/revery

GitHub

revery-ui/revery

:zap: Native, high-performance, cross-platform desktop apps - built with Reason! - revery-ui/revery

2019-01-04

jihchi 07:48:10
https://twitter.com/fbopensource/status/1080883562293878784?s=12
Quick notes:

1. use babel plugin to extract
2. runtime replacement ( FB says it happens on server-side; not sure how it works https://facebookincubator.github.io/fbt/docs/transform )
3. comes with both jsx and functional flavor; jsx supports arbitary tags: https://facebookincubator.github.io/fbt/docs/autoparam
4. interesting plural handling: https://facebookincubator.github.io/fbt/docs/plurals
5. Interesting handling of grammar gender ( https://facebookincubator.github.io/fbt/docs/implicit_params ) & pronouns https://facebookincubator.github.io/fbt/docs/pronouns
6. special json format structure, not sure if translation apps understands it. https://github.com/facebookincubator/fbt/blob/master/demo-app/translation_input.json
那個 translation_input.json 看起來無敵怪
https://facebookincubator.github.io/fbt/docs/translating 這個要怎麼給翻譯者呀囧

一定要有專用的 app 吧
Michael Hsu 2019-01-04 11:19:09
高大上只要訂好規格，app 自然有社群會幫忙開發？ＸＤ
Michael Hsu 2019-01-04 11:23:10
翻譯還有推薦用哪套嗎？
我自己是用 ttag
https://ttag.js.org/

主要是因為我們喜歡 gettext，但前端 community 主流基本上不甩 GNU Gettext 喜歡自幹⋯⋯ XD
i18next is great
Also
ttag:

1. use babel plugin / CLI to extract
2. build-time replacement (also supports runtime, but not recommended)
3. basic jsx support (via `jt`), but pretty basic
4. gettext-style plural handling (`ngettext`)
5. translation file: gettext po file format, with English being the translation key
i18next:
1. 有 babel plugin 抽 json
2. runtime replacement，手動取 key 名稱
3. 有特別 plugin 支援 jsx https://github.com/i18next/react-i18next
4. 複數分字串 https://www.i18next.com/translation-function/plurals
5. translation file: json key-value pair file format
Michael Hsu 2019-01-04 12:02:13
開源好像都用 Crowdin
有人付費用在專案上過嗎？
gettext 的優點是 po 檔滿 translator friendly（畢竟 key 就是英文）
不需要特別的平台，文字編輯器也能弄
然後如果真要整合平台，所有平台幾乎都支援（畢竟 gettext 老牌）
json based 不用 translation 平台，根本不能用
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
但反過來就是如果有用 translation 平台，那 gettext 也沒太多優勢
至於自己幫 translation 取 key 的名字這件事，有些開發者覺得不會很痛苦
facebook 這套 fbt 看起來是會直接自己 gen hash
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
Michael Hsu 2019-01-04 12:08:29
如果 developer 即為 translator ，好像也只需要 json based，不需要其他流程或平台做輔助？
是沒錯，不過真的有點痛苦喔
基本上社群似乎是 i18next 最大
react-intl 星星數最多，但我基本上不會考慮
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
Michael Hsu 2019-01-04 12:11:45
恩恩 的確是這樣 而且是 runtime
Michael Hsu 2019-01-04 12:12:19
你說前端字串還會出現在哪？
你可能會寫個 utility function
action 裡也可能會有 flash message
到處都有可能呀
另外，不只是 web application，node.js 如果也有 i18n 需求
Michael Hsu 2019-01-04 12:18:53
如果要考慮 code split 哪套有支援嗎？
這些都不是綁死在 react 的 react-intl 可以處理的
Michael Hsu 2019-01-04 12:19:36
json based 好像比較容易用 dynamic import 自行處理
直接做 build-time translation 的或許就沒有 code splitting 問題 (?)
因為沒有 runtime dependency，字串直接融合在 built js 裡 XD
但實際上我們沒做 code split 所以不確定
Michael Hsu 2019-01-04 12:22:24
感覺 build time 還是最佳解
而且如果自己處理 runtime code split 還要拿捏重複字串問題
Michael Hsu 2019-01-04 12:23:12
不然就是 Runtime + SSR
你上面第二點 fb 會不會就是這樣做
gettext 有個痛點就是跟 git 水土不服
咦 why 會跟 git 水土不服？如果因為行號一直干擾 diff，其實可以關閉輸出行號
mrorz 11:16:21
那個 translation_input.json 看起來無敵怪
😳 2
mrorz 12:07:31
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view

hackmd.io

Web Frontend i18n - HackMD

💯 2

2019-01-05

2019-01-07

mofas 02:44:47
react gesture with spring is awesome

2019-01-08

mofas 03:26:41
https://github.com/FiloSottile/mkcert

GitHub

FiloSottile/mkcert

A simple zero-config tool to make locally trusted development certificates with any names you'd like. - FiloSottile/mkcert

👍 1
mofas 03:26:48
So useful for testing https
Michael Hsu 11:02:45
https://buttondown.email/kentcdodds/archive/24a5cca6-50e1-4a55-822c-b30b246537ec

buttondown.email

Why every new web app at PayPal starts with TypeScript

What happened that made TypeScript viable for me and worth migrating paypal-scripts for. I've been using TypeScript for ~1 week now. Migrating from Flow....

2019-01-10

jihchi 07:57:28
Announcing @storybookjs 4.1: Need for speed
- :zap: Up to 300% faster startup
- :electric_plug: @reactjs 15.x back-compat and full CRA2 compat
- :twisted_rightwards_arrows: New dynamic CSS addon

Wishing you a happy and productive new year!

https://twitter.com/mshilman/status/1083017786610216960?s=12
2
jihchi 08:00:32
#JavaScript tip for today:
You can put console.log/time/etc. in your code... without actually adding it to the source code - use conditional breakpoints for that.

Added benefit: once you are done with your debugging you can just remove all of them with a single click.

https://twitter.com/sulco/status/1082639931409907712?s=12
這招滿有趣的 XDDD
滿適合 trace 3rf party’s library

2019-01-12

mofas 13:26:33
Another React core member leave
😳 1

2019-01-14

mofas 02:09:50
超實用載入svg!
2 2
jihchi 08:24:39
Based on CRA
mrorz 11:15:34
https://github.com/kentcdodds/babel-plugin-codegen#use-with-babel-plugin-macros 有 macro 版

GitHub

kentcdodds/babel-plugin-codegen

:boom: Generate code at build-time. Contribute to kentcdodds/babel-plugin-codegen development by creating an account on GitHub.

2019-01-15

2019-01-17

mofas 00:06:06
https://mxstbr.com/thoughts/tech-choice-regrets-at-spectrum/

mxstbr.com

Tech Choices I Regret at Spectrum

Spectrum is an open source chat app for large online communities. With the benefit of hindsight, here are the technology choices I regret.

mofas 00:06:14
Draft.js is one of them.

2019-01-22

jihchi 08:07:24
https://link.medium.com/FZOWfmteFT
https://t.co/8br6f4nVPT?amp=1

link.medium.com

“Why every new web app at PayPal starts with TypeScript”

A place where words matter

之前問過 Facebook 工作的朋友

他說 Flow 基本上不會被拋棄，因為 Facebook 裡用到 flow 的太多了。

不過他也覺得 Flow（或 TypeScript 這種做 type safe 的東西）很鳥，因為有報錯不代表真的有 type 問題，沒報錯也不代表真的沒 type 問題 XD
Typescript 也會因為很多人在用而用。
Hmm 文章寫說 Flow 比較常有有錯不報的狀況
是 bug ㄇ
https://twitter.com/kentcdodds/status/1019704559692894209/photo/1
jihchi 15:20:40
不知道有人有類似測試經驗嗎？
使用 useEffect hook 配上 unsubscribes function，進行 fetch 的 AbortController.abort() 動作。
jihchi 15:22:44
目前碰到的是，使用 react-testing-library + jest-fetch-mock 不支援 error 是 Aborted ，收到的 error 是 null

2019-01-24

mrorz 11:43:52
我後來才發現原來 react-virtualized 作者後來做了輕量化版本 react-window
https://github.com/bvaughn/react-window

作者表示：
> If react-window provides the functionality your project needs, I would strongly recommend using it instead of react-virtualized.

GitHub

bvaughn/react-window

React components for efficiently rendering large lists and tabular data - bvaughn/react-window

mrorz 11:44:09
React 官網把處理 long-list 時只 render 特定螢幕中的 element 這件事取名為 “windowing” （別再叫他 virtualization 啦這太模糊），然後也有連到 react-window
https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists

reactjs.org

Optimizing Performance – React

A JavaScript library for building user interfaces

jihchi 11:49:19
這個很實用。也有 library 讓 react-select v1 直接支援 “virtualized”
jihchi 11:50:01
react-select v2 似乎就沒有

2019-01-25

mofas 08:47:11
https://github.com/yarnpkg/yarn/issues/6953

GitHub

Yarn's Future - v2 and beyond · Issue #6953 · yarnpkg/yarn

Hi everyone, When the Yarn project started back in 2016, our landscape was very different from what it is now. Package locking was far from being a first class citizen in the Javascript ecosystem, ...

💪 1

2019-01-26

mofas 06:35:55
https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly

jestjs.io

Jest 24: :nail_care: Refreshing, Polished, TypeScript-friendly · Jest

Today we are happy to announce the next major release of Jest - version 24! It's been 4 months since the last minor release, and 8 months since Jest 23, so this upgrade is a big one, with something for everyone! Highlights include built-in support for TypeScript by upgrading the Jest internals to Babel 7, fixing some long-standing issues with missing console output and performance issues when computing large diffs, and a brand new sparkling website. :sparkles:

2019-01-28

mofas 02:20:26
https://blog.bitsrc.io/interactive-text-animation-with-react-hooks-f89820af8301

Bits and Pieces

Interactive Text Animation with React Hooks – Bits and Pieces

How to animate headings that respond to mouse movements using React Hooks, CSS Modules, CSS variables and clip-path.

👍 1