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