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

本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。如果你觉得本文对你有帮助，请点赞！如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅我的掘金专栏或知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。