#frontend-tech
2017-06-01
Become a <https://twitter.com/code|@code> expert with these cheat sheets. Win: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf> Mac: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf> Linux: <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf> <https://pbs.twimg.com/media/DBLCekkUQAA1vM-.jpg>
@alvinyen219 has joined the channel
1
2017-06-02
jihchi: 原文連結：https://yarnpkg.com/blog/2017/05/31/determinism/
看了半天還是無法理解 hoisting 會如何影響 determinism QQ
看了半天還是無法理解 hoisting 會如何影響 determinism QQ
看起來 yarn.lock 比 npm5 的 package-lock.json 還多了 dependencies 吧
package-lock.json 完全就是 hoist 過的 list of dependencies + versions 而已？
package-lock.json 完全就是 hoist 過的 list of dependencies + versions 而已？
剛看到某個 twitte 寫 yarn.lock lightwight，package-lock.json reliable
我還沒看這篇 yarn determinism，queue 還沒消化完
jihchi: 原文連結：https://yarnpkg.com/blog/2017/05/31/determinism/
看了半天還是無法理解 hoisting 會如何影響 determinism QQ
看了半天還是無法理解 hoisting 會如何影響 determinism QQ
Yarn
One of the claims that Yarn makes is that it makes your package management “deterministic”. But what exactly does this mean? This blog post highlights how bo...
看起來 yarn.lock 比 npm5 的 package-lock.json 還多了 dependencies 吧
package-lock.json 完全就是 hoist 過的 list of dependencies + versions 而已？
package-lock.json 完全就是 hoist 過的 list of dependencies + versions 而已？
剛看到某個 twitte 寫 yarn.lock lightwight，package-lock.json reliable
我還沒看這篇 yarn determinism，queue 還沒消化完
2017-06-03
Hacker Noon
This week I attended my first TC-39 meeting. For those unaware, TC-39 is the designator of the ECMA working group that defines the…
- 👍2
2017-06-04
eBay Tech Berlin
A Tale of Adventure, Ambition and JavaScript Unit Tests
天啊我剛好正有個專案需要 migrate
感謝 @jihchi m(_ _)m
感謝 @jihchi m(_ _)m
這有 vim mode 嗎（慢著
發現打中文會變成問號
試用之後覺得不好用 …
javascript.info
Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.
GitHub
bonsai - Understand the tree of dependencies inside your webpack bundles, and trim away the excess.
2017-06-05
天啊我剛好正有個專案需要 migrate
感謝 @jihchi m(_ _)m
感謝 @jihchi m(_ _)m
這有 vim mode 嗎（慢著
發現打中文會變成問號
試用之後覺得不好用 …
2017-06-06
What’s New In DevTools (Chrome 59)
* CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.
* Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom.
* Block requests. Manually disable individual requests in the Network panel.
* Step over async await. Step through async functions predictably.
* Unified Command Menu. Execute commands and open files from the newly-unified Command Menu.
https://developers.google.com/web/updates/2017/04/devtools-release-notes
* CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.
* Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom.
* Block requests. Manually disable individual requests in the Network panel.
* Step over async await. Step through async functions predictably.
* Unified Command Menu. Execute commands and open files from the newly-unified Command Menu.
https://developers.google.com/web/updates/2017/04/devtools-release-notes
原來可以用 JS 給 CSS variable 賦值!!
> This is similar to JavaScript variables instantiated with the let keyword, which take the scope of their containing block ({}) (aka block scope).
這個部分感覺不太精確，我測試的結果是，custom property 的 scope 是在那個被選中的元素上有效，與 CSS declaration 的 `{ }` 無關。
例如說，如果某個元素套上了個 css，設定 `--foo: red;`
那如果該元素又套上另一些 css property 用到了 `var(--foo)`，那就會吃到 `red`。
http://jsbin.com/raxakicare/edit?html,css,output
這個部分感覺不太精確，我測試的結果是，custom property 的 scope 是在那個被選中的元素上有效，與 CSS declaration 的 `{ }` 無關。
例如說，如果某個元素套上了個 css，設定 `--foo: red;`
那如果該元素又套上另一些 css property 用到了 `var(--foo)`，那就會吃到 `red`。
http://jsbin.com/raxakicare/edit?html,css,output
不過整篇文讓我學到不少，css custom property 真的完全與過去的 preprocessor variables 強超級無敵多。
👍
挺有創意的
但果可以我還是考慮 syntax 解 lol
但果可以我還是考慮 syntax 解 lol
通常要用時候更複雜，我現在就都改用 IIFE
對耶這樣就不用 do expression
我之前是用 do expression 沒錯，但是要求比較低的 stage 就放棄。
挺有創意的
但果可以我還是考慮 syntax 解 lol
但果可以我還是考慮 syntax 解 lol
通常要用時候更複雜，我現在就都改用 IIFE
原來可以用 JS 給 CSS variable 賦值!!
> This is similar to JavaScript variables instantiated with the let keyword, which take the scope of their containing block ({}) (aka block scope).
這個部分感覺不太精確，我測試的結果是，custom property 的 scope 是在那個被選中的元素上有效，與 CSS declaration 的 `{ }` 無關。
例如說，如果某個元素套上了個 css，設定 `--foo: red;`
那如果該元素又套上另一些 css property 用到了 `var(--foo)`，那就會吃到 `red`。
http://jsbin.com/raxakicare/edit?html,css,output
這個部分感覺不太精確，我測試的結果是，custom property 的 scope 是在那個被選中的元素上有效，與 CSS declaration 的 `{ }` 無關。
例如說，如果某個元素套上了個 css，設定 `--foo: red;`
那如果該元素又套上另一些 css property 用到了 `var(--foo)`，那就會吃到 `red`。
http://jsbin.com/raxakicare/edit?html,css,output
不過整篇文讓我學到不少，css custom property 真的完全與過去的 preprocessor variables 強超級無敵多。
👍
對耶這樣就不用 do expression
我之前是用 do expression 沒錯，但是要求比較低的 stage 就放棄。
Replied to a thread: 2017-06-06 09:03:59
What’s New In DevTools (Chrome 59)
* CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.
* Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom.
* Block requests. Manually disable individual requests in the Network panel.
* Step over async await. Step through async functions predictably.
* Unified Command Menu. Execute commands and open files from the newly-unified Command Menu.
https://developers.google.com/web/updates/2017/04/devtools-release-notes
* CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.
* Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom.
* Block requests. Manually disable individual requests in the Network panel.
* Step over async await. Step through async functions predictably.
* Unified Command Menu. Execute commands and open files from the newly-unified Command Menu.
https://developers.google.com/web/updates/2017/04/devtools-release-notes
- 👍3
- 💯1
* CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab. * Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom. * Block requests. Manually disable individual requests in the Network panel. * Step over async await. Step through async functions predictably. * Unified Command Menu. Execute commands and open files from the newly-unified Command Menu. <https://developers.google.com/web/updates/2017/04/devtools-release-notes>
coverage tab 好像不錯
` Find unused CSS and JS` 超吸引人
剛玩了一下，真的很方便，馬上可以看出哪裡要先做 lazy loading
👍
stable 59
kcliu
只有我在用 Canary 嗎 xd
我也有用，備用
2017-06-07
59 這幾個真實用！
只有我在用 Canary 嗎 xd
我也有用，備用
yo改
Best-websites-a-programmer-should-visit - :link: Some useful websites for programmers.
試的結果是原始內文會被 archive 起來 ..
Jih-Chi Lee
yo改
2017-06-08
https://twitter.com/guybedford/status/872547059429253121
I've enjoyed experimenting with WebAssembly recently. Excited to share what I've learned in this new egghead course.
I've enjoyed experimenting with WebAssembly recently. Excited to share what I've learned in this new egghead course.
https://twitter.com/wsokra/status/872416959928860672
A few bugfixes for Scope Hoisting. Seems like webpack 3 is ready...
A few bugfixes for Scope Hoisting. Seems like webpack 3 is ready...
https://twitter.com/malyw/status/872462329027469315
You can start using ECMAScript modules in Node.js today!
Just "require('@std/esm')" and that's it.
github.com/standard-thing…
You can start using ECMAScript modules in Node.js today!
Just "require('@std/esm')" and that's it.
github.com/standard-thing…
https://twitter.com/rauschma/status/872445540385947648
Async functions are started sync, settled async: exploringjs.com/es2016-es2017/…
Async functions are started sync, settled async: exploringjs.com/es2016-es2017/…
https://twitter.com/rauschma/status/872491010999422976
Async functions are started sync, settled async: exploringjs.com/es2016-es2017/…
Async functions are started sync, settled async: exploringjs.com/es2016-es2017/…
https://twitter.com/thejameskyle/status/872474885775163392
JavaScript’s new #private class fields: What they are, how they work, and why they are the way they are
JavaScript’s new #private class fields: What they are, how they work, and why they are the way they are
https://twitter.com/jaredcobb/status/872192437350957056
Front end development in a nutshell...
#javascript #angularjs #reactjs #VueJS #backbone #webdev
Front end development in a nutshell...
#javascript #angularjs #reactjs #VueJS #backbone #webdev
https://twitter.com/mikeal/status/872578292351508480
We looked at the data, docs are the most important thing, here's how you can improve them in your project.
We looked at the data, docs are the most important thing, here's how you can improve them in your project.
https://twitter.com/masteringvim/status/872536296564166658
太有趣了！竟然 patch 教人如何離開 Vim。讀了才發現，並不是 :q! 這麼簡單⋯
太有趣了！竟然 patch 教人如何離開 Vim。讀了才發現，並不是 :q! 這麼簡單⋯
@ralflin has joined the channel
@bebeboboha has joined the channel
@joseph2068 has joined the channel
@chris_wang has joined the channel
2017-06-09
https://twitter.com/chanezon/status/872568475541159936
github.com/containerd/con… "This means that different users, such as SwarmKit, K8s, Docker and others can use containerd without coordination"
github.com/containerd/con… "This means that different users, such as SwarmKit, K8s, Docker and others can use containerd without coordination"
https://twitter.com/rvagg/status/872773786948354048
Hot off the compilers, @nodejs 8.1.0 available now @ nodejs.org/en/blog/releas…, new npm & libuv + some sweet fixes
Hot off the compilers, @nodejs 8.1.0 available now @ nodejs.org/en/blog/releas…, new npm & libuv + some sweet fixes
https://twitter.com/code/status/872934501785022464
It's that time - enjoy the @code May update. Rolling out now, download code.visualstudio.com/download. See what's new: code.visualstudio.com/updates/v1_13
It's that time - enjoy the @code May update. Rolling out now, download code.visualstudio.com/download. See what's new: code.visualstudio.com/updates/v1_13
jihchi: explorer 裡各種 icon 眼花撩亂 XD
精美~
https://twitter.com/mweststrate/status/872872085491679232
Very interesting way of organizing #mobx @reactjs applications: mobdux:
Very interesting way of organizing #mobx @reactjs applications: mobdux:
jihchi: explorer 裡各種 icon 眼花撩亂 XD
精美~
Medium
The code has been cracked for a long time now for server-side rendering and code-splitting individually. Until now — bar Next.js — there…
2017-06-10
awesome-design-systems - :nail_care::skin-tone-2: :hammer_and_pick: A collection of awesome design systems
2017-06-11
now-ui-kit - Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim
vscode 的 vim multi-cursor mode 蠻 buggy 的 ..
我 vscode 是用 vimStyle
然後沒在用 vim multi-cursor mode
然後沒在用 vim multi-cursor mode
我是用 Welcome 頁的 Vim ( https://marketplace.visualstudio.com/items?itemName=vscodevim.vim )，功能蠻多的
marketplace.visualstudio.com
Extension for Visual Studio Code - Vim emulation for Visual Studio Code
blog.bloomca.me 2017-06-12
https://twitter.com/bobzhang1988/status/873209497287876608
I will be more focused on BuckleScript and @reasonml since next month, lets push a real world functional language into mainstream together!
I will be more focused on BuckleScript and @reasonml since next month, lets push a real world functional language into mainstream together!
https://twitter.com/sebmck/status/873958247304232961
Yarn tip: You can alias a package by using `yarn add fake-name@npm:left-pad`. Now you can use `require("fake-name")` to require left-pad.
Notice: yarn only
Yarn tip: You can alias a package by using `yarn add fake-name@npm:left-pad`. Now you can use `require("fake-name")` to require left-pad.
Notice: yarn only
Probable-Wordlists - Wordlists sorted by probability originally created for password generation and testing
2017-06-13
@mark has joined the channel
https://twitter.com/reasonml/status/874408726957932544
New ReasonReact version released! reasonml.github.io/reason-react/
New ReasonReact version released! reasonml.github.io/reason-react/
https://twitter.com/am_i_tom/status/874351229991886848
#fantasyland 16 is out! Extend: dragon slaying, rebuilding React, weather analysis, and a LOT of sneaky peeking! :) tomharding.me/2017/06/12/fan…
#fantasyland 16 is out! Extend: dragon slaying, rebuilding React, weather analysis, and a LOT of sneaky peeking! :) tomharding.me/2017/06/12/fan…
https://twitter.com/housecor/status/874261781086130177
#fantasyland 16 is out! Extend: dragon slaying, rebuilding React, weather analysis, and a LOT of sneaky peeking! :) tomharding.me/2017/06/12/fan…
#fantasyland 16 is out! Extend: dragon slaying, rebuilding React, weather analysis, and a LOT of sneaky peeking! :) tomharding.me/2017/06/12/fan…
2017-06-14
https://twitter.com/reactjs/status/874766857793712129
We just released React 15.6.0. Enjoy some bug fixes and improvements to warnings. Thanks to all contributors!
We just released React 15.6.0. Enjoy some bug fixes and improvements to warnings. Thanks to all contributors!
https://twitter.com/_chenglou/status/874752000549937153
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
https://twitter.com/samccone/status/874687075269738496
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
https://twitter.com/thekitze/status/874584471835639808
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
I just published “Cool Things Reason Formatter Does” medium.com/p/cool-things-…
奇怪，我內文應該沒有拷貝錯誤才對⋯⋯
https://twitter.com/thelarkinn/status/874802611052064769
🚨🔥How to use #webpack "magic comments"! Thanks @faceyspacey for submitting to our publication. RT!! 😍🔥 #javascript
🚨🔥How to use #webpack "magic comments"! Thanks @faceyspacey for submitting to our publication. RT!! 😍🔥 #javascript
:rotating_light::fire:How to use #webpack "magic comments"! Thanks <https://twitter.com/faceyspacey|@faceyspacey> for submitting to our publication. RT!! :heart_eyes::fire: #javascript <https://medium.com/webpack/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a>
https://twitter.com/bahmutov/status/874868648468467720
“TDD? Waste of time!” by ReactiveConf blog.reactiveconf.com/tdd-waste-of-t… - not sure I agree, but the testing icecream cone looks delicious
“TDD? Waste of time!” by ReactiveConf blog.reactiveconf.com/tdd-waste-of-t… - not sure I agree, but the testing icecream cone looks delicious
https://twitter.com/kurtiskemple/status/874620403452436480
I just published - “Implementing GraphQL at Major League Soccer”
I just published - “Implementing GraphQL at Major League Soccer”
https://twitter.com/lukeed05/status/874393730609848320
Just published! 🎉 CLI parser that's 2.5x faster than minimist & 20x faster than yargs-parser! Perfect for basic use:
Just published! 🎉 CLI parser that's 2.5x faster than minimist & 20x faster than yargs-parser! Perfect for basic use:
2017-06-15
https://twitter.com/linclark/status/875018155235708929
That's part 2 of a 3-part series.
Part 1—A crash course in memory management: hacks.mozilla.org/2017/06/a-cras…
That's part 2 of a 3-part series.
Part 1—A crash course in memory management: hacks.mozilla.org/2017/06/a-cras…
https://twitter.com/linclark/status/875018430914670592
Part 2—A cartoon intro to ArrayBuffers and SharedArrayBuffers: hacks.mozilla.org/2017/06/a-cart…
Part 2—A cartoon intro to ArrayBuffers and SharedArrayBuffers: hacks.mozilla.org/2017/06/a-cart…
https://twitter.com/linclark/status/875018720741085184
Part 3—Avoiding race conditions in SharedArrayBuffers with Atomics: hacks.mozilla.org/2017/06/avoidi…
Part 3—Avoiding race conditions in SharedArrayBuffers with Atomics: hacks.mozilla.org/2017/06/avoidi…
https://twitter.com/logrocketjs/status/874996023206313984
Recreating the Chrome Console in React using react-virtualized @brian_d_vaughn #ReactJS #Redux
Recreating the Chrome Console in React using react-virtualized @brian_d_vaughn #ReactJS #Redux
https://twitter.com/thelarkinn/status/875116181056667648
Recreating the Chrome Console in React using react-virtualized @brian_d_vaughn #ReactJS #Redux
Recreating the Chrome Console in React using react-virtualized @brian_d_vaughn #ReactJS #Redux
https://twitter.com/ebidel/status/875009383142313984
“Automated testing with Headless Chrome” - developers.google.com/web/updates/20…
Karma, Mocha+Chai, Headless, oh my! …and Travis.
“Automated testing with Headless Chrome” - developers.google.com/web/updates/20…
Karma, Mocha+Chai, Headless, oh my! …and Travis.
https://twitter.com/ryanflorence/status/875110435615236096
Just published the "Philosophy" guide for React Router. Read it if routes as components still got you 🤔
reacttraining.com/react-router/w…
Just published the "Philosophy" guide for React Router. Read it if routes as components still got you 🤔
reacttraining.com/react-router/w…
https://twitter.com/postcss/status/875088068377817089
Prettier 1.4 supports CSS by PostCSS. Facebook now uses PostCSS for lint (Stylelint) and format CSS (Prettier).
github.com/prettier/prett…
Prettier 1.4 supports CSS by PostCSS. Facebook now uses PostCSS for lint (Stylelint) and format CSS (Prettier).
github.com/prettier/prett…
https://twitter.com/BenLesh/status/875116904595062784
RxJS 6.0.0-alpha.0 has been published as well.
RxJS 6.0.0-alpha.0 has been published as well.
- 👏1
https://twitter.com/_philpl/status/875281868723286016
styled-components 2.1 is out with (slightly experimental) support for react-primitives 💅🎉 github.com/styled-compone… cc @jongold
styled-components 2.1 is out with (slightly experimental) support for react-primitives 💅🎉 github.com/styled-compone… cc @jongold
https://twitter.com/mweststrate/status/875293153762451456
Fusebox looks so promising and clean. Any real life experiences?
Fusebox looks so promising and clean. Any real life experiences?
https://twitter.com/mikaelbrevik/status/875248913187577856
Fusebox looks so promising and clean. Any real life experiences?
Fusebox looks so promising and clean. Any real life experiences?
Cool maze generator written in <https://twitter.com/reasonml|@reasonml> by <https://twitter.com/jaredforsyth|@jaredforsyth>: <http://jaredforsyth.com/reason-maze/#WyJUcmlhbmdsZSIsIkJGUyIsWzE5Niw1MF0sWzcsMTAwXSxbMSwyMF0sMTUsMzAsODIwXQ==> (<https://github.com/jaredly/reason-maze>) <https://pbs.twimg.com/media/DCWCOxHWAAA2-QT.jpg>
https://twitter.com/sharifsbeat/status/875332107962376192
Just released Revalidation - A Higher Order Component for Stateless Functional Component Forms in React.
revalidation.oss.25th-floor.com
Just released Revalidation - A Higher Order Component for Stateless Functional Component Forms in React.
revalidation.oss.25th-floor.com
Stack Overflow Blog
Do you use tabs or spaces for code indentation?
yhsiang: `p-value < 10^-10`
這 p 值比我看過的任何 paper 裡的都還要小
這 p 值比我看過的任何 paper 裡的都還要小
😂😂😂
雖然我本來就是 space 派 XDD
- ➕1
react - A declarative, efficient, and flexible JavaScript library for building user interfaces.
2017-06-16
@mofas 真早
sass @extend ~
XD
yhsiang: `p-value < 10^-10`
這 p 值比我看過的任何 paper 裡的都還要小
這 p 值比我看過的任何 paper 裡的都還要小
sass @extend ~
XD
😂😂😂
- 👍1
原來 Y-combinator 可以再縮寫成這樣 FIX = f => (x => f(y => x(x)(y)))(x => f(y => x(x)(y)))
XD
2017-06-17
但+15k 到底是為啥呢
照理說 module boilerplate 應該會少一點
Medium 
@jihchi 你CRA要不要加一下這個 https://www.npmjs.com/package/babel-plugin-root-import
npm
這樣就不需要搞node_module 的hack
mofas:讓我來在各個專案試用看看
建議是用 node 原生的 `NODE_PATH=./src`
babel plugin 我覺得解得更漂亮呀
editor 的 eslint 就要有相對的支援才行
eslint for babel-root-import 感覺不太行
https://github.com/olalonde/eslint-import-resolver-babel-root-import
1. 沒人在管PR，連修 README 都不 merge https://github.com/olalonde/eslint-import-resolver-babel-root-import/issues/5
2. 我實際用下去發現 node modules 的不知為何都 resolve 到
https://github.com/olalonde/eslint-import-resolver-babel-root-import
1. 沒人在管PR，連修 README 都不 merge https://github.com/olalonde/eslint-import-resolver-babel-root-import/issues/5
2. 我實際用下去發現 node modules 的不知為何都 resolve 到
幸好我沒在整linter
最後一個人說他換到 symlink `node_modules` 的做法了 XDDDDD
不過 symlink 解跟我正在用的 babel-plugin-module-resolver 感覺一樣都會撞名吧 @@
就是如果你剛好有個 `graphql` 資料夾又有個 `graphql` package，他會跑去哪裡找東西？
就是如果你剛好有個 `graphql` 資料夾又有個 `graphql` package，他會跑去哪裡找東西？
就照 node 的 require 演算法去找
我看到有人說 `NODE_PATH` 有點 deprecate 不建議使用耶
dan 說的 src/node_modules 是把東西擺進 node_modules 嗎
dan 說的 src/node_modules 是把東西擺進 node_modules 嗎
是
symbolic link 唯一缺點就是 Windows 不支援
symlink 是說把 `ln -s src node_modules/src` 嗎
是在 src/node_modules -> src/
ohohoh
CRA 的 PR 裡面是 src/node_modules -> src/packages ，不過意思一樣
是呢
只是 src/node_modules -> src/ 蠻危險的
為什麼 XD
looped symlink 應該還好？
是沒錯，但總覺得會踩到什麼 XD
人的愚蠢無限。不過我目前還沒踩過
`import wat from 'node_modules/wat;'`
但 jest 不是還沒支援 non-root node_modules 嗎 https://github.com/facebookincubator/create-react-app/issues/607
YES!!!
這個是我最大困擾 ..
也可以在 CRA 出了 official solution 之前，先用 plugin 解掉 path 跟 jest 問題
還有 editor 的 eslint 能夠支援
我這幾個月用的是 babel-plugin-module-resolver + eslint-plugin-import + eslint-import-resolver-babel-module
瀏覽器內的 eslint 與 jest 與也都認得得
唯一的缺憾大概就是 vscode 裡 cmd - click 無法 go to definition
瀏覽器內的 eslint 與 jest 與也都認得得
唯一的缺憾大概就是 vscode 裡 cmd - click 無法 go to definition
可以來整合你的組合試試
今天有空我來整合 @mrorz 組合試試
我發現我純前端的專案會用 webpack resolve + eslint-import-resolver-webpack
後端則是用 babel 的：https://github.com/cofacts/rumors-api/blob/master/package.json
其實應該都用 babel 的就好
後端則是用 babel 的：https://github.com/cofacts/rumors-api/blob/master/package.json
其實應該都用 babel 的就好
如果可以的話當然是少了 webpack 依賴更好
但多了一個 `babel-plugin-module-resolver` 依賴呀，因為 babel 原生沒有 resolve 功能 XD
我是想說這樣的 stack 以後純 BE 也可以用
我自己是覺得 babel-root-import 的 syntax 可以把 root resolve 與 node_modules 的 resolve 分開，可以避開一些撞名的地雷，讀起來其實也比較不會 confusing
例如：
https://github.com/cofacts/rumors-api/blob/master/test/util/GraphQL.js
其實上頭的 import from ‘graphql/xxx’ 是 `src/graphql` 而不是 graphql node_module 唷 XDDD
例如：
https://github.com/cofacts/rumors-api/blob/master/test/util/GraphQL.js
其實上頭的 import from ‘graphql/xxx’ 是 `src/graphql` 而不是 graphql node_module 唷 XDDD
蠻合理。CRA 也有一些討論，不讓 import 的檔案來自 src/ 之外，但也有些例外 (e.g. package.json)
所以也可以預設 lookup `src/`
如果 babel-root-import 能整的話我也想整呢 QQ
啊？蝦密意思，沒辦法整進去 CRA 嗎？
有點尷尬.. 現在卡在 Jest 寫死 node_modules 不會 transpile，babel plugin 無解呀 … 有人要捲起袖子嗎 … https://github.com/facebook/jest/pull/2318
嘖嘖，更正，用 babel plugin 跟 node_modules 沒有關係才是 … 讓我擇日再戰
@mrorz 繞了一大圈，其實我就直接改 Jest 跟 Webpack 設定，把 `src/` 加到 resolve.module (webpack) 跟 modulePaths (jest) 就好
讚
editor 就自己裝 plugin 去 resolve 就ㄏㄠ
webpack 的話就 only works for FE projects 囉～
因為是針對 CRA，所以也是 only works for FE
@wildjcrt has joined the channel
mofas:讓我來在各個專案試用看看
建議是用 node 原生的 `NODE_PATH=./src`
After a long discussion in #741 it seems to me that src/node_modules seems like the best solution for absolute imports. It has the following benefits: Doesn't rely on symlinks (they don't work wel...
babel plugin 我覺得解得更漂亮呀
built by rollup
editor 的 eslint 就要有相對的支援才行
eslint for babel-root-import 感覺不太行
https://github.com/olalonde/eslint-import-resolver-babel-root-import
1. 沒人在管PR，連修 README 都不 merge https://github.com/olalonde/eslint-import-resolver-babel-root-import/issues/5
2. 我實際用下去發現 node modules 的不知為何都 resolve 到
https://github.com/olalonde/eslint-import-resolver-babel-root-import
1. 沒人在管PR，連修 README 都不 merge https://github.com/olalonde/eslint-import-resolver-babel-root-import/issues/5
2. 我實際用下去發現 node modules 的不知為何都 resolve 到
eslint-import-resolver-babel-root-import - A babel-root-import resolver for eslint-plugin-import
This resolver currently does not work. This is because the naming convention has changed. From line 36: p[0] === 'babel-root-import' It's trying to find the plugin settings from the .babelrc file, ...
幸好我沒在整linter
我發現 https://github.com/olalonde/eslint-import-resolver-babel-root-import/pull/6#issuecomment-291043109 這裡的討論討論
Fixes #5 Linting and tests all pass.
最後一個人說他換到 symlink `node_modules` 的做法了 XDDDDD
不過 symlink 解跟我正在用的 babel-plugin-module-resolver 感覺一樣都會撞名吧 @@
就是如果你剛好有個 `graphql` 資料夾又有個 `graphql` package，他會跑去哪裡找東西？
就是如果你剛好有個 `graphql` 資料夾又有個 `graphql` package，他會跑去哪裡找東西？
就照 node 的 require 演算法去找
我看到有人說 `NODE_PATH` 有點 deprecate 不建議使用耶
dan 說的 src/node_modules 是把東西擺進 node_modules 嗎
dan 說的 src/node_modules 是把東西擺進 node_modules 嗎
是
symbolic link 唯一缺點就是 Windows 不支援
symlink 是說把 `ln -s src node_modules/src` 嗎
是在 src/node_modules -> src/
ohohoh
CRA 的 PR 裡面是 src/node_modules -> src/packages ，不過意思一樣
是呢
只是 src/node_modules -> src/ 蠻危險的
為什麼 XD
looped symlink 應該還好？
是沒錯，但總覺得會踩到什麼 XD
人的愚蠢無限。不過我目前還沒踩過
`import wat from 'node_modules/wat;'`
但 jest 不是還沒支援 non-root node_modules 嗎 https://github.com/facebookincubator/create-react-app/issues/607
Update: @modernserf is working on a PR to this issue. Please don't submit other PRs. Currently, create-react-app allows you to structure your app like this: node_modules/ └─ react/ src/ ├─ __tests_...
YES!!!
這個是我最大困擾 ..
也可以在 CRA 出了 official solution 之前，先用 plugin 解掉 path 跟 jest 問題
還有 editor 的 eslint 能夠支援
我這幾個月用的是 babel-plugin-module-resolver + eslint-plugin-import + eslint-import-resolver-babel-module
瀏覽器內的 eslint 與 jest 與也都認得得
唯一的缺憾大概就是 vscode 裡 cmd - click 無法 go to definition
瀏覽器內的 eslint 與 jest 與也都認得得
唯一的缺憾大概就是 vscode 裡 cmd - click 無法 go to definition
可以來整合你的組合試試
2017-06-18
https://twitter.com/dan_abramov/status/876054908755218432
This week’s @reactjs beginner thread. No question is too simple! reddit.com/r/reactjs/comm…
This week’s @reactjs beginner thread. No question is too simple! reddit.com/r/reactjs/comm…
https://twitter.com/acemarke/status/875925804567474176
Redux 3.7.0 is out! Smaller UMD bundle size, and some small util function tweaks: github.com/reactjs/redux/… . Thanks to @timdorr et al!
Redux 3.7.0 is out! Smaller UMD bundle size, and some small util function tweaks: github.com/reactjs/redux/… . Thanks to @timdorr et al!
The Practical Dev
Load javascript on demand with the help of Webpack 2
@wildjcrt has left the channel
2017-06-19
@vm6bj6xup6 has joined the channel
https://github.com/25th-floor/spected
Validation library: 還不錯的 API 設計，簡潔有力，夠彈性。
Validation library: 還不錯的 API 設計，簡潔有力，夠彈性。
for example:
```
const validationRules = {
name: [
[ isGreaterThan(5),
`Minimum Name length of 6 is required.`
],
],
random: [
[ isGreaterThan(7), 'Minimum Random length of 8 is required.' ],
[ hasCapitalLetter, 'Random should contain at least one uppercase letter.' ],
]
}
```
input:
```
const inputData = { name: 'abcdef', random: 'z'}
```
output:
```
spected(validationRules, inputData)
{name: true,
random: [
'Minimum Random length of 8 is required.',
'Random should contain at least one uppercase letter.'
]}
```
```
const validationRules = {
name: [
[ isGreaterThan(5),
`Minimum Name length of 6 is required.`
],
],
random: [
[ isGreaterThan(7), 'Minimum Random length of 8 is required.' ],
[ hasCapitalLetter, 'Random should contain at least one uppercase letter.' ],
]
}
```
input:
```
const inputData = { name: 'abcdef', random: 'z'}
```
output:
```
spected(validationRules, inputData)
{name: true,
random: [
'Minimum Random length of 8 is required.',
'Random should contain at least one uppercase letter.'
]}
```
- 💯2
@jihchi 用了？
@yhsiang 沒，今天剛看到。可能下次會試用看看
@yhsiang 你想試試？
目前沒這需求 XD
呵呵
確實是比 json schema 好寫呢 @@
json schema 的 error message 好難 extract 出來 … 我想要每個 field 都顯示各自 error message
Johnson Liang
確實是比 json schema 好寫呢 @@
jihchi: https://github.com/epoberezkin/ajv#validation-errors 我以為有 `dataPath`?
不過我也沒實際開始用 @@
不過我也沒實際開始用 @@
u.3
有 dataPath，但不是問題。error message 你要馬就用內建的訊息，不然就 customize error mesage。一但 customize 之後， dataPath 就長得不一樣，但這還好，改一下就支援。總之 DX 不太好
你想要 generalize error message 丟到 React props 是件麻煩事。
P.S. 我是用 https://github.com/epoberezkin/ajv-errors 來 customize error message
原來如此，眉眉角角真的很多 Orz
是可以用，說不定你沒有這個問題，這是我個人的需求.
對 multiple inputs 就要一個一個寫
jihchi: https://github.com/epoberezkin/ajv#validation-errors 我以為有 `dataPath`?
不過我也沒實際開始用 @@
不過我也沒實際開始用 @@
u.3
有 dataPath，但不是問題。error message 你要馬就用內建的訊息，不然就 customize error mesage。一但 customize 之後， dataPath 就長得不一樣，但這還好，改一下就支援。總之 DX 不太好
你想要 generalize error message 丟到 React props 是件麻煩事。
P.S. 我是用 https://github.com/epoberezkin/ajv-errors 來 customize error message
原來如此，眉眉角角真的很多 Orz
是可以用，說不定你沒有這個問題，這是我個人的需求.
https://twitter.com/localvoid/status/876728212927262720
I just published “Improving SSR performance in Virtual DOM libraries” medium.com/p/improving-ss…
I just published “Improving SSR performance in Virtual DOM libraries” medium.com/p/improving-ss…
https://twitter.com/brian_d_vaughn/status/876625646239305728
Have you made a cool DevTools theme?
I put together a site to share themes with others. Would you use it? What feature(s) does it need?
Have you made a cool DevTools theme?
I put together a site to share themes with others. Would you use it? What feature(s) does it need?
https://twitter.com/aweary/status/876739006456791040
My talk on @reasonml for the web will be live streamed here, starting in 20 minutes: curryon.conf.meetecho.com/room2/
My talk on @reasonml for the web will be live streamed here, starting in 20 minutes: curryon.conf.meetecho.com/room2/
Medium
Announcing styled-components/primitives, an experimental entry point combining styled-components and react-primitives
Now I have more confidence that styled-components will dominate css-in-js.
- 😎1
- 💅1
Why not validation monad~
http://robotlolita.me/2013/12/08/a-monad-in-practicality-first-class-failures.html#25-sometimes-you-fail-more-than-once
http://robotlolita.me/2013/12/08/a-monad-in-practicality-first-class-failures.html#25-sometimes-you-fail-more-than-once
robotlolita.me
Extending Fold and Unfold to Exponential Embarassing-ness
redux-first-router - :medal: seamless redux-first routing -- just dispatch actions
2017-06-20
https://twitter.com/code/status/876855048202051584
Preview your Emmet expansions as you type in @code May update!
Preview your Emmet expansions as you type in @code May update!
https://twitter.com/jaredforsyth/status/876821141813329920
New post: Your first native Reason/OCaml project jaredforsyth.com/2017/06/17/you… #reasonml #OCaml
New post: Your first native Reason/OCaml project jaredforsyth.com/2017/06/17/you… #reasonml #OCaml
https://twitter.com/reasonldn/status/876727612659425280
Why should you care about @reasonml? Become persuaded by the charming @jasim_ab
protoship.io/blog/2017/05/1…
Why should you care about @reasonml? Become persuaded by the charming @jasim_ab
protoship.io/blog/2017/05/1…
對 multiple inputs 就要一個一個寫
今天有空我來整合 @mrorz 組合試試
我發現我純前端的專案會用 webpack resolve + eslint-import-resolver-webpack
後端則是用 babel 的：https://github.com/cofacts/rumors-api/blob/master/package.json
其實應該都用 babel 的就好
後端則是用 babel 的：https://github.com/cofacts/rumors-api/blob/master/package.json
其實應該都用 babel 的就好
rumors-api - GraphQL API server for clients like rumors-site and rumors-line-bot
如果可以的話當然是少了 webpack 依賴更好
但多了一個 `babel-plugin-module-resolver` 依賴呀，因為 babel 原生沒有 resolve 功能 XD
我是想說這樣的 stack 以後純 BE 也可以用
我自己是覺得 babel-root-import 的 syntax 可以把 root resolve 與 node_modules 的 resolve 分開，可以避開一些撞名的地雷，讀起來其實也比較不會 confusing
例如：
https://github.com/cofacts/rumors-api/blob/master/test/util/GraphQL.js
其實上頭的 import from ‘graphql/xxx’ 是 `src/graphql` 而不是 graphql node_module 唷 XDDD
例如：
https://github.com/cofacts/rumors-api/blob/master/test/util/GraphQL.js
其實上頭的 import from ‘graphql/xxx’ 是 `src/graphql` 而不是 graphql node_module 唷 XDDD
rumors-api - GraphQL API server for clients like rumors-site and rumors-line-bot
蠻合理。CRA 也有一些討論，不讓 import 的檔案來自 src/ 之外，但也有些例外 (e.g. package.json)
所以也可以預設 lookup `src/`
如果 babel-root-import 能整的話我也想整呢 QQ
啊？蝦密意思，沒辦法整進去 CRA 嗎？
One of the core design philosophies of Yarn is to strive for simpleness; a lean CLI without redundant features. That’s why Yarn has resisted adding random bu...
是 Kay Lee 寫的耶
是耶
Close yarnpkg/rfcs#65.
大大 gsklee !
- 💯2
Writing tech blog is not a easy job~
威威
有點尷尬.. 現在卡在 Jest 寫死 node_modules 不會 transpile，babel plugin 無解呀 … 有人要捲起袖子嗎 … https://github.com/facebook/jest/pull/2318
Summary An attempt to fix the issue raised in #2145, which is blocking facebookincubator/create-react-app#1081. Test plan This PR is incomplete because this test is failing; furthermore, I should i...
https://joneshf.github.io/programming/2015/12/31/Comonads-Monoids-and-Trees.html#foldable
This article is old but brilliant.
This article is old but brilliant.
https://twitter.com/am_i_tom/status/877082578829946880
If you're curious about Reason + JS, @_chenglou's Mario clone is definitely worth a look... medium.com/@chenglou/mare…
If you're curious about Reason + JS, @_chenglou's Mario clone is definitely worth a look... medium.com/@chenglou/mare…
Connect: behind the front-end experience
https://stripe.com/blog/connect-front-end-experience
https://stripe.com/blog/connect-front-end-experience
stripe.com
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface. In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.
嘖嘖，更正，用 babel plugin 跟 node_modules 沒有關係才是 … 讓我擇日再戰
2017-06-21
@otaq has joined the channel
https://twitter.com/rauschma/status/877221031794094081
Facebook’s new language for reactive programming: Reflex.
Talk about it (no site yet?): curry-on.org/2017/sessions/…
Facebook’s new language for reactive programming: Reflex.
Talk about it (no site yet?): curry-on.org/2017/sessions/…
https://twitter.com/rauschma/status/877221031794094081
Facebook’s new language for reactive programming: Reflex.
Talk about it (no site yet?): curry-on.org/2017/sessions/…
https://twitter.com/rauschma/status/877159733110743041
Rules for `this` in JavaScript.
2ality.com/2014/05/this.h…
Rules for `this` in JavaScript.
2ality.com/2014/05/this.h…
https://twitter.com/aweary/status/877248391998308353
My talk "Building web apps with @reasonml" from #curryon has been uploaded!
My talk "Building web apps with @reasonml" from #curryon has been uploaded!
YouTube
curry on conference 好像蠻多不錯的 talk
其實沒有
就這兩個talk
我說說build with reasonReact 和 FP這兩個
purescript那個也還好而已
👍
Medium 
Contribute to bucklescript-cookbook development by creating an account on GitHub.
OCaml is better choice
PROMISING (握
Elm/Reason/Purescript 都長得快一樣了, 這種風格比較能夠推行到FE吧
syntax 倒是大同小異。有好用的 flow control 就很吸引人。
2017-06-22
Medium
At Geckoboard, we have regular “innovation” days where we get to work on whatever we want. Recently, I’ve been spending that time working…
https://twitter.com/jcreamer898/status/877559686362353664
Containers are how things work
Components are how things look
#react #fluentconf @mxstbr
Containers are how things work
Components are how things look
#react #fluentconf @mxstbr
學到了 `& wait`
還有 `npm-run-all task:*`
npm-check 好像不賴
@mofas 用另一套。我也是用 npm-check
@mrorz 繞了一大圈，其實我就直接改 Jest 跟 Webpack 設定，把 `src/` 加到 resolve.module (webpack) 跟 modulePaths (jest) 就好
讚
editor 就自己裝 plugin 去 resolve 就ㄏㄠ
webpack 的話就 only works for FE projects 囉～
因為是針對 CRA，所以也是 only works for FE
https://twitter.com/reactjs/status/877833420822523904
Struggling with passing props too deep? Check out this post by @RubenOostinga with a possible solution!
Struggling with passing props too deep? Check out this post by @RubenOostinga with a possible solution!
https://twitter.com/ur_friend_james/status/877752407936991232
I just published atom.io/packages/linte… which shows better syntax errors for @reasonml in @AtomEditor
I just published atom.io/packages/linte… which shows better syntax errors for @reasonml in @AtomEditor
學到了 `& wait`
還有 `npm-run-all task:*`
npm-check 好像不賴
哦哦哦 出來了
FP/OO programming 到底是 FP 還是 OO
mrorz OO and FP merged!
FOPO
POOF
FOOP
真的假的是真的還是假的
reflex 用很有趣的方式去update immutable nested data
`!t.pt1.x += 1;`
拿bang是哪招
`t.pt1.!x` `t.!pt1.x`
都不一樣
the first version of reflex is written in OCaml
是有多愛 Ocaml呀
2017-06-23
Add ReactDOMNodeStream, adding streaming rendering. by aickin · Pull Request #10024 · facebook/reactThis PR builds on @tomocchino & @sebmarkbage's work on the server renderer in React 16, exposing the server renderer as a Node.js Readable Stream. This allows folks to pipe a renderer out to the ne...
Streaming rendering!
https://twitter.com/mikaelbrevik/status/877963265762086913
Demo site for react-flight is really, really pretty: react-flight.io
Demo site for react-flight is really, really pretty: react-flight.io
@mofas 用另一套。我也是用 npm-check
他其實OO部分超多, 我不喜歡class
有 document 了？
應該是看影片吧
我有看完影片呀
2017-06-24
O...p..
https://twitter.com/nzgb/status/878441570067927040
I don't even... haha, feels like a video game in here
I don't even... haha, feels like a video game in here
freeCodeCamp 
2017-06-25
rxviz.com
Visualize any Rx Observable, and export SVG of the marble diagram.
中二這麼討厭FB都retweet
- 💯1
2017-06-26
有打算使用 Docker + Selenium + ChromeDriver + Chrome headless 的捧油，可以關注這個 issue:
https://github.com/SeleniumHQ/docker-selenium/issues/429
目前可以自己 build ChromeDriver 來 workaround
https://github.com/SeleniumHQ/docker-selenium/issues/429
目前可以自己 build ChromeDriver 來 workaround
Run node-chrome with --headless rather than XVFB, to reduce resource usage.
2017-06-27
Good news guys:
according to: https://bugs.chromium.org/p/chromedriver/issues/detail?id=1772#c29
it fixed with : https://codereview.chromium.org/2952383002
as mentioned here: https://bugs.chromium.org/p/chromedriver/issues/detail?id=1772#c31
`The fix will be included in ChromeDriver 2.31. Its release date hasn't been determined yet.`
https://github.com/SeleniumHQ/docker-selenium/issues/429#issuecomment-311080432
according to: https://bugs.chromium.org/p/chromedriver/issues/detail?id=1772#c29
it fixed with : https://codereview.chromium.org/2952383002
as mentioned here: https://bugs.chromium.org/p/chromedriver/issues/detail?id=1772#c31
`The fix will be included in ChromeDriver 2.31. Its release date hasn't been determined yet.`
https://github.com/SeleniumHQ/docker-selenium/issues/429#issuecomment-311080432
有打算使用 Docker + Selenium + ChromeDriver + Chrome headless 的捧油，可以關注這個 issue:
https://github.com/SeleniumHQ/docker-selenium/issues/429
目前可以自己 build ChromeDriver 來 workaround
Run node-chrome with --headless rather than XVFB, to reduce resource usage.
https://twitter.com/housecor/status/879379525444005889
This is awesome: Bundle splitting is super trivial with dynamic imports and Webpack's magic comments feature! Demo:
This is awesome: Bundle splitting is super trivial with dynamic imports and Webpack's magic comments feature! Demo:
https://twitter.com/una/status/879391841950498817
CSS Cascade Origin Specificity
(Updated Version!)
#devdoodles 010
CSS Cascade Origin Specificity
(Updated Version!)
#devdoodles 010
@mofas @mrorz 有關 import
absolute path 的使用，你們覺得當有 conflict 出現時，哪者優先？ 例如:
absolute path 的使用，你們覺得當有 conflict 出現時，哪者優先？ 例如:
`import util from 'util/util'`，當 `src` 跟 `node_modules` 都有 `util/util` ，直覺上你會覺得 resolve 到 `src` 的還是 `node_modules `？
jihchi: node_modules 唷
jihchi: node_modules 唷
- 👍1
node_modules應該是先啦
- 👍1
Dinosaur JS conf
Medium
A library to solve React code splitting client-side and server-side.
2017-06-28
https://twitter.com/thekitze/status/879777868611452928
Prettier formatting @GraphQL inside template literals is everything I needed in my life 😍
Prettier formatting @GraphQL inside template literals is everything I needed in my life 😍
https://twitter.com/vjeux/status/879749429992972288
Prettier 1.5 is live with GraphQL, CSS-in-JS and JSON support!
Prettier 1.5 is live with GraphQL, CSS-in-JS and JSON support!
https://twitter.com/svensauleau/status/879738550882848768
So cool 😎! Optional Chaining just landed in @babeljs. github.com/babel/babel/pu…
So cool 😎! Optional Chaining just landed in @babeljs. github.com/babel/babel/pu…
https://twitter.com/thelarkinn/status/879795307864702976
“Brief introduction to scope hoisting in Webpack” by @jeremenichelli thanks for the awesome submission!!! #webpack
“Brief introduction to scope hoisting in Webpack” by @jeremenichelli thanks for the awesome submission!!! #webpack
.
修改還是會上 slackarchive 的樣子
https://twitter.com/angustweets/status/879763524897001473
How we built Uber's high performance web app for riders.
How we built Uber's high performance web app for riders.
https://twitter.com/boriscoder/status/879801970978115585
@aemkei
var сonst = "W";
let vаr = "T";
const lеt = "F";
сonst + vаr + lеt // WTF
@aemkei
var сonst = "W";
let vаr = "T";
const lеt = "F";
сonst + vаr + lеt // WTF
2017-06-29
- 🎉1
- 👍1
https://twitter.com/dan_abramov/status/880106995130486784
Storybook doc is now joined by React Styleguidist which is also supported but works a bit differently. github.com/facebookincuba…
Storybook doc is now joined by React Styleguidist which is also supported but works a bit differently. github.com/facebookincuba…
Storybook doc is now joined by React Styleguidist which is also supported but works a bit differently. <https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#getting-started-with-styleguidist> <https://pbs.twimg.com/media/DDbEpA1XkAAt4Mb.jpg>
https://twitter.com/addyosmani/status/880229735766175744
create-react-app now warns if JavaScript bundles exceed 500KB. 🔥 work by @dan_abramov on #perfmatters awareness.
github.com/facebookincuba…
create-react-app now warns if JavaScript bundles exceed 500KB. 🔥 work by @dan_abramov on #perfmatters awareness.
github.com/facebookincuba…
robinwieruch.de
Basic steps to use Redux and Redux Saga as side-effect library for asynchronous actions in NextJs - a library for server-rendered React applications...
看了 SICP 才知道 react invariant error 是怎麼來的
2017-06-30
這次換偷Elm
forward pipeline operator `|>` 我以為大多 functional programming language 都有耶
create-react-app - Create React apps with no build configuration.
https://twitter.com/dan_abramov/status/880382232912941056
Why Quip doesn’t have platform-specific engineering teams
Why Quip doesn’t have platform-specific engineering teams
這個我之前撞過 wwww
也不能說他錯呀 www
也不能說他錯呀 www
很妙。討論串下面就有人說， `[].some(a => a)` 結果 `false`，相對應很剛好 XD
every : 沒有人是 falsy
some：至少有一個是 truthy
some：至少有一個是 truthy
感覺應該是 every 取得不好
但「沒有人是 falsy」好像不管怎麼取都很長 orz
我猜在制定這個的時候已經有人吵過了
哈哈哈，可以想像這畫面
結果我去 esdiscuss.org 沒找到相關吵架
mdn 寫：
> every acts like the “for all” quantifier in mathematics. In particular, for an empty array, it returns true. (It is vacuously true that all elements of the empty set satisfy any given condition.)
> every acts like the “for all” quantifier in mathematics. In particular, for an empty array, it returns true. (It is vacuously true that all elements of the empty set satisfy any given condition.)
所以是有數學根據的
跟 @czchen 的講解一樣
有趣的是這段：
> “all cell phones in the room are turned on and turned off”
在房間裡沒有 cell phone 時，即使連矛盾的條件句也是 truthy
> “all cell phones in the room are turned on and turned off”
在房間裡沒有 cell phone 時，即使連矛盾的條件句也是 truthy
So the following still makes sense mathmatically:
```
[].every(() => false)
> true
```
```
[].every(() => false)
> true
```
可以把 `every`, `some` 當作 `and` , `or`，`and`, `or` 都是 Monoid
empty list 表示你需要 Monoid 中的 identity element
and 的 identity element 是 true, or 的 identity element 是 false
👏
阿奇要來學 Haskell 嗎？以後遇到這種問題馬上又可以解了。
可以學 Reason/OCaml 嗎？比較用得到
可以先來學Lisp家族呀
SICP裡面都用Scheme
只是學了不知道可以用在哪
學習惹
這個我之前撞過 wwww
也不能說他錯呀 www
也不能說他錯呀 www
很妙。討論串下面就有人說， `[].some(a => a)` 結果 `false`，相對應很剛好 XD
every : 沒有人是 falsy
some：至少有一個是 truthy
some：至少有一個是 truthy
感覺應該是 every 取得不好
但「沒有人是 falsy」好像不管怎麼取都很長 orz
我猜在制定這個的時候已經有人吵過了
哈哈哈，可以想像這畫面
Replied to a thread: 2017-06-30 08:46:00
結果我去 esdiscuss.org 沒找到相關吵架
mdn 寫：
> every acts like the “for all” quantifier in mathematics. In particular, for an empty array, it returns true. (It is vacuously true that all elements of the empty set satisfy any given condition.)
> every acts like the “for all” quantifier in mathematics. In particular, for an empty array, it returns true. (It is vacuously true that all elements of the empty set satisfy any given condition.)
所以是有數學根據的
In mathematics and logic, a vacuous truth is a statement that asserts that all members of the empty set have a certain property. For example, the statement "all cell phones in the room are turned off" will be true whenever there are no cell phones in the room. In this case, the statement "all cell phones in the room are turned on" would also be vacuously true, as would the conjunction of the two: "all cell phones in the room are turned on and turned off". More formally, a relatively well-defined usage refers to a conditional statement with a false antecedent. One example of such a statement is "if Uluru is in France, then the Eiffel Tower is in Bolivia". Such statements are considered vacuous because the fact that the antecedent is false prevents using the statement to infer anything about the truth value of the consequent. They are true because a material conditional is defined to be true when the antecedent is false (regardless of whether the conclusion is true). In pure mathematics, vacuously true statements are not generally of interest by themselves, but they frequently arise as the base case of proofs by mathematical induction. This notion has relevance in pure mathematics, as well as in any other field which uses classical logic. Outside of mathematics, statements which can be characterized informally as vacuously true can be misleading. Such statements make reasonable assertions about qualified objects which do not actually exist. For example, a child might tell his or her parent "I ate every vegetable on my plate", when there were no vegetables on the child's plate to begin with.
跟 @czchen 的講解一樣
有趣的是這段：
> “all cell phones in the room are turned on and turned off”
在房間裡沒有 cell phone 時，即使連矛盾的條件句也是 truthy
> “all cell phones in the room are turned on and turned off”
在房間裡沒有 cell phone 時，即使連矛盾的條件句也是 truthy
So the following still makes sense mathmatically:
```
[].every(() => false)
> true
```
```
[].every(() => false)
> true
```
可以把 `every`, `some` 當作 `and` , `or`，`and`, `or` 都是 Monoid
empty list 表示你需要 Monoid 中的 identity element
and 的 identity element 是 true, or 的 identity element 是 false
👏
阿奇要來學 Haskell 嗎？以後遇到這種問題馬上又可以解了。
可以學 Reason/OCaml 嗎？比較用得到
可以先來學Lisp家族呀
SICP裡面都用Scheme
只是學了不知道可以用在哪
看完覺得 阿難道大家不是這樣做嗎