一种新的骨架屏方案
动机最近遇到了一个实现骨架屏的需求，我大致调研了一下市面上使用得比较多的骨架屏方案，发现这些方案很多都不能满足我的需求，比如
或者
从第一幅图可以看到，骨架屏中的元素有着各自独立的动画效果，也就是说其中的“波浪”并不是从左边的元素跑到右边的元素，而是分别从每个元素的左边跑到每个元素的右边，这看起来多少有点不太优雅。
第二个例子为了避免图一中暴露的问题改用了整体色彩渐变的方式，通过去掉“波浪”效果使得元素的动画效果看起来是统一的，但这样显然让页面少了些“灵动”。
另外，这两个骨架屏组件在实现上都采用了类似的接口
可以看出，这样的接口设计，基本上决定了骨架屏中的元素只能是圆形或矩形，而且排版方式相对固定。同时动画效果也比较固定，只有渐变和“波浪”两种。
还有一种骨架屏方案是用 svg 的 clipPath 实现的，它基本上解决了上述的问题，但缺点是用起来有些门槛。很多前端同学其实并没有自己写过 svg，对 svg 技术的用法和特点也不太熟悉，所以这个方案的作者甚至专门实现了一个生成器工具，让用户通过 gui 界面来生成一套使用这个骨架屏组件的配置，可见使用门槛并不低。
那么有没有 ...
Hello Miss Chen
Welcome to my personal website 😊
如何用手机模拟激光笔
引言你是否注意到，这些年我们越来越少在演讲中看到演讲人用激光笔给观众指示所讲的内容。先说激光笔，激光笔的工作原理是射出一束激光，照射到幕布上并反射到观众的眼睛里，于是大家可以看到一个很亮的红色光点。但现在因为大尺寸屏幕越来越便宜，我们越来越少使用幕布这种传统投影显示设备了，毕竟屏幕的显示效果要更好。而屏幕为了保证良好的显示效果，往往都会在表面的玻璃上使用大量抗反射技术。这些抗反射技术的运用大大减弱了激光的反射，所以最终用户看到的红色光点就不那么显眼了，激光笔的效果大打折扣。
那么有没有可能用大家出门唯一愿意携带的手机来替代激光笔呢？我尝试了下面两种方案。
3D 模拟方案简单来说就是用手机内置的姿态传感器和加速度传感器来构建出手机和显示屏在三维空间中的方位和姿态，再以此模拟计算如果从手机发出一束激光，会照射到屏幕上的哪个位置，并在屏幕上的相应位置绘制一个红点，这样来实现手机模拟激光笔的效果。
如上图所示，假设一块屏幕的两条邻边分别平行与 X 轴和 Z 轴。当手机从 A 点沿着屏幕的一条边移动到 B 点，再从 B 点沿着屏幕的另一条边移动到 C 点，我们就可以计算出屏幕在以 A 点为原点 ...
如何绘制完美的鼠标轨迹
动机在公司的某次周会上，我吐槽了某产品中一个显示鼠标轨迹的效果实现得比较抽象：
可以看到它的实现方式是将 mousemove 事件触发时的坐标，用长宽不一的矩形连接起来，所以连接处出现了明显的“断裂”，整个轨迹也不平滑，而且其宽度和透明度的“渐变”也比较生硬，有明显断层。
而我理想中的鼠标轨迹应该是长这样的：
整个轨迹是一条相对平滑的曲线，中间不应该有生硬的“断裂”，而且轨迹的宽度和透明度都均匀变化。
当时我觉得这么简单一个效果完全应该做得完善一点，也花不了多少时间。
然而，一个周末的中午，我正在洗碗，突然脑子里灵光一闪，我意识到，在 web canvas 上要实现一个「完美」的鼠标轨迹效果似乎并没有想象的那么简单。于是我决定自己尝试一下，就有了这个项目。
问题所谓「并没有想象的那么简单」主要是要解决这几个问题：
通过 mousemove 事件获取的鼠标轨迹是离散的坐标点，而不是真实的轨迹曲线，如何通过离散坐标绘制平滑曲线？
鼠标轨迹的透明度应该是渐变的，web canvas 上并没有提供在一个 path 上做线性渐变的接口，这个效果如何实现？
鼠标轨迹的粗细也应该是渐变的，we ...
Quil-delta-enhanced 简介
Quill 是一款时下非常热门的富文本编辑器，它拥有非常强大的扩展能力，可以让开发者根据自己的需要编写插件，使编辑器支持的内容类型更加丰富。它之所以能够拥有这么强大的扩展能力，一方面是因为它的架构和 api 设计从一开始就充分考虑了扩展的需求，另一方面就是它底层采用了一种表达能力很强的的数据存储模型—— quill-delta。
quill-delta 是一个 ot 算法的实现，所谓 ot 算法是指 Operational Transformation，这个算法主要是用来解决数据协同编辑的问题，但因为算法本身并不针对特定类型的数据格式，所以其适应性很强，因此基于此算法实现的 quill-delta 表达能力也很不错。关于 ot 算法如果要展开来讲内容太多了，本文不打算涉及，大家感兴趣可以去搜索一下。
但是，quill-delta 可能更多的还是考虑简单文档类型数据的使用场景，所以它的数据基本上都是线性的，对树状结构的数据支持能力很弱，这也给他带来了很多使用场景上的限制。为了解决这个问题，我对 quill-delta 做了一些改造和扩展，于是就有了quill-d ...
PIT 编辑器编辑及协同架构说明
pit 项目使用 quill-delta 作为数据层存储文档内容数据，quill-delta 是一个基于 OT 算法的库，用 quill-delta 作为数据层，不仅能很好的保存文档数据，还可以方便的实现文档的协同编辑，即多个人同时编辑同一份文档（需要服务器支持）。
quill-delta 数据格式不仅能很好的描述完整的文档内容，还可以很方便的描述文档的修改过程，所以 pit 在进行架构设计的时候，并不仅仅考虑单机编辑的情况，同时还考虑到了协同编辑的情况，以方便以后在需要的时候实现协同编辑功能。
上图即为 pit 编辑器单机使用时的系统架构。基本流程是用户通过各类 action 修改数据 model，比如用户要在某个位置插入一个字符“A”，就会直接通过 insert 接口在 model 中插入 “A” 这个字符，然后编辑器发现某个 model 更新后，会调用其 layout 方法对内容进行重新排版，然后用 render 方法把排版后的内容绘制到 view 上，让用户可以看到自己刚刚插入的内容。
同时 model 会用 quill-delta 的 diff 算法计算出文档内容修改前后的 ...
ESLint 规则详解（二）
接上篇ESLint 规则详解（一）
前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint，极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速，是几乎每个前端项目都必备的辅助工具。可是，这么多规则，每个规则的设计出发点是什么，我们该如何选择适合自己项目的规则，又成了新问题。前不久，我所在的项目开始对前端代码进行代码规范的要求，于是我们详细梳理了 eslint 中的 230 个规则。我摘录了其中一些比较重要或特别的规则列在这里，希望能对大家的工作有所帮助。
no-sparse-arrays
使用代码质量检查工具的一个重要目的就是为了提高代码的可读性，或者说是降低其他人阅读并理解代码的难度，这条规则就是这样。当你看到这样一段代码 var userList = [‘Tiger’, ‘Kate’, , ‘Mike’]; 你真的很难确定原来写这段代码的人是不是故意要在数组中留下一个 undefined 元素，毕竟这样写并没有语法上的错误。这条规则的目的就是禁止通过这种方 ...
ESLint 规则详解（一）
前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint，极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速，是几乎每个前端项目都必备的辅助工具。可是，这么多规则，每个规则的设计出发点是什么，我们该如何选择适合自己项目的规则，又成了新问题。前不久，我所在的项目开始对前端代码进行代码规范的要求，于是我们详细梳理了 eslint 中的 230 个规则。我摘录了其中一些比较重要或特别的规则列在这里，希望能对大家的工作有所帮助。
no-debugger
一般来说，我们确实不希望代码中出现 debugger，但是，debugger 在项目的开发阶段还是非常有用的，所以我们并没有完全禁用这个关键字，而是采用了这样的配置：
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? 2 : 0
这样一来，开发人员可以方便地使用 debugger 在本地进行各种调试，同时有保证了线上代码不会有忘记删掉的 de ...
我为什么不看好微信小程序
我自认为对新技术还是比较有热情的，可对于小程序这个“新技术”，我却完全是被动的。去年9月份的时候，微信小程序开始内测，瞬间引爆朋友圈、知乎等一众分享平台。当时我大概了解了一下，觉得从技术角度上来说没啥新意，也完全没有get到网上那些人激动的点在哪里，于是也就没有花很多精力去深入了解和学习相关知识。到了11月份，我和几个小伙伴去北京参加CSDN 举办的 SDCC，我特意去听了微信专场，滴滴团队的小程序经验分享干货十足，却依然让我觉得这个“新技术”无论是从技术角度还是从用户场景角度，都没什么吸引人的地方。今年1月9日，小程序正式发布，一下子又引爆了一众网络媒体，连我身边很多非IT圈的人都在找我了解讨论小程序的事情。这次我再也坐不住了，毕竟雷布斯说过“只要站在风口猪也能飞起来”，更何况背靠腾讯的张小龙，刮起的很可能是龙卷风。于是我向公司提出申请，注册了一个小程序账号，开始尝试开发一个给公司员工使用的办公助手。接着我就遇到了一些列问题。
程序大小限制
刚刚开始研究不久我就发现，每次预览的时候，微信开发者工具都会提示你编译包的大小是多少。因为微信小程序要求编译包的大小不能超过1MB，1MB大 ...
两分钟实现安全完备的登录模块
引言2016年中，我所在的项目组将原来系统中的登录模块拆出来做成一套集中账号管理系统，并对外提供单点登录的服务。后来，公司中需要使用员工账号进行登录的系统越来越多，但这些系统都是各有各的实现方式，管理比较混乱。为了推广我们组的账号管理系统，统一公司的账号体系，我写了一篇“软文”希望在公司技术月刊上发表，便是这篇文章的来历。
随着公司业务的不断发展，各种内部管理系统也越来越多，这些系统虽然功能职责各不相同，但有一个功能模块是所有这些系统都必备的，那就是登录模块。登录模块负责生成并存储识别用户身份的数据，在有用户对系统进行操作的时候验明用户的真实身份，并进行适当的权限限制。
如何实现登录模块要实现一个基础的登录模块非常简单，大概有下面几个步骤：
实现用户注册页面，用户填写包括用户名密码的基本信息之后，将用户信息存储到数据库。
用户尝试对系统进行操作前，判断用户是否登录，如果没有就跳转到登录页面让用户输入用户名密码。
用户输入正确的用户名密码之后，验明用户身份并生成 session 和 cookie，以便在用户做下一次操作时判断用户的身份和权限。
完成上述三个步骤，一个基本的用户登录模块 ...