frontend-tech

Month: 2017-09

2017-09-01

jihchi 16:32:45
https://github.com/Thinkmill/jest-in-case

GitHub

Thinkmill/jest-in-case

jest-in-case - Jest utility for creating variations of the same test

我覺得不行,我覺得用 forEach 就搞定惹
Oh 這個有用,讓 mocha 支援 snapshot testing
但需要踩踩雷
XD 結果是 snapshot 有用,case 無用
支援 snapshot 要做的工比 case 多很多吧 XD?
用 Jest !?
snap-shot-it 是 for mocha 的吧

2017-09-04

2017-09-05

jihchi 09:03:40
https://twitter.com/fbjest/status/904728388971225089

twitter

Jest 21 is out. Check out the *massive* changelog: <https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-2100>

Michael Hsu 2017-09-05 09:14:11
哇 好長,這次還沒有整理的文章?
原 Twitte 串裡面有提到兩三個 highlight :p
👍 1
jihchi 10:03:50
https://prometheus.io/blog/2017/09/04/promcon-2017-recap/

prometheus.io

PromCon 2017 Recap | Prometheus

An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach.

jihchi 10:05:26
https://github.com/sapegin/jest-cheat-sheet

GitHub

sapegin/jest-cheat-sheet

jest-cheat-sheet - Jest cheat sheet

jihchi 17:28:50
https://github.com/diegohaz/styled-tools

GitHub

diegohaz/styled-tools

styled-tools - Useful interpolated functions for styled-components :nail_care:

mofas 20:58:57
https://twitter.com/dan_abramov/status/904776510334164992
這本就Daniel Friedman 寫的
上禮拜剛看完
大家有興趣也可以看一下
第九章有推導y combinator
還蠻精彩的

twitter

From “The Little Schemer” <https://pbs.twimg.com/media/DI5pb6lUwAI3kVR.jpg>

👍 1
jihchi 21:07:08

<https://twitter.com/dan_abramov/status/904776510334164992> 這本就Daniel Friedman 寫的 上禮拜剛看完 大家有興趣也可以看一下 第九章有推導y combinator 還蠻精彩的

<https://www.google.com.tw/search?q=The+Little+Schemer&amp;oq=The+Little+Schemer&amp;aqs=chrome..69i57j69i64.230j0j7&amp;sourceid=chrome&amp;ie=UTF-8>

2017-09-06

jihchi 08:12:31
https://twitter.com/ebidel/status/905214738593746944

> As of today, JS modules supported in Chrome! <script type=module>
chromestatus.com/feature/536569

twitter

As of today, JS modules supported in Chrome! &lt;script type=module&gt; <https://www.chromestatus.com/feature/5365692190687232>

jihchi 08:59:55
https://twitter.com/mylesborins/status/905158276375031812

🎉🎉🎉🎉

Happy @nodejs LTS release day

$ nvm install v6.11.3

Snapshots Re-Enabled Edition!!!

nodejs.org/en/blog/releas

:tada:🎉🎉🎉

twitter

:tada::tada::tada::tada: Happy <https://twitter.com/nodejs|@nodejs> LTS release day $ nvm install v6.11.3 Snapshots Re-Enabled Edition!!! <https://nodejs.org/en/blog/release/v6.11.3/> :tada::tada::tada::tada:

jihchi 09:03:47
https://twitter.com/chromiumdev/status/900326769387032577

Introducing Rendertron: the headless Chrome server rendering solution for indexing & static crawlers

github.com/GoogleChrome/r

twitter

Introducing Rendertron: the headless Chrome server rendering solution for indexing &amp; static crawlers <https://github.com/GoogleChrome/rendertron> <https://pbs.twimg.com/media/DH6JQK7XYAA2sYS.jpg>

看來官方 docker 裡沒有任何中文字體,該寫個 dockerfile 重包一發 XD
yes
jihchi 09:06:18
https://twitter.com/chromedevtools/status/902662330240057344

Now in Canary: Capture screenshots of specific HTML nodes

twitter

Now in Canary: Capture screenshots of specific HTML nodes

jihchi 09:37:54
Release v1.0.0 · yarnpkg/yarn · GitHub
https://github.com/yarnpkg/yarn/releases/tag/v1.0.0

**This is pre-release**

GitHub

yarnpkg/yarn

yarn - :package::cat2: Fast, reliable, and secure dependency management.

jihchi 10:19:28
https://tomdale.net/2017/09/compilers-are-the-new-frameworks/

tomdale.net

Compilers are the New Frameworks

My current "investment thesis" is that what we call web frameworks are transforming from runtime libraries into optimizing compilers. When it comes to eking performance out of hand-authored JavaScript and accompanying runtime libraries, we've reached the point of diminishing returns.

jihchi 18:49:54
https://twitter.com/malyw/status/905250772148822016

This just happened!
Chome 61 shipped ECMAScript modules enabled by default!🎊

Article: hospodarets.com/native-ecmascr
Test: hospodarets.com/es-modules-tes

twitter

This just happened! Chome 61 shipped ECMAScript modules enabled by default!:confetti_ball: Article: <https://hospodarets.com/native-ecmascript-modules-the-first-overview> Test: <https://hospodarets.com/es-modules-test/> <https://pbs.twimg.com/media/DJAYTlKWsAANk49.jpg>

2017-09-07

jihchi 09:03:29
https://twitter.com/chromedevtools/status/905482940687245312

Also in Canary: Section Screenshots. Enable Inspect Mode -> Hold Cmd (Mac) or Ctrl (Win, Linux) -> Click & Drag & Release -> :camera_with_flash: -> :star2:✨

twitter

Also in Canary: Section Screenshots. Enable Inspect Mode -&gt; Hold Cmd (Mac) or Ctrl (Win, Linux) -&gt; Click &amp; Drag &amp; Release -&gt; :camera_with_flash: -&gt; :star2::sparkles:

jihchi 09:06:00
https://twitter.com/paf31/status/905545295236173824

It's #ReadABookDay apparently, so why not read the PureScript book? It's free and available online. leanpub.com/purescript/read

twitter

It's #ReadABookDay apparently, so why not read the PureScript book? It's free and available online. <http://leanpub.com/purescript/read>

mofas 09:24:06
https://code.facebook.com/posts/1537144479682247

Facebook Code

Finding inter-procedural bugs at scale with Infer static analyzer

Inter-procedural analysis can be deployed to large and rapidly changing codebases that consist of millions of lines of code and undergo thousands of modifications per day.

jihchi 09:48:55
https://medium.com/conduit-analytics/graphql-fragments-components-30021a83fc12

Medium

When fragments and React components join forces – Conduit – Medium

React components and GraphQL fragments make for cleaner code. The first in Conduit’s technical series on using GraphQL in production.

rae 15:37:26
@rae has joined the channel

2017-09-08

jihchi 09:02:12
https://twitter.com/yarnpkg/status/905807975583027200

Yarn 1.0 is here! It comes with workspaces, auto-merging lock files and selective version resolutions. ⛴️📦🐈

code.facebook.com/posts/27451853

twitter

Yarn 1.0 is here! It comes with workspaces, auto-merging lock files and selective version resolutions. :ferry::package::cat2: <https://code.facebook.com/posts/274518539716230>

jihchi 09:02:41
https://twitter.com/reasonml/status/905925499137949701

Better Reason support for Sublime Text users! github.com/reasonml-edito

Autocompletion, diagnosis, type hint, etc.

twitter

Better Reason support for Sublime Text users! <https://github.com/reasonml-editor/sublime-reason#installation-sublime-text-3> Autocompletion, diagnosis, type hint, etc.

jihchi 09:14:42
https://twitter.com/thejameskyle/status/905921542906712064

Async-await footgun pointed out to me last night by @bassjacob: Always `return await` or if you wrap with try-catch it won't be caught

twitter

Async-await footgun pointed out to me last night by <https://twitter.com/bassjacob|@bassjacob>: Always `return await` or if you wrap with try-catch it won't be caught <https://pbs.twimg.com/media/DJJ61nkUEAAwZI2.jpg>

重點應該不是 `return`
而是只有 `await` 遇到 rejected promise 才會 throw 吧⋯⋯
> We discussed `return` implicitly awaiting promises but decided against because it's hard to opt out and returning rejected promises has uses
所以現在第 13 行的 `main()` 呼叫會回傳一個 rejected promise。然後出現 unhandled promise rejection
yep
我是覺得 await 才會把 rejected promise 轉成 throw 還算單純
不過 return 時自動 await 也是一個有趣的思維
mofas 10:35:14
https://www.nginx.com/products/nginx-unit/

NGINX

NGINX Unit

A new, lightweight, open source application server from NGINX designed to meet the demands of today's dynamic and distributed applications.

可以丟掉 pm2 直接用 nginx unit 的意思ㄇ
mofas 10:35:18
這東西酷酷的
Michael Hsu 17:58:38
macros
https://twitter.com/kentcdodds/status/906058860493922305

twitter

If you're curious what babel-macros is, check this thread out: <https://github.com/facebookincubator/create-react-app/issues/2730>

2017-09-09

mofas 10:40:30
https://twitter.com/reasonml/status/906287081332252673

twitter

<http://Messenger.com> is now 50% converted to Reason! <https://reasonml.github.io/community/blog/#messengercom-now-50-converted-to-reason>

1

2017-09-10

mrorz 09:48:24
咦,沒人貼
https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

facebook.github.io

DOM Attributes in React 16 - React Blog

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this:

2017-09-11

jihchi 09:27:58
https://twitter.com/mikeal/status/906941746919071744

Re-thinking the Node.js ecosystem for modern JavaScript. medium.com/@mikeal/modern

twitter

Re-thinking the Node.js ecosystem for modern JavaScript. <https://medium.com/@mikeal/modern-modules-d99b6867b8f1>

2017-09-12

jihchi 09:09:08
https://twitter.com/kentcdodds/status/907258340304084994

I blogged something on the babel blog!
babeljs.io/blog/2017/09/1
"Zero-config code transformations with babel-macros :fishing_pole_and_fish:"

Enjoy and share!

twitter

I blogged something on the babel blog! <https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros> "Zero-config code transformations with babel-macros :fishing_pole_and_fish:" Enjoy and share!

SKY 17:18:02
@sky has joined the channel
jihchi 19:28:13
https://twitter.com/wsokra/status/907565441681428480

#webpack Logbook week 22 - 23

Details about the new plugin system

API, performance, typing => very technical post

twitter

#webpack Logbook week 22 - 23 Details about the new plugin system API, performance, typing =&gt; very technical post <https://medium.com/webpack/the-new-plugin-system-week-22-23-c24e3b22e95>

2017-09-13

mofas 05:21:05
https://twitter.com/atomeditor/status/907656864984309760

twitter

Introducing Atom IDE: <http://blog.atom.io/2017/09/12/announcing-atom-ide.html> <https://pbs.twimg.com/media/DJilEA6UQAA_6nd.jpg>

mofas 05:21:14
https://twitter.com/kentcdodds/status/907258340304084994

twitter

I blogged something on the babel blog! <https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros> "Zero-config code transformations with babel-macros :fishing_pole_and_fish:" Enjoy and share!

mofas 05:24:32
https://twitter.com/tkh44/status/907695279926689793

So useful

twitter

babel-plugin-sitrep Just add `// sitrep` above your fn and the plugin will log vars and return value. <https://github.com/tkh44/babel-plugin-sitrep> <https://pbs.twimg.com/media/DJjHh6_UEAAFnBx.jpg>

jihchi 10:40:42
https://twitter.com/mylesborins/status/907629749559812096

🎉🎉🎉🎉

Happy @nodejs Current Release Day
Special ESModules edition
--experimental-modules

$ nvm install 8.5.0

nodejs.org/en/blog/releas

:tada:🎉🎉🎉

twitter

:tada::tada::tada::tada: Happy <https://twitter.com/nodejs|@nodejs> Current Release Day Special ESModules edition --experimental-modules $ nvm install 8.5.0 <https://nodejs.org/en/blog/release/v8.5.0/> :tada::tada::tada::tada:

mofas 22:29:52
https://twitter.com/sublimehq/status/907956818994851840

twitter

Sublime Text 3.0 is out! - <https://www.sublimetext.com/blog/articles/sublime-text-3-point-0>

mofas 23:18:19
速度爆快呀!!

2017-09-14

mrorz 01:23:07
sublimetext 本來就比 atom 與 vs code 快呀 xd
jihchi 07:42:41
可⋯可惡,速度與功能性,我選擇了功能性!
mofas 10:19:53
結果我9成的時間都是在用emacs
我現在改用 VSCode + Vim
👏 3
mofas 10:21:18
@jihchi 你可以跟我講一次 appier-create-react-app 裡面有啥嗎
css-modules 跟 absolute path
沒了
還有 react-hot-loader
react-hot-loader 不是 create-react-app 內建的嗎
我怎麼印象中還有 redux-duck 以及 immutable-js?
CRA 預設 hot reload 是靠 webpack HMR
好喔好喔
雖然我不清楚差別 XD
redux-duck & immutable.js 不需要動到 config,是出廠預設幫你安裝,但不是必要
最大差別在 React 的 state persistence
Michael Hsu 2017-09-14 11:04:12
請問一下
上次聽你們也有用 react-app-rewired
? 哪個做法比較好呢
看情況。
rewired 是為了 transition 使用。
有時候讓 legacy project 可以先用 customized CRA,配上 rewired。
Michael Hsu 2017-09-14 11:10:17
那你們怎麼決定要把哪些拉進
fork 版的 CRA
像有些不同專案沒用 redux 用 apollo 怎辦
主要是考量要不要改到 wepback / babel / etc. 這些 tools config
redux, immutable 這類都是 package,不用改 config 也能支援
除非你想用像是 lodash 配上 babel plugin 做些額外優化功能,那才會動到 CRA
Ideally,我個人是覺得盡量用原生 CRA 就好。慢慢的有其他替代方案,就可以淘汰掉客製 CRA
eg. css-modules v.s. styled-components
最近你貼的 macro 就很 promising
Michael Hsu 2017-09-14 11:14:51
對啊 有了 macro 就方便多了
有點想偷跑放在客製 CRA,不過 macro 的 packages 現在比較少,我們目前需要的地方還不多,所以還沒偷跑
Michael Hsu 2017-09-14 11:16:31
偷跑也不錯
像css modules 支援討論串超長
等了好久
嗯,其實裝下去也沒差,弄個怪獸 CRA 也不是不行。要看你的需求。目前 css-modules 是普遍接受的解法,就放進去。
@jihchi 有支援.less 和plain .css嗎?
@mofas less 不支援,要用 rewired 加。plain CSS 要用 global 去寫,src 裡面預設開 css-modules
cf199218 14:58:49
@cf199218 has joined the channel
jihchi 22:03:46
https://twitter.com/dan_abramov/status/908320023529357312

React 16 RC3 is out. It is very close to what the final version will be like. Last chance to report issues! github.com/facebook/react

twitter

React 16 RC3 is out. It is very close to what the final version will be like. Last chance to report issues! <https://github.com/facebook/react/issues/10294#issuecomment-329479679> <https://pbs.twimg.com/media/DJsAPSIXgAAzzkq.jpg>

2017-09-15

jihchi 08:59:51
https://twitter.com/suchipi/status/908381181623771136

Just published Prettier 1.7.0: JSX tweaks, Pragma support, TypeScript and CSS fixes, and more!

twitter

Just published Prettier 1.7.0: JSX tweaks, Pragma support, TypeScript and CSS fixes, and more! <https://github.com/prettier/prettier/releases/tag/1.7.0>

jihchi 09:01:04
https://twitter.com/iamdevloper/status/908335750797766656

twitter

1/3 of US bandwidth is used by Netflix... the rest is used by `rm -rf node_modules &amp;&amp; npm install`

jihchi 09:28:22
https://twitter.com/chromiumdev/status/908363533766860800

ES6 modules have landed in Chrome 61 @DasSurma shows how to make the split between old & new browsers⚡Supercharged: goo.gl/zCpmqJ

twitter

ES6 modules have landed in Chrome 61 <https://twitter.com/DasSurma|@DasSurma> shows how to make the split between old &amp; new browsers:zap:Supercharged: <http://goo.gl/zCpmqJ>

jihchi 19:40:11
https://twitter.com/leogcrespo/status/908330825044951040

Created github.com/leoasis/graphq…, a babel-macro to precompile gql calls. It supports interpolation! Feedback welcome @kentcdodds @stubailo

twitter

Created <https://github.com/leoasis/graphql-tag.macro>, a babel-macro to precompile gql calls. It supports interpolation! Feedback welcome <https://twitter.com/kentcdodds|@kentcdodds> <https://twitter.com/stubailo|@stubailo>

jihchi 19:43:48
https://twitter.com/kosamari/status/859958929484337152

HTTP what? : I drew what HTTP is & how HTTP1.x and HTTP2 are different:sparkles:

(tweetzine, drawsplainer, codedoodles…I don't know what to call it)

twitter

HTTP what? : I drew what HTTP is &amp; how HTTP1.x and HTTP2 are different:sparkles: (tweetzine, drawsplainer, codedoodles…I don't know what to call it) <https://pbs.twimg.com/media/C-8t5rGWsAAFHwF.jpg>

<https://pbs.twimg.com/media/C-8t64sXYAEf7GG.jpg>

<https://pbs.twimg.com/media/C-8t70YXoAEShUL.jpg>

ggm 19:49:51
圖好厲害!

2017-09-16

mofas 01:29:07
https://twitter.com/burkeholland/status/908743236826669056

twitter

React Snippets For <https://twitter.com/code|@code> has been updated with better React-ness. Special thanks to <https://twitter.com/dan_abramov|@dan_abramov> for reviewing. <http://cda.ms/19>

mofas 01:29:40
我怎覺得 Editor 有當年Browser 大戰的感覺
mofas 01:30:02
ST vs Atom vs VSCODE

2017-09-17

mofas 08:56:24
https://twitter.com/code/status/909175370741563392

twitter

New release of the <https://twitter.com/Docker|@Docker> extension for <https://twitter.com/code|@code> published. Adds explorer support, a new language service, and more. <https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker>

1
mofas 08:58:40
https://twitter.com/vladholubiev/status/908984943950401536

twitter

Something new is coming in <https://twitter.com/babeljs|@babeljs> 7 :fire: <https://pbs.twimg.com/media/DJ1c-76XUAACypj.jpg>

😍 2

2017-09-18

mofas 07:24:45
阿 想問一個跟前端無關的問題, 請問現在大家mongodb client 都用哪個呀..
mofas 07:24:54
我之前用mongorobo
mofas 07:25:00
現在有更好的方案了嗎
mofas 07:25:06
三個多月沒碰惹...
mofas 07:25:22
robomongo 才對
jihchi 08:22:21
RoboMongo 被收購之後改名 Robo 3T。就用這個啊,新版也支援 mongo 3 一些新功能。不然就用原生 mongo shell
mofas 09:17:02
他有兩個 Robo 3T 就原本的robomongo, 另外有出付費版 robo studio
mofas 09:19:32
另外有人用了free的 Zeit now嗎?
mofas 09:19:43
想把學校專案host在那邊
Michael Hsu 09:26:29
zeit now.sh 不錯啊
Michael Hsu 09:31:20
每個帳號是 3 個 instance quota
但是你可以先by project 申請 team 再 deploy 到該 team
也就是額度其實沒限制
mrorz 09:38:46
now 我沒用過耶,因為 URL 要錢
因為 cofacts 要 URL 所以我把他跟 DB 那些都通通塞在同一個 linode 裡
就沒用 now 了
mrorz 09:39:06
now 感覺就是要搭配 next.js 呀 XD
mofas 09:47:57
mofas 竟然已經被用掉了= =
mofas 09:50:38
那另外再問一下
mofas 09:50:48
有免費的mongodb host嗎?
mofas 09:51:02
五年前我是用mongoHQ
jihchi 09:52:18
@mofas 怎麼不用 VPS ?
mrorz 09:52:42
MongoHQ 現在叫 mLab 的樣子
mrorz 09:52:44
繼續用呀
mrorz 09:52:52
我也沒用過其他的了
mrorz 09:53:06
是說是學生的話別忘記領 github student pack
mrorz 09:53:14
應該有 digitalocean 的 coupon
mrorz 09:53:32
可以用滿久的
我的還多到被 expire Orzzzz
mofas 09:53:53
@mrorz 是啥
DigitalOcean: $50 in platform credit for new users