Slack archive

cofacts

Month: 2017-02

2017-02-01

ggm 00:00:11
可以
ggm 00:00:32
我記得現在是進入大家提問時間
ggm 00:01:01
```1/31 提案截止
2/10 公開提問截止
2/13 提案修改截止
3/06 入圍者實體評選日
3/10 公布評選結果
```
ggm 00:04:16
g0v grant 只有我可以編輯 所以要改東西就先在 hackmd 上面改好之後戳我 讓我去 sync XD
lucien 00:08:01
好喔，讓我來裝逼一下
mrorz 00:20:21
`ggm.syncHackmd()`
mrorz 01:28:16
Rumors site 現在會從 API server 拿 json 了
http://rumors.hacktabl.org/
mrorz 01:28:46
點擊會插一個 div 進 dom（可以用css style 成 modal dialog的樣子）
mrorz 01:29:02
但 URL 會改成 /article/xxx
mrorz 01:29:28
如果直連 /article/xxx 則會是單獨的 article (=rumor) 頁面
mrorz 01:29:40
簡單來說就是 pinterest 的那種 route
lucien 01:29:47
我們的tech stack 是什麼呢
mrorz 01:30:08
現在是 next.js
但 css 那裡很難疊
什麼都不能用
mrorz 01:30:11
覺得有點煩
mrorz 01:30:30
next.js (react.js) + redux
lucien 01:30:55
噢噢
mrorz 01:30:55
css 的話用了一些 postcss module
但沒有堪用的 syntax highlighting 與 mixin 共用
mrorz 01:31:19
只有 property value 可以 interpolate
我覺得鳥鳥的
lucien 01:31:27
:see_no_evil::see_no_evil::see_no_evil:
mrorz 01:31:49
我在想明天到底要花時間 port 成 nuxt 看看
mrorz 01:32:00
還是該弄預定要弄的資料庫部分
mrorz 01:32:36
我新年期間還有兩個 TODO 沒做完
1. 將使用者回報的 false positive 寫成自動化 validation script 用來判斷 search 演算法的 false positive rate
2. DB migration from airtable to elastic search (w/ non-rumors!)
mrorz 01:34:09
如果要 port 到 nuxt
能重用檔案的好像就是 `util/GraphQL` (自製超輕量 graphql client)
還有 redux action 裡面寫好的那些 graphql 的部分要複製貼上

直接開一個新的 orphan branch 通通砍光光從頭開始可能比較好
lucien 01:34:37
為什麼不用a polio?
mrorz 01:34:39
至少不會遇到 next 的一些問題
mrorz 01:34:49
apollo client 太多東西了
mrorz 01:34:58
我用不到他的 high order component
lucien 01:35:05
是喔
mrorz 01:35:11
還有一狗票東西我都不會用
lucien 01:35:18
但直接就用很方便啊
mrorz 01:35:20
我只是要送 request 給我的 server 而已
lucien 01:35:22
我懶
mrorz 01:35:22
不方便呀
mrorz 01:35:27
眼花撩亂
mrorz 01:35:30
一堆 method
mrorz 01:35:37
讀都懶得讀
mrorz 01:35:49
graphql client 明明就只是送 json request 而已
mrorz 01:35:54
為什麼要那麼複雜
mrorz 01:36:58
不過 graphql server 我倒是用了 apollo server
mrorz 01:37:10
因為只有他有做 koa2 的 binding XD
mrorz 01:37:25
其他 koa2 binding 星星數太少不敢用
lucien 01:38:54
用 koa 的好處是什麼啊
mrorz 01:39:08
express 用膩了，換換口味
lucien 01:39:15
噗噗
mrorz 01:39:25
覺得 koa2 middleware 的執行流程符合我對 middleware 的想像
mrorz 01:39:34
express 真的有點歪
mrorz 01:41:10
不過 api server 用到 koa2 的不會太多
頂多是之後加上 authentication 的時候會要加一些 route
其他 API endpoint 一律都是 graphql
mrorz 01:52:40
我自己是覺得
現在這個 project 用 next.js 未來會遇到開發瓶頸的地方有

1. styled-jsx 真心雷。先天不能 share style（by design），後天無法用 template string 塞 variable declaration 進去，只能 interpolate value，會導致你無法重用常用的 css class。結構性的東西如 grid 在這樣的狀態下就必須開新的 component。（會變得有點像 styled components ）。偏偏其他 css-in-js solution 裡，我覺得 styled-jsx 已經是我最能接受的了⋯⋯（可以寫一整塊的 css 不用切成 JS key-value，還有 selector 所以不用每個需要 style 的元素都切成 react component）

2. cache busting 目前沒有官方解。
mrorz 01:52:46
怎麼感覺都卡在 styled-jsx
mrorz 01:53:16
對 @lucien 不友善的地方可能包含 animation 的部分， react 確實不擅長。
mrorz 01:53:45
目前最多人推的 react-motion 並不是很好懂
https://github.com/chenglou/react-motion

GitHub

chenglou/react-motion

react-motion - A spring that solves your animation problems.

lucien 01:53:50
我覺得 react 沒有打算要好好處理 animation 耶
mrorz 01:54:20
react-motion 是幫你 interpolate 之後要你自己吐外觀 ＸＤ
lucien 01:54:29
噢幹
mrorz 01:54:58
https://github.com/chenglou/react-motion#transitionmotion-

GitHub

chenglou/react-motion

react-motion - A spring that solves your animation problems.

lucien 01:55:06
grid component 不會很智障嗎
mrorz 01:55:06
感覺像 jquery animation 吧
lucien 01:55:14
我想要 `gsap`
mrorz 01:55:15
grid component 嗎
還好啦
mrorz 01:55:26
styled-components 更慘
mrorz 01:56:20
gsap 唷
mrorz 01:57:32
TweenMax 看起來跟 react-motion 的 transition motion 沒兩樣呀 @@
lucien 01:58:53
效能問題吧
lucien 01:59:12
gsap 在效能上很優秀，ease function 也很好用
mrorz 01:59:18
Tweenmax 是設 DOM style
mrorz 02:00:15
react-motion 也是設 style（只是是 virtual dom）
mrorz 02:00:41
如果你要 tween 的 object 沒有動態內容
mrorz 02:00:54
單純只是要把圖檔移來移去
lucien 02:01:55
tween 其實是一個 interpolate function ，你可以處理 dom style 以外的東西
mrorz 02:01:57
那你大可以
```
class MyCanvas extends React.Component {
shouldComponentUpdate() { return false }
componentDidMount() { do gsap stuff here }
render() {
return (<div>stuff you want to move around</div>)
}
}
```
mrorz 02:02:18
只要 `shouldComponentUpdate` 設成 `false`
mrorz 02:02:22
他就只會做第一次 render
lucien 02:02:32
他還有一些外掛很好用像是 `bezier` 跟 `color`
mrorz 02:03:02
之後你愛用什麼 library 去管理那些 dom
react 都不會管你
lucien 02:03:10
我知道啊
mrorz 02:03:12
除非整個 component 被拔掉
lucien 02:03:25
就是不用 react 管 motion state
mrorz 02:03:31
yep
lucien 02:03:40
vue 也是類似拉
lucien 02:03:46
但他有很多好用的 hook
mrorz 02:03:56
animation hook 嗎
lucien 02:04:02
對啊
mrorz 02:04:15
意思就是說你在用 vue 時
可以不用靠 gsap
mrorz 02:04:22
用 vue 自己的 hook 就好
lucien 02:04:29
nope
lucien 02:04:41
是在 vue 的 hook 用 gsap
mrorz 02:04:49
像是什麼 hook
lucien 02:05:21
https://vuejs.org/v2/guide/transitions.html

vuejs.org

Transition Effects — Vue.js

Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.

lucien 02:05:38
example 他用 `Velocity `
mrorz 02:05:41
i see
mrorz 02:05:56
像是以前 angular 的那套 enter / leave 呀
lucien 02:06:04
現在 react 要自己數秒
lucien 02:06:13
太白痴了
lucien 02:10:17
但 animation 等到要用在煩惱吧
mrorz 02:13:22
https://github.com/chenglou/react-motion 他是用 stiffness 與 damping
他說 fixed duration 在 large scale ui 上面會有問題
lucien 02:13:56
stiffness 與 damping ?
mrorz 02:14:07
yep
lucien 02:14:34
那是 spring 系列才有吧
mrorz 02:14:40
噢是的
mrorz 02:16:03
https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks 這裡的 `enter` 與 `leave`

與
https://github.com/chenglou/react-motion#transitionmotion-
這裡的 `willEnter`, `willLeave` 應該是一樣的

vuejs.org

Transition Effects — Vue.js

Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.

mrorz 02:16:53
但 react-motion 不給你設 duration
mrorz 02:17:59
他就是個 spring interpolator
mrorz 02:18:11
你給定開始與結束的 style
mrorz 02:18:13
他幫你 interpolate
lucien 02:18:16
hmm… Anyway，Spring 其實有時候很難控
lucien 02:18:29
我是從 framerjs 開始用 spring 的
mrorz 02:18:38
除了 spring 之外還有什麼種類的動畫呢
lucien 02:18:57
但有些效果我還是會換回其他 easing
lucien 02:19:21
https://greensock.com/ease-visualizer

GreenSock

Ease Visualizer for GSAP | HTML5 Animation | GreenSock

Visually explore various easing options for HTML5 animations in GSAP with this interactive tool from GreenSock.

lucien 02:19:47
https://framer.com/docs/#animation.curves

framer.com

Design everything with code

Framer lets you build interactive designs using the power of code.

mrorz 02:20:32
確實 easing 滿好操控的
lucien 02:23:10
但我們可以先假設我們動畫不多？（咦）
mrorz 02:23:18
react-motion 會選擇彈簧
或許只是覺得一些較誇張的動作下
元件的動作如果還是一樣的 easing 曲線
其實不太自然吧
http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/
mrorz 02:24:01
https://github.com/chenglou/react-motion#what-does-this-library-try-to-solve
> For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

GitHub

chenglou/react-motion

react-motion - A spring that solves your animation problems.

lucien 02:24:17
其實不應該在 mircoanimation 用太多 spring 這種很強視覺效果的 easing
lucien 02:25:40
好吧發現一個可以做的 open source 題目： `none-spring curve` to `spring curve`
mrorz 02:27:54
我發現好像沒辦法用 spring 做 ease-in
lucien 02:28:51
我覺得不應該強迫大家用 spring
lucien 02:29:16
我剛剛弄了一個炫炮的合成 https://www.instagram.com/p/BP8FSoRjFBa/

Instagram

Instagram photo by Lucien Lee • Jan 31, 2017 at 6:27pm UTC

See this Instagram photo by @lucienleedeer • 2 likes

lucien 02:29:28
一整個華而不實
mrorz 02:29:33
不對，stiffness 改成負的就可以 ease-in XDD
lucien 02:30:07
stiffness 竟然可以是負值喔！！
lucien 02:30:14
從來沒試過負值
mrorz 02:30:26
做這種圖 3d projection 要改成 orthographic 呀～
lucien 02:59:20
mrorz: orthographic 看起來假假的
mrorz 02:32:02
http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/ 你把右下角的 stiffness 弄得很小，然後稍微拖曳一下圈圈
左上角的 stiffness 就會變成負的然後飛走 XDDD
lucien 02:32:55
這是正確的行為嗎
lucien 02:32:58
哈哈
mrorz 02:33:05
不知道 XDD
mrorz 02:34:20
https://github.com/chenglou/react-motion/issues/403 spring 有其極限呢

GitHub

Possibility of linear animation with spring finish · Issue #403 · chenglou/react-motion · GitHub

I was wondering if it was possible to add a linear motion to something that starts and ends with spring() easing. I'm currently working on this reel spinner: <http://codepen.io/mares0909/pen/mOpWqa> ...

mrorz 02:36:20
如果不管動畫的話，那剩下就是 styled-jsx 的問題了
lucien 02:38:48
我覺得 stiffness 負的怪怪的
lucien 02:39:10
他會一直加速到世界盡頭吧
lucien 02:39:58
話說我的 `framer` 也過期了QQ
mrorz 02:39:58
瀏覽器可能會懶得畫
mrorz 02:42:14
所以我明天就弄資料的部分囉～～
不會把 next 改到 nuxt 這樣
lucien 02:42:44
style 看要怎麼辦吧
mrorz 02:42:56
令人心灰意冷的 styled-jsx
mrorz 02:43:10
或許下個月會更好吧
lucien 02:43:24
哈哈
mrorz 02:45:14
每週都有新討論與 commit

style import &amp; interpolation
https://github.com/zeit/styled-jsx/issues/83
https://github.com/zeit/styled-jsx/issues/81

syntax highlight 好像大家都放棄治療了 ._.

GitHub

Allow for importing styles · Issue #83 · zeit/styled-jsx · GitHub

Sometimes styles can be quite long and it makes sense for them to live in a seperate file. For example, if you are using next.js and you want to put your styles in a ./styles.js file next to a comp...

GitHub

dynamic styles mode · Issue #81 · zeit/styled-jsx · GitHub

@rauchg and I discussed about possible ways to support dynamic styles i.e. allow props and other dynamic values which #80 doesn't. From slack: @g and I are contemplating a "dynamic" mode for style...

mrorz 02:47:10
每兩天一個版本
https://github.com/zeit/styled-jsx/tags

GitHub

zeit/styled-jsx

styled-jsx - Full CSS support for JSX without compromises

lucien 02:47:11
這樣搞在一起的好處是什麼 :cry:
lucien 02:47:25
連 highlight 都變問題了QQ
mrorz 02:47:34
寫起來像 vue 呀（炸
lucien 02:48:28
`<link jsx href="path/to/styles.js" />` 好潮喔
lucien 02:48:39
vue 沒有混在一起好吧
lucien 02:48:46
他只是放一個檔
mrorz 02:48:47
在同一個檔案裡
mrorz 02:49:05
我覺得終極解就是讓 template string 可以有顏色
https://github.com/sublimehq/Packages/issues/179

GitHub

[JavaScript] HTML and CSS syntax highlighting in tagged template strings · Issue #179 · sublimehq/Packages · GitHub

Is it possible to support HTML/CSS syntax highlighting inside a tagged template string? I am looking to do the equivalent of this atom editor change. My first attempt at this did not work out so we...

mrorz 02:49:55
http://stackoverflow.com/questions/36700442/atom-html-syntax-highlight-in-template-literals-for-angular2

stackoverflow.com

Atom HTML syntax highlight in template literals (for angular2)

How can I get HTML syntax highlight in template literals?Something like this which I've wrote for sublime before:Here is sublime version <https://github.com/Microsoft/TypeScript-Sublime-Plugin/pu>...

lucien 02:50:23
這很奇怪吧
lucien 02:50:36
template string 就不應該還去 parse
lucien 02:50:56
他應該就是一個 string
mrorz 02:50:57
有其 use case 囉
mrorz 02:51:08
據說 angular2 很需要
lucien 02:52:03
是喔 FE 的世界每天都在崩毀重建呢
mrorz 02:52:45
你只要站後面一點就會覺得還好
mrorz 02:52:52
例如說使用 jQuery
lucien 02:53:10
WTF
lucien 02:53:43
話說如果可以用寫 game 的方式寫 FE
lucien 02:53:54
應該很多問題可以被解決
lucien 03:02:57
啊我知道為什麼 template literal 去parse 怪了
lucien 03:03:19
讓我想到 `eval`
mrorz 05:14:06
我找到 styled-jsx syntax highlight 的方法了
寫在 README
睡去
https://github.com/MrOrz/rumors-site/blob/master/README.md#styled-jsx-syntax-highlighting

GitHub

MrOrz/rumors-site

rumors-site - Rumors list / creation UI, with server-side rendering

lucien 12:29:45
可是我還是用sublime比較多:cry:
lucien 15:11:09
atom 的 lag 我很受不了啊
lucien 15:11:16
QAQ
yhsiang 19:24:47
無感
mrorz 21:04:45
我發現是我的 mac 在 lag
無解
yhsiang 21:49:01
mrorz: 有解啊，買台新的！
mrorz 21:49:17
沒錢，無解
yhsiang 21:53:33
mrorz: 快發薪水了！有解！
mrorz 22:29:42
是說我想了一下 LINE bot 合理的操作流程應該長怎樣
結果變成了超大的 flow diagram
https://docs.google.com/drawings/d/1kStWPVHbzrpSTKu9-EK5TN52Xj7WY7uAiEBa00v6xK4/edit
mrorz 22:29:58
@lucien AZ 那個 framework 有辦法免費給我們用嗎 QQ
mrorz 22:32:22
還是說那個 framework 用來兜這個圖其實也沒有比較好用？
lucien 22:36:24
AZ ?
mrorz 22:36:32
偉寧
mrorz 22:36:37
我直接 FB 問他好了
mrorz 22:36:39
ＸＤＤ
lucien 22:36:43
喔喔
lucien 22:36:52
我覺得不合XDDD
mrorz 22:36:58
不合嗎
mrorz 22:37:11
好吧那我自己寫 state machine
lucien 22:37:26
嗯…基本框架可以用啊
lucien 22:37:39
但是我覺得寫 module 串的時間可能會很多
lucien 22:37:52
他有客製化 module 的空間
lucien 22:38:28
但是他們現在把所以東西都丟到一大包 repo ，跟你完全不同策略
mrorz 22:38:35
之前有用過 https://github.com/geekq/workflow

GitHub

geekq/workflow

workflow - Like acts as state machine (aasm), but _way_ better (it's in Ruby too!)

mrorz 22:38:37
okok
lucien 22:39:00
你快鼓吹他拆 repo
lucien 22:39:06
我上次提失敗了
mrorz 22:39:21
monolithic app 有它的好處呀
lucien 22:40:00
我覺得他那邊串對話邏輯好寫
lucien 22:40:38
但是 Server 的邏輯比較麻煩
lucien 22:41:18
然後這兩塊目前 AZ 他們是沒有分這麼開，而是弄一個 state machine customized module 來處理
mrorz 22:47:11
我這邊另外要煩惱的是
這個 flow diagram 裡頭有畫到「Reply request」(有 article 沒 reply 被找到，希望小編快快 reply
與 reply response（使用者認為這個有回應到文章 / 牛頭不對馬嘴）等等要寫在 DB 的東西
mrorz 22:48:05
但現在 DB 是會洗掉的，因為 single source of truth 依舊是 airtable
mrorz 22:48:21
DB switch 的前提是要把編輯界面做好
mrorz 22:48:30
結果現在果然還是卡在編輯界面呀 QQ
yhsiang 22:48:45
state machine 用個 etcd 去解啊?
mrorz 22:49:14
現在 bot 已經有接 redis
mrorz 22:50:18
實作上問題不大
mrorz 22:50:39
問題是現在 DB 仍然是 airtable 為準
yhsiang 22:52:30
換到 firebase ? :stuck_out_tongue:
mrorz 22:53:04
問題卡在協作編輯界面
mrorz 22:53:08
firebase 有比較好嗎
mrorz 22:53:35
自己蓋的現在長這樣
http://rumors.hacktabl.org|rumors.hacktabl.org
mrorz 22:53:49
mutation api 有了，但還沒接到前端
mrorz 22:55:27
現在來接一接好了
弄個醜陋的 `<form>` XD
mrorz 22:56:21
不對，我要發文寫一下新年的進度
讓大家知道我們現在做到哪裡好像比較重要
也才能募集幫忙的人
yhsiang 22:57:38
firebase 是 json
yhsiang 22:57:47
https://firebase.googleblog.com/2014/09/vulcan-inspect-your-database-in-your.html

The Firebase Blog

Vulcan: Inspect your database in your browser

Alex Wolfe VP User Experience Today we’re officially launching Vulcan ! Vulcan is a brand a new extension ...

ggm 23:35:07
@mrorz 我在想改成 sequence diagram 會不會比較好？
ggm 23:37:06
五個軸 User, Editor, Database, crawler, Bot (service)
ggm 23:37:28
不過 sequence diagram 不好做出 if/else
ggm 23:52:37
噢然後我後來又看了一下 @lucien 做的 flow 圖有些建議 XD 讓我挑惕一下
1. 我覺得箭頭方向的使用方式沒有定義好，單向箭頭好像同時代表了「使用對象」與「資料流向」
2. 看不到眾包資料庫和編輯的關係
lucien 00:00:15
ggm: 我來修正一下好了，那張圖會是給外部人看的系統內部的東西會隱藏起來
ggm 00:01:35
噢噢 那我們外部人設計的對象是哪些呀？使用者、小編、要找進來寫 crawler 的工程師？
lucien 00:01:59
使用者、小編跟宣傳用
ggm 00:02:27
噢噢懂