前端周刊第56期：應接不暇的技術大會

01-28

WannaCry 病毒的事情我們就不提，本周各科技公司、技術社區的大會真是讓人應接不暇，Google IO、MicroSoft Build、React Europe、Vue Conf，每個裡面都有不少前端工具、框架、演進方向的乾貨，好學的你怎麼錯過？下面是本周精選內容，請享用。

技術動態

Google I/O 2017 視頻列表

Google I/O 2017 可以說是整個互聯網的盛宴，關於它的報道已經很多了，這裡搜羅了全部的視頻，裡面關於前端的內容比較值得關注，比如 Polymer、Dev Tools、PWA 等，工程師不光要埋頭做事，還要抬頭看路，大的科技公司則走在我們前面。

Next.js 3.0 預覽版發布

Next.js 是基於 React 的支持服務端渲染的開發框架，本周發布 3.0 預覽版，支持動態 import。服務端渲染雖然提了很長時間，但是到目前為止還處在看上去很美、用起來性能達不到要求的階段，不過社區的努力會帶來好的結果。

Vue Conf 2017 參會筆記

掘金編輯產出的參會筆記，全球首屆 Vue.js 開發者大會，尤雨溪介紹了 Vue.js 的演進之路和今年的版本迭代計劃，狼叔對前後端分離的大前端技術架構給出了良方，張耀春則分享了非常多 Webpack 用在實際項目中的技巧，掘金的創始人在現場做了他前端生涯的最後一次技術分享，可惜沒有直播。

React Europe 2017 大會議程

React Europe 2017 大會也是本周舉行，程序員界的漫畫天才 Link Clark 又做了逆天的分享，她用漫畫圖解 Redux、GraphQL、React Fiber 讓我在迅速理解這些概念的同學也為她的才華做震撼，有點跑題了，React Europe 中除了她的演講，還有很多值得關注學習的內容，怎麼挑出高質量的？相信你有自己的辦法。

文章教程

CSS Grid 學習指南

CSS Grid 是比 Flexbox 更強大的布局特性，如果你還徘徊在門外，何不打開這篇教程研究下，作者對內容的組織非常的用心，你應該半小時就能學完。

8 個能讓你驚艷同事的 npm 技巧

工程師不光要技術紮實，對工具也要練習、練習、再練習，這裡是幾個 npm 的小技巧，跟你的日常工作關係緊密，但是你可能還不知道，在同事面前表演下，估計他們會被驚艷到。

程序人生：服務性能 101

來自我非常敬佩的程序人生的微信公號，雖然前端對性能的關注不需要到服務級別，但是培養一種思維方式還是非常有用的。比如什麼時候該嚴肅地考慮性能問題？如何衡量和優化服務的性能？有興趣的同學可以閱讀原文看他的分享 Slide。

阮一峰：Fish shell 入門教程

早些時候有推過一篇文章說：為什麼優秀的程序員都愛命令行？Phodal 在他的長文《在工作頭三年里如何快速成長》中提到的要儘早開始擁抱命令行、純鍵盤操作，慢慢你會發現過多使用滑鼠會使你的效率下降，這點我深有體會，也非常贊同，但是你的命令行工具箱也是需要不斷打磨的，如果你還沒開始行動，那這篇文章可以入門。

開發工具

靜態網站生成（SSG）工具大搜羅

國外大行其道的一鍵部署服務 Surge、Now 是在靜態網站生成器大背景下的商業產品，你也想部署純凈太的網站？需要先挑選一個 SSG 工具，然後挑個服務商，這個小站列出幾乎所有的 SSG 工具。

Eruda：把開發者工具帶到移動端

你有沒有吐槽過為啥移動端瀏覽器沒有類似與 Chrome 開發者工具這樣的調試利器？有人已經做了嘗試和努力，Eruda 可以在移動端瀏覽器中給你類似的調試功能，官方 README 尾部的那段接入代碼要仔細看。

Atom 新版集成 GitHub 功能

Atom 的最新版中集成了常用的 Git 功能你可以方便的在 GUI 上操作分支、查看日誌、做代碼的提交和拉取。已經拋棄 Atom 的同學可以繞路了。

測量並對比你和競品的網站性能

在網站性能測試工具裡面 WebPageTest 是當之無愧的榜首，但是用它來對比兩個網站（比如說你相對比自己和競品的性能）操作略麻煩，這個工具能讓你一鍵完成對比。

視頻教程

讓代碼檢查不再痛苦

為 Andrey Okonetchnikov 在 React Amsterdam 上做的分享，列出了現有的代碼風格檢查（Code Linting）方案的集成痛點，並給出了非常不錯的解決方案，我們團隊已經用上了，如果你還不知道啥是 Code Linting，得抓緊學了。

抽象語法樹（AST）入門

抽象語法樹是啥？有什麼用？如果你好奇過各種預編譯工具（比如 babel、postcss、eslint 等）是怎麼工作的，這個教程能讓你知其然還支持所以然。

精彩問答

Mac 中如何讓兩個應用並排全屏？

我喜歡在超大的顯示器上同時開著 Vim 和 iTerm，一個用來寫代碼，一個用來調試或者操作 Git，那麼如何讓兩個應用並排全屏好使我沉浸在編碼中呢？需要用到 Mac 系統的一個特性，非常簡單，1 分鐘就學會。

如何知道 npm 模塊的資源消耗？

前端網上流傳一張圖對比了各種語言包管理機制的深度，npm 是被黑的最狠的，有國外的朋友在 Twitter 上發文說清理 node_modules 讓他的 Mac 增加了 15G 磁碟空間，真有這麼嚴重？你用的最多的包到底會佔用多少空間？安裝時需要下載多少東西？這個小工具可以幫你計算。

One More Thing

本文作者王仕軍，商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領域跟上時代的腳步》。