赤蓝紫
DOM 节点转 Svg DOM 节点转 Svg DOM 节点转 Svg
DOM 节点转 Svg前言 使用 Canvas 实践拾色器时候接触到 dom 节点转 Svg 的功能，发现 Svg 的一些特点。domvas，作者 2012 年写的工具，dom-to-image这个比较多 star 的仓库也是基于这个实现的
2024-04-21 前端 小技能
Svg
yarn 设置 yarn-berry 启用缓存 yarn 设置 yarn-berry 启用缓存 yarn 设置 yarn-berry 启用缓存
yarn 设置 yarn-berry 启用缓存前言 公司项目用到了 yarn-berry 来启用缓存，极大地减少了流水线的时间。使用缓存后，就不再需要到网上下载依赖，而是使用缓存的依赖。而缓存的依赖是一些压缩包，安装的时候，把它解压到nod
2024-04-13 前端
yarn
npm、yarn 使用 workspaces npm、yarn 使用 workspaces npm、yarn 使用 workspaces
npm、yarn 使用 workspaces前言使用 workspaces 可以进行包的管理。简单来说就是一个项目中，可以分成多个子包，像是 UI 层，业务层等。使用 workspaces 进行分包的话，可以实现@clz/ui 是 ui 层
2024-04-13 前端
npm yarn
patatap 动效 bubbles 分析 patatap 动效 bubbles 分析 patatap 动效 bubbles 分析
patatap 动效 bubbles 分析 跟之前分析的 moon 类似，看着其实更像是为了实现 two.js 而写的 demo，但是看源代码。发现这种动效更多的是要有好思路，有好思路就能化繁为简。 前言简单封装了一下，这样后续再添加动画
2024-03-25 前端
动画 patatap
patatap 动效 moon 分析 patatap 动效 moon 分析 patatap 动效 moon 分析
patatap 动效 moon 分析前言刷到一个很 🐂 的网站patatap，好奇它的实现原理，看了下源码，记录一下分析结果。 用到的库two.js：二维绘图tween.js：补间引擎 核心就是利用 two.js 绘制图形，然后利用 tw
2024-03-18 前端
动画 patatap
MutationObserver 实现 react-fast-marquee 溢出滚动效果 MutationObserver 实现 react-fast-marquee 溢出滚动效果 MutationObserver 实现 react-fast-marquee 溢出滚动效果
利用 MutationObserver 实现 react-fast-marquee 溢出滚动效果前言 在公司的项目需求中，需要公告栏内容小于指定宽度时，不能滚动，溢出时才显示滚动效果。然后使用react-fast-marquee时，发现通过
2024-03-01 前端
JavaScript
简单探析canvas-nest 简单探析canvas-nest 简单探析canvas-nest
简单探析 canvas-nest流程 绘制流程： 遍历每一个非鼠标点，绘制点。 在遍历到每个点的时候，并且从下一个点（包括鼠标点）开始遍历，判断其他点有没有在当前点的吸附区域内。 如果在，需要画线。当前点之前的不需要遍历是因为，当前点是否
2024-02-19 前端
动画
简单探析rellax 简单探析rellax 简单探析rellax
简单探析rellax核心视差公式 1(posY - blockTop + screenY) / (blockHeight + screenY) 如上图所示，视差公式有两个边界值1和0，当值在0到1之间时，代表元素在视口中（可能只是又一
2024-02-18 前端
动画
工作的一些问题记录（一） 工作的一些问题记录（一） 工作的一些问题记录（一）
工作的一些问题记录（一）TypeScripttsconfig.js 配置路径别名12345678910{ "compilerOptions": { "module": "Node16", "moduleResolution":
2023-12-30 前端
git docusaurus
matterjs 实现弹珠台 matterjs 实现弹珠台 matterjs 实现弹珠台
matterjs 实现弹珠台webpack 构建12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"> <head&g
2023-12-21 前端
动画
i18next、react-i18next实现国际化 i18next、react-i18next实现国际化 i18next、react-i18next实现国际化
i18next、react-i18next实现国际化简单使用i18n.js 1234567891011121314151617181920212223242526272829303132333435363738394041import i1
2023-10-11 前端
i18next 国际化
利用H5实现自动选择二倍图、三倍图 利用H5实现自动选择二倍图、三倍图 利用H5实现自动选择二倍图、三倍图
利用H5实现自动选择二倍图、三倍图前言 为了更明显地看出效果，三种情况下的图片用不一样的图片来搞。 picture + -webkit-min-device-pixel-ratio用picture标签来提供source和img。并在so
2023-10-09 前端
HTML5
1 / 12