#frontend-tech
2018-03-01
Sketch
Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.
sketch有些3d animtion 是直接用DOM做的
最驚奇的是CSS是用非常原始的naming rule
竟然不會崩潰
真的是世界奇觀
看到這CSS我都驚呆了
Reaktor
As developers, we want to reduce fear of our code failing and increase trust in our code working well. Many developers working with JavaScript borrow useful ideas from functional programming and strongly-typed programming languages to reduce fear by transferring trust from developers to tools and the code. Ideas like
Medium
Shouldn’t state management be a solved problem by now? Intuitively, developers seem to know a hidden truth: state management seems harder…
Be sure to watch <https://twitter.com/dan_abramov|@dan_abramov> 's talk on "Beyond React 16" at <https://twitter.com/jsconfis|@jsconfis>, 10 AM GMT (5 AM EST) tomorrow! <https://2018.jsconf.is/schedule/#!/conference/thursday> . Should be livestreamed at <https://www.youtube.com/user/jsconfeu> . I promise it'll be interesting and worth watching! (even if you have to get up way early :) )
*Reducers That Are Action Creators*
It is good idea, but I still want to dispatch many time in one action 😛
Of course is new context API
2018-03-02
reactjs.org
Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?” Here’s the video courtesy of JSConf Iceland: I think you’ll enjoy the talk more if you stop reading here and just watch the video. If you don’t have time to watch, a (very) brief summary follows. About the Two Demos On…
Blog post is out.
https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e
Apollo already have example for async rendering
Apollo already have example for async rendering
Apollo GraphQL
The suspense was killing us, so we built async React Apollo!
https://twitter.com/mattbierner/status/969277525284216834
THAT IS WHAT I WANT!
THAT IS WHAT I WANT!
Spectrum.chat
You know what demo I'm talking about. So I tried to be chill about it all day since it's still an unstable API but in the end I couldn't help but do a full…
GitHub
Work in progress, opening to discuss implementation details and start reviewing process. Feedback appreciated! Use new webpack 4 development and production modes Upgrade webpack dev server webp...
2018-03-03
- 👍1
@yingliao has joined the channel
2018-03-06
2018-03-07
YouTube
@rical.hsieh has joined the channel
2018-03-08
2018-03-10
Log into Facebook to start sharing and connecting with your friends, family, and people you know.
Facebook 2018-03-12
2018-03-13
@juishuyeh has joined the channel
看了一下code snippet我發現我認不出他是哪種語言惹... 怎麼大家都長這麼像
We're family~
某A公司是不是也fork自己一版呀
https://github.com/paypal/downshift 是不是用這個比較好 customize
downshift - :racing_car: Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
我們計劃用這個取代 `react-select` XD
原因是 react-select 1.0 的設計非常微妙，也很臟，有蠻多 mutate 的行為。但 1.0 之後好像好多了 (?)
加上現在有很多神秘的 feature 進來，所以只能換了 wwwww
加上現在有很多神秘的 feature 進來，所以只能換了 wwwww
原因是 react-select 1.0 的設計非常微妙，也很臟，有蠻多 mutate 的行為。但 1.0 之後好像好多了 (?)
加上現在有很多神秘的 feature 進來，所以只能換了 wwwww
加上現在有很多神秘的 feature 進來，所以只能換了 wwwww
A monorepo can be described as a repository that contains more than one logical project. These projects can be unrelated, loosely coupled…
2018-03-15
2018-03-16
- 👍2
so useful!
2008 Ryan Dahl introduced Node.js at <https://twitter.com/jsconfeu|@jsconfeu> because "making web servers is too hard" (The standing ovations was my favorite moment of JSConf ever!) This year he is returning because "machine learning is too hard". I cannot wait!!! <https://twitter.com/jsconfeu/status/974196117687734272>
#16 Ryan Dahl (<https://twitter.com/Ry|@Ry>) introducing “Propel, a Machine Learning Framework for JavaScript” fast & developer-friendly machine learning in the Node.js and in the browser. — <https://2018.jsconf.eu/speakers/ryan-dahl-propel-a-machine-learning-framework-for-javascript.html>
感覺比較像 matlab (?)
感覺比較像 matlab (?)
2018-03-17
@agameofprivacy has joined the channel
2018-03-20
Recently, <https://twitter.com/BenLesh|@BenLesh> tweeted the importance of the |> pipeline operator proposal in JavaScript. Here it is in action with #RxJS pipeable operators + <https://twitter.com/PrettierCode|@PrettierCode> + the ▷ programming ligature :fire::fire: <http://reactive.how/pipeline-operator>
Source
Reactive.how 
2018-03-21
https://www.youtube.com/channel/UCjO-zVjLvkrh8-DT9wZCHTQ/playlists
All react fest video is up
All react fest video is up
YouTube
ReactFest is a single-track open-source ReactJS conference build by the community, for the community. Featuring latest React trends, new speakers and only 20...
- 🎉3
Excited to share my most recent research! :microscope: Applying Machine-Learning with <https://twitter.com/googleanalytics|@googleanalytics> data for *faster* <https://twitter.com/angular|@angular> & <https://twitter.com/reactjs|@reactjs> applications :fire::fire: Zero-config <https://twitter.com/webpack|@webpack> plugins for: :runner: Data-driven, adaptive pre-fetching :package: Data-driven chunk clustering <http://blog.mgechev.com/2018/03/18/machine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react/> <https://pbs.twimg.com/media/DYvgc58U0AIBpEj.jpg>
- 🔥2
這超威威威威
好像把功能拆開了
https://deploy-preview-2289--react-select.netlify.com/advanced#experimental
可以組成datepicker也是威威
可以組成datepicker也是威威
deploy-preview-2289--react-select.netlify.com
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
- 🎉2
我今天才發現ben alpert原來改名叫 sophie alpert,
難怪覺得這兩個人怎麼這麼像 lol
難怪覺得這兩個人怎麼這麼像 lol
- 😂1
是說 react-hot-loader 目前既沒有在 FB 官方的 create-react-app （ https://github.com/facebook/create-react-app/pull/2304 ）
而且 react-hot-loader 似乎也沒寫成 babel-macros 所以 create-react-app v2 也沒辦法透過 babel-macros 取得？
而且 react-hot-loader 似乎也沒寫成 babel-macros 所以 create-react-app v2 也沒辦法透過 babel-macros 取得？
Couldn&#39;t resist. Integrated with our error handling. (So errors cause refresh on next save.) This would need a Babel transform, for now I just hardcoded what it would do Only works if you h...
目前是。v2 也不會內建。
react-hot-loader 感覺是會延伸更多 DX 問題，所以官方不考慮納入。
所以如果幫 react-hot-loader 寫個 macro 是否就解決了
react-hot-loader 沒人開相關 ticket 讓我覺得很狐疑
透過 `babel-macros` 好像可以耶
可以研究一下，開個 `react-hot-loader-macro`
其實整進 react-hot-loader 好像比較好
也是。畢竟是 based on react-hot-loader
babel plugin 這裡實作了 visitor function
macro 則是直接 `references.default.forEach`
macro 則是直接 `references.default.forEach`
不對，react-hot-loader/babel 好像沒辦法實作成 macro
macros 的使用方式都是像是 function：
```
import MyMacro from './my.macro'
MyMacro(
{someOption: true},
`
some stuff
`,
)
```
然後 babel-plugin-macro 會在 compile time 對他上下其手，macro 可以在裡頭拿到自己的 invocation AST (上面這個例子中就是 `MyMacro(...)` statement 的 AST)
```
import MyMacro from './my.macro'
MyMacro(
{someOption: true},
`
some stuff
`,
)
```
然後 babel-plugin-macro 會在 compile time 對他上下其手，macro 可以在裡頭拿到自己的 invocation AST (上面這個例子中就是 `MyMacro(...)` statement 的 AST)
但 react-hot-module/babel 是直接用最上層的 visitor 針對每個 declaration `ExportDefaultDeclaration`、`Program`、`Class` 外面都包一層東西
https://github.com/gaearon/react-hot-loader/blob/master/src/babel.dev.js
實作 macro 時，似乎是拿不到這些的
https://github.com/gaearon/react-hot-loader/blob/master/src/babel.dev.js
實作 macro 時，似乎是拿不到這些的
是不是讓 macro core 可以丟這些東西出來？
不過就像你上面使用方式的範例，這樣寫都要像 function 把 react component 丟進去
嗯，可能最多只能做到被 macro 包著的東西可以被 hot reload 這樣而已
疑，沒辦法 recursively 底下 children component 都包到嗎
看起來 macro 只能拿到自己的 function 有被呼叫的地方（references）的 ast，然後可以在 function 裡把玩這個 AST，但拿不到外頭的東西。
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md
> do whatever you like to the AST paths you find in `references`
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md
> do whatever you like to the AST paths you find in `references`
visitor 等於是 babel-plugin-macros 幫你掛好了的，然後搜集這個 function 被呼叫了的 references 傳給我們寫的 macro。
寫 macro 時我們沒辦法自己掛額外的 visitor
寫 macro 時我們沒辦法自己掛額外的 visitor
Replied to a thread: 2018-03-21 15:48:56
目前是。v2 也不會內建。
react-hot-loader 感覺是會延伸更多 DX 問題，所以官方不考慮納入。
所以如果幫 react-hot-loader 寫個 macro 是否就解決了
react-hot-loader 沒人開相關 ticket 讓我覺得很狐疑
透過 `babel-macros` 好像可以耶
可以研究一下，開個 `react-hot-loader-macro`
其實整進 react-hot-loader 好像比較好
也是。畢竟是 based on react-hot-loader
例如說這是一個 babel plugin
https://github.com/mattphillips/babel-plugin-console/blob/master/src/index.js
這是他的 macro
https://github.com/mattphillips/babel-plugin-console/blob/master/src/macros/scope.macro.js
https://github.com/mattphillips/babel-plugin-console/blob/master/src/index.js
這是他的 macro
https://github.com/mattphillips/babel-plugin-console/blob/master/src/macros/scope.macro.js
babel-plugin-console - Babel Plugin that adds useful build time console functions :video_game:
babel plugin 這裡實作了 visitor function
macro 則是直接 `references.default.forEach`
macro 則是直接 `references.default.forEach`
不對，react-hot-loader/babel 好像沒辦法實作成 macro
macros 的使用方式都是像是 function：
```
import MyMacro from './my.macro'
MyMacro(
{someOption: true},
`
some stuff
`,
)
```
然後 babel-plugin-macro 會在 compile time 對他上下其手，macro 可以在裡頭拿到自己的 invocation AST (上面這個例子中就是 `MyMacro(...)` statement 的 AST)
```
import MyMacro from './my.macro'
MyMacro(
{someOption: true},
`
some stuff
`,
)
```
然後 babel-plugin-macro 會在 compile time 對他上下其手，macro 可以在裡頭拿到自己的 invocation AST (上面這個例子中就是 `MyMacro(...)` statement 的 AST)
但 react-hot-module/babel 是直接用最上層的 visitor 針對每個 declaration `ExportDefaultDeclaration`、`Program`、`Class` 外面都包一層東西
https://github.com/gaearon/react-hot-loader/blob/master/src/babel.dev.js
實作 macro 時，似乎是拿不到這些的
https://github.com/gaearon/react-hot-loader/blob/master/src/babel.dev.js
實作 macro 時，似乎是拿不到這些的
- 😢1
是不是讓 macro core 可以丟這些東西出來？
不過就像你上面使用方式的範例，這樣寫都要像 function 把 react component 丟進去
嗯，可能最多只能做到被 macro 包著的東西可以被 hot reload 這樣而已
疑，沒辦法 recursively 底下 children component 都包到嗎
看起來 macro 只能拿到自己的 function 有被呼叫的地方（references）的 ast，然後可以在 function 裡把玩這個 AST，但拿不到外頭的東西。
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md
> do whatever you like to the AST paths you find in `references`
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md
> do whatever you like to the AST paths you find in `references`
babel-plugin-macros - :fishing_pole_and_fish: Enables zero-config, importable babel plugins
- 😢1
visitor 等於是 babel-plugin-macros 幫你掛好了的，然後搜集這個 function 被呼叫了的 references 傳給我們寫的 macro。
寫 macro 時我們沒辦法自己掛額外的 visitor
寫 macro 時我們沒辦法自己掛額外的 visitor
2018-03-22
你到現在才知道嗎...
對⋯而且看你發文我才注意到
2018-03-23
Type-safe React with ReasonML
Jared Forsyth
Khan Academy
reason.town
Jared Forsyth
Khan Academy
reason.town
type-safty proof真的是煩死人了
XD
現在寫 type-safe 時間都要 x 2 or 2.5 ~ _ ~
type-safty proof真的是煩死人了
XD
現在寫 type-safe 時間都要 x 2 or 2.5 ~ _ ~
Visual Studio Code silently fixed a remote code execution vulnerability
https://medium.com/0xcc/visual-studio-code-silently-fixed-a-remote-code-execution-vulnerability-8189e85b486b
https://medium.com/0xcc/visual-studio-code-silently-fixed-a-remote-code-execution-vulnerability-8189e85b486b
Medium
This blog was written few weeks ago, since VSCode has been upgraded for a while, I made this public.
2018-03-24
code.visualstudio.com
Text Buffer Reimplementation in the Visual Studio Code/Monaco editor
2018-03-26
以後可能就會變成
```
<ProviderProvider providers={[
ThemeProvider,
LanguageProvider,
CategoriesProvider,
...
]}>{children}</ProviderProvider>
```
好啦我覺得 `composeProviders([...])(App)` 比較討 FP 眾歡心w
```
<ProviderProvider providers={[
ThemeProvider,
LanguageProvider,
CategoriesProvider,
...
]}>{children}</ProviderProvider>
```
好啦我覺得 `composeProviders([...])(App)` 比較討 FP 眾歡心w
資深FP眾表示, 我CPS用多了 不怕
CPS ... ?
在JavaScript 大家叫他call back function
以後可能就會變成
```
<ProviderProvider providers={[
ThemeProvider,
LanguageProvider,
CategoriesProvider,
...
]}>{children}</ProviderProvider>
```
好啦我覺得 `composeProviders([...])(App)` 比較討 FP 眾歡心w
```
<ProviderProvider providers={[
ThemeProvider,
LanguageProvider,
CategoriesProvider,
...
]}>{children}</ProviderProvider>
```
好啦我覺得 `composeProviders([...])(App)` 比較討 FP 眾歡心w
2018-03-27
2
趁著春假升一發（Next 4 -> Next 5.1）https://github.com/cofacts/rumors-site/pull/93
其實 unversal webpack 差滿多的，有一些舊的 hack 要拔掉，升級花了不少力氣。
其實 unversal webpack 差滿多的，有一些舊的 hack 要拔掉，升級花了不少力氣。
:red_circle: Introducing CodeSandbox Live :red_circle: Real time collaboration in CodeSandbox. We're doing it live! - Create a live session for anyone to join with a URL - Edit, create, and delete files simultaneously - Use 'Classroom Mode' to specify who can make edits <https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9>
The #RxJS team is making sure you can smoothly upgrade to the upcoming 6.0 release:ok_hand: I made this tool to explore and compare the different update milestones available: 5.5 vs. 5.6 vs. 6.0 vs 6.0 + rxjs-compat, dot-chaining vs. pipeable operators, etc. <http://reactive.how/rxjs/explorer>
bs-react-apollo - ReasonML/Bucklescript Bindings for React Apollo 2.1
資深FP眾表示, 我CPS用多了 不怕
CPS ... ?
在JavaScript 大家叫他call back function
- 👍1
2018-03-28
For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks . Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches. One of the biggest lessons we’ve learned is that some of our legacy component lifecycles tend to…
稍微看完 React 16.3
一句話說完總之就是 componentWillUpdate -> componentDidUpdate
getDerivedStateFromProps 也蠻方便
話說你們要練練codemod了 ...
我兩年前14升15的codemod好像還在 lol
故意不練，等你回來寫（？）
我又不寫前端 軒田叫我投ML
幫忙一下咩
componentWillUpdate -> componentDidUpdate 感覺只要 string replacement 就好呀，不需要 code mod XDDD
What if componentWillUpdate & componentDidUpdate coexist in the same component ?
APPEND!
應該是merge 外加你的variable可能會撞
那我會 search by componentDidUpdate，如果同時有 componentWillUpdate 就先擺一起
然後才 search by componentWillUpdate
然後才 search by componentWillUpdate
2018-03-29
:tada: Announcing Pose: A new, declarative animation library with an incredible styled-components-inspired React API by <https://twitter.com/popmotionjs|@popmotionjs>! :heart_eyes::heart_eyes::heart_eyes: <https://spectrum.chat/thread/b6113bb2-266d-4f54-bc57-14327116d348> <https://pbs.twimg.com/media/DZZ5JuoWAAAsVf3.png>
The new #reactjs Context API is amazing :tada: I wrote a small function to combine multiple contexts and use them all at once :ok_hand: Not sure how it impacts performances :thinking_face: <https://twitter.com/dan_abramov|@dan_abramov> <https://twitter.com/acdlite|@acdlite> any thoughts on this pattern ? <https://pbs.twimg.com/media/DZYJgSuWAAI3YeH.png>
I've published the Lag Radar from <https://twitter.com/dan_abramov|@dan_abramov> talk on time slicing in react. Variously described as the 'awesome frame drop clock' and 'cpu lag radar thing' it's now a standalone es6 component. <https://github.com/mobz/lag-radar> /cc <https://twitter.com/ryanflorence|@ryanflorence> <https://twitter.com/Papa_Justify|@Papa_Justify>
睡個覺醒來就知道怎麼做了
@shihyen.hwang has joined the channel
睡個覺醒來就知道怎麼做了
- 👍1
Medium
Seven months ago I released an experimental module loader that enabled ES modules in Node. With over a million downloads, thousands of…
2018-03-30
React v16.3.0: New lifecycles and context API - React Blog
https://reactjs.org/blog/2018/03/29/react-v-16-3.html
https://reactjs.org/blog/2018/03/29/react-v-16-3.html
A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods , including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API. Read on to learn more about the release. Official Context API For many years, React has offered an experimental API for context. Although it was…
Since it’s open sourcing almost three years ago, GraphQL.js has followed a “pre-major” version scheme. The most recent release was v0.13.2…