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

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #年度总结 #碎碎念
又到了一年一度的看大家年度总结的时候了呢，这条持续更新我看过的总结吧～

• 2025 · 仍在路上，半径之外
• 2025 年我提了 500 个 Pull Requests
• 2025 年终总结
• 2025 重新定义的生活

我去年的总结在这里 2024，心有所热，步履不停，而今年的嘛，看我的忙碌程度决定了hhhh
innei.in
2025 · 仍在路上，半径之外
2025 · 仍在路上，半径之外
车与自由 去年年底提了车。今年年初，家里人都回来了，我也正好需要磨练车技，就带着他们去了周边很多地方。 买车这件事我一直觉得离我很远。那时我已经远程工作快两年，住在小县城里也基本足不出户，实在想不出它能带来什么改变。无非是带来更大的花销，生活又多一笔隐形的负担。 有车之后，最大的变化是生活不再
优质博文 年度总结 碎碎念
#碎碎念 #前端
🎄 圣诞快乐呀！虽然有点晚～
给博客的圣诞特效优化了一版本！之前的彩灯实现太蠢了ww性能都耗费在那上面了。
有多蠢呢，详情请看：
为 Astro 博客添加可插拔的圣诞特效模块 - 彩灯性能优化
碎碎念 前端
#碎碎念
在家里上班的好处是每天起床醒来都能看到桌上摆着妈咪带的早餐，有时候是两个茶叶蛋有时候是面包😭太暖心惹
碎碎念
cosine - 前端人の日常频道
#博客更新 #碎碎念 #折腾 #前端 究～极～花里胡哨！！ 圣诞节到了，想给博客加点节日氛围。最终实现了一套可开关的圣诞特效模块，包括雪花和彩灯以及圣诞配色方案～ 很赶很冲动，还没怎么仔细优化～ 注意看这个雪是双层的，内容容器夹在雪花中间，远景雪花在文章后面飘过，近景雪花在前面飘过，配合视差效果 雪花效果是从 Shadertoy 上的 Just snow 学来的！ 彩灯是参考 Toby J 的 CodePen 实现，调整为圣诞配色（红、绿、金） 我知道肯定会有人说花里胡哨所以我加了开关～～反正节日过了就下掉了～…
#博客更新 #碎碎念 #前端
简单让 AI 写了一下整体的实现～
为 Astro 博客添加可插拔的圣诞特效模块
cos
为 Astro 博客添加可插拔的圣诞特效模块 | 笔记 / 前端 | 余弦の博客
本文由 AI 辅助写作，作记录用 圣诞节到了，想给博客加点节日氛围。最终实现了一套可插拔的圣诞特效模块，包括： 3D 雪花飘落（React Three Fiber + GLSL 着色器） 悬挂彩灯装饰（CSS 动画） 头像圣诞帽（SVG） 圣诞配色方案（CSS 变量） 可拖拽圣诞球开关...
博客更新 碎碎念 前端
#博客更新 #碎碎念 #折腾 #前端
究～极～花里胡哨！！
圣诞节到了，想给博客加点节日氛围。最终实现了一套可开关的圣诞特效模块，包括雪花和彩灯以及圣诞配色方案～
很赶很冲动，还没怎么仔细优化～
注意看这个雪是双层的，内容容器夹在雪花中间，远景雪花在文章后面飘过，近景雪花在前面飘过，配合视差效果
雪花效果是从 Shadertoy 上的 Just snow 学来的！
彩灯是参考 Toby J 的 CodePen 实现，调整为圣诞配色（红、绿、金）
我知道肯定会有人说花里胡哨所以我加了开关～～反正节日过了就下掉了～
来看看喵～～
https://blog.cosine.ren/
博客更新 碎碎念 折腾 前端
#碎碎念 #旅游
在长沙走之前去了女仆餐厅（猫铃食堂），被小姐姐施展了让蛋包饭变美味的魔法~
女仆小姐姐太热情了都，进门：“大小姐欢迎回家，是第一次回家吗~”吃完过来聊天中途还能看宅舞。
好尴尬好中二但是好喜欢
进这种店就是一边脚趾扣地一边开心（乐）
感觉小姐姐都很敬业啊，很热爱这工作
碎碎念 旅游
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 好羡慕）（钻起来）
碎碎念
#碎碎念 #面
好耶，明天 FEDAY！
碎碎念 面
#碎碎念 #旅游
感觉长沙很赛博朋克（）
很 Kirakira 的
碎碎念 旅游
#年度总结 #碎碎念
真是🐷吧我吃这么多，一个完完全全的吃货……
今年到处跑导致住宿花的也好多……
年度总结 碎碎念
#碎碎念 #前端 #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
#碎碎念 #美食
昨天下着雨，在南方医院体检完一看发现南方医科大学，学三食堂外人居然也可以吃！
居然有我最喜欢但是在南方找不到的缘味先石锅鸡蛋！！（虽然点错成石锅豆腐了）
​又幸福了，以后工作之余就来炫饭，这份 15 块 🤤
碎碎念 美食
#碎碎念 #年度总结
？居然有 star 吗。
几乎全是私人仓库和打工打工打工（安详）

https://github.com/cosZone/astro-koharu

那我求个 star 让年底的数据更好看一些（逃）今天加了 ai 摘要和相关推荐。

git-wrapped.com
碎碎念 年度总结
#碎碎念 #AI
又出了一个圣诞头像！圣诞爱！很开心，爱来自 NovelAI~~
https://www.pixiv.net/artworks/138531626
https://fixupx.com/_cosine_x/status/1999506197108654582
碎碎念 AI
cosine - 前端人の日常频道
#前端 #安全 #新动态 #React React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。 …
#碎碎念 #前端
https://fixupx.com/reactjs/status/1999267418846449786

无恶意吐槽：
在研究 React2Shell 的时候发现两个新的漏洞好笑程度：100%
发现针对新的 DoS 漏洞的修复并未彻底保护某些场景，导致又出现新的漏洞（CVE‑2025‑67779）的好笑程度：1000%

也就是说如果你看到这消息比较早的话你得更新两次 😈

好笑吗，不，我只看到了周五的工作量又增多了
碎碎念 前端
 
 
Back to Top