前端週刊第 56 期：目不暇接的技術大會

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

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