frontend-tech

Month: 2018-03

2018-03-01

mofas 03:08:35
https://sketchapp.com/

Sketch

The digital design toolkit

Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.

mofas 03:09:02
sketch有些3d animtion 是直接用DOM做的
mofas 03:12:46
最驚奇的是CSS是用非常原始的naming rule
mofas 03:12:56
竟然不會崩潰
mofas 03:13:04
真的是世界奇觀
mofas 03:14:33
看到這CSS我都驚呆了
Untitled
mofas 08:11:41
https://www.reaktor.com/blog/fear-trust-and-javascript/

Reaktor

Fear, trust and JavaScript: When types and functional programming fail - 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

mofas 08:11:53
https://medium.com/@ShMcK/redesigning-redux-b2baee8b8a38

Medium

Redesigning Redux – Shawn McKay – Medium

Shouldn’t state management be a solved problem by now? Intuitively, developers seem to know a hidden truth: state management seems harder…

jihchi 08:42:17
https://twitter.com/acemarke/status/968948106778828803?s=12

twitter

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 :) )

mofas 08:54:24
*Reducers That Are Action Creators*
mofas 08:58:49
It is good idea, but I still want to dispatch many time in one action 😛
jihchi 18:50:16
https://twitter.com/cpojer/status/969153923369103360?s=12

twitter

It's <https://twitter.com/dan_abramov|@dan_abramov> live at JSConf Iceland: <https://www.youtube.com/watch?v=D-h3bhzauKo> I'm so excited about his talk!

mofas 22:30:37
Of course is new context API

2018-03-02

mofas 01:56:00
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

reactjs.org

Sneak Peek: Beyond React 16 - React Blog

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…

mofas 01:56:04
Blog post is out.
mofas 05:46:56
https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e
Apollo already have example for async rendering

Apollo GraphQL

A first look at Async React + Apollo – Apollo GraphQL

The suspense was killing us, so we built async React Apollo!

mofas 08:53:39
https://twitter.com/mattbierner/status/969277525284216834
THAT IS WHAT I WANT!

twitter

Just added bi-directional scroll sync to vscode's #markdown preview. Try it out in <https://twitter.com/code|@code> insiders today Let me know if you run into any bugs

jihchi 18:46:35
https://twitter.com/acdlite/status/969428655238557697?s=12

twitter

Did You Know™ You can suspend from inside of getDerivedStateFromProps. It “just works” because it’s part of React’s render phase. You can also suspend inside a setState reducer (first argument).

jihchi 18:49:30
https://twitter.com/sanketsahu/status/968934693650526210?s=12

twitter

We officially wrote a part of Google's Flutter Documentation intended for React Native Developers. <https://flutter.io/flutter-for-react-native/> RT for reach!

jihchi 22:27:45
https://spectrum.chat/thread/386a12b0-62ae-44cd-a7d1-333d1fe607f7

Spectrum.chat

A Walkthrough of *that* React Suspense Demo · React

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…

jihchi 22:28:19
https://github.com/facebook/create-react-app/pull/4077

GitHub

[WIP] Webpack 4 by andriijas · Pull Request #4077 · facebook/create-react-app

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

mofas 03:06:12
https://twitter.com/dan_abramov/status/969644982335426562

Sebastian Markbåge is really awesome guy.

twitter

<https://twitter.com/samdbeckham|@samdbeckham> I just demoed it :slightly_smiling_face: <https://twitter.com/sebmarkbage|@sebmarkbage> came up with the API, <https://twitter.com/acdlite|@acdlite> did the implementation work

👍 1
yingliao 15:12:51
@yingliao has joined the channel

2018-03-06

mofas 21:57:54
https://github.com/atom/xray
Atom 嘗試更換引擎..改用rust寫

GitHub

atom/xray

xray - An experimental next-generation Electron-based text editor

2

2018-03-07

jihchi 08:42:47
https://twitter.com/learnangular4u/status/971082935968317440?s=12

twitter

Learn ReactJS: Code Like A Facebook Developer ☞ <http://go.edupioneer.net/H1XvrOuOf> #AngularJs rJ-7wrOu_z <https://pbs.twimg.com/media/DXn6yGjV4AAKR1x.jpg>

jihchi 08:45:23
https://twitter.com/wesbos/status/971035267296645122?s=12

twitter

I’m not sure why I’m surprised, but cloudflare uses cloudflare <https://pbs.twimg.com/media/DXnPaYZW4AEjUUS.png>

Rical 14:09:09
@rical.hsieh has joined the channel

2018-03-08

mofas 06:56:25
https://twitter.com/code/status/971491949906571264?s=09

twitter

Another month, another big <https://twitter.com/code|@code> release: The February update is here :tada::muscle:Download: <https://code.visualstudio.com/download> and see what's new: <https://code.visualstudio.com/updates/v1_21> <https://pbs.twimg.com/media/DXtk9k-VQAAGAvF.jpg>

2018-03-10

jihchi 07:47:03
https://www.facebook.com/groups/reason.tw/permalink/672614673129660/

Facebook

Log into Facebook | Facebook

Log into Facebook to start sharing and connecting with your friends, family, and people you know.

2018-03-12

2018-03-13

Jui-Shu Yeh 00:09:03
@juishuyeh has joined the channel
mofas 11:54:55
看了一下code snippet我發現我認不出他是哪種語言惹... 怎麼大家都長這麼像
jihchi 11:57:34
We're family~
mofas 11:58:14
https://twitter.com/timarney/status/973374560727859200

twitter

The Ask: "A Select control built with and for React JS" Dev: "That should be easy to build" :wink: <https://pbs.twimg.com/media/DYIegaXW0AAppvT.jpg>

mofas 11:58:32
某A公司是不是也fork自己一版呀
jihchi 12:00:21
https://github.com/paypal/downshift 是不是用這個比較好 customize

GitHub

paypal/downshift

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
cjies 12:12:56
我們計劃用這個取代 `react-select` XD
👍 1
jihchi 19:17:12
https://medium.com/@luisvieira_gmr/building-large-scale-react-applications-in-a-monorepo-91cd4637c131

Medium

Building large scale react applications in a monorepo

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

jihchi 08:50:55
https://twitter.com/reezaysa/status/973315269975334913?s=12

twitter

How's life going? Me: <https://pbs.twimg.com/media/DYHpA-_WsAEulr3.jpg>

<https://pbs.twimg.com/media/DYHpBdcWkAAKBa9.jpg>

<https://pbs.twimg.com/media/DYHpC_fX4AEXVU8.jpg>

<https://pbs.twimg.com/media/DYHpEG7W4AAoAU2.jpg>

2018-03-16

mofas 04:36:40
https://twitter.com/sindresorhus/status/974343649600323584

twitter

You can now search and kill processes by port number with the latest `fkill-cli` version, thanks to <https://twitter.com/kevvayo|@kevvayo>. <https://github.com/sindresorhus/fkill-cli>

👍 2
mofas 04:36:47
so useful!
jihchi 08:06:55
https://twitter.com/cramforce/status/974306173892505600?s=12

twitter

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>

twitter

#16 Ryan Dahl (<https://twitter.com/Ry|@Ry>) introducing “Propel, a Machine Learning Framework for JavaScript” fast &amp; 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 (?)
jihchi 08:33:35
https://twitter.com/michelebertoli/status/974336995945320449?s=12

twitter

Allows you to code using certain <http://React.next> features today! Perfect for component library maintainers <https://buff.ly/2GrW2Lw>

2018-03-17

agameofprivacy 13:27:50
@agameofprivacy has joined the channel

2018-03-20

mofas 11:25:17
https://twitter.com/CedricSoulas/status/975734784625381377

twitter

Recently, <https://twitter.com/BenLesh|@BenLesh> tweeted the importance of the |&gt; 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>

mofas 11:26:49
Source
mofas 11:26:50
http://reactive.how/

Reactive.how

Learn Reactive Programming

Focus on one new concept – every Monday

2018-03-21

mofas 02:36:55
https://www.youtube.com/channel/UCjO-zVjLvkrh8-DT9wZCHTQ/playlists
All react fest video is up

YouTube

ReactFest

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
mofas 02:37:05
https://twitter.com/mgechev/status/976120561070845959

twitter

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> &amp; <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
mofas 02:37:09
這超威威威威
mofas 02:41:38
好像把功能拆開了
mofas 02:44:27
https://deploy-preview-2289--react-select.netlify.com/advanced#experimental
可以組成datepicker也是威威

deploy-preview-2289--react-select.netlify.com

React-Select

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.

🎉 2
mofas 08:03:49
我今天才發現ben alpert原來改名叫 sophie alpert,
難怪覺得這兩個人怎麼這麼像 lol
你到現在才知道嗎...
對⋯而且看你發文我才注意到
😂 1
mrorz 15:48:56
是說 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 取得?

GitHub

Proof of concept: simple hot reloading by gaearon · Pull Request #2304 · facebook/create-react-app

Couldn&amp;#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`
不對,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)
但 react-hot-module/babel 是直接用最上層的 visitor 針對每個 declaration `ExportDefaultDeclaration`、`Program`、`Class` 外面都包一層東西

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`
visitor 等於是 babel-plugin-macros 幫你掛好了的,然後搜集這個 function 被呼叫了的 references 傳給我們寫的 macro。

寫 macro 時我們沒辦法自己掛額外的 visitor
jihchi 15:50:01
目前是。v2 也不會內建。

2018-03-22

jihchi 08:34:44
https://twitter.com/reasonml/status/976608815108911104?s=12

twitter

Vote for the JS function you'd like to warn against! <https://github.com/BuckleScript/bucklescript/issues/2669>

2018-03-23

jihchi 08:34:07
https://twitter.com/mbostock/status/976884656380379136?s=12

twitter

D3 5.0 is out! :tada: Here’s a summary of what’s new: <https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50>

jihchi 09:31:17
Type-safe React with ReasonML 
Jared Forsyth
Khan Academy
reason.town
type-safty proof真的是煩死人了
現在寫 type-safe 時間都要 x 2 or 2.5 ~ _ ~
Michael Hsu 09:47:33
https://twitter.com/apollographql/status/976921502158344192

twitter

We're excited to finally announce the official release of React Apollo 2.1, our new render prop API for working with Apollo Client! :tada: <https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926>

jihchi 18:47:42
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

Medium

Visual Studio Code silently fixed a remote code execution vulnerability

This blog was written few weeks ago, since VSCode has been upgraded for a while, I made this public.

jihchi 18:52:41
https://twitter.com/palashv2/status/885341769700974592?s=12

twitter

When I remove a useless block of code #100daysofcode #javascript #reactjs #angularjs #vuejs #nodejs #es6 #angular #coding #codenewbie #npm

2018-03-24

mofas 04:30:00
https://code.visualstudio.com/blogs/2018/03/23/text-buffer-reimplementation

code.visualstudio.com

Text Buffer Reimplementation, a Visual Studio Code Story

Text Buffer Reimplementation in the Visual Studio Code/Monaco editor

jihchi 09:03:28
https://twitter.com/chromedevtools/status/977213392405585925?s=12

twitter

Now in Canary: "Copy as Fetch" (GIF by <https://twitter.com/umaar|@umaar>) <https://umaar.com/dev-tips/167-copy-as-fetch/>

2018-03-26

jihchi 09:10:22
https://twitter.com/coderitual/status/977938079494393857?s=12

twitter

:rocket::rocket::rocket:I feel much better when I stopped being afraid and turned redux into a new CONTEXT API :fire::fire::fire:. #reactjs #javascript <https://pbs.twimg.com/media/DZJUVodX0AApwNp.png>

以後可能就會變成
```
<ProviderProvider providers={[
ThemeProvider,
LanguageProvider,
CategoriesProvider,
...
]}>{children}</ProviderProvider>
```

好啦我覺得 `composeProviders([...])(App)` 比較討 FP 眾歡心w
資深FP眾表示, 我CPS用多了 不怕
CPS ... ?
在JavaScript 大家叫他call back function

2018-03-27

jihchi 08:36:08
https://twitter.com/v8js/status/978319362837958657?s=12

twitter

Starting with Chrome 66, <https://twitter.com/v8js|@v8js> compiles JavaScript source code on a background thread, reducing main thread compile time up to 20%! <https://v8project.blogspot.com/2018/03/background-compilation.html> <https://pbs.twimg.com/media/DZOwRYDWsAAePp0.png>

jihchi 08:37:17
https://twitter.com/suchipi/status/978332662141104128?s=12

twitter

pour one out for the homies using atom or vs code <https://pbs.twimg.com/media/DZO8XZ7VAAEnw2B.jpg>

jihchi 08:40:15
https://twitter.com/zeithq/status/978330597411250176?s=12

twitter

Next.js 5.1: ◆ 102x Faster Page Resolution ◆ Environment Configuration ◆ Improved Error Handling ◆ Phases / Config Function ◆ Improved Production Source Maps ◆ New Plugins / Improvements to Existing Ones <https://zeit.co/blog/next5-1>

趁著春假升一發(Next 4 -> Next 5.1)https://github.com/cofacts/rumors-site/pull/93

其實 unversal webpack 差滿多的,有一些舊的 hack 要拔掉,升級花了不少力氣。
2
jihchi 08:50:23
https://twitter.com/compuives/status/978322665009307648?s=12

twitter

: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>

jihchi 08:51:15
https://twitter.com/cedricsoulas/status/978295281639968768?s=12

twitter

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>

Michael Hsu 09:49:04
https://github.com/zenlist/bs-react-apollo

GitHub

zenlist/bs-react-apollo

bs-react-apollo - ReasonML/Bucklescript Bindings for React Apollo 2.1

2018-03-28

mofas 07:58:26
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

reactjs.org

Update on Async Rendering - React Blog

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…

jihchi 08:38:01
https://twitter.com/mathias/status/978534559770906624?s=12

twitter

V8 v6.6 performance boosts: :rocket: Array#reduce :speedboat: promises &amp; async functions :zap: async generators &amp; iterators :racing_car: compile time :dash: parse time <https://v8project.blogspot.com/2018/03/v8-release-66.html> <https://twitter.com/v8js/status/978534399938584576>

twitter

What’s new in V8 v6.6? Optional catch binding, extended string trimming, several parse/compile/runtime performance improvements, and much more! <https://v8project.blogspot.com/2018/03/v8-release-66.html> <https://pbs.twimg.com/media/DZRz14FX4AAvi-k.png>

mofas 09:28:11
稍微看完 React 16.3
mofas 09:28:35
一句話說完總之就是 componentWillUpdate -> componentDidUpdate
jihchi 09:30:07
getDerivedStateFromProps 也蠻方便
mofas 09:36:16
話說你們要練練codemod了 ...
mofas 09:36:55
我兩年前14升15的codemod好像還在 lol
jihchi 09:38:10
故意不練,等你回來寫(?)
mofas 09:38:51
我又不寫前端 軒田叫我投ML
jihchi 09:50:56
幫忙一下咩
mrorz 10:50:59
componentWillUpdate -> componentDidUpdate 感覺只要 string replacement 就好呀,不需要 code mod XDDD
mofas 10:59:38
What if componentWillUpdate & componentDidUpdate coexist in the same component ?
jihchi 11:00:40
APPEND!
mofas 11:01:00
應該是merge 外加你的variable可能會撞
mrorz 11:12:04
那我會 search by componentDidUpdate,如果同時有 componentWillUpdate 就先擺一起
然後才 search by componentWillUpdate
mofas 23:29:39
https://twitter.com/mgechev/status/978221431648550912

twitter

Animated parrot in your terminal <https://github.com/hugomd/parrot.live>

2018-03-29

jihchi 08:27:56
https://twitter.com/_cmdv_/status/979075790792019968?s=12

twitter

Just in case you missed my introductory course to PureScript it’s now FREE for ever :sunny::clinking_glasses::trophy::dart::tada: :woman-cartwheeling: <https://twitter.com/eggheadio/status/979059091229347840>

twitter

Functional Programming Concepts in Purescript - #purescript course by <https://twitter.com/_cmdv_|@_cmdv_> <http://bit.ly/2phONhN> <https://pbs.twimg.com/media/DZZRDbrU8AAezSB.png>

jihchi 08:31:40
https://twitter.com/mxstbr/status/979103545407324160?s=12

twitter

: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>

jihchi 08:34:51
https://twitter.com/etienne_dot_js/status/978982920768630784?s=12

twitter

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>

jihchi 08:38:07
https://twitter.com/solomonstre/status/979027696570155008?s=12

twitter

Hi everyone, I've got some news to share with you today... <https://blog.docker.com/2018/03/au-revoir/> <https://pbs.twimg.com/media/DZY0IjaVwAA0Hcf.jpg>

mofas 12:15:39
https://twitter.com/mobz/status/978980953862361088?s=12

糟了 不看code我不知道他怎麼做的

twitter

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>