FCC 成都社区·前端周刊 第 9 期

1. Node.js 10 将带来什么？

Node.js 10 的第一个版本将于本周二（4 月 24 日）发布，并将在 10 月份推出 LTS 版本，将带来哪些更新？ N-API，持续 HTTP/2 支持，ECMAScript Modules(ESM)，Async Hooks 等等。

详情：https://nodesource.com/blog/what-you-can-expect-from-node-js-10

2. webpack 4.6.0 发布

webpack 4.6.0 发布了对 Prefetch/Preload 的支持。Preload 可以更早地发现资源以避免瀑布似的获取，不会花费额外的带宽。Prefetch 使用浏览器的空闲时间来获取资源，可能需要额外的带宽。

详情：https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

3. 200 行 JavaScript 人脸识别库

picojs 是仅 200 行 JavaScript 代码的人脸识别库，最小只有 2KB。它可以实时检测出图像中的脸部，所有处理都在客户端完成。

详情：https://github.com/tehnokv/picojs

4.CSS Grid 布局的最佳实践

什么是 CSS Grid 布局的最佳实践？除了采用规范中的布局方式，还需考虑 Grid 与其他布局方式（例如 Flexbox）的结合，构建方式，以及团队的工作模式等。

详情:https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

5. Yarn 和 npm 大比拼

npm 是 Node.js 的默认包管理器，Yarn 是 Facebook 发布的包管理器。这篇文章深入介绍了这两者软件包管理器提供的内容，它们之间的区别以及它们如何演变。

详情：https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/

6. 开发大型 JavaScript 应用

这是根据 JSConf Australia 上发表的演讲整理的文章，分享了作者在开发大型 JavaScript 应用后的一些心得。文中给出了整个演讲的视频链接。

详情：https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3

7. Houdini：CSS杀手级别的项目

Houdini 是一个伟大的项目，它本着可扩展 Web 宣言（Extensible Web Manifesto）的精神，让开发者直接可以访问浏览器的 CSS 引擎，这使得开发者能够自定义自己的 CSS 功能，以便能在浏览器的本地渲染管道中高效运行。了解更多请阅读原文。

详情：https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

8. 9个诀窍教你写出更好的 React 代码

如何在 React 中写出更好的代码，作者为我们提供了 9 个有用的 tips: 使用 propTypes 和 defaultProps，在恰当的时候使用 Component、PureComponent 和 Stateless Functional Component，如何使用 React Dev Tools，使用 Bit / StoryBook 提高工作效率等。

详情：https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0

9. 介绍JavaScript即将推出的三种新功能

本文介绍了 JavaScript 即将发布的新功能，作者用实例展现了 JavaScript 在可选链式调用（Optional Chaining）、Nullish coalescing 和 Pipeline operator 上的改变。

详情：https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b

10. 5分钟教你学会Bulma

Bulma 是一个简单、易用的 CSS 框架，虽然很多开发人员喜欢用 Bootstrap，但是作者认为Bulma的设计更好，而且更轻量。在文章中，作者给出了一些步骤让你快速上手Bulma。

详情：https://medium.freecodecamp.org/learn-bulma-in-5-minutes-ec5188c53e83

11. 使用官方 Vue.js 测试工具与 Jest 编写组件的单元测试

Vue.js 以其灵活、高性能、易上手的特性正逐步被应用到更多的 Web 项目中，本系列文章依次介绍了编写首个简单的组件单元测试用例，测试递归渲染的 Vue.js 组件，测试组件的样式与结构，测试组件的状态、计算属性与方法，测试属性与自定义事件，测试生命周期回调，测试 Vue.js Slots，利用模块别名配置 Jest 等内容。

详情：https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

12. 2018 GraphQL 必知必会

大部分开发者都了解如何构建 REST API，也感受过它的红与黑；本文则是对 API 领域的新星—GraphQL 进行介绍与讨论。GraphQL 经常被称作是面向前端的 API 技术方案，因为它允许前端开发者以更简单灵活的方式进行数据请求。该特性也正是弥补了传统 REST API 的一个不足：无法为不同的客户端返回定制化数据；而 GraphQL 的另一个优势在于，能够将原本需要向多接口发起的请求仅向单接口请求。

详情:https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8

每周一同步更新到 GitHub, 欢迎 star :)