经过持续的迭代，Rax 小程序迎来了一个大的升级，支持全新的运行时方案。站在 2020 年初这个时间点，我们想从 Rax 小程序的特点出发，进行一次全面的梳理与总结，并且在文末附上了 Rax 与当前主流的小程序开发框架的对比。本文将从 API 设计与性能、双引擎架构、优秀的多端组件协议设计和基于 webpack 的工程架构四个方...

source map 是开发时调试代码的利器之一。现代的构建工具如 webpack 早已对 source map 有了完备的支持，对照文档就能很容易在打包时顺手生成然后在现代浏览器如 Chrome/Firefox 中使用。关于相关配置的介绍使用已经有很多文章，这里就不再赘述。本文想探究的是 source map 在编译器中的实现原理。

本文是 Chrome 团队新人入职学习资料《Life of a Pixel》的概要版，首发于我的博客（点此查看），欢迎关注。原文 Slides 地址：[链接]中文字幕演讲视频地址：[链接]

流式渲染技术，不同于传统意义上前端领域的服务端渲染（即 SSR），指的是云端性能强劲的机器进行画面渲染，将渲染完成的数据传送至客户端，客户端只负责播放及处理和上传用户输入信号至服务端的一种技术，谷歌的云游戏平台即是使用案例之一。在开源社区也有一些相关的方案，在拜读了 Parsec 公司的这篇博文——A Look at G...

最近在做项目代码重构，其中有一个要求是为代码添加智能提示和类型检查。智能提示，英文为 IntelliSense，能为开发者提供代码智能补全、悬浮提示、跳转定义等功能，帮助其正确并且快速完成编码。说起来，JavaScript 作为一门动态弱类型解释型语言，变量声明后可以更改类型，并且类型在运行时才能确定，由此容易产生大量...

说到 Web 安全，我们前端可能接触较多的是 XSS 和 CSRF。工作原因，在所负责的内部服务中遭遇了SSRF 的困扰，在此记录一下学习过程及解决方案。SSRF（Server-Side Request Forgery），即服务端请求伪造，是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下，SSRF 攻击的目标是从外网无法访问的内部系统。

关于如何处理 node.js 服务连接 MongoDB，我查阅了大量中英文资料，发现并没有太适合我所期望的能力的方案，因此经过一番官方文档的研究，总结了以下的连接 MongoDB 的方法（使用目前 Node.js 平台最常用的 MongoDB ODM mongoose），斗胆称之为『最佳实践』，希望能够抛砖引玉，得到大家更专业的解答。话不多说，先上代码：

最近的工作一直在与服务端性能优化打交道，QPS（每秒查询率）的苛刻要求让我这个以前也就用 node.js 写写博客的人深刻地感觉到以前做的东西就是个玩具。所以最近也在尝试了解一些压测方面的知识。对于压测工具，业界常用的有 jmeter、loadrunner、tcpcopy、apache bench、wrk(2) 等。作为压测小白，结合项目实际情况（无...

前端网页倒计时是非常常见的应用，我们在各大购物网站的秒杀活动中总是能见到它的身影。但是在实际情况中，我们常常会发现当网页不刷新、让倒计时程序持续运行时，显示时间相比实际时间会越来越慢，相信大家也有在秒杀时间即将到来时不停刷新页面的经历。原因自然也不难理解：倒计时通常使用定时器（setTimeout 或者 set...

译者注：最近看到 Poi 这个也是打着零配置特点（Parcel：莫名躺枪？）的 JavaScript 打包工具，发现其在 Github 有着 3000+ Star 的同时在中文世界里热度却较低，因此在 Medium 上找了一篇文章翻译过来，方便大家了解之。原文地址：[链接]

做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异，因此传统的 Canvas 处理库几乎无法在小程序中使用。在调研了一些传统浏览器端的项目后，我发现 CamanJS 的功能比较完善，同时也比较容易对微信小程序进行适...

sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。当然，网络上相关的文章比较多，sharp 的官方文档也比较详细，所以这不是本文的重点。这里...

Node-Web-Console（以下简称 NWC）是一个基于 Node.js 开发的网页版 shell 应用，其想法来源于实验室 SDN 相关项目的一次组会讨论，需求大致是在网页中嵌入 shell，然后实现从前端页面展示的网络拓扑中直接进入虚拟机节点进行简单的管理。具体实现上则参考了 web-console，一个基于世界上最好的语言开发的项目。

Hyperapp 是最近热度颇高的一款迷你 JS 框架，其源码不到 400 行，压缩 gzip 后只有 1kB，却具有相当高的完成度，拿来实现简单的 web 应用也不在话下。整体实现上，Hyperapp 的思路与 React 比较类似，都是借助 Virtual DOM 来实现高效的 DOM 更新。在探究 Hyperapp 背后的实现原理之前，我们先看一下如何使用它。

最近在做网页版图片处理相关的项目，也算是初入了 canvas 的坑。项目需求中有一个给图片添加水印的功能。我们知道，在浏览器端实现图片添加水印功能，通常的做法就是使用 canvas 的 drawImage 方法。对于普通的合成（比如一张底图和一张 PNG 水印图片合成）来说，其大致实现原理如下：