Month: 2017-12


jihchi 09:04:41

Burke Knows Words

Introducing React Food Truck – Burke Knows Words

There are many important questions to ask when you are building an application. Questions like: “Who are the users?”, “What browser will…

jihchi 10:31:15
快速掃了一下,蠻不錯,React developer 可以考慮裝。
mrorz 10:33:02
但他會把 props 展開成
const {
props: { children },
} = this;

jihchi 09:11:51
Type-Safe GraphQL with OCaml (part 1) · Andreas Garnæs


jihchi 23:52:05



reactopt - A CLI React performance optimization tool that identifies potential unnecessary re-rendering

yhsiang 16:28:10
NOTICE: node 7.6+
yhsiang 16:28:21
後面是用 puppeteer
jihchi 19:52:57
jihchi 23:52:40



superstruct - A simple and composable way to validate data in Javascript.



jihchi 22:49:26

Muuri - Responsive, sortable, filterable and draggable grid layouts

Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.

jihchi 22:49:43



overtime-cli - Easy time-overlap tables for remote teams.

jihchi 22:51:11
我的 Chrome 跑是壞的..


jihchi 08:36:28


:atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift: Here's my big announcement! My <|@eggheadio> courses have been published and are totally FREE! “Learn React Fundamentals and Advanced Patterns” <> :atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift:

jihchi 08:39:32


:heart_eyes::heart_eyes::heart_eyes::heart_eyes: On the 4th day of #webpack #JavaScript Christmas, our team gave to you! :heart::heart::heart::heart::heart::heart::heart: #webpack 4.0.0-alpha.0 :heart::heart::heart::heart::heart::heart::heart: All hands on deck, we'd love as much testing and feedback as possible. Please RT for coverage!!! SO MUCH TO TRY OUT!!!!!! <>




jihchi 09:07:56
Curry away in React – Hacker Noon

這用法在 render-intensive component 會很慘

Hacker Noon

Curry away in React – Hacker Noon

So you’re going to build the next-gen eCommerce company selling dog supplies and you’ve decided to use React to build it with coz, you know…

jihchi 22:04:03



create-react-app - Create React apps with no build configuration.

🎉 1
yhsiang 22:20:00
寫投影片中 XD
🎉 1
jihchi 22:24:00
`subdirs` 已加上 7.0.2
👍 1
jihchi 23:11:17



prettier - Prettier is an opinionated code formatter.

jihchi 23:31:50


#webpack 4 release will be somewhere around February - March 2018. Release Candidate will be at least 1 months before release. With the RC we will announce the final release date.


Michael Hsu 09:14:57


:package::rocket: Super excited to announce Parcel: A blazing fast, zero configuration web application bundler! :computer: Github: <> :earth_americas: Website: <> :memo: Background: <> <>

Michael Hsu 09:24:29


#RxJS 5.5.4 has been released. Resolves a couple of regressions caused in 5.5.3. #MyFault :pray::pray::pray: <>

Michael Hsu 09:39:19


Introducing Turbo: 5x faster than Yarn &amp; NPM, and runs natively in-browser :fire:

Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join!


jihchi 08:43:43


:package: jsvu lets you quickly install or update JavaScript engine binaries with a single command :fire: <> Supported engines: - <|@ChakraCore> - JavaScriptCore - <|@SpiderMonkeyJS> - <|@v8js> Perfect in combination with eshost-cli! <>


jihchi 08:54:42


redux-saga vs. redux-observable: Which one to use for complex asynchronous flows, and why? :thinking_face: Tons of practical experiences in this thread: <> :100:

jihchi 08:56:11


Okay I forgot here on previous photo's I didn't include a11y-friendly stats: So webpack v4, without sideEffects: false lodash-es (one export 'add'): 600 KiB minified d3 (one export 'treemap'): 100 KiB minified w/ `sideEffects: false` lodash-es: ~3 KiB d3: ~1 KiB :heart_eyes: <>


Nice to see <|@jdalton>'s lodash come to life as its intended tiny size!!! That :deciduous_tree:shaking for the win with #webpack 4.0.0-alpha and "'sideEffects': false". This is the promise of ESM modules. &lt;3 Will need to try d3 next and compare, cc <|@mbostock> #JavaScript #AlwaysBetOnWebpack <>

itsmisscs 09:11:58



rfcs - RFCs for changes to React

jihchi 10:11:06



index - Index of available BuckleScript bindings

Michael Hsu 15:32:39



Contribute to reason-react-native-scripts development by creating an account on GitHub.

💯 1


mofas 07:04:03

Introducing the React RFC Process - React Blog

We’re adopting an RFC (“request for comments”) process for contributing ideas to React. Inspired by Yarn , E

jihchi 08:40:15


More Git improvements: review and stage changes directly inline! Get the latest <|@code>: <>

Michael Hsu 12:26:03


Published an npm package that polyfills the proposed React Context API: - Repo: <> - RFC: <> <>

mofas 13:31:11


If Wonder Woman and Spider-Man go into business together, they should call it Amazon Web Services.

😂 1
jihchi 18:40:24


ReasonML: basic values and types <>


mofas 10:30:36
最近看完Kent的 advanced react toturial
mofas 10:31:15
覺得介紹方式超OO, 雖然是用FP方式去寫, 但是每一種方法都要給個pattern name
mofas 10:31:45
有沒有這麼煩呀, 不就單純使用abstract或是partial function而已= =
mofas 13:28:25


My OBT-2018 submission was rejected sadly, but here it is anyway: a short two-page introduction to a comonadic semantics of user interfaces: <>


mofas 07:55:05

Martian Chronicles

Evil Front Part 1: Modern Front-end in Rails — Martian Chronicles

An opinionated guide to modern, modular, component-based approach to handling your presentation logic in Rails that does not depend on any front-end framework. Follow our three-part tutorial to learn the bare minimum of up-to-date front-end techniques by example and finally make sense of it all. Part 1: goodbye Asset Pipeline, code organization, linting.

mofas 07:58:35
Well, I feel Ruby is so obsolete when I read this "latest" article for FE developing.
mofas 07:59:36
You need to do some much configuration to develop in modern way.
mofas 07:59:43
And this is the only part 1


Michael Hsu 10:47:00


:fire: Finally had the time to finish react-tiny-dom, a minimal implementation of react-dom using react-reconciler APIs: <> I think it could very useful to see how to implement a custom renderer in React 16 <|@reactjs> <|@dan_abramov> <>

jihchi 18:48:23


When HTML is life. <>

jihchi 18:53:29


73939133 is the largest prime number with this curious property: if you take one or more digits off the end, the resulting numbers are all prime. <>



mofas 00:20:52


a hardware-accelerated machine intelligence library for the web

mofas 00:21:05
jihchi 00:28:55
better late than never
jihchi 08:37:27


PSA: Network throttling has been added to headless Chrome 63. Means you can now reliably use it with <|@____lighthouse>:bulb::house: for perf testing or Puppeteer 🤹:skin-tone-2:‍♂️ to automate device emulation in CI! Among 1000s of other use cases :) <>

jihchi 08:38:21


30 seconds of code :star: <> - Curated collection of useful Javascript snippets that you can understand in 30 seconds or less :timer_clock: - Also useful for functional programming in JS! <>

jihchi 08:39:51


Now, <|@reasonml> is licensed under the MIT license! Thanks to <|@dmwlff>, FB legal, and <|@fbOpenSource> people (you know who you are) <>

jihchi 08:40:22


Add multiple root folders to your workspace (Multi Root Workspaces) in <|@code>'s latest release: <>

mofas 08:58:44


HardSource #Webpack Plugin version 0.5 is out! <> Primary changes are - No longer depends on binary dependencies - Better ES2015 support - Serializes ModuleConcatenationPlugin - Better `environmentHash` default so less projects need it

mofas 08:59:01
hardsource become popular those day.
mofas 08:59:11
5k daily download ~
jihchi 09:53:30

Why are Fragments in React 16 better than container divs?

In React 16.2, improved support for Fragments has been added. More information can be found on React's blog post here. We are all familiar with the following code: render() { return ( //

Michael Hsu 12:31:12



microbundle - Zero-configuration bundler for tiny modules, powered by Rollup.

Michael Hsu 12:31:18



poi - :zap: Delightful web development.

Michael Hsu 12:31:28
各種 zero config
Michael Hsu 12:32:00



graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance &amp; great developer experience

jihchi 14:34:10 無意間發現一個好物!有用 Immutable.js 的好工具



immutable-devtools - Chrome Dev Tools custom formatter for Immutable-js values

💯 2
jihchi 19:10:35


I just published an issue on the future of react-select: <>

jihchi 19:11:36


<|@kentcdodds> PureComponent was really mostly added to enforce that you don't rely on random mutation. To give React the option to bailout rather than force a bailout like sCU. I'd recommend using it everywhere so you have the option to bailout when you do need it.


jihchi 08:32:58


Incredibly happy, and proud, to introduce Popmotion 8! A functional, reactive JavaScript motion library <>

jihchi 08:36:06


I'm very excited to finally share what I've been working on. Introducing the Joy Compiler: Translate idiomatic Golang into concise Javascript that works in every browser. <>

mofas 11:28:59

The State of JavaScript 2017: Introduction

A short survey about current popular JavaScript technologies.

mofas 11:31:21
VS竟然超越Atom這麼多 lol

The State of JavaScript 2017: Other Tools

A short survey about current popular JavaScript technologies.

jihchi 11:31:51
現在周圍幾乎都用 VS Code
mofas 11:31:56
eslint is still dominate on linter ..
jihchi 11:32:35
VS Code launch speed 已經是讓你不覺得慢了
mofas 11:32:56
I believe prettier + flow/ts combination will be the better choice.
mrorz 16:15:00
@mrorz set the channel topic: 前瞻性技術之頻道。
mrorz 17:32:46
eslint 是因為他很會整合吧。
像我們就是用 eslint 來呼叫 prettier 然後把 prettier 的 config 存在 eslint 的 config 裡頭。這樣他統計應該是兩者各加一票。

雖然現在 prettier 已經支援 config files 了,但 linter 設定不會一天到晚改,2017 年用了就是用了,最快明年才會改 XDD
jihchi 19:13:59


How did Ramda - a functional programming library allowed itself to be included in the "state of JavaScript"?!! <>

😂 2
mofas 22:25:44


:mega: V8 has native support for JavaScript code coverage. Tools like <|@ChromeDevTools> and Istanbul can now access V8’s coverage information without instrumenting the code! <> <>

🎉 1


mofas 08:48:49


Hi friends. :sparkling_heart: The stars haven't quite aligned, so we won't have React Conf in early 2018 like we have in past years. TBD if we'll host something in the later half of the year. Maybe we'll catch y'all at another conference next year though! :rocket:

jihchi 19:07:48


Facebooks Haxl library for Haskell is great example of why it pays to learn a teensy bit of category theory. Think async/await on steroids. Now the compiler magic that makes this possible has landed in <|@purescript>, so you can write Node apps this way! <>


jihchi 08:34:13


#webpack 4 alpha.1 * importing wasm now correctly exports (no extra default) * overriding side effects for libraries possible via rules * minimizing added to production mode, uglifyjs 3 * cli move to webpack-cli * better progress reporting <>

jihchi 08:36:03


We are excited to announce the launch of <|@docusaurus> - an infrastructure to help you easily create and manage open source websites. <>

💯 1
jihchi 08:37:08


Just published react-value It's a super simple component + HOC for turning controlled value into uncontrolled value, using a render prop. <>

jihchi 08:39:38


I just published “Node.js and the Web Tooling Benchmark” <>

jihchi 09:09:33

Good article for software engineers


Simplicity Before Generality, Use Before Reuse – Kevlin Henney – Medium

A common problem in component frameworks, class libraries, foundation services, and other infrastructure code is that many are designed to…

Michael Hsu 09:42:25


What's the difference between graphcool framework and graphql-yoga? graphcool framework =&gt; graphql native graphql-yoga =&gt; API gateway <>

Michael Hsu 09:43:12



awesome-react-render-props - :sunglasses: Awesome list of React components with render props

mofas 11:09:59

Short,instructional screencast video tutorials for web developers on @eggheadio

Concise screencast video tutorials that cover the best tools, libraries, and frameworks that modern javascript web developers can use to code more effectively and stay current.

mofas 11:10:06
最近有holiday free course
mofas 11:10:09
jihchi 15:31:54
jihchi 18:47:31


:zap: New post: Finally understand Redux by building your own Store. <>


mofas 03:56:04


Category Theory - YouTube

Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016. Additional material at <>...

mofas 09:46:56

JavaScript tutorial: State Monad in JavaScript from @evilsoft on @eggheadio

Dealing with stateful computations can be a challenge when writing purely functional JavaScript. They can result in undesired variable declaration at best and boilerplate state management code in every function dependent on the state at its worst. In this course we will explore a well know Algebraic Data Type named State, that is built from the ground up to address these :corn:cerns. While this course will be focused around a State implementation provided by a library named crocks, a majority of the techniques we learn here can be used with most of the State implementations in the wild.

mofas 09:47:04
stateMonad in JS..
mofas 09:47:50
我也用JS 寫了一個極簡版本的
mofas 09:47:56


jihchi 10:55:46


:mega: I have an exciting announcement: I'm joining the Chrome team <|@Google> in the new year! Looking forward to pushing the web...forward! :blush:

jihchi 10:57:11
Author of preact joined Google!
jihchi 15:22:52



x0 - Zero-config React development environment and static site generator

jihchi 15:37:58



sfo - Instant build process

lynn 16:11:47
@lynn has joined the channel


mofas 00:55:39
最近在逛一些網站 發現字體變得很漂亮,


font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif · Issue #665 · necolas/normalize.css

It's time to add: font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif This solution is harmless and very useful. It is used by GitHub, Wordpr...

mofas 00:55:54
mofas 04:55:02


Woah. React-based game framework... <>

jihchi 08:38:12


Introducing React Performance Devtool !! A chrome extension to inspect the performance of React components. Github - <> Chrome extension - <> cc <|@PKodmad> Demo :point_down:

jihchi 08:47:09


LOL. I'm still not using G+. Although I do think it's better, feature wise, than Facebook. <>


Social media explained. <>

mrorz 10:22:03
不是很能理解 Svelte 跟 Vue 的 vue 檔差在哪裡 lol
mrorz 10:28:18
他要做 observable 與 2-way binding 還是要弄個 runtime 呀 ._.
jihchi 10:34:12
Svelte 產生 Vanilla JavaScript,沒有 runtime
jihchi 10:37:28
不過還是得有些 "code" 來達成 observ. / 2-way binding
mrorz 10:39:46
我對 runtime 的理解是
例如說我們寫了一個 React component
我們定義了 render(),他就會在正確的時間被執行
這對我來說就是 runtime 幫我做的事情
mrorz 10:40:15
而 svelve 他的 hello world 範例,編出來長這樣
mrorz 10:40:57
update function
jihchi 10:42:39
Svelte 就幫你用 native JS / DOM API 去組出這些功能
mrorz 10:42:49
而這個 update (`p`) 在 setState 的時候會被執行
jihchi 10:43:07
React 還需要 lib 多一層 "runtime" 去組出這些功能
mrorz 10:43:16
mrorz 10:43:31
這就像是在 babel compile 時把 runtime 塞進去不是嗎 Orz
mrorz 10:44:03
看起來是不用 import 一個 “library” 沒錯
mrorz 10:44:11
因為他在 compile 時塞進去惹。
mrorz 10:45:05
然後如果這個 compiler 足夠聰明
複數個 svelve compoent 被 compile 時只會塞 1 份這些 function 的話
mrorz 10:45:20
那看起來就像是自動 import 了一個 library 不是嗎 QQ
jihchi 10:45:28
jihchi 10:46:09
嚴格說起來,就差在你自己 createElement 跟有沒有 lib / compiler 幫你 createElement
mrorz 10:46:27
所以我覺得沒有 runtime 這件事情像是行銷話術
jihchi 10:47:01
Svelte 一個賣點就是,我 compile 出來就是 Vanilla JavaScript,可以用在任何 React / Angular / Vue
mofas 10:47:12
我覺得比較像是inline function的optimization
mofas 10:47:39
你哪一個code compile出來不是vanilla js = =
mofas 10:47:46
只是有沒有reuse function而已
mofas 10:48:08
mofas 10:48:27
mofas 10:48:32
或是partial evaluation
mrorz 10:48:34
React runtime 無法被用在其他地方是因為他的 runtime 接管了 DOM,嚴格使用 lifecycle 來處理事情,任何其他對 DOM 的操作,如果沒有做特殊處理(shouldComponentUpdate)的話,會被 react 給覆蓋或弄壞

svelve 之所以可以被重用,是因為他的 “runtime” 直接操作 DOM
mrorz 10:48:43
而不是因為他「沒有 runtime」
mofas 10:48:46
那其實runtime loading會更小
mrorz 10:48:48
也不是因為他 compile to vanilla
jihchi 10:49:58
我不知道怎麼在 Angular 裡面 import React component 來用..
mrorz 10:50:22
那是因為 Angular 的 runtime 用了 digest loop,不照他的做法來做會壞掉
mrorz 10:50:53
因此 svelte 之所以可以 portable 是因為他「直接操作在 DOM 上」
mrorz 10:51:07
沒有 DOM 之外的其他邏輯