#frontend-tech
2017-10-01
GitHub
draggable - The JavaScript Drag & Drop library your grandparents warned you about.
milewski-ctfp-pdf - Bartosz Milewski's 'Category Theory for Programmers' unofficial PDF and LaTeX source
babeljs.io
If you didn’t know already, we’re planning on releasing a 7.0 version soon :raised_hands: ! Work on it actually started back in February, when I just wanted to make a rel...
YouTube
Strange Loop 2017 Sept 28-30th, 2017 St. Louis, MO <https://thestrangeloop.com/2017/sessions.html>
Strange loop 2017 release!!!
- 💯1
共50個video
2017-10-02
FINALLY!
Speaker Deck
It is common to see Functional Programming (FP) presented as the opposite of Object-oriented Programming (OOP). These two programming paradigms have important differences, but they can share a lot in common, so they are not in direct opposition. In this talk, Andre will explore the gray area between OOP and FP, with code samples in JavaScript, TypeScript, and Haskell, kept easy enough enough for any programmer to follow.
YouTube
The hottest talk in strange loop
2017-10-03
- 💯1
@itsmisscs has joined the channel
FINALLY!
https://www.youtube.com/watch?v=sT6VJkkhy0o
This talk is also great.
This talk is also great.
簡而言之 Haxl 可以用data type 幫你檢查你這行code能不能concurrrent, 然後compiler會幫你自動轉.
也可以做到dataLoader那樣的cache
也可以做到dataLoader那樣的cache
他甚至可以更暴力cache全部IO
威威
假如前端可以做, 那就可以像snapshot testing 一樣 先接上server API然後用一下UI, 接下來他就會把所有request都記住, 然後damp 就可以跑unit test了..
end-to-end testing也可以變unit test
~這樣應該算 integration test~
reasonml.github.io
_The ReactJS doc site has also been updated last friday **by pure coincidence**. No conspiracy theory!_
Dan 誠摯推薦
2017-10-04
兩個相差12分鐘tweet 很競爭喔
Dropbox Design 
看到這個 Typography
我就覺得dropbox沒救了
好悲劇 … Sharp Grotesk
2017-10-05
@mofas I really like VSCode. I completely removed Atom and just use VSCode and Sublime
- 👏2
2017-10-06
VS code so hot right now
react-next video uploaded
Mailspring - :love_letter: A beautiful, fast and maintained fork of @Nylas Mail by one of the original authors.
2017-10-07
Anyone here using Nylas? Thoughts?
Not so good. I use Spark now, It's better than Nylas.
oo looks nice. i’ll give it a shot.
Abortable fetch | Web | Google Developers
https://developers.google.com/web/updates/2017/09/abortable-fetch
https://developers.google.com/web/updates/2017/09/abortable-fetch
Google Developers
Aborting fetches using a new web primitive – The abort controller.
2017-10-08
Not so good. I use Spark now, It's better than Nylas.
oo looks nice. i’ll give it a shot.
2017-10-10
zeit.co 
Much Better in Mac
I changed the sublime text icon all the time.
2017-10-11
好喔找時間來升
2017-10-12
Staltz 終於又來寫tech blog
2017-10-13
With styled-components into the future – 💅 styled-components – Medium
https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c
https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c
Medium
Preprocessing is dead, long live preprocessing!
馬呀 真的是大compiler時代, styled-components 要寫自己的css-in-js compiler https://github.com/cssinjs/istf-spec
@mofas where did you see that styled-components are going to develop itself compiler !?
CY Li
With styled-components into the future – 💅 styled-components – Medium
https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c
你根本沒在看呀- -
Haven't see this article yet ~_~
Already in my instapaper~
2017-10-16
go-http-tunnel - Secure tunnels to localhost - open source ngrok alternative
server 要自架嗎？
看起來是呢
是的
React-Sight - Visualization tool for React, with support for Fiber, Router (v4), and Redux
webpackmonitor - A tool for monitoring webpack optimization metrics through the development process
Replied to a thread: 2017-10-16 01:09:15
server 要自架嗎？
看起來是呢
是的
Medium
At PayPal we write a lot of javascript that ends up running on other websites and other domains. The prime example of this is checkout.js…
3
```in IE and Edge, you literally can not send a message between a popup window and a parent window on a different domain, without resorting to soul-crushing hacks.
```
“soul-crushing hacks” wwwwww
```
“soul-crushing hacks” wwwwww
@mofas 的靈魂還好嗎
```in IE and Edge, you literally can not send a message between a popup window and a parent window on a different domain, without resorting to soul-crushing hacks.
```
“soul-crushing hacks” wwwwww
```
“soul-crushing hacks” wwwwww
@mofas 的靈魂還好嗎
這library 真的很優秀
快點改寫tracking 啦
@jerry.hong 再叫你
＠＠？
這篇不錯誒
2017-10-17
2017-10-18
The best talk of react rally .
裡面有提到一個還蠻好用的技巧
```
const btnText = {
idle: 'Save',
loading: 'Saving',
error: 'Fail to save',
success: 'Save successfully'
}[state.status]
```
```
const btnText = {
idle: 'Save',
loading: 'Saving',
error: 'Fail to save',
success: 'Save successfully'
}[state.status]
```
這好像比if 跟switch 都方便多了
雖然每次都會create 一個 object好像有點浪費
```
{{
default: <EmptyContent>,
loaded: <DataList data={data}>,
loading: <LoadingIcon>,
error: <ErrorMsg>,
}[status]}
```
{{
default: <EmptyContent>,
loaded: <DataList data={data}>,
loading: <LoadingIcon>,
error: <ErrorMsg>,
}[status]}
```
好像還不錯
Trasition 的概念應用也不錯！
跟 compiler 做 tokenize 概念很像
An interactive journey into functional programming with Yehonathan Sharvit
FFI. type safe bindings from JS to Ocaml and Reason. external javascript declaration.
@leo424y has joined the channel
2017-10-19
VS code 也可以當postman用惹
太神啦
我喜歡他像是 script 的用法，純 text 去編寫
Front-End-Checklist - :card_index_dividers: The perfect Front-End Checklist for modern websites and meticulous developers
@hsuting has joined the channel
angular vs react vs vue vs ember-source | npm trends
http://www.npmtrends.com/angular-vs-react-vs-vue-vs-ember-source
http://www.npmtrends.com/angular-vs-react-vs-vue-vs-ember-source
npmtrends.com
Compare npm package download statistics over time: angular vs react vs vue vs ember source
GitHub - getify/fasy: FP iterator helpers that are async/generator aware
https://github.com/getify/fasy
https://github.com/getify/fasy
In case you did not know, the New York Times is re-platforming:
graphql-auth - :lock: GraphQL authentication and authorization middleware
2017-10-20
This message was deleted.
`Central Authentication Service`
`Central Authentication Service`
create-ssl-certificate - Command line tool to create self signed SSL certificate
- 👯1
最近想要來接Google Oauth,
一進去google developer console已經面目全非啦
有誰現在記得是要active哪一個libary嗎 = =
你用 node ?
console 的話就是加驗證
accounts.google.com
Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure as Google.
是喔
感謝大家
不過現在又有另外一個煩惱了 😞
我需要Fixed domain name.
now.sh 每次deploy都會給特殊domain name
可以用 alias 啊
他alias 我可以亂綁到一個fixed的 now.sh domain下嗎?
例如mofas.now.sh
靠腰
可以耶
now.sh真大方 lol
對啊 alias 先搶先贏
建議 CD 可以參考這樣做：
https://github.com/evenchange4/micro-medium-api/blob/master/tasks/deploy.sh#L15-L20
確保每次服務都啟起來再換掉 alias
remove/purge 時才不會被搶走
建議 CD 可以參考這樣做：
https://github.com/evenchange4/micro-medium-api/blob/master/tasks/deploy.sh#L15-L20
確保每次服務都啟起來再換掉 alias
remove/purge 時才不會被搶走
micro-medium-api - Microservice for fetching the latest posts of Medium with GraphQL.
這我倒是沒問題
先搶再說
👍
@jihchi 你有用docker-stack.yaml嗎 他跟docker-compose.yaml有啥差- -
`docker-stack.yaml` 是給 Docker Swarm 用的。
就是你下面提到的 docker service / stack
該不會只是改名吧 😞
好久沒追 docker 突然冒出了 docker service, docker stack, docker secret
zeit server down = =
twitter.com
The latest Tweets from ZEIT Status (@zeit_status). Quick updates on the status of our infrastructure and microservices
`docker-stack.yaml` 是給 Docker Swarm 用的。
就是你下面提到的 docker service / stack
2017-10-21
@mrorz
我最近突然想到..graphql 假如有配graphql client 例如apollo 或是 relay 其實可以做data compression 傳輸功能..
因為type根本就固定
我最近突然想到..graphql 假如有配graphql client 例如apollo 或是 relay 其實可以做data compression 傳輸功能..
因為type根本就固定
例如
```
{
UserList {
Id
Name
}
}
```
```
{
UserList {
Id
Name
}
}
```
其實在server端可以傳非常dense的資料格式到前端. 由client再解壓縮回JSON
例如上面那個格式可以傳成csv
```
UserList
Id, Name
id_1, "User Name 1"
id_2, "User Name 2"
id_3, "User Name 3"
```
```
UserList
Id, Name
id_1, "User Name 1"
id_2, "User Name 2"
id_3, "User Name 3"
```
這樣應該省很多頻寬吧
比較麻煩的就是nested部分要攤平而已
不過應該做得到 😛
BTW, 我問一下graphql-js 要怎麼生成.graphql黨呀
我記得我幹過這件事
但是我現在沒code了
不知道怎做
2017-10-22
I’m back from a little vacation with a new release of Apex Up! This release introduces custom domains, domain purchasing from the command…
看 TJ 一個人的UP VS Zeit 的 Now
其實 TJ 設計真的很強.. 完全不輸Zeit的UI Designer
但是UX還是 Zeit比較強一點
看UP的流程就有點囉唆
Up 是上到使用者自己的 AWS 嗎
如果是的話，那 configuration effort 當然跟上到自產平台的 Zeit 不能比 @@
這我倒是沒有很確定 lol
沒用過
畢竟AWS這麼貴的東西 沒有老蘇信用卡是用不起的
XDDD
但 AWS 跟其他 IaaS 比起來應該算比較便宜的了吧
（VPS 除外）
（VPS 除外）
我現在分母是0 沒辦法比較
100/0 跟10/0對我來說是一樣的
https://apex.github.io/up/#aws_credentials 是要自備 AWS 沒錯呢
好 free-tier 不用嗎
單就設計感來說 Apex Up我覺得比Zeit好欸
之前Zeit 很漂亮
但是最近風格有點走經
就那個漸層球..不知道是誰的設計
哪裡有漸層球
Doc 的code 配色也不舒服
那是 now 的 dashboard 嗎
至少外面 landing page 看起來很酷呀
說不定 dashboard 是 intern 做的 (x)
我有認真研究一下要怎麼投zeit intern
有點嚴苛
還要寫篇你想怎麼改進zeit的文
有點懶惰 😞
一個滿高的門檻呢
可能 team 很小
不希望太多人投進去
不希望太多人投進去
不然他們會花很多時間在看履歷
所以 up 有點詭異，是把整台你寫的 server 塞進同一個 lambda function lol
https://medium.com/@tjholowaychuk/blueprints-for-up-1-5f8197179275
https://medium.com/@tjholowaychuk/blueprints-for-up-1-5f8197179275
The latest proxy functionality in AWS API Gateway & Lambda enables some nice new capabilities, so I wanted to share the “blueprints” for a…
2017-10-23
now 也可以 deploy 到其他 cloud aws / gcp / azure
改進zeit的文 => 測試可以補一下ＸＤ
2017-10-24
Hacker Noon
Gone are the days where I spend my time bouncing back and forth between the terminal, browser and editor. Ain’t nobody got time for that!
VS code 已經快要實現當初facebook的nuclide的目標了
- 👏1
developer.chrome.com
Connect with Chrome engineers and other leading developers for a two-day exploration of building beautiful and performant experiences.
2017-10-25
- 💯1
Apollo GraphQL
Available for Node, Ruby, Java, Scala and Elixir GraphQL servers
Airbnb.Design 
這啥巫術
2017-10-26
Well, if you don't write react, you will write in react way anyway.
GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
https://github.com/alvarotrigo/fullPage.js
https://github.com/alvarotrigo/fullPage.js
fullPage.js - fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
about.sourcegraph.com
Jason Lengstorm (@jlengstorf) of IBM talks about how IBM uses GraphQL as the lingua franca of their microservices architecture. Jason is a…
@swei.hsu has joined the channel
- 💯1
2017-10-27
create-component-app v1 is out now 🎉 – Hacker Noon
https://hackernoon.com/create-component-app-v1-is-out-now-6ca0217992e9
https://hackernoon.com/create-component-app-v1-is-out-now-6ca0217992e9
Graphcool Blog
Including GraphQL Database, Permission System, real-time Subscriptions and Cloud Native runtime
請問有人有用過非apollo 的 graphql subscriptionㄇ
我沒有
sonarwhal.com
sonar, a linting tool for the web focused on best practices and flexibility for the end user
2017-10-28
graphql.js 完全改用buildSchema
是說首頁嗎 http://graphql.org/graphql-js/
他首頁本來就是用 buildSchema 沒錯
但他只能提供第一層的 resolver，沒說要怎麼指定 ObjectType 的 resolver
他首頁本來就是用 buildSchema 沒錯
但他只能提供第一層的 resolver，沒說要怎麼指定 ObjectType 的 resolver
等等，resolver function 第一個引數從 source 改成 args 了？？！！
喔喔喔是這樣：
http://graphql.org/graphql-js/type/#graphqlobjecttype
如果你是傳個 object of methods 給下層 GraphQLObjectType 來 resolve，而不去 override GraphQLObjectType 的 resolver 的話，那他使用 default resolve 的方式來呼叫你給的 method 時，signature 是：`(args, context, info)`
他認為這是 `source` 的 method，你應該會自己想辦法存好 `source` 的 context。
http://graphql.org/graphql-js/type/#graphqlobjecttype
如果你是傳個 object of methods 給下層 GraphQLObjectType 來 resolve，而不去 override GraphQLObjectType 的 resolver 的話，那他使用 default resolve 的方式來呼叫你給的 method 時，signature 是：`(args, context, info)`
他認為這是 `source` 的 method，你應該會自己想辦法存好 `source` 的 context。
如果都只用 default resolve 來做的話，一個 GraphQL Object Type 就應該要對應到一個 Javascript class。
graphql schema 與 Javascript class 一對一對應，schema 像是 header files，定好 input / output 欄位與形態，然後執行嚴格的檢查。
好像比之前的 `resolve(source, args, context, info)` 稍微好教一些？
graphql schema 與 Javascript class 一對一對應，schema 像是 header files，定好 input / output 欄位與形態，然後執行嚴格的檢查。
好像比之前的 `resolve(source, args, context, info)` 稍微好教一些？
@mrorz 所以你也還沒改呀
我需要踩雷心得
除了沒 syntax highlight 之外應該是沒啥雷啦 w
喔對了
custom scalar type 用 buildSchema 不知道怎麼處理
oh 看來 Enum 也是問題（畢竟 Enum 其實也是一種 scalar type）
https://github.com/graphql/graphql-js/issues/525
https://github.com/graphql/graphql-js/issues/525
腦內踩雷
來寫惹
reason 3
是說首頁嗎 http://graphql.org/graphql-js/
他首頁本來就是用 buildSchema 沒錯
但他只能提供第一層的 resolver，沒說要怎麼指定 ObjectType 的 resolver
他首頁本來就是用 buildSchema 沒錯
但他只能提供第一層的 resolver，沒說要怎麼指定 ObjectType 的 resolver
graphql.org
GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
等等，resolver function 第一個引數從 source 改成 args 了？？！！
喔喔喔是這樣：
http://graphql.org/graphql-js/type/#graphqlobjecttype
如果你是傳個 object of methods 給下層 GraphQLObjectType 來 resolve，而不去 override GraphQLObjectType 的 resolver 的話，那他使用 default resolve 的方式來呼叫你給的 method 時，signature 是：`(args, context, info)`
他認為這是 `source` 的 method，你應該會自己想辦法存好 `source` 的 context。
http://graphql.org/graphql-js/type/#graphqlobjecttype
如果你是傳個 object of methods 給下層 GraphQLObjectType 來 resolve，而不去 override GraphQLObjectType 的 resolver 的話，那他使用 default resolve 的方式來呼叫你給的 method 時，signature 是：`(args, context, info)`
他認為這是 `source` 的 method，你應該會自己想辦法存好 `source` 的 context。
GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
如果都只用 default resolve 來做的話，一個 GraphQL Object Type 就應該要對應到一個 Javascript class。
graphql schema 與 Javascript class 一對一對應，schema 像是 header files，定好 input / output 欄位與形態，然後執行嚴格的檢查。
好像比之前的 `resolve(source, args, context, info)` 稍微好教一些？
graphql schema 與 Javascript class 一對一對應，schema 像是 header files，定好 input / output 欄位與形態，然後執行嚴格的檢查。
好像比之前的 `resolve(source, args, context, info)` 稍微好教一些？
Replied to a thread: 2017-10-28 06:48:26
@mrorz 所以你也還沒改呀
我需要踩雷心得
除了沒 syntax highlight 之外應該是沒啥雷啦 w
喔對了
custom scalar type 用 buildSchema 不知道怎麼處理
oh 看來 Enum 也是問題（畢竟 Enum 其實也是一種 scalar type）
https://github.com/graphql/graphql-js/issues/525
https://github.com/graphql/graphql-js/issues/525
Hi, I was able to create enums with values using stuff like: new GraphQLEnumType({ name : 'Test', values: { FOO: { value: 1 }, BAR: { value: 2 } } }); I realized that ...
腦內踩雷
2017-10-29
- 👻1
2017-10-31
看到同學用資料夾來做version control 我都快瘋了.. 這啥鬼程度
這文章砲火極強呀
Lots of people are reinventing Smalltalk on a Mac.
(See Bret Victor and Eve).
(See Bret Victor and Eve).
之前用這個
https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete
但我發現他會一直害我的 vscode freeze
覺得很奇怪 QQ
希望官方 support 不會有這個問題
https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete
但我發現他會一直害我的 vscode freeze
覺得很奇怪 QQ
希望官方 support 不會有這個問題
之前用這個
https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete
但我發現他會一直害我的 vscode freeze
覺得很奇怪 QQ
希望官方 support 不會有這個問題
https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete
但我發現他會一直害我的 vscode freeze
覺得很奇怪 QQ
希望官方 support 不會有這個問題
marketplace.visualstudio.com
Extension for Visual Studio Code - autocompletes javascript module exports from your project
