最近在做服务端 canvas-webgl 渲染，探索下怎么通过自动化的方案来保证渲染效果。 探索背景 网络上对 Canvas 的渲染测试用例方案归纳有三种： 方案一：Node 记录 Canvas 的 API 操作记录，验证执行，例如：jest-mock-canvas 方案二：真实浏览器渲染比对，例如 cypress 方案三：学习 Three.js 的 e2e 测试用例，使...

PS 面板 主菜单【窗口】下开启的窗户，必备的是【属性】、【信息】、【图层】 选择图层 【cmd + 左键】 => 选择图层 【option + 滚轮】 => 放大缩小图像 属性面板 选择图层之后，可以再属性面板看到： 文本的字体大小和颜色 形状的填充色和圆角 智能对象的宽高 信息面板 有时候在【属性面板】不能看到图层的宽高信息，可以...

WebCodecs 草案：https://wicg.github.io/web-codecs/ Github：https://github.com/WICG/web-codecs 允许 Web 应用程序对音频和视频进行编码和解码的 API 在 Chrome >= 86 的版本进行体验 Chrome地址栏输入：chrome://flags/#enable-exp...

之前就了解过 babel AST 相关的知识，刚好一个业务需求需要校验与修改第三方提供的 vue 组件，用 babel-plugin 来做这件事再合适不过了。 需求背景 三方提供互动的 vue 组件，如：https://m.v.qq.com/txi/dev 三方只编写基本的样式逻辑，最后需要在 vue 组件中注入默认 props、注入 mixins 提供与引擎通信的能力、并将 ...

【即刻】走丢了很久，怀念她。想有一个渠道可以收敛日常生活中的所有通知，发现 Telegram 机器人配合 RSS 就很好的兼顾了阅读体验以及拓展支持，打开机器人对话框就能呈现一个完美的 Timeline。 方案：Telegram + 谷歌云 + flowerss-bot + RSSHub Telegram 机器人申请 在 Telegram 搜索 @BotFather，发送 /new...

ffmpeg 编译成 wasm 供浏览器使用 浏览器上传视频后无缝对接 ffmpeg 能力 Emscripten Emscripten 是一个 LLVM 到 JS 的编译器，编译出 JS 文件供浏览器使用，也可以生成 WASM 提供更好的性能体验。 环境准备 cmake、git、python2.7 Mac 环境下，只需要通过 Homebrew 安装 cmake 即可...

FMP 即 First Meaningful Paint，有意义的首屏时间 通过 MutationObserver 观察 DOM 结构变化以及视口范围计算实现 实现方案 const details = []; const ignoreEleList = ['script', 'style', 'link', 'br']; let observeDom; let firstSc...

实践一下基金定投的方案 参考地址：https://zhuanlan.zhihu.com/p/59662099 大盘 只要在大盘 3000 点以下，定投指数基金，三年内一定能赚钱，年化收益 10%-20% 定投原理 长期定投 长期定投，低位买入摊薄了持仓成本，在 ABCD 四天，各买入 1000 元，那么最后的收益将是： 份额 / 成本 * 100% - 1 =（1000 +...

最近需要用到 Mysql 来存一些前端 FusionData（前端定义的数据，存成字符串，自己 parse 后理解），选型就是 Sequelize 这个 Node.js ORM（对象关系映射） 文档：http://docs.sequelizejs.com/ 安装 yarn add sequelize yarn add mysql2 数据库连接 const Sequelize = ...

filter 的原理与参数 如何实现一个积木拖起后的加边框加阴影效果 filter 原理与参数 原理 使用了 filter 的 svg们不会将图案直接渲染为最终图形，会渲染图案的像素到临时位图中 由 filter 指定的操作会被应用到该临时区域，其结果会被渲染为最终图形 filter 标记之间就是执行我们想要操作的滤镜基元，每个基元有一个或多个输入，但只有...