twitter

Cool post from <https://twitter.com/JimPurbrick|@JimPurbrick> about testing optimistic consistency in replicated Redux with property based tests. <http://jimpurbrick.com/2017/07/31/testing-replicated-redux/>

twitter

Bundlephobia - the fear of installing a massive npm module. I started checking all of my modules before installing:point_right: <http://cost-of-modules.herokuapp.com/>

What does my npm module cost?

What is the cost of my npm module ?

Find out the performance impact of adding a npm module to your build.

twitter

:rotating_light: :rotating_light: I just published: "#webpack awarded $125,000 from MOSS Program" <https://twitter.com/mozilla|@mozilla> <https://twitter.com/mozhacks|@mozhacks> #javascript #webassembly <https://medium.com/webpack/webpack-awarded-125-000-from-moss-program-f63eeaaf4e15>

twitter

Announcing react-native-node A tool I built to get the http, fs, udp, and everything on npm to work in RN. <https://github.com/staltz/react-native-node> <https://pbs.twimg.com/media/DGJs5SXXYAALVPP.jpg>

twitter

Quick tip on how to take full size screenshots using Chrome DevTools (after Chrome 59).

twitter

:tada::tada::tada: V8 6.0 has landed on <https://twitter.com/nodejs|@nodejs> master and a backport PR has been opened for 8.x <https://github.com/nodejs/node/compare/1782b3836ba58ef0da6b687f2bb970c0bd8199ad...98ddab411523f83eca9b5311529f8288379e550f> <https://github.com/nodejs/node/pull/14574> :tada::tada::tada:

twitter

Really dig this! <https://twitter.com/code|@code> extension showing how much code you're pulling in when you import a package from <https://twitter.com/WixEng|@WixEng> <https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost> <https://pbs.twimg.com/media/DGKCQDhVoAAUFnO.jpg>

twitter

Hey <https://twitter.com/SlackHQ|@SlackHQ> . Is that true? Are you using development version of <https://twitter.com/reactjs|@reactjs> in production? #js #reactjs #react <https://pbs.twimg.com/media/DGIQaU1WAAAumZ8.jpg>

twitter

<https://twitter.com/kentcdodds|@kentcdodds> Hi Kent, it looks like this npm package is stealing env variables on install, using your cross-env package as bait: <https://pbs.twimg.com/media/DGIcUNyXsAAY1Jf.jpg>

• 😨1

Sublime Forum

RFC: Default Package Control Channel and Package Telemetry

Recently @gerry pointed out that it appears the third most popular package in the Package Control default channel is apparently sending data to the startup Kite: <https://twitter.com/gerardroche/status/891802572373319680> <https://packagecontrol.io/browse/popular> <https://packagecontrol.io/packages/SideBarEnhancements> <https://github.com/SideBarEnhancements-org/SideBarEnhancements/blob/1858330b71b682ec1f3265bd280dde65465bdf18/Stats.py#L157> <https://github.com/kiteco/kite-installer/blob/02b55e5e18c0>...

Mark's Dev Blog

Blogged Answers: Webpack HMR vs React-Hot-Loader · Mark's Dev Blog

GitHub

americanexpress/jest-image-snapshot

jest-image-snapshot - Jest matcher that performs image comparisons using Blink-diff and behaves just like Jest snapshots do! Very useful for browser visual comparison testing.

twitter

So today we figured out that the parsing ambiguities around arrow functions can lead to quite surprising results if you're not careful. :thinking_face::upside_down_face: <https://pbs.twimg.com/media/DGIOGi7XgAAQbOQ.jpg>

Nicolas 2017-08-14 18:24:04

I see nothing wrong there. The `undefined` you're getting is just how the REPL deals with assignments, and has nothing to do with your f or g functions or the fact you used `=>` to write them.

GitHub

bokub/chalk-animation

chalk-animation - :clapper: Colorful animations in terminal stdout

twitter

Library author or monorepo maintainer looking to simplify dependency management? Yarn's workspaces feature is here! <https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/>

jihchi 2017-08-04 08:49:52

讚讚。之前試了一下，連 node_module 都不需要，不像 lerna 用 link

• 2

twitter

I wrote a little demo to find out how virtual dom libs rearrange nodes in diffs <https://codesandbox.io/s/BkLpXYQn> <https://pbs.twimg.com/media/DGUnhDDUwAAfYbL.jpg>

twitter

I got hot reloading working with create-react-app, but don't tell Dan because I'm afraid he'll disable it... (needs webpack's internals)

Mesosphere

Docker vs. Kubernetes vs. Apache Mesos: Why What You Think You Know is Probably Wrong - Mesosphere

There are countless articles, discussions, and lots of social chatter comparing Docker,...

twitter

Rendering on Google Search: <http://bit.ly/2wffmpL> - web rendering is based on Chrome 41; use feature detection, polyfills, and log errors! <https://pbs.twimg.com/media/DGacckcVoAAPpTr.jpg>

• 1

GitHub

zcreativelabs/react-simple-maps

react-simple-maps - An svg map component built with and for React

GitHub

CSS 新属性 contain: 允许开发者限定浏览器 style、layout、paint的工作范围 · Issue #13 · justjavac/the-front-end-knowledge-you-may-dont-know

• 1

twitter

Next.js 3.0 is now available for all :100: <https://twitter.com/zeithq/status/894937579694325760>

twitter

Next.js 3.0 <https://zeit.co/blog/next3>

mrorz 2017-08-09 10:31:49

看起來沒啥 breaking change，晚上就來幫 rumors-site 升~

jihchi 2017-08-09 10:32:09

oh yeah~~~~

twitter

Atom v1.19 and v1.20-beta have been released. New architectural changes available now. See the blog post for details <http://blog.atom.io/2017/08/08/atom-1-19.html> <https://pbs.twimg.com/media/DGuIQPFUIAEzK0F.jpg>

twitter

Yeah a bunch of new features and many bugfixes for webpack 3.5.0. If you had problems with Scope Hoisting it's worth trying again. <https://pbs.twimg.com/media/DGsfbvqXkAAJO7N.jpg>

twitter

:racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car: npm install downshift@rc First release candidate released! Please try it out! <https://github.com/paypal/downshift/issues/1#issuecomment-321030817> :racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car::racing_car:

mrorz 2017-08-09 14:21:55

這做法真妙，塞一堆 props 然後所有邏輯都在裡頭 XD
有人用過 Compound components 的概念來做東西嗎～？

jihchi 2017-08-09 14:24:19

這種 API design 問 @mofas 有感

jihchi 2017-08-09 14:25:37

不過這種對複雜的 component 來說，consumer 可能會很痛苦..

twitter

cpp code in js via <https://twitter.com/webpack|@webpack> and <https://twitter.com/webassembly|@webassembly>! <https://twitter.com/TheLarkInn|@TheLarkInn> <https://twitter.com/linclark|@linclark> #webpack <https://twitter.com/mozilla|@mozilla> <https://medium.com/webpack/webpack-awarded-125-000-from-moss-program-f63eeaaf4e15> <https://pbs.twimg.com/media/DGGywzUUQAAcG1j.jpg>

GitHub

facebookincubator/create-react-app

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

Jih-Chi Lee

https://twitter.com/kentcdodds/status/894980156670038016

🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️

npm install downshift@rc

First release candidate released! Please try it out! github.com/paypal/downshi…

:racing_car:🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️🏎️

• Forwarded from #frontend-tech
• 2017-08-09 08:49:03

這做法真妙，塞一堆 props 然後所有邏輯都在裡頭 XD 有人用過 Compound components 的概念來做東西嗎～？

GitHub

Mitranim/posterus

posterus - Composable async primitives (futures) with true cancelation, control over scheduling, and coroutines

GitHub

Mitranim/posterus

posterus - Composable async primitives (futures) with true cancelation, control over scheduling, and coroutines

mrorz 2017-08-10 01:26:47

fetch() 那裡在 promise cancellation 爆炸之後，有點轉向 observable
https://github.com/whatwg/fetch/issues/27

mrorz 2017-08-10 01:28:45

BTW cancelable promise proposal withdrawn 的討論串：https://github.com/tc39/proposal-cancelable-promises/issues/70#issuecomment-267417532

jihchi 2017-08-10 09:46:59

recap 可以看這： https://github.com/tc39/proposal-cancelable-promises/issues/70#issuecomment-268111665

GitHub

sghall/resonance

resonance - :cyclone: Resonance | Data-driven transitions in React

intoli.com

Making Chrome Headless Undetectable

Using MitmProxy and injected JavaScript feature mocks to bypass Headless Chrome detection tests.

Medium

choo-v6 – Yoshua Wuyts – Medium

Heya :wave:, today we’re releasing choo v6.0.0. After 5 release candidates, we're happy to finally share it with the world. We're also happy to share create-choo-app, <http://github.com/choojs|github.com/choojs>, and nanocomponent…

mrorz 2017-08-10 11:21:36

https://github.com/patrick-steele-idem/morphdom#benchmarks 這個也滿妙的

jihchi 2017-08-10 11:23:09

用 ms 根本感覺不出來差異啊..

mrorz 2017-08-10 11:24:00

他可以 diff virtual dom v.s. real dom 我覺得很有趣

mrorz 2017-08-10 11:24:15

所以 framework 這裡可以出 virtual dom

mrorz 2017-08-10 11:24:29

來跟 real dom 比較

mrorz 2017-08-10 11:25:30

不過老實講這樣沒有解決到第三方 library 變更 dom 的問題
因為只要 framework 沒有 aware of dom change
framework 只要一 re-render 就會把第三方 library 所改的 dom 給整個替代掉

mrorz 2017-08-10 11:26:17

所以雖然 https://github.com/patrick-steele-idem/morphdom#what-about-the-virtual-dom 這裡，把下面這點列為 virtual dom 的缺點：
> The real DOM cannot be modified behind the scenes (e.g., no jQuery) because the diff is done against the virtual DOM tree

他其實沒有指出，使用了 morphdom 的 UI framework 其實也無法直接處理這個問題

jihchi 2017-08-10 11:26:58

這不是二擇一嗎..

twitter

Lots to share in the <https://twitter.com/code|@code> July update! Download: <https://code.visualstudio.com/download>. See what's new: <https://code.visualstudio.com/updates/v1_15>. <https://pbs.twimg.com/media/DG4iT_bUMAIsKY0.jpg>

twitter

Enable ES modules in Node today with a new module loader! <https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b>

twitter

This is such a great drag and drop react component by <https://twitter.com/alexandereardon|@alexandereardon> give it a star: <https://github.com/atlassian/react-beautiful-dnd>

twitter

A sad result for spec understandability... Not even sure if I got this correct... <https://pbs.twimg.com/media/DG4P8nxXoAE-MZK.jpg>

GitHub

standard-things/esm

esm - ES modules in Node today!

twitter

Enjoying “Game Programming Patterns”. I think this book is a required reading for UI engineers. Practical and fun. <http://gameprogrammingpatterns.com/>

GitHub

Move `addon-info` into addons panel · Issue #1147 · storybooks/storybook

Why Currently addon-info shows component info in the preview pane alongside each story. This behavior differs from typical addons, that display their info in the addons panel. Modifying the behavio...

Michael Hsu 2017-08-14 16:49:56

jest setup 時可以 mock 掉：
https://github.com/MCS-Lite/mcs-lite/blob/master/packages/mcs-lite-ui/.storybook/storyshots-setup.js#L5-L14

mrorz 2017-08-14 16:52:48

@evenchange4 Brilliant!
我們換成新的 syntax 了所以沒有 `addWithInfo`（https://github.com/storybooks/storybook/tree/master/addons/info#usage-with-options）
但新 syntax 更方便用 jest 來 mock

Michael Hsu 2017-08-14 16:55:16

原來有更新了啊！

mrorz 2017-08-14 17:13:04

storyshot addon v3.2 + info addon v3.2 的 mock 法：

in `Storyshots.test.js`
```
import initStoryshots from '@storybook/addon-storyshots';
const addonInfo = require('@storybook/addon-info');
addonInfo.withInfo = () => storyFn => storyFn;

initStoryshots();

```

twitter

Canary DevTools Update: top-level await is now supported :confetti_ball: makes debugging &amp; quick experimentations simpler, no need for an async function :white_check_mark: <https://pbs.twimg.com/media/DHQ8HcOWsAAtEx9.png>

twitter

Front-End Dev Bookmarks: Nice, a manually curated collection of resources for front-end web developers. <https://github.com/dypsilon/frontend-dev-bookmarks> <https://pbs.twimg.com/media/DHQfopAXYAA4K-A.jpg>

• 👍1

twitter

So glad we didn’t enable decorators in CRA despite the popularity. The stage 2 version looks quite different to me. <https://twitter.com/left_pad/status/897470712277028864>

twitter

:raised_hands: <https://twitter.com/PeeyFTW|@PeeyFTW> submitted a WIP PR for Stage 2 Decorators! Huge shoutout for this monumental work (a long time coming) <https://github.com/babel/babel/pull/6107>

Medium

How to build #disruptive OCaml #microservices with BuckleScript

Recently, I started tinkering with OCaml. It’s Very Fun™, which makes it a great fit for a quick side project. So, for a few hours this…

twitter

Excited to have released Relay v1.2.0 - best version yet! <https://github.com/facebook/relay/releases/tag/v1.2.0>

mrorz 2017-08-23 10:03:29

比起這個我比較期待更完整的 relay-modern 文件 orz

twitter

Introducing Puppeteer: A modern Node.js API for headless Chrome. Built with :heart: by the Chrome team. <https://github.com/GoogleChrome/puppeteer#readme> <https://pbs.twimg.com/media/DHXIZ-4XkAAU9eq.jpg>

jihchi 2017-08-17 09:45:35

https://github.com/graphcool/chromeless 這 project 要 ＧＧ了。不過也沒差，maintainer 也不太維護

twitter

New recompose release <https://github.com/acdlite/recompose/releases/tag/v0.25.0> preact, inferno, flow 0.53 support cc <https://twitter.com/wu_ct|@wu_ct> <https://twitter.com/deepsweet|@deepsweet> <https://twitter.com/_developit|@_developit> <https://twitter.com/acdlite|@acdlite> <https://twitter.com/flowtype|@flowtype>

twitter

:mega: Want to use create-react-app with the new webpack-dashboard from <https://twitter.com/FormidableLabs|@FormidableLabs>? I just released <https://github.com/kitze/custom-react-scripts> 0.2.0 :tada::ok_hand:

twitter

<http://transform.now.sh> is really impressive. Just give it a JSON response and it will generate type definitions for you. <https://pbs.twimg.com/media/DHbex9wXcAACVy0.jpg>

twitter

In Node 8.4 debugging finally works with `node --inspect --inspect-brk node_modules/bin/jest`. Thanks <https://twitter.com/fhinkel|@fhinkel> et al <https://github.com/facebook/jest/issues/1652#issuecomment-322834017>

GitHub

avelino/vim-bootstrap

vim-bootstrap - Vim Bootstrap is generator provides a simple method of generating a .vimrc configuration for vim

GitHub

guigrpa/oao

oao - A Yarn-based, opinionated monorepo management tool

yhsiang 2017-08-18 10:03:04

OAO

jihchi 2017-08-18 10:03:18

AoA

Medium

Building a blog With Next.js and styled-components – :nail_care: styled-components – Medium

Next.js is a framework for building universal React applications.

twitter

Oh btw, React Fiber's inspiration came from OCaml <https://twitter.com/sebmarkbage/status/898404059995971585>

twitter

<https://twitter.com/jlongster|@jlongster> <https://twitter.com/wycats|@wycats> <https://twitter.com/littlecalculist|@littlecalculist> And OCaml's strategy around algebraic effects with delimitated continuations give you opt-out regions where you can regain safety.

GitHub

react/display-name gives false positives with component subclasses + argument spreading + es7 class properties · Issue #1200 · yannickcr/eslint-plugin-react

The code below shows the bug: import React from 'react'; class CustomComponent extends React.Component {} /** @extends React.Component */ export default class MyComponent extends CustomComponent ...

twitter

I spent a few weeks building a Preact compiler. IN: Polymer, Vue &amp; Preact single-file components OUT: highly optimized Preact components <https://pbs.twimg.com/media/DHm36FBUAAALycD.jpg>

twitter

Announcing ‘redocx’ - A library to create word documents with React <https://github.com/nitin42/redocx> #reactjs :sunglasses:

GitHub

jiayihu/pretty-algorithms

pretty-algorithms - :ocean: Pretty, common and useful algorithms with modern JS and beautiful tests

twitter

1. My bank's web app is ultra shitty 2. I wanted to try puppeteer So I wrote this script that logs me in and gets my current amount :ok_hand: <https://pbs.twimg.com/media/DHrYUUlXoAEFOMs.jpg>

GitHub

nsoap-official/sailboat

sailboat - NSOAP Router for ReactJS

twitter

I just published “RxJS Observable interop with Promises and Async-Await” <https://medium.com/p/rxjs-observable-interop-with-promises-and-async-await-bebb05306875>

GitHub

dielduarte/animate-css-styled-components

animate-css-styled-components - simple port of animate css for styled-components

GitHub

GoogleChrome/rendertron

rendertron - A dockerized, headless Chrome rendering solution

twitter

Microsoft is now the largest contributor to open-source on GitHub. The times they are a-changin. <https://pbs.twimg.com/media/DH7u9QqW0AAGoqW.jpg>

twitter

Unpopular opinion: I don't want one framework to "win". I'm pretty happy getting to choose based on my needs &amp; them learning from eachother

twitter

Fantastic development: “it’s now possible to maintain one codebase and ship an extension in multiple browsers” <https://hacks.mozilla.org/2017/08/introducing-the-extension-compatibility-tester/>

twitter

If you are unable to be with us in person our live stream will be starting in 30 minutes. <http://www.reactrally.com/stream>

twitter

This will blow your mind: Exports AutoComplete for <https://twitter.com/code|@code> can auto-import your <https://twitter.com/reactjs|@reactjs> components straight from JSX <https://marketplace.visualstudio.com/items?itemName=capaj.vscode-exports-autocomplete>

GitHub

Insiders orange icon / logo mis-sized · Issue #33090 · Microsoft/vscode

VSCode Version: Code - Insiders 1.16.0-insider (936fc3f, 2017-08-24T08:26:28.878Z) OS Version: Windows_NT x64 10.0.15063 Extensions: Extension Author (truncated) Version team ms- 1.122.0 T...

twitter

*Puppeteer 0.10.0* - Node 6 support, cookies API, new API methods, bugs fixes, upstream changes to Chrome DevTools. <https://github.com/GoogleChrome/puppeteer/releases/tag/v0.10.0>

twitter

I use <https://twitter.com/dan_abramov|@dan_abramov>'s presentation/container components, but also use "Control components" and "controllers" <https://reactarmory.com/answers/how-should-i-separate-components> #reactjs

twitter

Live stream for day two is now available. <http://www.reactrally.com/stream>

• 😍1

twitter

Finally, you can help translate React docs into other languages! :heart_eyes: Thanks <https://twitter.com/ericnakagawa|@ericnakagawa>. Start contributing: <https://crowdin.com/project/react> <https://pbs.twimg.com/media/DIGdAvbU0AAcBR-.jpg>

twitter

Thank you so much <https://twitter.com/ReactRally|@ReactRally> for having me! Here are my slides on Finite State Machines: <http://slides.com/davidkhourshid/finite-state-machines>

twitter

Just released prettier 1.6. It finally has a config file and prints JSX more in line with the open source community! <https://github.com/prettier/prettier/releases/tag/1.6.0>

• 1

GitHub

extr0py/oni

oni - Oni: An IDE powered by Neovim

jihchi 2017-08-29 14:30:55

感覺還不賴

• 👻2

GitHub

jaredpalmer/formik

formik - Forms in React, without tears :sob:

• 👍1

Medium

Using GraphQL? Why Facebook Now Owns You :dragon_face: – Dennis Walsh – Medium

Using GraphQL — Why Facebook Now Owns You

GitHub

mikeal/r2

r2 - HTTP client. Spiritual successor to request.