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
mrorz 11:02:49
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
mrorz 11:16:21
那個 translation_input.json 看起來無敵怪
mrorz 11:17:16
https://facebookincubator.github.io/fbt/docs/translating 這個要怎麼給翻譯者呀囧

一定要有專用的 app 吧
Michael Hsu 11:19:09
高大上只要訂好規格,app 自然有社群會幫忙開發?XD
Michael Hsu 11:23:10
翻譯還有推薦用哪套嗎?
mrorz 11:57:11
我自己是用 ttag
https://ttag.js.org/

主要是因為我們喜歡 gettext,但前端 community 主流基本上不甩 GNU Gettext 喜歡自幹⋯⋯ XD
jihchi 11:57:55
i18next is great
jihchi 11:57:58
Also
mrorz 11:59:09
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
mrorz 12:01:24
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 12:02:13
開源好像都用 Crowdin
有人付費用在專案上過嗎?
mrorz 12:03:42
gettext 的優點是 po 檔滿 translator friendly(畢竟 key 就是英文)
不需要特別的平台,文字編輯器也能弄
然後如果真要整合平台,所有平台幾乎都支援(畢竟 gettext 老牌)
mrorz 12:04:21
json based 不用 translation 平台,根本不能用
要翻譯者手動對照 json key 與英文翻譯檔簡直要他們命
mrorz 12:05:13
但反過來就是如果有用 translation 平台,那 gettext 也沒太多優勢
mrorz 12:06:05
至於自己幫 translation 取 key 的名字這件事,有些開發者覺得不會很痛苦
facebook 這套 fbt 看起來是會直接自己 gen hash
mrorz 12:07:31
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view
Michael Hsu 12:08:29
如果 developer 即為 translator ,好像也只需要 json based,不需要其他流程或平台做輔助?
mrorz 12:09:08
是沒錯,不過真的有點痛苦喔
mrorz 12:10:27
基本上社群似乎是 i18next 最大
mrorz 12:10:56
react-intl 星星數最多,但我基本上不會考慮
出了 react 就沒辦法用
但前端字串不會都只寫在 react component 裡
Michael Hsu 12:11:45
恩恩 的確是這樣 而且是 runtime
Michael Hsu 12:12:19
你說前端字串還會出現在哪?
mrorz 12:17:41
你可能會寫個 utility function
mrorz 12:17:47
action 裡也可能會有 flash message
mrorz 12:17:51
到處都有可能呀
mrorz 12:18:38
另外,不只是 web application,node.js 如果也有 i18n 需求
Michael Hsu 12:18:53
如果要考慮 code split 哪套有支援嗎?
mrorz 12:18:57
這些都不是綁死在 react 的 react-intl 可以處理的
Michael Hsu 12:19:36
json based 好像比較容易用 dynamic import 自行處理
mrorz 12:20:14
直接做 build-time translation 的或許就沒有 code splitting 問題 (?)
mrorz 12:20:50
因為沒有 runtime dependency,字串直接融合在 built js 裡 XD
mrorz 12:21:09
但實際上我們沒做 code split 所以不確定
Michael Hsu 12:22:24
感覺 build time 還是最佳解
而且如果自己處理 runtime code split 還要拿捏重複字串問題
Michael Hsu 12:23:12
不然就是 Runtime + SSR
你上面第二點 fb 會不會就是這樣做
mrorz 11:16:21
那個 translation_input.json 看起來無敵怪
mrorz 12:07:31
這篇一直放著都沒寫完 XDDD
https://hackmd.io/RqNCrYWCShSV9_QHcKTpyw?view

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

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
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
mrorz 10:42:13
這招滿有趣的 XDDD
jihchi 10:46:00
滿適合 trace 3rf party’s library

2019-01-12

mofas 13:26:33
Another React core member leave

2019-01-14

mofas 02:09:50
超實用載入svg!
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