大赚万万亿

原创 motion利用layoutId做补针动画

是。

原创 motion的逐个动画示例

在一个设置，可以让，而不是同时播放。

原创 vscode备份还原插件和设置

不要在cmd中使用，而是在PowerShell中还原。Mac备份设置和插件列表。

原创 postgreSQL设置自增id的起始值

设置自增id从4000开始。

原创 supabase备份数据库中某个schema的方法

备份数据库第一步选择支持ipv4的Transaction pooler免费版supabase未发现可以整体备份的选项，只能单个table备份，为了备份schema,只能在本地计算机里执行pg_dump命令第二步下列命令二选一。

原创 supabase外键查询语句

下面2段查询语句效果一样，!wp_postmeta_post_id_fkey似乎并不重要。因为supabase会自动寻找外键。但一切的前提是需要先去数据库创建外键。

原创 supabase创建安全策略,待续

允许用户查看自己的数据（uud 字段等于当前用户ID的数据）- 允许特定管理员查看所有数据。将上述2个语句合并成一个。

原创 nextjs一些笔记(持续补充)

下面代码如果在layout.tsx中使用,只能获得params,但如果放在page.tsx,那么可以获得params和searchParams。generateMetadata获得的参数。layout.tsx,只有params。

原创 nextjs路由[[...slug]]与[...slug]的区别

特性[...slug]是否必需✅ 必须提供参数❌ 参数可选匹配根路径❌ 不匹配✅ 匹配使用场景必须有参数的页面可同时处理首页和子页面参数处理总是数组可能是 undefined选择哪个取决于业务需求：是否需要单独处理"根路径"的情况。

原创 supabase的api示意图

下面的supabase方法都是由import { createServerClient } from '@supabase/ssr'生成。没有claims,就是null。未登录用户就是null。

原创 supabase新建schema后,无法查询到数据的解决办法

其实官方给出解决办法,只是大家没找到第一步去添加新增的schema第二步在sql中运行如下代码细节:把xxmyschemaxx改成你新建的schema名字。

原创 axios响应发生错误时的情况列表

→ 请求没有得到响应（网络、CORS、超时等）→ HTTP 状态码（如 404、500）→ 判断是否主动取消请求。可以让所有接口都返回。

原创 @tanstack/react-query中isLoading,isFetchingisRefetching的区别

tanstack/react-query中isLoading,isFetchingisRefetching的区别。

原创 用selectNodeContents计算文字行数

如果文字内没有改变文字大小的标签和样式,那么range.getClientRects()返回的长度就是文字所在div里的行数,否则会有误差。

原创 document.createTreeWalker获取文本数的好方法

是 DOM 规范中用于​​的高级方法，它返回一个TreeWalker对象，能够以深度优先（默认）或其他顺序遍历 DOM 子树，并支持按节点类型、名称等条件过滤节点。

原创 win平台，导出postgreSQL数据给supabase

如果数据很多，那么在网页版supabase执行sql的插入数据命令时，会报错，于是只能曲线救国，每次导出一个表的数据，然后插入到supabase中。遇到的问题：免费版supabse不支持ipv4地址连接数据库并导入数据，而我没有ipv6,所以只能逐个导出。将本地数据库wp1020下的schema为hghghg的wp_posts表导出为csv,包含表头行。最近想把wordpress的数据导出,并存放到supabase的PostgreSQL中。导出某表的值为sql文件(不带结构)(若有ipv6,可以试试)

原创 win平台，用pgloader将mysql的数据导入到postgresql

以下操作皆在windows平台💡dimitri就是 pgloader 的作者 Dimitri Fontaine。安装完毕后点击action箭头不会执行，属于正常现象之后不用.load脚本文件，而是用下方命令直接搞定(无需脚本文件)

原创 docker安装php+apache

src文件放一个index.html或wordpress文件即可。在项目的根目录中执行下方命令，等待片刻即可成功访问。同时在docker的gui界面也可以看到成功启动。注意yml文件严格重视缩进，要用空格缩进。

原创 Motion动画的几个例子

viewport={{ once: true, margin: "10px" }}中的margin支持正负的百分比和px。whileTap="tapsss"也表明key的值可以自定义，whileTap也可以接函数。controls.start的实参不仅可以是对象，也可以是字符串（比如本文的例子"都是执行一个函数，里面用 controls.start开启动画。）会直接传递给子元素，子元素通过匹配。细节：非直接子元素也是可以有动画效果。利用whileInView的错开动画。触发动画的方式之点击按钮。

原创 tailwindcss出现could not determine executable to run

在tailwindcss v4版本中,使用如下命令会报错报错信息:npm ERR!于是用chatGPT查答案,给出的一些方法看似合理,但实际都是v3版本的解决方案最后在overflowstack中找到了答案,特此记录overflowStack给的回答TheinitThe use of@config。

原创 useLayoutEffect的执行顺序

渲染阶段（Render Phase）执行函数组件（也就是重新计算 JSX）收集到所有的useEffect回调React 还没真正更新 DOM（只是准备好 Virtual DOM）提交阶段（Commit Phase）React 把变更同步写入真实 DOM此时浏览器还没开始绘制回调 → 先执行浏览器开始绘制（paint）useEffect回调 → 后执行在组件 JSX return 之后、DOM 更新之后、浏览器绘制之前执行。它常用于读取或同步修改 DOM 布局，比如计算尺寸、滚动位置等。

原创 flex-basis与width优先级，flex-shrink收缩说明

原创 零宽字符显示与书写

​名称Unicode用途​​U+200B无视觉宽度，但可换行​​U+200C防止字符连写（如阿拉伯语）​​U+200D强制字符连写（如 Emoji 组合）​​U+2060防止换行​​U+FEFF文件开头标识编码可在vscode中输入node,输入一些字符复制后在vscode中粘贴,vscode会自动提示不可见字符。

原创 我理解的scrollHeight,clientHeight,offsetHeight

offsetHeight=height+paddingTop+paddingBottom+borderTop+borderBottom,不包括任何方向的margin。scrollHeight=clientHeight+scrollTop(子元素若有垂直方向的margin,padding,都会增高scrollHeight)如果有滚动条,那么height值自身会割掉一些值,转移给滚动条,割掉的值成为滚动条的高度。是否有滚动条只影响clientHeight的值,

原创 react组件分离举例,搭配useQuery,useMutation

分离前分离后。

原创 react用useImages读取图片,方便backgroundImage

注意import.meta.glob中定义的文件夹路径,视情况而定,可能是assets或images。

原创 react合成事件大全,如onClick,onDrag

【代码】react合成事件大全,如onClick,onDrag。

原创 Promise的allSettled,all,race

如果有些请求可能会失败，但你不想让一个失败就中断所有，还想知道每个请求最终是成功还是失败了，用Promise.allSettled。只要数组里有一个Promise完成（无论是成功还是失败），它就立刻完成，结果或错误就是那个最快的Promise的。完成的Promise。只有数组里所有的Promise都失败了，它才失败。适合需要尝试多个途径，只要有一个成功就行。下列代码证实了:无论是for或是for of循环, 都会等上一个请求彻底完成，才会开始下一个。

原创 关闭chrome自带的跨域限制,简化本地开发

4. 点击“确定”后等于在桌面为用户在自己电脑创建了一个chrome的私有化浏览器，以后用此图标打开的浏览器将没有跨域限制。在开发时为了图方便,简化本地开发,懒得去后端配置允许跨域,那就可以用此方法。1. 右键桌面上的Chrome浏览器图标，选择“创建快捷方式”到桌面。2. 在新创建的快捷方式的图标上右键，选择“属性”。注意：与前面的chrome.exe"之间留一空格。

原创 passive:true意味着绝不会​调用 preventDefault()，可放心立即执行默认行为(滚动)

（因为这些事件通常不需要阻止默认行为）​ 是否要执行默认行为（如滚动），你可以放心地立即执行默认行为"（因为确实需要条件性地阻止滚动）您的滚动控制逻辑会失效。

原创 mac中创建 .command 文件，执行node服务

1.​.command​用文本编辑器创建文件，命名为2.​​​现在双击文件会自动在终端中执行脚本。

原创 HTTP状态码滥用指南：全栈开发者的REST API最佳实践

HTTP状态码是由Web服务器返回的3位数字，用于指示客户端请求的结果。它们分为五个类别：•1xx（信息性）- 请求正在处理中•2xx（成功）- 请求已成功处理•3xx（重定向）- 需要进一步操作•4xx（客户端错误）- 客户端请求有误•5xx（服务器错误）- 服务器处理请求时出错在RESTful API中，选择正确的状态码可以提高清晰度，帮助调试，并与行业标准保持一致。

原创 使用Mac自带的图像捕捉导出 iPhone 相册

选中想导出的照片（或全选），点击右下角的“将 iPhone 连接到 Mac。打开 Spotlight，输入。左侧栏选择你的 iPhone 设备。等待加载照片缩略图（可能需要几秒）在 iPhone 上点击“

原创 一个在中国,一个在英国,输入Date.now()和toISOString,结果有何区别?

如果一个人在中国,一个在英国,他们都输入Date.now(),看到的值是一样的吗?会误差8小时吗Date.now()返回的是，也就是。，不受本地时区影响。无论你在中国（UTC+8）还是英国（UTC+1/0，夏令时），这个值都是一样的。

原创 charles更新过期证书的方法

可先删除原本过期的证书。在信任处选择始终信任。

原创 Gridstack.js堪比dnd的拖拽库

Gridstack.js帮助开发人员只需几行代码即可创建美观、可拖动、可调整大小的响应式布局。Gridstack只能在第一层自由拖拽dnd拖拽时可内部嵌套。

原创 移动端图片浏览插件

原生 JavaScript，或通过 React、Vue 等集成。支持多图浏览（通过 Viewer.group 实现）。：默认不支持滑动切换，需要手动配置 group 方式。：原生 JS、React、Vue、Angular 等。：需要完整图库功能，或想自定义交互和动画效果。支持移动端手势缩放、滑动切换、双击放大等。：需要更细致控制图像行为（旋转、拖动等）。有插件机制（如视频、缩略图、全屏等）。：v5+（模块化、可定制性更强）支持点击放大、旋转、缩放、移动。支持缩放、滑动、多图切换。移动端和桌面端兼容良好。

原创 轻量级swiper插件推荐

相比 Swiper 更轻但功能覆盖主流场景。支持移动端触控、无限循环、拖拽、分页等。：自定义需求高、需要自己控制样式/UI。：约 5KB (gzipped)：约 6KB (gzipped)：内容滚动型轮播，产品卡片等布局。高度可定制（但无默认 UI）响应式，支持触摸拖动。

原创 vite配置一个css插件

该例子只是替换一些css,具体内容不重要,主要看形参的运用。vite.config.js的plugins执行函数。

原创 nodejs读取图片头信息

为了防止内存爆炸,需要nodejs读取图片的meta信息。