前端每周清单第 5 期

front-end

Web 前端开发的未来

用户期望上升，我们构建不再是页面，而是系统，本机和 Web 之间的界限模糊不清，URL仍然是一个杀手锏，CSS 将更加模块化，CSS 预处理将逐渐消失，精通 HTML 和 CSS 仍然至关重要，构建流程将获得竞争等

常用的 ES6 功能简介

如果您还没有频繁使用ES6，这是对七个最有用的概念的全面##### 《现代 JavaScript 教程》：从基础到高级主题，简单但详细的说明

现代 JavaScript 应用程序的解剖

在本文中，我将向您介绍现代 JavaScript。我们将看看最新的语言发展，并概述当前用于编写前端Web应用程序的工具和技术。 如果你刚刚开始学习这门语言，或者几年没有碰到它，并且想知道你以前知道的 JavaScript 发生了什么，这篇文章是给你的

从 react 切换到 Vue.js

React 和 Vue 类似可乐和百事可乐，在 React 中你可以做的很多，你也可以在 Vue 做。 有一些重要的概念上的差异，其中一些反映了 Angular 对 Vue 的影响

O(logn) 时间复杂度到底该怎么理解

我们不仅要知道算法的复杂性，还要知道知道这样的原因

chrome dev tools 性能工具大直观

Google 官方出品的 dev tools 性能工具详细介绍，文章比较长，介绍了几乎所有 dev tools 内涵的性能工具，包含如何打开、录制，如何解读结果，发现问题，如果你真的想学会性能诊断，把这个加到学习列表吧

11 个阅读 flexbox 规范的收获

flexbox 非常容易使用 - 它是多年的浮动和清理之后的新鲜空气，我阅读了它的源代码并写下了这篇文章

picodom: 1kb 虚拟 DOM 构建器和补丁算法

Picodom 是一个 1kb 的虚拟 DOM 构建器和补丁算法

Flexbox Cheatsheet：单击将 Flexbox 属性复制到剪贴板

虽然目前很多编辑器都有代码提示，但是这个网页还是很有创意的

JavaScript 单元测试框架比较：Jasmine，Mocha，AVA，Tape 和 Jest

在开始新的前端项目时，我们常常会考虑应该使用哪一个单元测试框架，或者考虑应该为哪些代码添加单元测试。而本文则对于常用的 Web 开发中的单元测试框架 Jasmie、Mocha、AVA、Tape 以及 Jest 进行了横向对比，并且基于自己的经验给出了不同应用场景与需求下不同的单元测试框架选项建议

Vue 2017 现状与展望 | 视频+PPT+速记快速回顾

5 月 20 日，在全球首届 VueConf 上，Vue.js 作者尤雨溪介绍了 Vue.js 2017 的现状，并对 Vue 的未来做了展望。本文是对此次演讲的回顾

back-end

Node.js V8 的重要功能和修复

随着 Node.js 版本 8 的发布（5月30日下午12点发布），我们获得了最新的 LTS（长期支持）变体，具有一系列新功能和性能改进

如何使用 MongoDB 与 Node.js

这是研究推动现代网络和移动应用程序发展的技术的一系列博客文章中的第二篇

发布可持续集成的可维护的 NPM 模块

您将学习如何构建，测试和发布一个 JavaScript 模块到 NPM，以及如何使用将自动测试和发布新版本的持续集成进行更新。 这篇文章将专注于测试，构建和发布模块，而第二部分将重点关注设置更新模块的持续集成

如何构建和部署多功能 Twitter 机器人

这个机器人从三个例子中拼凑起来，我还将详细介绍如何使用 Zeit 现在的平台将机器人部署到服务器上

使用 ES6 和现代语言工具来编程 MIDI 控制器

为 Mixxx DJ 软件创建灵活且可定制的 MIDI 控制器映射

tad: 用于查看和分析表格数据的桌面应用程序

Tad 是用于查看和分析表格数据（如CSV文件）的桌面应用程序

SQL Source Control：跟踪 SQL Server 数据库的每个更改

版本控制模式和参考数据，回滚更改，并维护数据库的引用完整性。 解决其他数据库挑战，如部署而不会丢失数据

Hyperloop，让发布简洁高效

Hyperloop 是服务于美团点评客户端的组件发版、持续集成、App 打包构建、资源调度等各个环节的发布调度系统。名称起源于美国 Elon Musk 构想的 Hyperloop 超级高铁，象征着现代、简洁、高效

pix2code：从图形用户界面生成代码截图

pix2code 依赖于深度学习技术将来自于设计师的界面图片转化为 iOS 等客户端中的代码

Tool

Wallaby.js: 集成的 JavaScript 连续测试工具

当您更改代码时，它会立即向其代码编辑器报告代码覆盖率和其他结果。 Wallaby.js 非常快，因为它只执行受代码更改影响的测试，并且并行运行测试。 无论您是做 TDD / BDD 还是使用其他方法，该工具都能提高生产效率

Chrome devtools 扩展用于调试 Vue.js 应用程序

如果页面使用 Vue.js 的生产/最小化构建，默认情况下将禁用 devtools 检查，因此Vue窗格将不会显示。要使其通过 file：// 协议打开的页面工作，您需要在 Chrome 的扩展管理面板中选中此扩展名的“允许访问文件URL”

Firefox Screenshots: 一个新的 In-Beta Web 屏幕截图工具

屏幕截图变得简单。 拍摄，保存和分享截图而不用离开 Firefox

Visualization

vue-recyclinglerview：用 Vue 渲染大列表的快速方式

掌握大型列表与 vue-recyclinglerview

react-native-animatable: 为 react native 定制的动画库

高仿 animate.css，但是专门为 react native 定制， 各种动画都定义成了组件，动画声明方式也都是声明式的，参数可以直接通过节点 props 来控制

伸缩/挤压的 CSS 文字阴影

寻找灵感，使您的头条脱颖而出？不要再犹豫了！ 这个免费的美丽长文字阴影集合包括字体，颜色和 CSS 代码，以便为您自己的网站呈现。由现代字体发生器 Mixfont 带给您的