呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质视频 #科普
这个简介笑死我了
幼师级科普，笔记本电脑接口入门
@笔吧评测室:
数码 - 我们尝试用更通俗、更简单的方式，向你介绍笔记本电脑的接口
如果你觉得有一丁点用，那我们就很满意了
如果你觉得过于简单幼稚了，可以出门左拐骂我们的科普小号“极客湾”
这个简介笑死我了
幼师级科普，笔记本电脑接口入门
@笔吧评测室:
数码 - 我们尝试用更通俗、更简单的方式，向你介绍笔记本电脑的接口
如果你觉得有一丁点用，那我们就很满意了
如果你觉得过于简单幼稚了，可以出门左拐骂我们的科普小号“极客湾”
#优质博文 #前端 #react #性能优化 #tools
React 性能调优必备工具
AI 摘要：本文总结了优化 React 应用性能的常用工具，包括官方的 React DevTools（分析组件渲染时间与原因）、Why Did You Render（WDYR 记录重渲染原因）、React Scan（可视化组件更新信息）、Million Lint（检测多次渲染）以及 ESLint 静态检查规则，建议在开发过程中结合使用这些工具链，快速定位并解决性能问题，提高应用效率与流畅度。
via whitewater
React 性能调优必备工具
AI 摘要：本文总结了优化 React 应用性能的常用工具，包括官方的 React DevTools（分析组件渲染时间与原因）、Why Did You Render（WDYR 记录重渲染原因）、React Scan（可视化组件更新信息）、Million Lint（检测多次渲染）以及 ESLint 静态检查规则，建议在开发过程中结合使用这些工具链，快速定位并解决性能问题，提高应用效率与流畅度。
via whitewater
Chalk.ist 是一个开源的网页应用，用于创建高亮代码的精美图片。该项目支持多种编程语言的代码语法高亮，并提供多样化的样式自定义功能。用户可以通过简单的 UI 操作设置背景颜色、字体、间距等，还支持导出高质量的图片以便分享或展示代码片段。
- 允许用户设置代码样式参数，支持实时预览。
- 支持生成 PNG 或 SVG 格式的图片，适合不同使用场景。
https://github.com/Idered/chalk.ist
via 第116期 - 偷懒爱好者周刊 25/01/15
#优质博文 #前端 #theme #dark #css
Implementing light-dark()
AI 摘要：作者用新的 light-dark() 函数替换了暗模式。通过简单的语法，我可以在 :root 上设置颜色方案，并在需要时轻松切换颜色。这个方法利用了 CSS 的级联特性，使得所有相关组件能够重新渲染。唯一的限制是 light-dark() 只接受颜色值，而不支持线性渐变。需要将 light-dark() 的结果放入线性渐变中，这使得语法的可读性降低，但可以通过命名良好的自定义属性来解决。
via Trys Mudford's Blog
也是很早的时候看到过。
Reference: 使用 light-dark() 的 CSS 配色方案相关颜色 - web.dev
Implementing light-dark()
AI 摘要：作者用新的 light-dark() 函数替换了暗模式。通过简单的语法，我可以在 :root 上设置颜色方案，并在需要时轻松切换颜色。这个方法利用了 CSS 的级联特性，使得所有相关组件能够重新渲染。唯一的限制是 light-dark() 只接受颜色值，而不支持线性渐变。需要将 light-dark() 的结果放入线性渐变中，这使得语法的可读性降低，但可以通过命名良好的自定义属性来解决。
via Trys Mudford's Blog
也是很早的时候看到过。
Reference: 使用 light-dark() 的 CSS 配色方案相关颜色 - web.dev
Move elements around the DOM while preserving their state with moveBefore
AI 摘要：Chrome 133 中的新方法
Node.prototype.moveBefore （于 2 月 4 日稳定），用于在 DOM 中移动元素的同时保留其状态。传统的 DOM 操作（如 appendChild 或 insertBefore）可能会导致组件重新挂载，从而丢失其内部状态。而通过 moveBefore(child, referenceNode) ，元素可以高效地重新排序，适用于需要频繁更新 DOM 且需保留组件状态的场景，如 React 和 Vue 开发。这种方法提升了性能并优化了用户体验。via Bram.us
#优质博文 #前端 #react #动画 #css #新特性
还挺有意思的
Revealed: React's experimental animations API
AI 摘要：文章介绍了 React 集成实验性 View Transition API，通过浏览器原生功能实现状态切换时的平滑动画。使用
尽管提升了动画实现的效率和简洁性，但它还是一个实验性 API ，可能随时发生变化，这些早期版本的目的是发现 API 中的错误和漏洞，因此不适用生产环境，可以玩玩。
via motion.dev
还挺有意思的
Revealed: React's experimental animations API
AI 摘要：文章介绍了 React 集成实验性 View Transition API，通过浏览器原生功能实现状态切换时的平滑动画。使用
<ViewTransition /> 包裹组件，可自动处理 DOM 变化的过渡效果，并由 Motion.dev 提供封装简化操作。尽管提升了动画实现的效率和简洁性，但它还是一个实验性 API ，可能随时发生变化，这些早期版本的目的是发现 API 中的错误和漏洞，因此不适用生产环境，可以玩玩。
via motion.dev
View Transition API 是一项新的浏览器功能，允许开发人员在任意两个视图之间进行动画处理。
它非常强大，允许以前不可设置动画的值进行动画处理，例如在 flex-start 和 flex-end 之间切换justify-content。
View Transition 本质上是对包含元素屏幕截图的伪元素进行动画处理，而不是元素本身。这个过程有优点也有缺点，但最重要的是，这反过来会在视觉上冻结页面的全部或部分，使其保持静态和非交互式，直到动画完成为止。
这就是为什么 <ViewTransition /> 如此重要。它在 React 渲染周期中有它自己的hooks。因此，它可以尽可能晚地触发视图转换，同时使页面在视觉上不被冻结。
motion.dev
Revealed: React's experimental animations API - Motion Blog
React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.
