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 :)