Headless Browser 指的是没有图形用户界面（GUI）而是由程序控制的浏览器。Puppeteer 就是由 Google 推出的一种 headless browser。从 Puppeteer 的官方文档中可以看到它能做的事有很多：

• Generate screenshots and PDFs of pages.
• Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. “SSR” (Server-Side Rendering)).
• Automate form submission, UI testing, keyboard input, etc.
  …

几乎所有能手动在 Chrome 进行的操作现在都可以用 Puppeteer 来完成。

我之前在工作中就用到了 Puppeteer 做了一些页面爬取的工作，这里把使用到或者玩过的一些功能做了下总结和记录。这篇文章并不是一个全面的 Puppeteer 的使用教程，毕竟 Puppeteer 的大部分 API 我也没有使用过🙂。

很多年前在学校的时候，中二期的我和朋友讨论过如果穿越到古代想去哪个朝代。我说去三国吧，和刘关张结义，一统天下，岂不美哉。朋友指出，这三人都比你年纪大，你去了只能做小弟。额，这点倒没想到，于是穿越计划无疾而终。去年又翻了下《三国演义》，在第一章桃园三结义中看到了这句“及刘焉发榜招军时，玄德年已二十八岁矣”，哦，看来我再也不用担心穿越到三国时期的年龄问题了。刘备二十八岁时就已经开始匡扶汉室了，而我二十八岁时还在写代码 ╮(╯_╰)╭。

在前段时间的工作中，我遇到了一个在桌面端和移动端进行图文混排编辑的需求。虽然如果只需要编辑纯文本和图片，不一定要使用富文本编辑器来实现。但是为了以后方便扩展，比如文本会有样式要求，我还是用 Draft.js 实现了一个功能较基础的富文本编辑器。

我将代码开源在了这个项目 draft-editor 中，也可以在这里在线预览。本文中我将介绍一下一些关于 Draft.js 的基础知识，并由此扩展到如何在 Draft.js 编辑器中插入图片功能的实现。

到了2018年快要结束的时候，才发现这一年什么也没做啊😂，上一篇博客还是3月份写的。感觉做这个总结就是在提醒自己荒废了一年，虽然不想这么做，但还是来写点什么吧。

前段时间用 React 写了个2048 游戏来练练手，准备用来回顾下 React 相关的各种技术，以及试验一下新技术。在写这个2048的过程中，我考虑是否可以在其中加入一个 AI 算法来自动进行游戏，于是我找到了这篇文章：2048-AI程序算法分析，文中介绍了 minimax 算法和 alpha-beta 剪枝算法。于是我决定先学习下这两种算法，并以此写了这个 tic-tac-toe 游戏：tic-tac-toe-js（代码见此处）。本文将说明如何用 JavaScript 来简单地实现算法，并将其运用到 tic-tac-toe 游戏中。

活了二十多年，从来没有做过年终总结，但年岁渐长，总觉得有点时间的压力，应该记录点什么，就让2017年的总结作为第一次。

前段时间在寻找一些关于富文本编辑器的资料，然后发现了这个名为 Pell 的项目，它是一个所见即所得（WYSIWYG）的文本编辑器，虽然它的功能很简单，但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行，即使加上其它部分，总的 js 数量也不到200行。这引起了我的兴趣，决定看看它的源码是如何做到这一点的。

Any application that can be written in JavaScript, will eventually be written in JavaScript.
– Atwood’s Law

本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章：《用 C 语言画光（一）：基础》之后的一个想法，能不能将原文中 C 语言版本程序改成 JavaScript 版本的。动手之后发现出乎意料的顺利，我只需要把 C 语言中变量的类型通通去掉就可以了😀，Amazing！

如果开发一个塔防游戏，很自然的会遇上这么两个名字很像的问题：

• Path-finding: 如果知道起点和终点，如何在其间找到一条路径
• Path-following: 已知从起点到终点的路径，物体如何才能沿着它行进

本文将要讨论的是第二个问题 path following，给定一条路径，看物体如何沿着它从起点运行至终点。为了方便描述，接下来的内容中，用单词 Boid 来表示行进的物体或塔防中的敌人。

接下来会用一种简单的方法来解决这一问题，最终完成的代码库可见 GitHub: boid-path-following，repo 的多个分支对应了文中的不同步骤。

背景介绍

React Router v4 推出已有六个月了，网络上因版本升级带来的哀嚎仿佛就在半年前。我在使用这个版本的 React Router 时，也遇到了一些问题，比如这里所说的代码分割，所以写了这篇博客作为总结，希望能对他人有所帮助。

什么是代码分割（code splitting）

在用户浏览我们的网站时，一种方案是一次性地将所有的 JavaScript 代码都下载下来，可想而知，代码体积会很可观，同时这些代码中的一部分可能是用户此时并不需要的。另一种方案是按需加载，将 JavaScript 代码分成多个块（chunk），用户只需下载当前浏览所需的代码即可，用户进入到其它页面或需要渲染其它部分时，才加载更多的代码。这后一种方案中用到的就是所谓的代码分割（code splitting）了。