呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
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.
#优质博文 #前端 #css #svg
如何手搓SVG半圆弧，手把手教程
AI 摘要：文章详细介绍了SVG中的圆弧指令的参数含义、使用方法及其数学原理。文章首先解析了
via 张鑫旭
如何手搓SVG半圆弧，手把手教程
AI 摘要：文章详细介绍了SVG中的圆弧指令的参数含义、使用方法及其数学原理。文章首先解析了
M…A 命令的基本结构，包括起点、终点、半径、旋转角度、大弧/小弧标志以及顺时针/逆时针绘制标志。接着，通过图例展示了不同参数组合对弧线形状的影响。重点部分解释了如何通过几何公式计算弧线起点和终点，以及圆弧的半径与角度关系。文章还分享了实际开发中绘制圆弧或圆形的技巧，如利用圆弧指令实现高效的矢量图形绘制。via 张鑫旭
#视频 #无限暖暖
【无限暖暖混剪】像花一样~肆意绽放~不去管 有没有人欣赏~
@余弦Cocos:
GMV - 就觉得这首歌很棒加上想把给女儿拍的照片视频都发一下所以用我贫瘠的剪辑水平搓了一下呜呜呜呜呜呜呜呜呜呜
其实拍的横屏照片更多，等回头有空了再剪一下横屏的版本，有几张特别喜欢的w
bgm 是 橘子汽水 的 像花一样
【无限暖暖混剪】像花一样~肆意绽放~不去管 有没有人欣赏~
@余弦Cocos:
GMV - 就觉得这首歌很棒加上想把给女儿拍的照片视频都发一下所以用我贫瘠的剪辑水平搓了一下呜呜呜呜呜呜呜呜呜呜
其实拍的横屏照片更多，等回头有空了再剪一下横屏的版本，有几张特别喜欢的w
bgm 是 橘子汽水 的 像花一样
#优质博文 #前端 #UX #设计
Should navigation bars be sticky or fixed?
AI 摘要：文章对比了粘性导航和固定导航的特点与适用场景：粘性导航随滚动停留顶部，适合长页面，提高可用性但占空间；固定导航始终在顶部，增强一致性但可能影响设计。作者建议根据用户需求和内容选择合适方案，并注重响应式设计和用户体验优化。
Should navigation bars be sticky or fixed?
AI 摘要：文章对比了粘性导航和固定导航的特点与适用场景：粘性导航随滚动停留顶部，适合长页面，提高可用性但占空间；固定导航始终在顶部，增强一致性但可能影响设计。作者建议根据用户需求和内容选择合适方案，并注重响应式设计和用户体验优化。
LogRocket Blog
Should navigation bars be sticky or fixed? - LogRocket Blog
Choosing between sticky and fixed navigation isn’t just a design decision — it’s a strategic one. In this blog, we talk about how each type impacts usability, engagement, and conversion rates.
昨天
https://pic.cosine.ren/
可以先用啦，最核心的简单的看图功能有了～
待添加的功能和优化还有很多～比如标签和标签筛选什么的。
由于数据库还是要兼容之前的 sqlite 数据库，所以更新不是实时，可能随缘同步，等 bot 迁移到 PostgreSQL 之后就可以实时更新了。
理论上只要是 cosine-pic-bot 妲喵的 bot 驱动的图库频道就可以部署，但是他的标签结构太阴间了，等优化完了估计就不兼容了
TODO:标签、友链页面、检索、反馈、SEO 优化、UI 优化！
#优质博文 #前端 #react #瀑布流
Implementing Infinite Scroll in React Apps 在 React 应用程序中实现无限滚动
Masonry Layouts in React React 中的 Masonry 布局
via codeparrot.ai Blogs
Implementing Infinite Scroll in React Apps 在 React 应用程序中实现无限滚动
Masonry Layouts in React React 中的 Masonry 布局
via codeparrot.ai Blogs
#组件库 #tools #前端 #react #动画
star ⭐ react-bits
react-bits是一个开源的React组件集合，提供动画、互动和完全可定制的组件，用于构建令人惊艳和难忘的用户界面。
star ⭐ react-bits
react-bits是一个开源的React组件集合，提供动画、互动和完全可定制的组件，用于构建令人惊艳和难忘的用户界面。
GitHub
GitHub - DavidHDev/react-bits: An open source collection of animated, interactive & fully customizable React components for building…
An open source collection of animated, interactive & fully customizable React components for building stunning, memorable websites. - DavidHDev/react-bits
