JavaScript 单元测试如今对于前端开发来说并不陌生，前端工程化之后项目的代码质量越来越受到重视，单元测试无疑是一种衡量代码质量的重要手段，而测试覆盖率则是衡量测试完整性的一种手段：通过已执行代码的覆盖率，用于评测代码的可靠性和稳定性，可以及时发现没有被测试用例执行到的代码块，提前发现可能的逻辑错误。

伊斯坦布尔（以下简称 Istanbul）是一个基于 JavaScript 的测试覆盖率统计工具，目前绝大多数测试框架比如 jest mocha 等都是使用 Istanbul 来统计覆盖率的。伊斯坦布尔有一个比较老的版本 istanbul.js（已不再维护）和一个新的版本 nyc。虽然使用 Istanbul 的人很多，但是几乎没有介绍其实现原理的文章，那么 Istanbul 计算和统计测试覆盖率的整个流程是怎样的呢？

React Hooks 出来也有一段时间了，在这个过程中有一个前端的 React 项目是专门用的 React 的 FC 组件形式来写的。在过程中提炼了一些使用实例，这里记录下。还有，如果你之前从来没有了解过 React Hooks，建议你先

去 React 官方网站了解 React Hooks 的基本概念和使用方式。
官方文档链接：https://reactjs.org/docs/hooks-overview.html#state-hook

前言

自从小程序自定义组件和 npm 功能面世之后，组件化和开源思想逐步开始萌芽了。我们可以将一些通用的部件，如自定义导航栏之类的封装到一个自定义组件中，然后借由 npm 平台开源出去给其他开发者使用，这样可以省去很多劳动。相信各位开发老爷们应该或多或少都有过使用开源包的经历，但是在使用前，这个开源包得能赢取我们的信任，一个很重要的指标就是单元测试通过率和覆盖率。

但是因为小程序独特的运行环境和不完全开源的基础款，使得对小程序自定义组件的单元测试稍微有点困难。目前市面上无论是 vue 还是 react，这些组件化框架都有一套完善的单元测试解决方案，但是对于小程序自定义组件来说却寥寥无几，因此这个工具集—— miniprogram-simulate 便应运而生了。

写在前面

Omi 框架 正式发布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作为 Omi 组件化开发特效运动解决方案，让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的，作为移动 Web 特效解决方案，在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用，以激进的修改 DOM 属性为代价，带来极为便利的可编程性。

你可以通过 css3transform 官方首页快速了解它。

李成熙，腾讯高级工程师，专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

概念回顾

在掘金开发者大会上，在推荐实践那里，我有提到一种云函数的用法，我们可以将相同的一些操作，比如用户管理、支付逻辑，按照业务的相似性，归类到一个云函数里，这样比较方便管理、排查问题以及逻辑的共享。甚至如果你的小程序的后台逻辑不复杂，请求量不是特别大，完全可以在云函数里面做一个单一的微服务，根据路由来处理任务。

李成熙，腾讯高级工程师，专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

小程序诞生以来，业界关注小程序前端的技术演进较多，因此众多小程序前端的框架、工具也应运而生，前端开发效率大大提高，而后台的开发技术则关注不多，痛点不少，具体痛在哪里呢？

李成熙，腾讯高级工程师。专注于性能优化、工程化和小程序服务。微博 | 知乎 | Github

什么是小程序·云开发

小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力，简言之就是：云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发 (Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案。

小程序·云开发为开发者提供完整的云端流程，简化后端开发和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代。

该解决方案目前提供三大基础能力支持：

• 存储：在小程序前端直接上传/下载云端文件，在小程序云控制台可视化管理

• 数据库：一个既可在小程序前端操作，也能在云函数中读写的文档型数据库

• 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码

未来，我们还会集成更多的服务能力，为小程序提供更强有力的云端支持。

原文地址

“抓娃娃” 并不陌生，存在两种结果: 抓到与抓不到。在 Web 动画中，如上图，“抓到” 与 “抓不到” 对应着两个动画，可以使用不同的动画图片资源来实现，似乎毫无异义。

细做观察，不难发现：两个动画中 “动画初始到抓取” 及 “抓取结束到动画结束” 的区间中存在相同动画 (滑动和晃动抓杆)。既然动画相同，那么可以通过引用同一份动画图片资源，不做相同图片的重复加载，从而减少总资源大小。

“两个动画间存在部分相同的动画，相同部分可以引用同一份动画图片资源，来减少图片的总大小。”

肉眼进行辨别哪些动画是一样的？那是不可能的。gka 提供一键式制作多个动画的方式，支持多种图片优化方案 (含图片去重)。

gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

官方文档：https://gka.js.org

Github：https://github.com/gkajs/gka

原文地址

多倍图的适配在前端开发还是比较常见的，像在 Retina 屏幕，一般会使用二倍图从而让图片保持清晰，而在开发帧动画中使用的图片实际上同样需要做这样的适配处理。gka 提供一键式的制作多倍图帧动画的方式。

gka 是一款简单的、高效的帧动画生成工具，图片处理工具。

官方文档：https://gka.js.org

Github：https://github.com/gkajs/gka

原文链接

最近几个月一直有些事情没有想通，但可幸的是，有些问题的答案逐渐开始明朗起来了。好久没写文章，籍此献上一篇短文。

当初准备毕业的时候，其实并没有想过要当前端工程师，毕竟当时基本都是全栈（PHP + jQuery）。但由于并不是科班出身（大学读 Business），自信心不足，以及机缘巧合，就成为了一名前端工程师。

选择这份职业，其实也领略到它所拥有的魅力，更快捷的开发方式，更紧贴时代的发展，跨端的兼容等等，可以算是享受了前端这几年飞速发展的红利。但工作三年之后，也逐渐发现只是围绕前端来发展，有很大的局限性。

大约是有那么两件事触动到我吧。