Now vibe coding, so learning hammer FE ?
《开源健身数据集：1324条多语言结构化运动数据与开发者脚手架》
标签：#数据科学 #健身 #开源数据集 #多语言 #开发者工具
总结：
这是一个面向开发者的健身运动结构化数据集，收录1324条运动记录，涵盖部位、器械、目标肌群等元数据，并提供英语、西班牙语、意大利语、土耳其语、俄语和中文六种语言的步骤说明。仓库还附带开箱即用的交互式浏览器和开发者配置向导（含SQL建表、API代码模板、LLM提示词），可快速搭建健身类应用后端。运动媒体文件（图片/GIF）因版权争议未包含，仅保留原始媒体ID引用。
文章要点：
1. 数据规模很扎实：一共1324条运动记录，覆盖从手臂、腿部到背部、核心等10个身体部位，器械类型也多达12种，其中约25%是自重训练，居家健身App也能直接用
2. 多语言支持很贴心：每条运动都配了英、西、意、土、俄、中六种语言的步骤说明，做国际化健身产品不用自己翻译了
3. 开发者体验拉满：仓库里塞了一个纯前端的运动浏览器（index.html）和一个配置向导（setup.html），能直接生成SQL建表语句、多语言API调用代码，还能一键复制LLM提示词让AI帮你搭后端
4. 版权处理很谨慎：图片和GIF动画因为存在多方权属争议，仓库里故意没打包，只留了media_id，需要的话可以通过原始CDN地址自行获取，避免法律风险
5. 数据结构很规范：JSON格式，字段包含ID、名称、部位、器械、目标肌群、协同肌群、六语说明、媒体引用等，还提供了TypeScript类型定义，类型安全直接拿捏
URL：https://github.com/hasaneyldrm/exercises-dataset
标签：#数据科学 #健身 #开源数据集 #多语言 #开发者工具
总结：
这是一个面向开发者的健身运动结构化数据集，收录1324条运动记录，涵盖部位、器械、目标肌群等元数据，并提供英语、西班牙语、意大利语、土耳其语、俄语和中文六种语言的步骤说明。仓库还附带开箱即用的交互式浏览器和开发者配置向导（含SQL建表、API代码模板、LLM提示词），可快速搭建健身类应用后端。运动媒体文件（图片/GIF）因版权争议未包含，仅保留原始媒体ID引用。
文章要点：
1. 数据规模很扎实：一共1324条运动记录，覆盖从手臂、腿部到背部、核心等10个身体部位，器械类型也多达12种，其中约25%是自重训练，居家健身App也能直接用
2. 多语言支持很贴心：每条运动都配了英、西、意、土、俄、中六种语言的步骤说明，做国际化健身产品不用自己翻译了
3. 开发者体验拉满：仓库里塞了一个纯前端的运动浏览器（index.html）和一个配置向导（setup.html），能直接生成SQL建表语句、多语言API调用代码，还能一键复制LLM提示词让AI帮你搭后端
4. 版权处理很谨慎：图片和GIF动画因为存在多方权属争议，仓库里故意没打包，只留了media_id，需要的话可以通过原始CDN地址自行获取，避免法律风险
5. 数据结构很规范：JSON格式，字段包含ID、名称、部位、器械、目标肌群、协同肌群、六语说明、媒体引用等，还提供了TypeScript类型定义，类型安全直接拿捏
URL：https://github.com/hasaneyldrm/exercises-dataset
GitHub
GitHub - hasaneyldrm/exercises-dataset: 1,324-exercise fitness dataset — animation GIFs, 180×180 thumbnails, muscle-group & equipment…
1,324-exercise fitness dataset — animation GIFs, 180×180 thumbnails, muscle-group & equipment data, and step-by-step instructions in 6 languages. The exercise data layer behind the LogPress...
《TanStack Router 与 Query 的最佳实践》
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
tkdodo.eu
TanStack Router and Query
TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ...
《利用浏览器Canvas进行数据压缩》
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
