吴锴的博客

大家应该都听过 service worker 这个概念，那么它究竟是什么呢？我们看下 MDN 上的解释：

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.

Service worker 在 web 应用、浏览器和网络之间扮演代理服务器的角色。可以用于创建有效的离线体验，劫持网络请求等。

在这篇文章中我创建了一个示例项目来展示 service worker 的基本用法及如何缓存图片。可以在这个项目 service-worker-demo 中看到文中的代码。

《深入理解计算机系统 CSAPP》这本书我已经买了很多年了，一直都只是翻翻而已，阅读进度常年在前两章。趁着最近有时间，再次拿出了这本书，准备好好学习一下。配套的几个 lab 也试着做一下，这篇文章就是记录一下第一个 data lab 的过程。

Lab 的环境准备

这是 CSAPP Lab 的官方网站，上面有各个 lab 详细介绍和下载地址。

Lab 正常运行和测试需要安装相应的环境，利用 docker 可以省去配置环境的环节，我使用的这个已经制作好的 docker 镜像：项目地址。在安装 docker 之后，按照项目 README 的步骤 clone 项目并启动即可。这个项目中已经包含了所有的 lab 文件，因此不需要额外下载了。

Docker 启动命令如下：

1

docker run -p 7777:7777 -v "$PWD/labs:/home/csapp/project" xieguochao/csapp

然后在浏览器中打开 http://localhost:7777 即可。

那些年使用过的笔记软件

这些年我换过许多笔记软件，最开始使用的是 Evernote/印象笔记，因为可以实现电脑端和手机端的同步，加上方便的浏览器的剪藏扩展，成了我大学时期的主力应用。

后来我买了一台微软的 Surface3 平板，附赠一年的 Office365，其中就包含了 OneNote 应用。OneNote 笔记本的设置深得我心，搭配手写笔的体验很好，它的搜索功甚至能直接搜到图片上的文字。

虽然 OneNote 有着强大的格式功能，但是不原生支持 markdown 格式，笔记中的代码格式一直是个问题。之后我切换到了 Mac 平台，接触到了 Bear（熊掌记），第一次使用的感觉很惊艳，支持 markdown，内置了多款主题可供选择。为了获得设备间的同步功能，我选择了付费。Bear 也成了我这几年最常用的笔记应用。

如果想在博客中分享代码片段，我们可以直接把代码复制过来，也可以利用 Github 的 Gist 代码片段来分享代码。

现在考虑这样一种情况，如果想分享的代码来自于一个 repo 中的文件，博客中需要引用其中的代码。比如在我的上一篇文章使用 Nodejs 遍历文件夹中，所有的代码都来自于这个 repo: traverse-folder。如果直接复制代码，则不能保证 repo 和博客间的代码同步。当 repo 中的文件发生改动时，除非手动编辑博客相应位置，否则博客中的就是旧的代码。而在博客中引用 gist，虽然 gist 的更新会直接展示在博客中，但是仍然需要手动更新 gist。

基于此，我们可以采用这样的一种思路，通过某种方式自动将 repo 中的文件同步至 gist，然后在博客中引用 gist，从而保证更新了 repo 中的文件后，博客中的代码也会自动更新。

最近在写一个管理 markdown 文件的工具 knowledge-center，需要读取指定文件夹内所有 markdown 文件。因此需要用 Node.js 来实现遍历一个文件夹内所有文件的功能。

Node.js 中提供了这些有用的 API：

• fs.readdir：异步读取文件夹
• fs.readdirSync：同步读取文件夹
• fs.statSync：同步获取文件属性

数独游戏的规则很简单，在9x9的矩阵中，每行、每列、每个九宫格中都需要填入1~9共九个数字，且不重复。

Peter Norvig 的这篇文章 Solving Every Sudoku Puzzle 详细介绍了一种解数独的方法。文中的代码基于 Python2 实现，我将其改写成了 JavaScript 的版本，项目可见 noiron/sudoku。

这篇文章中记录了我的理解而非原文的翻译，如果需要更详情的解释，可以查看原文。

问题的起因

最近需要实现这么一个功能，通过拖动来改变窗口左侧的文件列表栏的宽度。我选择了用 styled-components 来实现这个功能，并写了如下的样式组件，其中将边栏当前的宽度 width 作为属性传入。

1
2
3
4
5
6
7

const StyledFileList = styled.div<{ width: number }>`
  position: absolute;
  top: 0;
  left: 0;
  width: ${props => props.width + 'px'};
  height: 100%;
`;

但是当我快速拖动边栏时，width 变化得非常频繁，在控制台中展示了如下的 Warning。

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 编辑器中插入图片功能的实现。