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

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

mrorz 10:54:42
之前問過 Facebook 工作的朋友

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

不過他也覺得 Flow(或 TypeScript 這種做 type safe 的東西)很鳥,因為有報錯不代表真的有 type 問題,沒報錯也不代表真的沒 type 問題 XD
jihchi 10:55:49
Typescript 也會因為很多人在用而用。
mrorz 11:06:16
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, ...

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.