最后更新于 2023-11-11 21:56:00
ECharts 的 UniversalTransition 动画提供了一些复杂场景下过渡动画的解决方案，这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画，在业内比较熟知的类似技术则是 SVG Morph 动画。
查看以下 ECharts 官方示例：
最后更新于 2023-07-22 23:00:00
不管是在学校还是工作后，记录一直是个很好的习惯，方便积累经验并阶段性进行回顾总结。因此，对于大部分人来说，有一个适合自己需求，同时免费又好用的笔记应用或者知识管理工具是很难得的。
最后更新于 2022-11-15 00:47:00
大概早在一年前就了解到 Meta(Facebook) 发布的一款专门用来构建文档站点的 Docusaurus 工具库，那时候 Docusaurus 就已在社区中受欢迎起来，随着这一年多来看到很多开源项目的文档站点都基于 Docusaurus 构建，便下定决定要找机会尝试一下。于是，前不久在团队内对基建做改进时，对于文档这一块的迭代了解了很多热门的社区方案，一直举棋不定，在某天闲下来时就准备基于 Docusaurus 做一个尝试，最终发现效果还不错，而且迁移起来也几乎没有什么成本。
基于对 Docusaurus 这次尝试留下的好印象，便顺带深入了解了一下，发现还支持博客站点，而且功能很丰富，最吸引人的便是 可以借助插件构建本地的离线全站搜索功能。说干就干，找了个周末就把自己的博客站点完全迁移到基于 Docusaurus 构建的站点了。当然，迁移过程是挺顺利的，而且也并没有想象中的麻烦，只是以前的博客页面都是自己写的，而现在基于 Docusaurus 的博客页面是开箱即用的主题，尤其是归档页面并不太符合期望，准备自己重新实现归档页面。经过查看文档，发现 Docusaurus 确实提供了重写归档页面的机制。不过，在重写之前，我心里突然发出一个疑问：我只能在已有的路由下（/archive）重写页面吗？博客的数据解析后是如何存储并传递给页面组件的呢？为了一探究竟，我便带着这些问题对 Docusaurus 的路由机制做了简单的探索，总算是了解了 Docusaurus 是如何以巧妙的方式做到这些事情的。
最后更新于 2022-08-13 02:46:00
在发布 npm 包时添加对 TypeScript 类型定义文件的支持会让用户的使用体验增色不少，TypeScript 官方提供了 tsc --emitDeclarationOnly 命令用来生成类型定义文件（.d.ts）。但是，该命令会同时执行类型检查，遇到错误时会报错中断命令行进程，这就使其无法直接集成在 CI 环节在发布 npm 包时自动执行生成类型定义文件的操作。当然，一个解决办法就是解决掉代码中所有的类型检查错误即可，既然讨论到这个问题，必然不会花费额外精力去解决一些历史遗留问题。
最后更新于 2022-08-06 00:21:00
前端工程化是在做与业务开发完全不同的事情，旨在解决软件工程领域与开发者密切相关的问题，通常会将其与基建开发、DevOps 放在一起讨论。前端开发是复杂的，其结合了 HTML/CSS/JavaScript 3 种语言，甚至还有很多其超集，没有开箱即用的工具链，不像 Java Web 开发、Android 开发等等有官方或者商业领域非常成熟的工具可以利用，一切都源于开源社区的从 0 开始构建。正因如此，前端工程化领域百花齐放，开放与创新展现的淋漓尽致，这也是前端开发者了解学习软件工程的机会。
最后更新于 2022-05-03 20:38:00
最近在做前端可视化相关的东西，在完成动画效果时，遇到一个不是很好处理的问题，需要让一个元素在画布上以曲线的轨迹进行运动。因为动画这块之前基本也没有怎么接触过，做的也都是简单的线性动画效果，所以碰到这个需求点的时候觉得是有点难度的。
其实，要真的实现按照一定曲线轨迹运动的效果倒也不难，毕竟圆、椭圆方程在平时做布局计算的时候用的也挺多的。但是，用圆或者椭圆计算曲线相当于是找了个特殊场景，不具备通用性；另一方面，说到曲线的绘制，贝塞尔曲线是绕不开的，这也是非常值得考虑的方案。
最后更新于 2022-05-03 16:43:00
一直以来，开源精神被开发者所推崇，开源项目为开发者提供了不用付出除时间以外任何成本就可以学习前沿技术的最佳途径，另一方面，我们应该思考开源为何会成功，在全球开发者参与协作的情况下代码仓库为何能保持整洁、不出现大规模冲突而奔溃，上下游依赖如何管理，这背后有既定的规范进行强约束，也有一系列社区工具来完成复杂而有价值的工作。所以，从参与或者维护开源项目的角度来看，这些社区公认的最佳实践值得我们了解，学习这些东西也能在一定程度上提高我们管理项目的能力。
最后更新于 2022-01-09 17:36:00
TypeScript 作为 JavaScript 的超集，为 Web 开发带来了强类型语言和类似代码智能提示这种良好的开发体验，而代码提示依赖于类型定义文件。类型定义文件的发展也经历了一个逐步演变的过程，从最初基于 JavaScript 编写的 npm 包，通过社区方案来引入类型定义包，再到目前多数模块基于 TypeScript 编写并在发布时带上类型定义文件这种最佳方案，开发者体验得到进一步的提升。
不过，在使用类型定义文件的过程中我们通常需要和类型定义进行交互，大多数场景可以通过泛型来解决；而有一个典型场景就是需要我们扩展第三方库的类型定义，避免在多个文件中编码时都要引入类型定义的麻烦。可能不是很好理解，在这里通过一个实际的例子就可以解释清楚。
最后更新于 2021-12-08 21:12:00
Web 网页为了保证在多个平台和低中高端设备上的体验稳定性和一致性，通常会做 Polyfill 以保证兼容性。
然而，兼容性问题本身是个难题，Polyfill 也并非很好处理，所以在技术演变的过程中，社区达成了一致，有一个主流的方案，大家共同来使用和维护。当下社区的主流方案则是基于 core-js，另一方面， 利用 ESLint 插件则可以做到自动检测代码中需要添加 Polyfill 的 API。
core-js 只是解决了 JavaScript 的兼容性问题，Web 网页还有 CSS / HTML / Web API 的兼容性问题，处理这些问题的过程中，必然会存在 大量相似的逻辑，比如目标设备的检测、目标设备的 API 支持情况统计。当然，社区也给出了非常好的方案，下面就来了解一下。
最后更新于 2022-05-07 21:57:00
Web 前端项目出于加载性能优化和安 全考虑，在生产环境部署的代码是经过混淆和压缩的，对于利用生产环境收集到的错误堆栈信息要进行调试是非常具有挑战性的。理想情况下，应该在生产环境收集错误堆栈信息，然后映射到源码进行调试。恰好，SourceMap 文件提供了这个机制，可以将编译（压缩）后的代码映射到源代码中。