前端周刊第 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

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