赤蓝紫

工作中的那点事之 ReactPropsWithChildren Props 声明带有 children 的 props。 123export type AProps = PropsWithChildren<{ onPress: (

2025-03-10 前端

工作中的那点事 React

图片优化：js 生成渐进式图片定义渐进式图片：渐进式 jpeg。所以需要注意：如果是透明底的 png 图片，生成渐进式图片的时候，就不是透明底了。一般的图片都是自上往下加载的，但是还有另一种渐进式图片（先加载模糊图片，然后逐渐清晰）以

2025-03-03 前端

优化

laxjs使用前言体验一下各种动画库的使用。使用laxjs跟一些常见的动画库(animejs、gsap)的使用方式差异较大。animejs它们主要是获取dom元素，然后设置终点的样式，来进行动画。如： 1234anime({ ta

2024-09-22 动效

动效

Svg 三角形字体切换动效前言之前在http://species-in-pieces.com/上就看到过三角形组成的动物，切换动物时的动效比较炫酷。之后又在 codepen 上看到Triangles - deer or rabbit上看到鹿

2024-09-01 前端

动画

搭建一个简易的Playground前言看一个动效的效果时，看到源码用到了ace实现了代码实时效果。（案例是直接使用eval执行代码，但是看了一下codepen的html结构，所以自己利用ace+iframe来搞一个简单的Playground

2024-08-18 前端

Playground

canvas 渐变动效前言看到一个渐变动效的库granimjs的一个效果，简单看了下源码，感觉还挺有意思的，自己捣鼓一个简单版玩玩核心利用canvas的createLinearGradient创建渐变，以及addColorStop添

2024-08-02 前端

Canvas 动画

文字粒子动画效果前言对动画特效比较有兴趣，之前逛网站时看到的效果，之前看到了实现的文章，稍微学了一下，记录一下。shape-shifter 流程获取文字的像素点信息首先，利用配置的文字信息，绘制文字到虚拟的 canvas 中。把虚

2024-05-30 前端

animate

使用 tiptap 实现简易富文本编辑器前言在工作中遇到实现富文本编辑器的功能，最后是使用了 tiptap 来实现，记录一下。简单使用直接看官网的快速开始教程即可，安装@tiptap/react、@tiptap/pm、@tiptap/

2024-05-06 前端

tiptap 富文本

b 仓库触发 a 仓库的流水线通过repository_dispatch方式，并且添加types参数，b 仓库通过POST方式添加参数event_type实现。 a 仓库流水线 12345678910name: aon:workflow_d

2024-05-05 小技能

Github

拾色器的使用、实现前言调研取色器组件的时候，看到原生input:color就有拾色器功能，觉得有点意思，稍微“玩”一下。 EyeDropper 实验性技术，兼容性不是特别好。使用方法很简单，实例化一个EyeDropper对象，调用o

2024-05-03 前端

Canvas

DOM 节点转 Svg前言使用 Canvas 实践拾色器时候接触到 dom 节点转 Svg 的功能，发现 Svg 的一些特点。domvas，作者 2012 年写的工具，dom-to-image这个比较多 star 的仓库也是基于这个实现的

2024-04-21 前端小技能

Svg

yarn 设置 yarn-berry 启用缓存前言公司项目用到了 yarn-berry 来启用缓存，极大地减少了流水线的时间。使用缓存后，就不再需要到网上下载依赖，而是使用缓存的依赖。而缓存的依赖是一些压缩包，安装的时候，把它解压到nod

2024-04-13 前端

yarn