#frontend-tech
2019-01-01
GitHub
:zap: Native, high-performance, cross-platform desktop apps - built with Reason! - revery-ui/revery
2019-01-04
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
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 看起來無敵怪
高大上只要訂好規格，app 自然有社群會幫忙開發？ＸＤ
翻譯還有推薦用哪套嗎？
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
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
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
開源好像都用 Crowdin
有人付費用在專案上過嗎？
有人付費用在專案上過嗎？
gettext 的優點是 po 檔滿 translator friendly（畢竟 key 就是英文）
不需要特別的平台，文字編輯器也能弄
然後如果真要整合平台，所有平台幾乎都支援（畢竟 gettext 老牌）
不需要特別的平台，文字編輯器也能弄
然後如果真要整合平台，所有平台幾乎都支援（畢竟 gettext 老牌）
json based 不用 translation 平台，根本不能用
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
但反過來就是如果有用 translation 平台，那 gettext 也沒太多優勢
至於自己幫 translation 取 key 的名字這件事，有些開發者覺得不會很痛苦
facebook 這套 fbt 看起來是會直接自己 gen hash
facebook 這套 fbt 看起來是會直接自己 gen hash
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
如果 developer 即為 translator ，好像也只需要 json based，不需要其他流程或平台做輔助？
是沒錯，不過真的有點痛苦喔
基本上社群似乎是 i18next 最大
react-intl 星星數最多，但我基本上不會考慮
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
恩恩 的確是這樣 而且是 runtime
你說前端字串還會出現在哪？
你可能會寫個 utility function
action 裡也可能會有 flash message
到處都有可能呀
另外，不只是 web application，node.js 如果也有 i18n 需求
如果要考慮 code split 哪套有支援嗎？
這些都不是綁死在 react 的 react-intl 可以處理的
json based 好像比較容易用 dynamic import 自行處理
直接做 build-time translation 的或許就沒有 code splitting 問題 (?)
因為沒有 runtime dependency，字串直接融合在 built js 裡 XD
但實際上我們沒做 code split 所以不確定
感覺 build time 還是最佳解
而且如果自己處理 runtime code split 還要拿捏重複字串問題
而且如果自己處理 runtime code split 還要拿捏重複字串問題
不然就是 Runtime + SSR
你上面第二點 fb 會不會就是這樣做
你上面第二點 fb 會不會就是這樣做
gettext 有個痛點就是跟 git 水土不服
咦 why 會跟 git 水土不服？如果因為行號一直干擾 diff，其實可以關閉輸出行號
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
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
高大上只要訂好規格，app 自然有社群會幫忙開發？ＸＤ
翻譯還有推薦用哪套嗎？
ttag.js.org
Modern javascript i18n tool based on es6 tags
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
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
- 💪2
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
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
i18next.com 
- 👍1
開源好像都用 Crowdin
有人付費用在專案上過嗎？
有人付費用在專案上過嗎？
gettext 的優點是 po 檔滿 translator friendly（畢竟 key 就是英文）
不需要特別的平台，文字編輯器也能弄
然後如果真要整合平台，所有平台幾乎都支援（畢竟 gettext 老牌）
不需要特別的平台，文字編輯器也能弄
然後如果真要整合平台，所有平台幾乎都支援（畢竟 gettext 老牌）
json based 不用 translation 平台，根本不能用
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
但反過來就是如果有用 translation 平台，那 gettext 也沒太多優勢
至於自己幫 translation 取 key 的名字這件事，有些開發者覺得不會很痛苦
facebook 這套 fbt 看起來是會直接自己 gen hash
facebook 這套 fbt 看起來是會直接自己 gen hash
Replied to a thread: 2019-01-04 07:48:10
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
hackmd.io 
- 💯2
如果 developer 即為 translator ，好像也只需要 json based，不需要其他流程或平台做輔助？
是沒錯，不過真的有點痛苦喔
基本上社群似乎是 i18next 最大
react-intl 星星數最多，但我基本上不會考慮
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
恩恩 的確是這樣 而且是 runtime
你說前端字串還會出現在哪？
你可能會寫個 utility function
action 裡也可能會有 flash message
到處都有可能呀
另外，不只是 web application，node.js 如果也有 i18n 需求
如果要考慮 code split 哪套有支援嗎？
這些都不是綁死在 react 的 react-intl 可以處理的
json based 好像比較容易用 dynamic import 自行處理
直接做 build-time translation 的或許就沒有 code splitting 問題 (?)
因為沒有 runtime dependency，字串直接融合在 built js 裡 XD
但實際上我們沒做 code split 所以不確定
感覺 build time 還是最佳解
而且如果自己處理 runtime code split 還要拿捏重複字串問題
而且如果自己處理 runtime code split 還要拿捏重複字串問題
不然就是 Runtime + SSR
你上面第二點 fb 會不會就是這樣做
你上面第二點 fb 會不會就是這樣做
2019-01-05
2019-01-07
react gesture with spring is awesome
2019-01-08
A simple zero-config tool to make locally trusted development certificates with any names you'd like. - FiloSottile/mkcert
- 👍1
So useful for testing https
buttondown.email
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
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
- :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
#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
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
這招滿有趣的 XDDD
滿適合 trace 3rf party’s library
2019-01-12
Another React core member leave
- 😳1
2019-01-14
超實用載入svg!
2
2
Based on CRA
:boom: Generate code at build-time. Contribute to kentcdodds/babel-plugin-codegen development by creating an account on GitHub.
gettext 有個痛點就是跟 git 水土不服
2019-01-15
咦 why 會跟 git 水土不服？如果因為行號一直干擾 diff，其實可以關閉輸出行號
2019-01-17
mxstbr.com
Spectrum is an open source chat app for large online communities. With the benefit of hindsight, here are the technology choices I regret.
Draft.js is one of them.
2019-01-22
link.medium.com
之前問過 Facebook 工作的朋友
他說 Flow 基本上不會被拋棄，因為 Facebook 裡用到 flow 的太多了。
不過他也覺得 Flow（或 TypeScript 這種做 type safe 的東西）很鳥，因為有報錯不代表真的有 type 問題，沒報錯也不代表真的沒 type 問題 XD
他說 Flow 基本上不會被拋棄，因為 Facebook 裡用到 flow 的太多了。
不過他也覺得 Flow（或 TypeScript 這種做 type safe 的東西）很鳥，因為有報錯不代表真的有 type 問題，沒報錯也不代表真的沒 type 問題 XD
Typescript 也會因為很多人在用而用。
之前問過 Facebook 工作的朋友
他說 Flow 基本上不會被拋棄，因為 Facebook 裡用到 flow 的太多了。
不過他也覺得 Flow（或 TypeScript 這種做 type safe 的東西）很鳥，因為有報錯不代表真的有 type 問題，沒報錯也不代表真的沒 type 問題 XD
他說 Flow 基本上不會被拋棄，因為 Facebook 裡用到 flow 的太多了。
不過他也覺得 Flow（或 TypeScript 這種做 type safe 的東西）很鳥，因為有報錯不代表真的有 type 問題，沒報錯也不代表真的沒 type 問題 XD
Typescript 也會因為很多人在用而用。
不知道有人有類似測試經驗嗎？
使用 useEffect hook 配上 unsubscribes function，進行 fetch 的 AbortController.abort() 動作。
使用 useEffect hook 配上 unsubscribes function，進行 fetch 的 AbortController.abort() 動作。
目前碰到的是，使用 react-testing-library + jest-fetch-mock 不支援 error 是 Aborted ，收到的 error 是 null
2019-01-24
我後來才發現原來 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.
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.
React components for efficiently rendering large lists and tabular data - bvaughn/react-window
React 官網把處理 long-list 時只 render 特定螢幕中的 element 這件事取名為 “windowing” （別再叫他 virtualization 啦這太模糊），然後也有連到 react-window
https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists
https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists
這個很實用。也有 library 讓 react-select v1 直接支援 “virtualized”
react-select v2 似乎就沒有
2019-01-25
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
jestjs.io
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
Bits and Pieces
How to animate headings that respond to mouse movements using React Hooks, CSS Modules, CSS variables and clip-path.
- 👍1