呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #前端 #CSS #新特性
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。


author Brecht De Ruyte
Smashing Magazine
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine
CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.
优质博文 前端 CSS 新特性
#优质博文 #前端 #WebGPU #WebGL
用 WebGPU 来造一场雪 | Cyandev

AI 摘要：本文详细介绍了作者如何利用 WebGPU 为个人博客实现下雪背景效果。文章从 WebGPU 的基本概念、与 Metal 等现代图形 API 的对比入手，逐步深入到 Metal 的基础知识，再结合 WebGPU 的实际应用，例如 Bind Group 和 Compute Shader，展示了如何高效地绘制雪花粒子并计算其运动。为了进一步提升性能，作者还分享了如何将渲染逻辑转移到 Web Worker 中的 OffscreenCanvas 进行，确保动画流畅不卡顿。文末展望了 WebGPU 在未来前端动画和机器学习领域的应用潜力。


author Cyandev
cyandev.app
cyandev.app
WebGPU 开发初体验。
优质博文 前端 WebGPU WebGL
#前端 #字体
From smartwatches to VR, Google Sans Flex intelligently adapts to any display. ⌚️✨

Our typeface gives you granular control over weight, width, and optical size. Plus, it’s now open-source! Ready to build clearer, more beautiful experiences?

Read more → bit.ly/4s1zYgW


https://fixupx.com/i/status/2002408656164298917
Google Design
Google Sans: Evolving Google’s Typeface - Google Design
Google Sans: Evolving Google’s Typeface - Google Design
Discover the inside story of Google Sans, Google’s iconic brand typeface. From product lockups to code, learn how the Google Sans font family has evolved to solve specific UX design problems.
前端 字体
cosine - 前端人の日常频道
#碎碎念 #旅游 长沙一些照片留念~
#碎碎念 #旅游
长沙一些照片留念~
碎碎念 旅游
#碎碎念 #旅游
长沙一些照片留念~
碎碎念 旅游
#碎碎念 #前端
顺便一提，性能等也优化了一下！
绿绿的超满足好吧！优化前 vs 优化后
https://pagespeed.web.dev/analysis/https-blog-cosine-ren/w6qzrwbp9b?hl=zh-cn&form_factor=desktop
碎碎念 前端
#博客更新 #碎碎念 #Astro
更新了一篇偏记录向博客，一开始想在博客中，实现类似 Minimal CSS-only blurry image placeholders 的 CSS-only LQIP（低质量图片占位符），使用单个 CSS 自定义属性 —lqip 编码图片的模糊预览。

考虑了一下之后，还是选择简化一些的实现，不追求 CSS Only 了，因为打算先做博客内部的图片

头图过几天没准就干掉换成别的了嘿嘿。

仓库：https://github.com/cosZone/astro-koharu

在 Astro 博客中实现 LQIP（低质量图片占位符）
博客更新 碎碎念 Astro
#碎碎念
参加活动看着所有不熟 e 人时的内心OS：嗯（死嘴，快说话啊）（我好 i 啊呜呜呜呜）（好想写代码啊）（要不还是回去写代码吧）（我真不会找话题啊）（好想带着妲喵啊一个人好尴尬）（awsl）（怎么都这么 e 好羡慕）（钻起来）
碎碎念
#three #调试 #WebGL #前端 #插件
！终于发布了，馋好久了这个调试 three 的插件。
https://chromewebstore.google.com/detail/needle-inspector-for-thre/jonplpbnhmanoekkgcepnedhghflblmo

https://fixupx.com/i/status/2002068323501289585
Google
Needle Inspector — DevTools for three.js - Chrome Web Store
Inspect any three.js, react-three-fiber or Needle Engine project with a visual hierarchy, real-time property editing, MCP connection
three 调试 WebGL 前端 插件
#碎碎念 #面
好耶，明天 FEDAY！
碎碎念 面
#碎碎念 #旅游
感觉长沙很赛博朋克（）
很 Kirakira 的
碎碎念 旅游
#优质博文 #前端 #CSS #JavaScript #GSAP #动画
好工具：Paths & Control Points
文章：Building Responsive, Scroll-Triggered Curved Path Animations with GSAP | Codrops

AI 摘要：这篇博文详细介绍了如何使用 GSAP (GreenSock Animation Platform) 的 ScrollTrigger 和 MotionPath 插件，实现响应式的、滚动触发的曲线路径动画。文章不仅阐述了核心的设计挑战和 Bezier 曲线原理，还提供了动态计算控制点、构建 SVG 路径、动画插值以及响应式处理的完整代码示例。更令人惊喜的是，作者还分享了一个实用的可视化配置工具，让开发者能够拖拽控制点实时调整曲线，极大地提升了开发效率和精度。最后，文章还探讨了可访问性 (Accessibility) 和生产工作流程，为读者提供了全面的解决方案。


author Ross Anderson
codepen.io
Paths & Control Points
Paths & Control Points
...
优质博文 前端 CSS JavaScript GSAP 动画
#年度总结 #碎碎念
真是🐷吧我吃这么多，一个完完全全的吃货……
今年到处跑导致住宿花的也好多……
年度总结 碎碎念
#碎碎念 #前端 #SVG #tip
写了这么一段代码，想要一段可随高度变化的虚线。

<svg
  className="pointer-events-none absolute bottom-0 left-px h-[calc(100%+1rem)] w-[1.5px]"
  viewBox="0 0 2 366"
  preserveAspectRatio="none meet"
  aria-hidden="true"
>
  <path d="M0.749978 365.5L0.750106 0" stroke="white" strokeOpacity="0.2" strokeWidth="1.5" strokeDasharray="5.25 5.25" />
</svg>


发现不对！高度特别小的时候挤在一块了（如图1）。

咋办？使用 vectorEffect="non-scaling-stroke"

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Reference/Attribute/vector-effect

non-scaling-stroke 的使用可以看这篇文章：CSS vector-effect与SVG stroke描边缩放

该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。


为什么不用 border-style: dashed; ？因为他没有办法定义线段的长度和大小，视不同实现而定。

             strokeOpacity="0.2"
             strokeWidth="1.5"
             strokeDasharray="5.25 5.25"
+            vectorEffect="non-scaling-stroke"
           />
         </svg>
         <div className="space-y-3">


现在完美实现！（图2）
碎碎念 前端 SVG tip
Before
After
Back to Top