cosine - 前端人の日常频道

#碎碎念 #前端 #工程化 好好好 “cargo for JavaScript” 好大的饼，等发布了康康，我对这种还是一向持积极态度的，有人弄是好事

看到有没到现场的群友觉得vite继续做这些也无法避免继续让前端工具链碎片化。

但其实现场直接有人问尤雨溪这个经典问题了，前面10个工具链不够好，又开发一个，于是我们有11个了，怎么面对这种问题？
回答是需要时间，实现再好也不会有魔法让所有想切换的人一下子换成vite+工具链；
演讲前文也提到过，在合适的时机做合适的事很重要，vite实际上从起步发展到现在，进展非常迅速，社区接受度已经很高了（已经被广泛采用或者作为大部分框架的默认脚手架），是前端工具链最有希望做成这件事的团队。

如果问我，我会说看看其他领域怎么解决类似问题的，cargo的优秀示范在前面，py那边也要uv在做类似的生态位，前端工具链当然也需要这样一个角色

#碎碎念 #前端 #新动态
https://github.com/vitejs/devtools
啪！antfu 当场开源 2333
新的大饼已经出现~

#优质博文 #webgl #r3f #性能优化 #react
Three.js Instances: Rendering Multiple Objects Simultaneously

AI 摘要：本文详细介绍了在 Three.js 中使用实例化（Instancing）技术来优化性能，同时渲染多个对象。通过实例化，可以将多个共享相同几何形状和材质的对象合并为一个绘制调用（Draw Call），显著减少 CPU 到 GPU 的通信开销，从而提升渲染效率。文章结合 React Three Fiber 和 drei 库，提供了从基础实例化到复杂场景（如森林渲染）的完整教程，涵盖了自定义着色器、实例属性调整以及多种实例集的实现方法。

1. 引言：介绍了实例化的基本概念及其性能优势。实例化允许在一次绘制调用中渲染多个共享几何形状和材质的对象，例如渲染森林中的树木、岩石和草地时，可以大幅减少绘制调用次数，提升性能。
2. 基础实例化：以渲染一千个盒子为例，展示了传统方法与使用 drei/instances 的实例化方法的对比。传统方法需要一千次绘制调用，而实例化方法仅需一次，显著优化了性能。
3. 多组实例化：讨论了如何使用 drei 的 createInstances() 函数创建多个实例集，例如同时渲染盒子和球体（一千个盒子与一千个球体），最终仅需两次绘制调用。
4. 自定义着色器的实例化：讲解了如何为实例化对象创建自定义着色器材料，包括顶点动画（如 blob 效果）。通过 instanceMatrix 属性解决位置重叠问题，确保每个实例有独立的变换。
5. 调整实例属性：介绍了如何通过 InstancedAttribute 为每个实例设置自定义属性，例如为 blob 动画添加时间偏移（timeShift），实现独立动画效果。
6. 创建森林场景：以渲染一千棵树为例，展示了如何加载 3D 模型并应用实例化技术，最终仅用三次绘制调用完成整个森林场景（包括天空盒和地面）。还通过随机位置、高度和旋转增加场景多样性。
7. 进一步阅读：提及了未深入探讨但值得关注的主题，如批量网格（Batched Meshes）、骨骼动画（Skeletons）以及变形（Morphing）与批量网格的结合。

author Matias Gonzalez Fernandez

Codrops

Three.js Instances: Rendering Multiple Objects Simultaneously | Codrops

Learn how to render thousands of 3D objects efficiently using instancing in React Three Fiber, as demonstrated in the performance-optimized basement.studio site.

#碎碎念 #优质视频 #旅居
好视频。
一口气看完，五年旅居生活大总结，浓缩版，全程干货

一口气看完，五年旅居生活大总结，浓缩版，全程干货，结尾有总结文档，全程无广，个人生活经历仅供参考。

Bilibili

一口气看完，五年旅居生活大总结，浓缩版，全程干货_哔哩哔哩_bilibili

一口气看完，五年旅居生活大总结，浓缩版，全程干货，结尾有总结文档，全程无广，个人生活经历仅供参考。, 视频播放量 418405、弹幕量 854、点赞数 19319、投硬币枚数 12233、收藏人数 21697、转发人数 5329, 视频作者 轻徙鸟, 作者简介 躺平中~
可能会冷不丁的更新?，相关视频：旅居一整年，我们发现这几个适合躺平的地方！，来看看特务都是怎么健身的，探访广东小鹤岗，辞职年轻人都搬过来住，1元钱购买力强到离谱！，31岁女生国企裸辞，一人一车开启环游中国365天之旅，通了高铁的九寨沟到…

#碎碎念
这几天去 BW 的可以看看这个攻略 确实巨详细
bw 2025 无料场馆制品攻略⭐️(场馆图在此！场馆图在此！场馆图在此！)

BilibiliWorld BilibiliMacroLink

lcn6wptqy0w5.feishu.cn

Docs

#工具推荐 #Git #任务管理 #开源 #tools
Backlog.md - 在 git 仓库中用 .md 生成并管理项目看板 | GitHub

AI 摘要： Backlog.md 是一款面向 git 用户的本地项目看板工具，通过将任务以 Markdown 文件形式存储在 git 仓库中，实现项目管理和代码管理的无缝结合。它支持命令行和网页两种操作模式，无需云端和账号，注重数据隐私和本地协作，适合对安全性和离线工作有需求的开发者或团队。同时，它集成了 AI 助手、跨平台支持等功能，开源且免费。

小众软件

Backlog.md - 在 git 仓库中用 .md 生成并管理项目看板 - 小众软件

Backlog.md 是一款专为使用 git 的开发者设计的本地项目看板工具，拥有命令行与网页版两种操作模式。

#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future

AI 摘要：本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术，显著提升了 Chrome 在 Motionmark 1.3 测试中的表现，同时为未来的图形改进奠定了基础。通过支持现代图形 API（如 Metal、Vulkan 和 D3D12）、多线程设计以及深度测试等创新技术，Graphite 不仅提高了渲染性能，还优化了用户体验，减少了滚动卡顿和页面加载等待时间。

1. Skia 在 Chrome 中的历史：
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史，从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异，但因其以 OpenGL 为中心的设计，难以充分利用现代图形 API 的优势，因此团队开发了 Graphite。

2. Graphite 的成果：
• 在 Macbook Pro M3 上，Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标，如交互到下一帧时间（INP）、最大内容绘制时间（LCP）、图形流畅度（掉帧百分比）以及 GPU 内存使用等。

3. Graphite 与 Ganesh 的区别：
• 现代图形 API：Graphite 利用 Chrome 的 WebGPU 实现 Dawn，支持 Metal、Vulkan 等现代 API，减少维护负担并提升多线程和 GPU 计算能力。
• 2D 深度测试：通过深度测试减少过度绘制（overdraw），优化不透明和半透明对象的渲染顺序，提升性能并降低移动设备功耗。
• 多线程设计：Graphite 的 API 支持多线程，利用独立记录器（Recorders）在多线程上生成记录（Recordings），减轻主线程负担，减少卡顿和延迟。
• 性能悬崖与管线编译：Graphite 减少渲染管线数量，避免因管线编译导致的卡顿，确保复杂内容与简单内容渲染效率一致。

4. 未来计划：
• 多线程光栅化：计划将光栅化任务分配到多线程，进一步提升性能。
• 减少简单内容的 GPU 内存：通过重新发布记录（Recordings）优化滚动，减少不必要的 GPU 内存分配。
• GPU 计算路径光栅化：探索 GPU 计算路径光栅化技术，提升视觉质量和性能，替代传统的 MSAA 和 CPU 光栅化。

author Claire Charron

Chromium Blog

Introducing Skia Graphite: Chrome's rasterization backend for the future

Today's The Fast and the Curious post covers the launch of Skia's new rasterization backend, Graphite, in Chrome on Apple Silicon Macs. Gr...

#demo #前端 #webgl #r3f
Animations with React-Three-Fiber
Demo | GitHub

Bring static visuals to life with rotating textures, 3D geometry, and smooth motion powered by React Three Fiber.
使用旋转纹理、3D 几何图形和由 React Three Fiber 驱动的平滑运动，将静态视觉效果赋予生命力。

0:13

Media is too big

VIEW IN TELEGRAM

#demo #前端 #css #动画 #设计
经典键盘的实现！很酷

jhey ʕ•ᴥ•ʔ (@jh3yy)：keypad w/ CSS + <img> layers 🧑‍🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in ✨
bonus: clip-path to clip the hit area + filter to style the keys 🤙

https://fixupx.com/jh3yy/status/1943132402315886934

不过这个没给demo链接，只是给了思路和展示。
代码什么的可以看看这个类似的。
Twitter | Github

#碎碎念 #美食
每次回家吃到妈咪做的石锅鸡蛋就是最幸福的！！太好吃了！！太下饭了

#优质博文 #前端 #JavaScript #编码问题 #字符串处理
JavaScript string slice() considered harmful | Attio

AI 摘要：本文探讨了 JavaScript 中 string.slice() 方法在处理 Unicode 字符串时可能导致的问题，特别是在处理包含表情符号等复杂字符时会意外截断代码单元，导致数据传输和解码错误。通过一个实际案例（Attio 的 CSV 导入工具与 Google Spanner 数据库交互时出现的 gRPC 错误），作者深入分析了 JavaScript 字符串的 UTF-16 编码机制、代码点和代码单元的区别，以及如何使用更安全的方法（如基于代码点的迭代）来避免这类问题，最终提供了解决方案并修复了错误。

1. 引言：CSV 导入工具的背景与问题
• 讲述了 Attio 的 CSV 导入工具每月处理大量数据，数据来源多样且不可预测，容易遇到边缘情况。
• 发现了一个 gRPC 错误，涉及 Google Spanner 数据库，错误提示请求协议无效。

2. 问题复现与初步分析
• 通过日志查询和客户提供的 CSV 文件复现了问题。
• 在调试过程中，注意到一个字符串截断函数 truncateSortableValue ，使用 slice() 方法截断字符串。
• 发现当 slice() 截断到表情符号（如 🇬🇧）中间时，得到的是不完整的代码单元，导致后续错误。

3. 深入理解 JavaScript 字符串与 UTF-16 编码
• 介绍了 JavaScript 字符串基于 Unicode 和 UTF-16 编码，解释了代码点（code point）和代码单元（code unit）的概念。
• 指出 UTF-16 使用 16 位代码单元存储字符，常见字符占一个单元，复杂字符如表情符号可能占两个单元。
• 讨论了字形簇（grapheme cluster），如表情符号由多个代码点组合而成，截断时需特别注意。
• 强调 string.slice() 是基于代码单元操作，而非代码点，可能导致截断不完整字符，影响数据编码（如传输到数据库时的 UTF-8 编码问题）。

4. 问题根源：编码与解码失败
• 分析了将不完整代码单元编码为 UTF-8（如使用 Buffer.from 或 protobufjs）时，解码端无法正确还原字符串，导致错误。
• 虽然无法直接调试 Google Spanner 的闭源代码，但通过示例证明了这种编码失败是问题的根本原因。

5. 解决方案：基于代码点的安全截断
• 提出了使用 [Symbol.iterator]() 或扩展运算符来基于代码点而非代码单元进行字符串操作。
• 提供了一个新函数 safeHead()，安全地获取字符串前 n 个代码点，避免中途截断代码单元。
• 修改了原截断函数 truncateSortableValue，使用新方法解决问题，最终通过拉取请求修复了导入工具的错误。

author Attio 团队 James Mulholland

Attio

JavaScript string slice() considered harmful | Attio

Understanding UTF-16 and protobuf encodings to resolve a bug in our CSV importer.