#frontend-tech
2017-12-01
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…
快速掃了一下，蠻不錯，React developer 可以考慮裝。
但他會把 props 展開成
```
const {
props: { children },
} = this;
```
lol
```
const {
props: { children },
} = this;
```
lol
Type-Safe GraphQL with OCaml (part 1) · Andreas Garnæs
https://andreas.github.io/2017/11/29/type-safe-graphql-with-ocaml-part-1/
https://andreas.github.io/2017/11/29/type-safe-graphql-with-ocaml-part-1/
oh 這個我找好久
https://marketplace.visualstudio.com/items?itemName=angryobject.react-pure-to-class-vscode
https://marketplace.visualstudio.com/items?itemName=angryobject.react-pure-to-class-vscode
marketplace.visualstudio.com
Extension for Visual Studio Code - Convert pure react components to class components
快速掃了一下，蠻不錯，React developer 可以考慮裝。
但他會把 props 展開成
```
const {
props: { children },
} = this;
```
lol
```
const {
props: { children },
} = this;
```
lol
- 😂1
- 😓1
styled component 至少看得出來 component 是在哪裡被 create
anyway 真的很方便就是了
magic~
coyoneda 能做到一樣的是，而且 coyoneda 其實就是個 functor，所以更 generic
If you want, you can use state-monad to do everything. The problem is learning curve.
Another problem we have in JS is there is no type and macro. It is very verbose and shaky to write functor and monad.
hmmm
Coyoneda 應該比 transducer 好學喔
有 functor 觀念就夠了
verbose and shaky 這點不用 functor，改用 transducer 也不會改善啊
js 的確寫起來 verbose and shaky 就是了 🙂
jsx 真的愈來愈醜
有『越來越』醜喔？
2017-12-02
GitHub
reactopt - A CLI React performance optimization tool that identifies potential unnecessary re-rendering
NOTICE: node 7.6+
後面是用 puppeteer
AWESOME
superstruct - A simple and composable way to validate data in Javascript.
2017-12-03
NOTICE: node 7.6+
後面是用 puppeteer
AWESOME
2017-12-04
haltu.github.io
Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.
我的 Chrome 跑是壞的..
2017-12-05
: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 <https://twitter.com/eggheadio|@eggheadio> courses have been published and are totally FREE! “Learn React Fundamentals and Advanced Patterns” <https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db> :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:
: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!!!!!! <https://pbs.twimg.com/media/DQOnllZU8AA60Sa.jpg>
Curry away in React – Hacker Noon
https://hackernoon.com/curry-away-in-react-7c4ed110c65a
這用法在 render-intensive component 會很慘
https://hackernoon.com/curry-away-in-react-7c4ed110c65a
這用法在 render-intensive component 會很慘
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…
`<Fragment>` 不是很好嗎，多出一套 syntax 就為了 support React
`<Fragment>` 就已經是 `React.createElement(Fragment)` 的縮寫了
`<>` 等於又再縮寫一次
支持 `<Fragment>`, `<>` 太短惹…
實質上有不同喔.. 一個會多個 wrapper
- 🎉1
寫投影片中 XD
- 🎉1
`subdirs` 已加上 7.0.2
- 👍1
2017-12-06
:package::rocket: Super excited to announce Parcel: A blazing fast, zero configuration web application bundler! :computer: Github: <https://github.com/parcel-bundler/parcel> :earth_americas: Website: <https://parceljs.org> :memo: Background: <https://medium.com/@devongovett/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1> <https://pbs.twimg.com/media/DQS-1-bUQAE7nVb.jpg>
Medium
Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join!
2017-12-07
:package: jsvu lets you quickly install or update JavaScript engine binaries with a single command :fire: <https://github.com/GoogleChromeLabs/jsvu> Supported engines: - <https://twitter.com/ChakraCore|@ChakraCore> - JavaScriptCore - <https://twitter.com/SpiderMonkeyJS|@SpiderMonkeyJS> - <https://twitter.com/v8js|@v8js> Perfect in combination with eshost-cli! <https://pbs.twimg.com/media/DQWoSLuXkAAZLwh.png>
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: <https://twitter.com/TheLarkInn/status/938188174794223616>
Nice to see <https://twitter.com/jdalton|@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. <3 Will need to try d3 next and compare, cc <https://twitter.com/mbostock|@mbostock> #JavaScript #AlwaysBetOnWebpack <https://pbs.twimg.com/media/DQUdDGKUEAATCG-.jpg>
Contribute to reason-react-native-scripts development by creating an account on GitHub.
- 💯1
2017-12-08
reactjs.org
We’re adopting an RFC (“request for comments”) process for contributing ideas to React. Inspired by Yarn , E
- 😂1
2017-12-09
最近看完Kent的 advanced react toturial
覺得介紹方式超OO, 雖然是用FP方式去寫, 但是每一種方法都要給個pattern name
有沒有這麼煩呀, 不就單純使用abstract或是partial function而已= =
2017-12-10
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.
Well, I feel Ruby is so obsolete when I read this "latest" article for FE developing.
You need to do some much configuration to develop in modern way.
And this is the only part 1
YouTube 2017-12-11
:fire: Finally had the time to finish react-tiny-dom, a minimal implementation of react-dom using react-reconciler APIs: <https://github.com/jiayihu/react-tiny-dom> I think it could very useful to see how to implement a custom renderer in React 16 <https://twitter.com/reactjs|@reactjs> <https://twitter.com/dan_abramov|@dan_abramov> <https://pbs.twimg.com/media/DQrXoCzX0AAqZmd.jpg>
1
2017-12-12
竟然有這麼晚整的package了
better late than never
PSA: Network throttling has been added to headless Chrome 63. Means you can now reliably use it with <https://twitter.com/____lighthouse|@____lighthouse>:bulb::house: for perf testing or Puppeteer 🤹:skin-tone-2:♂️ to automate device emulation in CI! Among 1000s of other use cases :) <https://bugs.chromium.org/p/chromium/issues/detail?id=728451#c10>
Now, <https://twitter.com/reasonml|@reasonml> is licensed under the MIT license! Thanks to <https://twitter.com/dmwlff|@dmwlff>, FB legal, and <https://twitter.com/fbOpenSource|@fbOpenSource> people (you know who you are) <https://github.com/facebook/reason/commit/e8fb73ec6ff7c3136715a3c628769e3d5906c4f0>
hardsource become popular those day.
5k daily download ~
stackoverflow.com
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 ( //
microbundle - Zero-configuration bundler for tiny modules, powered by Rollup.
各種 zero config
graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience
https://github.com/andrewdavey/immutable-devtools 無意間發現一個好物！有用 Immutable.js 的好工具
immutable-devtools - Chrome Dev Tools custom formatter for Immutable-js values
- 💯2
<https://twitter.com/kentcdodds|@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.
2017-12-13
Best Practices for kubernetes are as follow,
- 👍1
stateofjs.com
A short survey about current popular JavaScript technologies.
https://stateofjs.com/2017/other-tools/
VS竟然超越Atom這麼多 lol
VS竟然超越Atom這麼多 lol
A short survey about current popular JavaScript technologies.
現在周圍幾乎都用 VS Code
eslint is still dominate on linter ..
VS Code launch speed 已經是讓你不覺得慢了
I believe prettier + flow/ts combination will be the better choice.
@mrorz set the channel topic: 前瞻性技術之頻道。
討論紀錄：https://g0v-tw.slackarchive.io/frontend-tech
討論紀錄：https://g0v-tw.slackarchive.io/frontend-tech
eslint 是因為他很會整合吧。
像我們就是用 eslint 來呼叫 prettier 然後把 prettier 的 config 存在 eslint 的 config 裡頭。這樣他統計應該是兩者各加一票。
雖然現在 prettier 已經支援 config files 了，但 linter 設定不會一天到晚改，2017 年用了就是用了，最快明年才會改 XDD
像我們就是用 eslint 來呼叫 prettier 然後把 prettier 的 config 存在 eslint 的 config 裡頭。這樣他統計應該是兩者各加一票。
雖然現在 prettier 已經支援 config files 了，但 linter 設定不會一天到晚改，2017 年用了就是用了，最快明年才會改 XDD
- 😂2
:mega: V8 has native support for JavaScript code coverage. Tools like <https://twitter.com/ChromeDevTools|@ChromeDevTools> and Istanbul can now access V8’s coverage information without instrumenting the code! <https://v8project.blogspot.com/2017/12/javascript-code-coverage.html> <https://pbs.twimg.com/media/DQ6tR7wXUAYP5Ge.png>
- 🎉1
2017-12-14
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 <https://twitter.com/purescript|@purescript>, so you can write Node apps this way! <https://m.youtube.com/watch?v=sT6VJkkhy0o>
2017-12-15
- 💯1
https://medium.com/@kevlinhenney/simplicity-before-generality-use-before-reuse-722a8f967eb9
Good article for software engineers
Good article for software engineers
A common problem in component frameworks, class libraries, foundation services, and other infrastructure code is that many are designed to…
awesome-react-render-props - :sunglasses: Awesome list of React components with render props
egghead.io
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.
最近有holiday free course
想看的快看喔
有推哪個嗎?
2017-12-16
YouTube
Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016. Additional material at <https://bartoszmilewski.com/2014/10/28/category-theory-for->...
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.
stateMonad in JS..
2017-12-17
Author of preact joined Google!
@lynn has joined the channel
2017-12-18
最近在逛一些網站 發現字體變得很漂亮,
https://github.com/necolas/normalize.css/issues/665
https://github.com/necolas/normalize.css/issues/665
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...
後來查發現好像是apple的字體
Introducing React Performance Devtool !! A chrome extension to inspect the performance of React components. Github - <https://github.com/nitin42/react-perf-devtool> Chrome extension - <https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm> cc <https://twitter.com/PKodmad|@PKodmad> Demo :point_down:
https://sapper-template.now.sh/blog/what-is-sapper SSR for Svelte
不是很能理解 Svelte 跟 Vue 的 vue 檔差在哪裡 lol
他要做 observable 與 2-way binding 還是要弄個 runtime 呀 ._.
Svelte 產生 Vanilla JavaScript，沒有 runtime
不過還是得有些 "code" 來達成 observ. / 2-way binding
我對 runtime 的理解是
例如說我們寫了一個 React component
我們定義了 render()，他就會在正確的時間被執行
這對我來說就是 runtime 幫我做的事情
例如說我們寫了一個 React component
我們定義了 render()，他就會在正確的時間被執行
這對我來說就是 runtime 幫我做的事情
而 svelve 他的 hello world 範例，編出來長這樣
Svelte 就幫你用 native JS / DOM API 去組出這些功能
而這個 update (`p`) 在 setState 的時候會被執行
React 還需要 lib 多一層 "runtime" 去組出這些功能
這就像是在 babel compile 時把 runtime 塞進去不是嗎 Orz
看起來是不用 import 一個 “library” 沒錯
因為他在 compile 時塞進去惹。
然後如果這個 compiler 足夠聰明
複數個 svelve compoent 被 compile 時只會塞 1 份這些 function 的話
複數個 svelve compoent 被 compile 時只會塞 1 份這些 function 的話
那看起來就像是自動 import 了一個 library 不是嗎 QQ
是喔，沒錯
嚴格說起來，就差在你自己 createElement 跟有沒有 lib / compiler 幫你 createElement
所以我覺得沒有 runtime 這件事情像是行銷話術
Svelte 一個賣點就是，我 compile 出來就是 Vanilla JavaScript，可以用在任何 React / Angular / Vue
我覺得比較像是inline function的optimization
你哪一個code compile出來不是vanilla js = =
只是有沒有reuse function而已
library就保留原來function然後reuse
假如svelve夠聰明可以做staging
或是partial evaluation
React runtime 無法被用在其他地方是因為他的 runtime 接管了 DOM，嚴格使用 lifecycle 來處理事情，任何其他對 DOM 的操作，如果沒有做特殊處理（shouldComponentUpdate）的話，會被 react 給覆蓋或弄壞
svelve 之所以可以被重用，是因為他的 “runtime” 直接操作 DOM
svelve 之所以可以被重用，是因為他的 “runtime” 直接操作 DOM
而不是因為他「沒有 runtime」
那其實runtime loading會更小
也不是因為他 compile to vanilla
我不知道怎麼在 Angular 裡面 import React component 來用..
那是因為 Angular 的 runtime 用了 digest loop，不照他的做法來做會壞掉
因此 svelte 之所以可以 portable 是因為他「直接操作在 DOM 上」
沒有 DOM 之外的其他邏輯
我覺得更像是 2018 年的 jQuery UI
API 很不錯
喔 那就是No virtual DOM render而已
- 💯1
行銷話術很猛
> 我覺得更像是 2018 年的 jQuery UI
這句很不錯
這句很不錯
叫 Real DOM render 會不會比較酷
應該是他可以完整判斷data 有沒有變
根本就不需要用virtual DOM去比對
這才是他高效的地方ㄅ
可能有人用過了吧 lol
例如說 morphdom
例如說 morphdom
morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)
這樣不行，沒有行銷點 (?)
沒有包裝好
嗯嗯，他是 basic building block
Svelte 包裝好，讓你寫起來感覺像 React component
還有附加一堆東東
包好之後 DX 才會讓人想用
- 💯1
看一些 open source project 在推廣，很多 DX 考量都超越 language 本身了 ..
Reason 3 就很 JS ..
我覺得 svelte 真正做的事情是
「你寫 html 與 component config，我在 babel compile 時幫你接 DOM API 與 2-way binding」
「你寫 html 與 component config，我在 babel compile 時幫你接 DOM API 與 2-way binding」
文件裡那些慷慨激昂的「讓我們一起改變 2018 年的前端」不知道是誰想出來的 ._.
募資ㄇ
XD 哪裡看到啊？
https://svelte.technology/blog/frameworks-without-the-framework
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
哪一段啊？
抱歉有點超譯了他的話 QQ
原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
文末則有
> head over to GitHub to help kickstart the next era of front end development.
原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
文末則有
> head over to GitHub to help kickstart the next era of front end development.
有有有，意思有到
「開啟前端開發下一個紀元」 XD
大大們可以踩雷一下
https://github.com/parcel-bundler/parcel ㄇ
https://github.com/parcel-bundler/parcel ㄇ
parcel - :package::rocket: Blazing fast, zero configuration web application bundler
https://svelte.technology/blog/frameworks-without-the-framework
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
svelte.technology 
哪一段啊？
@yhsiang 有玩了一下 https://github.com/yhsiang/reason-parcel-demo
reason-parcel-demo - Create ReasonReact project with Parcel in 5 minutes
https://twitter.com/thekitze/status/941969671124848640
好久沒用 v2也改成 render prop 了
好久沒用 v2也改成 render prop 了
抱歉有點超譯了他的話 QQ
原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
文末則有
> head over to GitHub to help kickstart the next era of front end development.
原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
文末則有
> head over to GitHub to help kickstart the next era of front end development.
有有有，意思有到
「開啟前端開發下一個紀元」 XD
2017-12-19
TJ說ok
- 👌2
:gift: GraphQL.js v0.12.0 is ready just in time for the holidays with a *ton* of exciting new stuff, following the latest draft of the spec, and adding a bunch of new utilities and extended capabilities. :tada: <https://github.com/graphql/graphql-js/releases/tag/v0.12.0> <https://pbs.twimg.com/media/DRW3GjpWsAASZ6H.jpg>
1
jest-worker看起來很有淺力
Jest 22 support Puppeteer http://facebook.github.io/jest/docs/en/puppeteer.html
facebook.github.io
With the [Global Setup/Teardown](/jest/docs/en/configuration.html#globalsetup-string) and
Jest 22 以前，這個不能透過 `before()` 與 `after()` 來做嗎
Fix: beforeAll 和afterAll 的確也可以async
照理說是可以啦.. 可能有啥神奇的bug造成要用這種奇怪的方法
是說 environment 嗎
我也蠻好奇為什麼要做 environment 的 XD
我也蠻好奇為什麼要做 environment 的 XD
像是官方說「我知道你們以前都用奇怪的做法來做 setup / teardown，現在我們提供官方作法囉」這樣 @@
之前用奇怪的方法做＋1
我看到了 他不想beforeAll裡面再create puppeter
為了整個專案只起一個puppeter, 在beforeAll裡面 只做 `await global.__BROWSER__.newPage()`
Jest 22 以前，這個不能透過 `before()` 與 `after()` 來做嗎
Fix: beforeAll 和afterAll 的確也可以async
照理說是可以啦.. 可能有啥神奇的bug造成要用這種奇怪的方法
是說 environment 嗎
我也蠻好奇為什麼要做 environment 的 XD
我也蠻好奇為什麼要做 environment 的 XD
像是官方說「我知道你們以前都用奇怪的做法來做 setup / teardown，現在我們提供官方作法囉」這樣 @@
之前用奇怪的方法做＋1
jest-puppeteer-example - A working example of jest with puppeteer
我看到了 他不想beforeAll裡面再create puppeter
為了整個專案只起一個puppeter, 在beforeAll裡面 只做 `await global.__BROWSER__.newPage()`
- 💯2
2017-12-20
Reason DX還是好差, = = 我再多等幾個月好惹.. 一直回我Unknown Syntax Error 然後就炸惹
native Reason ?
Reason 還有分是不是native的喔
我是想問是有 to JS 嗎 (BS)
就Reason轉Ocaml這段掛
oh, got it.
是 ocaml language server 的問題，或者是 vscode plugin 的問題
unknown syntax error 通常真的是 syntax error 例如少了 ; 或多了 ; XD
大概撞個半天到一天就會過去了 XD
是沒人在用pattern match 所以那邊的Syntax error message沒人寫ㄇ- -
Reason 的 recursive function 也有點囉唆, 不完全是 first class function - -
native Reason ?
Reason 還有分是不是native的喔
我是想問是有 to JS 嗎 (BS)
就Reason轉Ocaml這段掛
oh, got it.
Fuck, 連type declaration 也不能recursive..
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp);
type env =
| EmptyEnv
| Env(string, ret, env);
type ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp);
type env =
| EmptyEnv
| Env(string, ret, env);
type ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
不確定是不是你要的
那個我試過
不做用在variants上
`exp` 在哪兒？
你要是完整的喔.. 我改一下
喔喔也不用啦
喔喔好
感謝
```
Reason # type env =
| EmptyEnv
| Env(string, env);
type env = EmptyEnv | Env(string, env);
```
Reason # type env =
| EmptyEnv
| Env(string, env);
type env = EmptyEnv | Env(string, env);
```
可以耶
應該看得出來再寫 interpreter 😛
還是online的compiler有bug
我單純 recursive env ~variable~ variant
喔 單純的recursive可以
但是env 要用ret ret 要用 env
就不行
circle 在 rtop 也不行。online compiler 應該是正常
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp)
and env =
| EmptyEnv
| Env(string, ret, env)
and ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
這樣不是可以？
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp)
and env =
| EmptyEnv
| Env(string, ret, env)
and ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
這樣不是可以？
原來是要這樣 我打 and type
對，這有點靠杯 ... 我仔細看了 tutorial 才發現 XD
感謝大大 我的mini interpreter 終於寫完了
可以支援lambda application囉
可以支援lambda application囉
不確定是不是你要的
那個我試過
不做用在variants上
`exp` 在哪兒？
你要是完整的喔.. 我改一下
喔喔也不用啦
喔喔好
感謝
```
Reason # type env =
| EmptyEnv
| Env(string, env);
type env = EmptyEnv | Env(string, env);
```
Reason # type env =
| EmptyEnv
| Env(string, env);
type env = EmptyEnv | Env(string, env);
```
可以耶
應該看得出來再寫 interpreter 😛
還是online的compiler有bug
我單純 recursive env ~variable~ variant
喔 單純的recursive可以
但是env 要用ret ret 要用 env
就不行
circle 在 rtop 也不行。online compiler 應該是正常
Today we released RxRelayJS, a RxJS lib that introduces Relay types. Relays are similar to Subjects, but stateless (can't call error() or complete()). Inspired by the original Java implementation by <https://twitter.com/JakeWharton|@JakeWharton>. <https://twitter.com/OpenAtMicrosoft|@OpenAtMicrosoft> <https://github.com/microsoft/rxrelayjs>
tl;dr: It is now officially supported :tada:!
danilowoz.github.io
React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.
是 ocaml language server 的問題，或者是 vscode plugin 的問題
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp)
and env =
| EmptyEnv
| Env(string, ret, env)
and ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
這樣不是可以？
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp)
and env =
| EmptyEnv
| Env(string, ret, env)
and ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
這樣不是可以？
unknown syntax error 通常真的是 syntax error 例如少了 ; 或多了 ; XD
大概撞個半天到一天就會過去了 XD
原來是要這樣 我打 and type
對，這有點靠杯 ... 我仔細看了 tutorial 才發現 XD
感謝大大 我的mini interpreter 終於寫完了
可以支援lambda application囉
可以支援lambda application囉
2017-12-21
blogs.technet.microsoft.com
Information and announcements from Program Managers, Product Managers, Developers and Testers in the Microsoft Virtualization team.
Mac pro 再沒進步 下一台可能就要買surface惹
Apple不知道腦袋哪裡有洞 竟然解散Mac pro team
從來沒用過 mac pro ._.
我是說mac probook
probook 聽起來很厲害
Muzli -Design Inspiration
I couldn’t agree more with one of the world’s most celebrated graphic designers. And, why shouldn’t I? Design is a universal language, and…
Hey look, it’s nact! A :sparkles:brand new:sparkles: library that lets you combine <https://twitter.com/nodejs|@nodejs> and actors with first class support for <https://twitter.com/reasonml|@reasonml>, lovingly crafted by @hncthbrt. The site is gorgeous and you should definitely check it out. :unicorn_face::rainbow: <https://nact.io/>
<https://twitter.com/parceljs|@parceljs> #Webpack - Compared Parcel(1.2.1) and Webpack(3.5.6) on project (~800 JS files) Run1: Webpack: 6.7 min Parcel: 1 min 6 s Run2: Webpack: 5.65 min Parcel: 2 s Config Details: Webpack - [Babel thread-loader and caching, parallel uglify, no sourcemap] Parcel - [none]
- 💯1
> Parcel - [none] 😳
XD
可以看討論串，裡面有深入點的討論
Alright everyone who's writing all these 5cent hype-blogs about <https://twitter.com/parceljs|@parceljs> v #webpack without trying it. Here's what we call _facts_. #JavaScript #OSS Chew on this: ==Alt a11y Text== parcel (no-cache): 7.56s parcel (cache): 2.71s webpack@webpack/webpack#next (no-cache): 973ms <https://pbs.twimg.com/media/DRhcUfbUQAAlxAW.jpg>
- 👍1
> Parcel - [none] 😳
XD
可以看討論串，裡面有深入點的討論
- 👌1
從來沒用過 mac pro ._.
我是說mac probook
probook 聽起來很厲害
2017-12-22
* Add bsb-js dependency * Add ReasonAsset type * Actually add the Reason asset type * Add OCaml file type, add integration test, remote unused imports * use promisify for reading files ...
MERGED!
2017-12-23
這篇開始大混戰了
Dr boolean 參戰
我也覺得vjeux沒有搞清楚FP 很多drawback SICP就解釋正確的原因
2017-12-25
redex.github.io
New blog post: Performance lessons from Tinder's Progressive Web App <https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0> ~ built with React 16, Redux, webpack 3 :scissors: JavaScript optimizations (code-splitting & preloading) :iphone: Service Workers for network resilience :hourglass: Performance budgets & more
2017-12-28
2017-12-29
:tada: Released my <https://twitter.com/reasonml|@reasonml> game to the google play store: "Gravitron" <https://play.google.com/store/apps/details?id=com.jaredforsyth.gravitron> Also available on desktop web: <http://gravitron.jaredforsyth.com/> and the source is here: <https://github.com/jaredly/gravitron/> <https://pbs.twimg.com/media/DSJ9XU8UEAAVKrS.jpg>
@KtorZ Here is the start of pt3 :)
New chapter !!!!
https://www.twitch.tv/jlongster
live now
live now
jlongster 開發方式好老派
- 😂1
昨晚掛掉近 10 個小時
Parcel 官網也是掛在 ZEIT
好慘喔 發生一次不知道會流失多少用戶
project 做完就不理他惹
babeljs.io
Check out Planning for 7.0 for the last updates throughout the 7.0 pre-releases. If something isn’t clear in this post let me know!
2017-12-30
GitHub - mweststrate/immer: Create the next immutable state by mutating the current one
https://github.com/mweststrate/immer
https://github.com/mweststrate/immer
Performance 圖表更新了
https://github.com/mweststrate/immer#performance
看起來跟 ImmutableJS 沒有太大差別
而且如果選了 ImmutableJS 又亂 toJS 的話，會無以復加的差⋯⋯
https://github.com/mweststrate/immer#performance
看起來跟 ImmutableJS 沒有太大差別
而且如果選了 ImmutableJS 又亂 toJS 的話，會無以復加的差⋯⋯
似乎可以直接 replace immutable
是呢
但如果 code base 裡已經一堆 `.get()`、`.getIn()`，那或許已經為時已晚⋯⋯
下次開新專案再說吧 XDDD
但如果 code base 裡已經一堆 `.get()`、`.getIn()`，那或許已經為時已晚⋯⋯
下次開新專案再說吧 XDDD
CRA 改預設裝這個？！
唔喔，這倒是個好問題
@yhsiang 覺得如何
@yhsiang 覺得如何
@mrorz 用 reason 都沒差惹
2017-12-31
@wildsky has joined the channel