不知道大家有没有发现，社区里的CSS，尤其是CSS-IN-JS样式轮子越来越多了.前端社区有很多讨论或争吵。例如，有人说CSSisBroken，而其他人则说CSSisFine。CristianoRastelli根据《战争与和平》回顾了历史，也给出了非常好的观察视角。程序员应该务实，而不是教条，更重要的是要有好奇心。另外，对于第56期提到的各种技术会议，已经有人陆续整理出了适合WEB的视频列表。这个问题包括我看过的两个更令人兴奋的问题。如果有时间看更多请移步：GoogleI/O、JSConfEurope、VueConf。全文2121字，阅读时间4分钟。这是我们本周的精选，尽情享受吧。技术动态NPM5.0发布：更像是Yarn官方的NPM5.0发布日志，你需要知道版本更新的重点：速度更快，有benchmarks表明它比Yarn更快；自动维护package.json中的缩进；--save成为默认参数；支持离线模式；支持依赖锁，直接npminstall-gnpm@5即可体验。styled-components2.0发布，以指甲油图片为图标的CSS-IN-JS库。我第一次使用它时就爱上了她。本周发布了2.0版本，可以说是真正的大版本，代码量更小，增加了SSR支持，发布了新的文档站点，增加了多个帮助函数，帮助你实现代码复用，以及增加了Babel插件来优化生产环境中的代码。最重要的一点是可以直接升级到2.0版本，不需要做任何改动。Autoprefixer7.0发布。可能有些同学对Autoprefixer比较陌生。它是一个CSS预处理工具，可以自动帮你提高CSS浏览器兼容性。各种构建工具都有对应的插件。第一个版本于4年前发布。作者重写了整个仓库（从Coffee到Babel）后，最近发布了7.0版本。新版本最大的变化就是将BrowserList升级到了2.0。文章TutorialStackOverflowSwitchedtoHTTPSonthethisweek宣布帮助100W开发者成功退出Vim。正在升级HTTPS或者想升级的同学可以看看，做好心理准备。内容比较全面，从基础设施的迁移，到应用架构和代码逻辑的迁移，都有经验和教训。JS函数的前世今生函数在JS中是一等公民。语言在进化，函数的编写和使用方式也在进化。函数声明、函数构造、匿名函数，以及后来的箭头函数、生成器、异步函数、不同语法组合的函数都值得一看。确保CSS编码风格的工具链清晰简洁的代码看起来不错，更容易理解。在JS领域，有很多保证编码风格的工具，比如ESLint、Standard，还有帮助你格式化代码的工具，比如Prettier、JS-Beautify。社区还相对年轻的CSS领域呢？早期的csslint太难用了，不过近一两年出现了几个更好的工具，比如代码检查的stylelint，代码格式化的stylefmt。StyleGuide指南：编写风格规范的指南。更注重代码重用和用户体验一致性的前端团队在处理复杂业务时，会开始积累自己的风格规范。但是，在实际操作过程中，有些样式规范后期可能会变成一纸空文。规范，如何保持真正有价值的风格规范？例如，样式规范应该如何组织？文档应该怎么写？向布拉德弗罗斯特学习。开发工具sitespeed.io：给你的应用一个全面的性能诊断？sitespeed.io完全基于开源工具构建。一键对您的WEB应用进行全面的性能诊断。它包括Browsertime、ChromeHar和PageXRay等工具。它支持将结构导出到Grafana。安装方法也比较灵活。最近，它正在关注性能。同学们可以看看。代码框架Shoutem开源的ReactNative动画组件Shoutem一直被认为是移动领域的WordPress。它可以快速帮助用户构建应用程序。它在ReactNative上做了很多事情。这是他们开源的ReactNative动画组件，支持常见的位置、大小、透明度、坐标轴，动画作者还在Medium上发了一篇不错的文章：《Declare Peace with React Native Animations》，有兴趣的可以搜索阅读。在Node.js的顶级作用域中直接使用await也许你也想知道为什么Node.js中的await语法不能直接使用，而是需要在特定的async函数中使用。这个包来自SindreSorhus在twitter上发的一个抱怨，实现方式比较hack，很有可能会内置支持这个功能，梦想一定是有的，万一实现了呢。ensure-error：确保你收到的是Error对象。npm社区贡献的各种package在数量上绝对碾压其他语言，但是质量也是参差不齐。具体来说，笔者踩过的坑是有些包抛出的错误不是标准的Error实例，所以我们的错误处理代码需要特别修改，使其在处理错误时不会出错。类似于ensure-callback，这个包可以确保你得到的错误是正确的对象。SindreSorhus发现和解决问题的方式非常值得学习。寻找灵感Awesome系列：Awesome系列是函数式编程资料的集合。它整理了很多关于函数式编程的精彩演讲、文章和视频，涵盖了多种语言。感兴趣的可以慢慢看。视频教程DevTools:StateoftheUnion2017由PaulIrish在GoogleI/O2017上分享，其中包含大量Chrome开发者工具的现场演示，例如：调试PWA功能和技巧；如何解读应用性能、可用??性报告；如何使用最新的异步单步调试功能；如何在开发人员工具中快速编写和保存代码。WebAssembly对React意味着什么？程序员漫画作家LinClark在JSConfEU2017的演讲，Facebook很想把React的性能做成一种机制，而WebAssembly真的很快，两者结合起来会怎样？我就不剧透了，有兴趣的可以自己看。如果你想看林克克拉克的更多漫画，你可以搜索“卡通指南”。egghead.io：玩转JS中的数组数组可以说是任何编程语言中最重要的数据类型，JS也不例外。掌握它们的必要性不需要言语。这个视频列表涵盖了几乎所有的JS数组操作，内涵了一些用数组做常见任务的特殊技巧。还有一件事本文的作者是王士军。如需商业转载，请联系作者获得授权。非商业转载请注明出处。如果您觉得本文对您有帮助，请点个赞！如果您对文章内容有任何疑问，欢迎留言讨论。想知道我接下来会写什么吗？欢迎订阅我的掘金专栏或知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。快乐黑客
