早报汇总 @ 2017.9

早报 @ 2017.9.30

1. React@16 改进了 React DevTools 里 Highlight Updated 的功能。https://twitter.com/dan_abramov/status/913730763169914882

2. 可取消的 fetch 终于来了，目前只有 Firefox 57 支持，但 Chrome、Edge、Safari 都快了。https://developers.google.com/web/updates/2017/09/

3. Node@8.6 支持 Object Spread，https://twitter.com/wesbos/status/913421431609991168

4. Next.js@4.0.0-beta，支持 React 16。https://github.com/zeit/next.js/releases/tag/4.0.0-beta.1abortable-fetch，https://fetch-svg-abort.glitch.me/

5. 基于 React 组件的可视化编程，付费的，目前功能不够完善，先不要买。https://twitter.com/getcompositor/status/913348539584995330，https://compositor.io/lab/

6. 一组 State Container，挺实用的。https://github.com/renatorib/react-powerplug

7. npm as cdn，一种简化的开发方式。但有个显而易见的问题，重复的依赖怎么处理？https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210

早报 @ 2017.9.29

• Babel 是啥？如何维护开源项目？等等。https://www.youtube.com/watch?v=fntd0sPMOtQ，https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw/videos

• PHP 转 JavaScript。https://babeljs.io/php，https://gitlab.com/kornelski/babel-preset-php

• Webpack 4 在路上了，没啥新特性，主要是性能上的提升，比如用 Set 提升性能，但会引发插件的不兼容。https://medium.com/webpack/webpack-4-changes-part-1-week-24-25-fd4d77674e55

• 关键路径样式，自动抽离首屏样式，追求性能极致适用，比如无线的场景。https://medium.com/js-dojo/critical-css-and-webpack-automatically-minimize-render-blocking-css-5390850dad45，https://github.com/addyosmani/critical

• FunFunFun，JavaScript 视频，内容挺好，很新。https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q/videos

早报 @ 2017.9.28

1. React@16 特性视频，讲地很仔细，https://egghead.io/courses/leverage-new-features-of-react-16

2. Podcast：关于命令行的。https://syntax.fm/show/013/the-command-line-for-web-developers

3. componentDidCatch 的一个使用场景，捕获出错并打点到服务器。https://blog.bugsnag.com/react-16-error-handling/

4. 学下设计模式、反模式、重构和 UML，这网站的切换体验很好。https://sourcemaking.com/

5. 如何评价 React@16，总结的挺好，但不够细。https://www.zhihu.com/question/65920482/answer/236159084

早报 @ 2017.9.27

1. React@16 发布，包含 fiber、ReactDOM.createPortal、componentDidCatch、SSR 性能提升、render 支持返回 fragment 和 string、尺寸减少等，推荐升级。https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

2. Chrome 支持 import()，用于按需加载 es 模块。https://twitter.com/addyosmani/status/912556308649304064

3. 自动分离出首屏样式。https://github.com/pocketjoso/penthouse

早报 @ 2017.9.26

1. 输入 google.com 按回车后发生了什么？面试时常见问题。https://github.com/alex/what-happens-when

2. Paul Irish 的 Debugging in 2017 with Node.js。https://www.youtube.com/watch?v=Xb_0awoShR8，https://docs.google.com/presentation/d/1i5JREE3hhtG4FDip97zFJpMG_qb8k6fb5BRF09eyYTM/view#slide=id.p (Slide)

3. Electron the bad part，包括尺寸、更新、安全、代码保护等。https://hackernoon.com/electron-the-bad-parts-2b710c491547

4. web developer roadhog，挺全的，图不错，用 Balsamiq Mockups 画的。https://github.com/kamranahmedse/developer-roadmap，https://balsamiq.com/products/mockups/

5. 脚手架工具，简版的 yeoman，名字好记。https://github.com/saojs/sao

6. 检测新的 DOM 节点。https://github.com/muicss/sentineljs

早报 @ 2017.9.25

1. Dan 在 ZEIT Day 的演讲，https://www.youtube.com/watch?v=nl30vWYKs9A&feature=youtu.be&t=16300

2. 部署 es2015 的代码到生产环境，省掉很多 polyfill 代码，Chrome 客户多的或者内部系统可以玩玩看，结合前几天分享的如何同时分发两个版本使用。https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

3. Compilers are the New Frameworks，深有同感，最近在做的一套多页 h5 方案，工具和框架紧密结合。https://tomdale.net/2017/09/compilers-are-the-new-frameworks/

4. 为啥大家都开始转 VSCode 了？https://syntax.fm/show/012/why-is-everyone-switching-to-vs-code

5. React 换许可证。https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

6. Hyper 2.0 发布。https://twitter.com/zeithq/status/911511043763040258

7. 以全局命令的方式运行 node_modules/.bin 下的命令，很实用的功能。https://www.youtube.com/watch?v=2WZ5iS_3Jgs&feature=youtu.be

在 ~/.bashrc 或者 ~/.bash_profile 里配：

PATH=$PATH:./node_modules/.bin

早报 @ 2017.9.20

• Redux 作者 Dan 给的一些关于工作和编码的建议，很实用。https://hashnode.com/post/what-have-you-learned-after-working-at-facebook-for-almost-two-years-have-you-grown-as-a-developer-and-what-are-some-of-the-key-takeaways-cj7q3gkjx019xkhwujchsrtho

• react@15 -> react@16-rc：6.9K -> 2.2K，react-dom@15 -> react-dom@16-rc: 42.9K -> 32.6K (MINIFIED+GZIPPED)，尺寸小了很多，推荐升级。https://twitter.com/dan_abramov/status/910261298969104385，https://twitter.com/dan_abramov/status/910261184196210688

• iOS 11 和 macOS High Sierra 可开启试验特性。https://twitter.com/notquiteleo/status/910274945070059520

• Github Debug，看看为啥 Github 访问不了。https://githubengineering.com/github-debug/

• frontendmasters 打折，还剩 5 小时。https://frontendmasters.com/sale/

• http://tinyletter.com/sorrycc

早报 @ 2017.9.19

1. Desprited babel-preset-es2015，推荐用 babel-preset-env。https://twitter.com/piq9117/status/909492740768940032

2. 《ECMAScript 6 入门》第三版，新增 decorator 章节。http://es6.ruanyifeng.com/

3. 如何向用户同时分发 ES6 Modules 版本和普通版。https://www.youtube.com/watch?v=GWmO88hBbKY

<script nomodules ...>
<script type="modules" ...>

1. IDE 的自动添加 import 的功能，相见恨晚，但 Intellij IDEA 只处理了 ES6 Module 的自动 import，最近有时间我会写个处理 node_modules 依赖的通用 auto-import。https://www.jetbrains.com/help/idea/auto-import.html，https://github.com/Galooshi/import-js

2. 未来的 devtool 应该涨啥样，我们需要这样的脑洞。https://medium.freecodecamp.org/prototyping-the-future-of-devtools-f54ba4d51891

3. 我不知道浏览器居然还能做这些，Speech API、Speech Recognition API、Geolocation API、Notification API、Push API、Battery Manager API、Media Recorder API、Web-audio API、Vibration API、Device orientation。https://www.youtube.com/watch?v=ZrRxdzAVXts，https://meow.sambego.be/

早报 @ 2017.9.18

1. ES modules 详解。http://2ality.com/2017/09/native-esm-node.html

2. 页面整体布局优先用 CSS Grid。http://gedd.ski/post/grid-beats-flexbox-for-full-page-layout/

3. 为每个 PR 自动发 npm 包用于测试，这个思路不错，适合命令行工具。facebook/create-react-app#3124 (comment)

4. 为函数内的赋值语句和 return 语句自动加 console 的 babel 插件，思路很新颖。https://github.com/tkh44/babel-plugin-sitrep

5. GoogleChrome 官方的浏览器自动化库，可用于 UI 测试、爬虫等。https://github.com/GoogleChrome/puppeteer

6. 布局管理的库，可用于 React，但需要额外引入 jQuery 。https://github.com/deepstreamIO/golden-layout/

早报 @ 2017.9.15

1. React 16 RC 3，最后一个 RC 了，比较感兴趣的是其中任何不打包多个 Object.assign polyfill，polifill 重复是很常见的尺寸问题之一。facebook/react#10294 (comment)

2. 记不住 React 的事件？可以查这份 Live CheetSheet 。https://reactarmory.com/guides/react-events-cheatsheet

3. 如何让 import 输入更快，先写 from 再写接口就能有智能提示。作者给出了 VSCode 的配置方法，评论里有 ATOM 以及 WebStorm 的方法。http://2ality.com/2017/08/typing-import-statements.html

4. Gif 格式的 devtool tips，你会发现居然有这么多功能都没用过。https://umaar.com/dev-tips/ ，还有视频分享资料，https://umaar.github.io/devtools-optimise-your-web-development-workflow-2016/，https://www.youtube.com/watch?v=Dyynkefld8o

5. react-cosmos 发了 2.0 rc，一个用来写 React 组件的工具，https://github.com/react-cosmos/react-cosmos

早报 @ 2017.9.14

1. Chrome 61 支持 ES Module，通过 <script type=module> 引入。隐隐感觉这功能会带来调试和打包工具的革新。https://www.chromestatus.com/feature/5365692190687232，https://paulirish.github.io/es-modules-todomvc/

2. Babel 7.0@beta，支持通过 .babrlrc.js 配置、移除 babel 自身的 babel-runtime 依赖以减少安装尺寸、Deprecate ES20xx presets，推荐用 babel-preset-env 等等。https://babeljs.io/blog/2017/09/12/planning-for-7.0

3. Node v8.5.0，fs.copyFile、console.group()、正式支持 ES Module 等。https://nodejs.org/en/blog/release/v8.5.0/

4. 编码界面的正则工具，Cool！https://regexly.chipto.io/ ，我之前用的是 http://refiddle.com/

5. React FAQ，还是比较全的。https://reactfaq.site/，https://github.com/timarney/react-faq

早报 @ 2017.9.13

1. coding webIDE 支持小程序，功能上只能说部分支持吧。通过多页实现，和单脚本内存共享数据肯定不是一回事，API 模拟不全，生命周期好像也不全。https://ide.coding.net/

2. React-Router@4 和 @3 支持 React@16，ReactTraining/react-router@b0a9c75

3. AtomIDE，其实是 atom 捆绑一些 packages 以适应各种语言的编码、定义跳转、自动提示、引用查找等，适合新人上手。http://blog.atom.io/2017/09/12/announcing-atom-ide.html

4. 新的信息源，用于订阅新闻。https://www.google.com/alerts

5. react for aria，如何把更新的组件通知读屏软件。http://almerosteyn.com/2017/09/aria-live-regions-in-react

6. HTML 语法解析器，带插件机制，可以理解为 HTML 界的 Babel。https://github.com/reshape/reshape

早报 @ 2017.9.12

1. 把 React Component 转成 Word 文档，样式没了。https://github.com/nitin42/redocx

2. 关于如何避免“写一个 Module 感觉像写了一张无法支付的未来支票”，比如用脚本 commit、自动 publish、100% test coverage 等。https://medium.com/@mikeal/modern-modules-d99b6867b8f1，https://github.com/mikeal/r2/blob/master/package.json#L6

3. dat 协议的 p2p 应用例子，基于 BreakerBrowser。https://github.com/taravancil/paste-dat，https://beakerbrowser.com/

4. React@16 不再忽略 unknown 的 DOM 属性，https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

5. webpack + babel 让 JS 打包越来越慢，但如何让调试快点呢？babel-standalone、systemjs、unpkg 等都是一些尝试。印象中 stackblitz.com 也是基于 systemjs + unpkg。http://2ality.com/2017/08/less-building-in-web-dev.html，https://github.com/unpkg/unpkg-demos

早报 @ 2017.9.8

1. Yarn 1.0 发布，新功能很实用，比如适用于 monorepo 的 Workspaces，解决依赖的依赖更新问题的 Selective version resolutions 等，https://code.facebook.com/posts/274518539716230

2. state-machine-component by preact 作者，通过 reducer + action 的方式组织 React Component 的内部 state。https://twitter.com/_developit/status/905250269306474497

3. 管道操作符 |> 的 JavaScript 提案，适用于 lodash、rxjs 这种库，想尝鲜的可以配 babel 插件实现。https://github.com/tc39/proposal-pipeline-operator，https://www.npmjs.com/package/babel-plugin-transform-pipeline

4. Web Payments 支付接口快要来了，Chrome Canary 可用，Webkit 也是 In Development 状态，https://twitter.com/wesbos/status/905815017819385857，https://webkit.org/status/#feature-payment-request

5. React Native EU 2017，https://medium.com/@dschmidt1992/react-native-eu-2017-b091adc9aa9f

早报 @ 2017.9.7

1. 利用 @std/esm 让 node 无需 .mjs 后缀就使用 ES6 modules。https://twitter.com/zachcodes/status/903251125520007168

2. 新发布的一个 JavaScript runtime error tracker 服务，支持 AST 回溯到源码。https://javascript.studio/，https://medium.com/javascript-studio/javascript-studio-publicly-available-28522e325037

3. Why CSS, not CSS-in-JS，同意，个人也不喜欢 CSS-in-JS，https://svelte.technology/blog/the-zen-of-just-writing-css

4. react-idle，在 react 空闲时做点啥，比如加载脚本、问问用户是否还在、做一些耗 CPU 的事等，by React-Router 作者，https://reacttraining.com/react-idle/，https://cdb.reacttraining.com/announcing-react-idle-8fc0b9e2d33e

5. React.ReducerComponent，在 React Component 里用 reducer 来更新 react 的 state，看看就好，另一种思路。https://twitter.com/jaredpalmer/status/905170062679662594