上回我们实现了 background 的效果，但是我们的代码只能达到一个填充缩放的效果，在不同的窗口大小，会导致图片的变形。如果是 background:cover 的效果则相当理想，它相当于需要我们把大的那一边居中对齐。
这里我们用到了使用图像 Using images 中的切片示例，简单的展示了如何处理：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)sx / sy / sWidth / sHeight 是对原图的操作，对于切下来的图片，dx / dy / dWidth / dHeight 是切好的图像对于画布的相对操作。
上一回我们说到用 Canvas 去渲染图像，但是在高分屏中，我们会发现，同样的大小，在高分屏上显示的并不清晰，这个 demo 表示的非常清楚：https://jsfiddle.net/csvwolf/3gvs44vw/
实际上我们在屏幕中看到的都是逻辑像素，但对于设备中元素的实际像素，是逻辑像素 * 设备像素比
，也可以叫做物理像素。
实际上在 Canvas 绘制时，也需要绘制实际像素，再进行画布的缩放。
在 demo 中已经有了方案，先绘制逻辑像素 * 设备像素比大小的画布，用 CSS 把样式大小调整，这样实际上是把 canvas 像素点压缩到指定尺寸，但是这样字会变小，我们还需要利用缩放放大设备像素比倍的尺寸，让尺寸恢复正常。
这样一个支持高分屏的渲染就做完了。
接下来我们考虑，如果我们支持完高分屏，图片像素的坐标要怎么选定：答案是要扩大像素比倍进行选择，因为画布的像素点总数没有变化。
很惭愧，一点微小的实践经验，时间有限，就说这么多。
最近有一个需求，大致是要根据图片的背景色来切换前景色，也就是根据 background-color 的色值切换 color。
虽然这么一说，那么就能抽象出以下几个问题：
如何根据 color 划分、如何改变前景的（如 icon、font）color。
Swagger 是一个完整的从设计到文档到 Mock 的 API 生态体系。
它会帮助你进行一定的设计，对于不符合的设计会报错，你需要掌握它的 yaml 文件书写规范，可以通过 OpenAPI Specification 稍作了解。
最初写文档可能会因为 yaml 语法不熟报一堆 error，习惯之后基本上也没啥问题，这样可以摒弃一些不规范的文档带来的沟通成本。
当然，今天就不介绍这一部分的信息了，在http://editor.swagger.io/#/会存在默认的示例。
昨天整了一天的 SSR，卒，总结一些经验教训仅供参考。
这就要说到天下合久必分，分久必合的道理了——最初的时候，静态页面就是静态页面，前后端 MVC，服务端渲染出页面；之后，前后端分离，后端提供 API，由客户端渲染页面；最后，我们又回到了最初的起点，不过是前后端分离后再由后端多渲染一次。
这样做的优点当然有很多啦，比如说我们要照顾爬虫（不），照顾蜘蛛，Vue 官方文档写的几点都已经很清楚了：
Chrome 插件本身也提供了计划任务，使用起来也非常简单，我们主要顺着思路来解释一下事件页面的概念。
在使用之前，我们需要清楚，alarms 的 create 只包含了定时器名和一些定时器需要的相关信息，而具体执行什么，则是由 onAlarm 监听决定的，由 alarm 参数的信息来决定执行内容：
Chrome 的 Storage 有点类似于 HTML5 的 localStorage，最初我没有注意到这个 API 的时候也是用 localStorage 存储的，但是它可以通过 storage.sync 使用浏览器自带的自动同步，在禁用 localStorage 的隐身模式，storage.sync 也能够正常的使用，此外它是异步操作，因此比阻塞和串行化的 localStorage 更快，用户的数据也能够存储为 String 以外的类型。
当然由于历史原因（需要将过去的配置进行兼容迁移），我这里还是没有直接存储对象，而是处理成字符串存储。（因为在 localStorage 中存储的就是这样，挨个处理太麻烦了 /w\）
Vue2.x 中父子组件中 props 的属性不能在子组件中改变其值然后传出至父组件了，但是有的时候也会存在一些麻烦，比如我们想要实现一些自定义组件，总是会有值的传入传出改变的，比如我希望做一个 popup，那么肯定需要根据父节点的状态来确定子节点。
尽管官方推荐双向数据流，但还是有一些方法避免报错，实现或 hack 双向数据流：
最简单的当然是通过状态管理来管理我们的变量，但对于数据流不复杂的父子节点交互而言，未免太过浪费，因此通常我们不会特别的去考虑它，尤其是 popup / checkbox 这种基础组件的时候。
Object 的值是其内存地址，只改变 Object 内部的值不改变地址将不会出现报错。
今天有一个需求，需要给原来的列表加自定义拖拽排序，之前做过一个原生的 demo，还发了一篇：HTML5 Drag & Drop 入门。
不过我们也没必要重复造轮子，在 Vue 下面有个 Vue.Draggable 可供我们直接使用。
最近在做 Chrome 插件的高级功能，突然想要试试可视化选择 key 的路径，再一想，咦，这不就是个编译原理的典型例题吗？
于是我就开始着手学编译原理了，主要参考 dalao 的以下两篇文章：
编译原理一共分为四个部分：词法分析，语法（文法）分析，语义分析，代码生成。
词法分析，就是逐个解析之后加上词性，语法分析则是将词法分析后的结果解析为抽象语法树，语义分析是在语法分析时针对具体的实例加上额外的动作解释。具体的可以见上面的链接。
在 JSON 的首页有非常完整的词法和语法分析的 token 列表甚至是流程图，所以可以省去了一些劳动。