9月底，新轮子又来了，Vue Command Palette 是一个为 Vue 而生的快速、无样式、可组合的 Command Palette（CMDK）组件库。

我们公司的开源工具产品 Bytebase, 目前只有英文版本。社区里也有一些小伙伴也提问到了有没有中文版本的计划，答案当然是有了。我们团队正计划于下次版本发布日 12 月 23 日发布国际化支持，顺利的话将全面支持中、英版本的切换。

最近想解决个场景，在给 ve-charts 编写文档的时候，想做一个代码示例演示功能，在改动代码后可以直观的看到组件的变化。之前版本中文档是用的 docsify ，docsify 中自带了一个 vuep。vuep 就是解决我需要的场景的。不过 vuep 版本比较老了。目前还不支持 vue3 组件。所以想独立开发一个运行代码示例的组件。

最近 GitHub 为开发者带来了一个酷炫的应用，skyline.github.com，以 3D 城市模型的方式展现 GitHub Contributions 统计图，也去看看你的 GitHub Story 吧。

在学习过基础 SVG 动画原理后，如果结合我们熟悉的技术栈使用岂不是更爽。GSAP 提供了 npm 安装包，下面我们来在 Vue 项目中集成 GSAP。

想要在Web页面中绘制背景图案，我们首先可能想到的是使用 CSS，可能你也有所尝试，比如简单的渐变到复杂的网格、点阵等，SVG 中也有绘制背景图案的解决方案。

✨ SVG 闪烁动画（Blink）演示人类的视觉比较容易被变化所吸引，尤其是颜色的变化。像上世纪 80 年代的霓虹灯广告牌，我很难不被它所吸引。原理闪烁动画效果的核心在于控制元素颜色的变化，掌握好时间的控制，让颜色的变化有引人注目的显示，这样在静态的页面中，自然会吸引住用户的眼球。实战下面会使用三种方法编写一个...

平滑的变形动画真的算是 SVG 中的独门武器了。其原理很容易想到。就是不同形状之间能平滑转换，SVG 中的形状其实也是有不同坐标之间的线段绘制而成的。那么在转换形状的时候，只是在移动线段的坐标。从而达到了形状改变的效果，加之平滑的动画展现。达到想要的效果。

〰️ SVG 路径动画（Path）演示我更喜欢把这种动画叫做路径跟随动画或者轨迹动画，正如你所看到的，一个元素（物体）沿着特定的路径（轨迹）进行运动。原理CSS 属性如果想在 CSS 中让一个元素沿着路径运动，核心要用的的属性有两个，分别是 offset-path 、offset-distance 。offset-path 这个属性接受一个 path 用于指定...

✏️ SVG 描边动画（Stroke）演示查看在线版本Polygon's PlayStation 4 Reviewvivus.js - svg animation原理要实现上面酷炫的描边动画，首先我们需要了解 SVG 中实现描边动画的三个相关属性：分别是 stroke、stroke-dasharray、stroke-dashoffset。这三个属性作为外观显示属性，都可以作为 CSS 属性来使用。strokeSVG 中的...

确实如今有很多种方法让 Web 页面生动起来，我在《SVG 基本介绍》章节也对比过一些优秀的 SVG 相关类库，为什么我选择使用 GSAP 编写 SVG 动画，我们看一张 GSAP 功能全景图

一般我们使用 AI、Sketch 等矢量图设计工具导出的 SVG 文件代码相对还是比较“臃肿”的，实际在 Web 页面上使用 SVG 时候，有些标签或者属性是不需要的。比如 title / desc 标签、或者version 属性声明。

在编写 SVG 动画前，我们应该先要准备矢量文件，矢量文件包含来我们需要的 SVG 代码，通常我们不会去手写 SVG 代码，简单的形状还过得去，复杂点的形状，手写代码会变得吃力很多，我们可以借助诸如 Adobe Illustrator（简称AI）、Sketch 或者是 Inkscape 这样的专业的矢量设计工具来进行矢量图形设计，然后导出 SVG 代码。

如今可缩放的矢量图（SVG）在 Web 页面上充当着重要的角色，SVG 图标、SVG 图像、SVG 图案、SVG 动画甚至是复杂的数据可视化图表都可以由 SVG 进行绘制。

年中的时候，花了点时间在 SVG 动画开发学习上，经过不断探索总结，结合自己学到的知识，以小册子的形式沉淀下来一整套基于 SVG 进行动画开发的实践方法，我把它命名为《SVG 动画开发实战》。

年初在 TO-DO 上计划了一个任务，是以解决自身需求为目的，开发一个 VSCode 扩展。需求最近一个小需求来了，能否在不离开VSCode编辑器的情况下，查看文件或者文件夹的大小。调研恰好目前扩展市场上没有统计 ? 文件夹相关的扩展，只有统计 ? 单个文件的，比如：File Size所以还是自己造轮子吧预览试用从网页安装，Folder ...

最近发布了自己的新博客 [链接] , 博客站点设计了暗色模式风格，但是当时只是基于媒体查询 perfers-color-schema 实现的跟随系统偏好设置切换主题风格，本次带来了可用户自定义的浅色/暗色主题风格切换功能，同时兼容跟随系统偏好设置切换主题风格。

想必各位前端看官也一定做过这样的需求，给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品，让用户可以使用快捷键操作，能大大提高工具使用效率。

依赖库的更新可能会带来新的功能特性，或者解决了正遇到的一个棘手的问题、甚至是修复了重要的安全漏洞。通常来说，依赖库的升级会给我们带来更多的收益。所以我们需要一个能帮助我们管理依赖库的工具，dependabot 的出现，就解决了依赖库版本管理的难题。

建立自己的个人独立博客已经将近七年时间。从一开始的 WordPress 到更换轻量级的 Ghost 博客，又到 JAMStack 的 VuePress ，xlbd.me 也见证了我从一名后端开发者转型成为一名前端开发者。

现代浏览器的功能越来越强大，前端需要处理的业务逻辑也越来越复杂，提供良好的交互是我们一直追求的事，而我们在做的可视化报表工具，有一个重要的提升用户体验的功能，撤销 & 重做，这个功能给用户以安全感和保障，用户不会担心所做的操作以及交互会消失掉，不可追溯。

?本篇博文可能学到的知识点 更好的理解 Vue 响应式工作原理 学习 Vue 的设计模式 学习 Proxy API 使用 Proxy 实现观察者模式 现代前端开发必不可少会用到的 Vue、React 等框架，这些框架的共同之处在于都提供了响应式（Reactive）和组件化（Composable）的视图组件，组件化开发重新定义了前端开发技术栈。结合前端构建工...

Cube.js - 一个完整的开源数据分析解决方案：提供高性能的大规模数据集分析技术基础架构，同时提供前端友好的API，用于构建仪表盘报表以及其他数据分析应用，它扮演了前端与后端之间的数据层角色。

工作中一直在做一款公司内部的BI工具，将数据可视化的报表赋能给业务人员，报表配置者通过简单的拖拽操作即可生成报表。随着系统不断的完善，加上运维推广，我们积累了越来越多的用户。这时候用户体验的方方面面都体现出来了。我们也停下产品的功能迭代，将整个系统进行优化，旨在提升用户体验。以下是我对前端项目的优...

我相信每个人都或多或少接触过拖放，比如浏览器多标签页之间的可拖放排序、手机中的App可以随便拖放排序等等，Drag and Drop 已经给我们提供了更便捷、更灵活的网络应用体验。

最近在研究 lambda 演算中的 η-变换 在 JavaScript 中的应用，偶然在 stackoverflow 上看到一个比较有意思的问题。关于 JavaScript 的求值策略，问JS中函数的参数传递是按值传递还是按引用传递？回答很经典。

缘起 造了一个轮子，根据GitHub项目地址，生成项目目录树，直观的展现项目结构，以便于介绍项目。欢迎Star。 repository-tree 技术栈： ES6 Vue.js Webpack Vuex lodash GitHub API 应用涉及到了展现目录树，实现方法不可或缺的一定是递归遍历。进而开启了我对lambda演算的探索发现之旅。 探索发现之旅 本次乘坐的是 斐...

去年vue还没有升级为2.0点时候，创建了这个库，并且写了几篇简单的入门教程。发现也有一些朋友都拿这个collection来入门vue，在去年10月份vue升级2.0版本后，我一直没时间来升级这个collection。现在终于有一整块时间来做升级。借助这几个demo来感受如何从vue1.x升级vue2.x。我新建了vue2.x分支，所有的升级改动都将提交...

这篇文章的草稿放在我的Ghost博客后台由来已久了，因为我想在写一篇Vuex总结性的文章之后再发表它。这样也有个循序渐进的感觉。本文适合了解Vue.js、Vuex、以及MongoDB的小伙伴。

Vuex实际上是类Flux的数据管理架构。它主要帮我们更好的组织代码，更好的让Vue中的状态更好的通过状态管理维护起来。在实际项目运用中我们需要对组件的 组件本地状态(component local state) 和 应用层级状态(application level state) 进行区分。Vuex的作用就是汇集应用层级的状态到一处，方便管理。