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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #新动态
Frontend Focus #689 — April 23, 2025

AI 摘要:本期 Frontend Focus 涵盖前端领域多项重要动态:Google 宣布放弃移除 Chrome 第三方 Cookie 的计划,转而维持现有隐私设置;AG Grid 推广其高性能数据网格库;WebGL 渐变技术解析;此外还包括浏览器市场动态、前端工具更新(如 Polypane 24 和 Tailwind Trainer)、PWA 离线图像上传方案、CSS 预处理替代方案探讨,以及 AI 与可访问性的未来等深度文章。

1. 社区动态
• Chrome 隐私策略调整:Google 终止移除第三方 Cookie 的计划,用户仍需通过隐私设置手动管理。 #草

“ 考虑到所有这些因素,我们决定保持目前在 Chrome 中为用户提供第三方 cookie 选择的方法, 并且不会为第三方 Cookie 推出新的独立提示。用户可以继续在 Chrome 的隐私和安全 设置中选择最适合自己的选项。

• 谷歌可能被迫出售 Chrome, 猜猜谁想买? OpenAI。[Source]
• TLS 证书有效期将缩短至 47 天(2029 年起)。
• 从今天到 2026 年 3 月 15 日,TLS 证书最长生命周期为 398 天。
• 自 2026 年 3 月 15 日起,TLS 证书最长生命周期为 200 天。
• 自 2027 年 3 月 15 日起,TLS 证书最长生命周期为 100 天。
• 自 2029 年 3 月 15 日起,TLS 证书最长生命周期为 47 天。
• Web 开发引擎 Toddle 更名为 Nordcraft 并发布 1.0 版本。
• Heydon 的 Web 辅助功能高级指导原则集现已提供新增多语言版本(法语、日语等)。

2. 博文与工具
AI is the Future of Accessibility:Karl Groves 通过汽车工业发展的类比,批判了当前无障碍设计领域对 AI 技术的消极态度,呼吁行业积极拥抱技术变革而非抵制。 #无障碍
网站“键盘导航”的真正含义:了解为什么能够使用键盘浏览我们的网站很重要,如何测试您当前的设置,并最终改进它。
构建离线友好的图像上传系统:利用 IndexedDB 和 Service Worker 提升弱网环境可靠性。
Tailwind Trainer:通过游戏学习 Tailwind CSS 语法。 #tailwind #游戏
Astro Font:自动优化字体的 Astro 插件,支持自定义字体、本地字体、任何 CDN 上的字体和 Google 字体的优化。
Symbl:轻松搜索、复制和使用 HTML 符号、表情符号等。
Markdown to Slides:将 Markdown 转换为 PDF/PPTX 幻灯片的在线工具。
CSS Hell:挑战性 CSS 谜题游戏(仅限桌面端)。 答案
css-hell/solutions.md at main · marcos-acosta/css-hell
#demo #前端 #动画 #codepen #css
好爽!这个滚起来真解压吧~
文本圆圈动画(仅限 CSS )
Stijn Van Minnebruggen 使用旧的 CSS 重新创建了 David Faure 为 Codrops 制作的 Three.js 动画。滚动以转动单词之轮,并观察字母对滚动速度和长度的反应。

原理上大致是通过 @property 定义自定义变量控制旋转,使用 animation-timeline: scroll() 将动画与页面滚动绑定。单词均匀分布在圆周上,每个字母根据滚动速度计算位移和旋转值,并应用不同延迟创造瀑布效应。
#优质博文 #前端 #node #新动态
🤖 Node Weekly #575

AI 摘要:本期 Node Weekly 聚焦 Node.js 性能优化、安全警告及工具生态更新,涵盖 V8 垃圾回收调优、Node.js 在恶意软件中的滥用风险、LTS 版本发布,以及机器学习框架 node-mlx 等新工具。同时讨论了 JavaScript 生态的 TC39 提案动态和 VS Code 的 AI 增强功能。

1. 博文与工具
• Matteo Collina 分享 使用 V8 GC 优化优化 Node 性能:高内存占用未必是内存泄漏,详解 GC 工作原理及针对不同场景的调优方法。
由 Node 的核心模块提供支持的无依赖命令行应用程序(Liran Tal)。
JavaScript 中的 Float16Array 类型解析(Trevor I. Lasn)。 #javascript
2025 年 Node.js 可观测性工具对比(Lizz Parody)。
📄 When to Use map() vs. forEach() (Matt Smith)
🤖 node-mlx 0.4:基于 Apple MLX 的 Node.js 机器学习框架(zcbenz)。
Repomix:将代码库转换为 AI 友好格式(XML/MD 等)的 Node.js 工具。 #AI

2. 安全警告与版本更新
微软报告 Node.js 被广泛用于传播恶意软件,分析攻击案例及技术细节。
Node v20.19.1 (LTS):依赖项升级为主的小幅更新,建议优先使用 Node 22 'Jod'。
• 工具链更新:pnpm 10.9(支持 JSR 包)、Fastify 5.3.2、zx 8.5.3 等。
WebStorm 2025.1:支持 AI、Angular、monorepo 和 Next.js 的 IDE 更新。

3. JavaScript 生态动态(注:有重复不过还是写一下)
• TC39 撤回 "Records and Tuples" 提案,但推进枚举(enum)提案。
• Firefox 139 默认启用 Temporal API。
• Hako 引擎:基于 QuickJS 的 WebAssembly 编译型 JavaScript 运行时。
• VS Code "Agent Mode" 强化 Copilot 的 AI 编程辅助能力。
Boost Node.js with V8 GC Optimization
#碎碎念 #追番 我独自升级第二季攒了一整季昨晚一口气也忒爽了。打戏,牛!战斗,爽!有种当年看魔笛 MAGI 的久违的快乐呜呜呜(不知道为什么就联想到了魔笛)
#优质博文 #前端 #css
使用CSS给标题添加书名号并超出省略

AI 摘要:本文介绍了如何通过 CSS 在不修改 HTML 结构的情况下,为标题动态添加书名号,并实现书名号内文本超出省略的效果。文章详细讲解了使用伪元素、CSS quotes、绝对定位和浮动布局等技术实现这一需求的方法,并对比了不同方案的优缺点。


author 微信公众号 前端侦探
cosine - 前端人の日常频道
Photo
#碎碎念 好像知道为什么了呢,最后发一张。
⸝⸝ ᷇࿀ ᷆⸝⸝
#碎碎念 无聊翻了翻相册,翻到了一些旧照片,突然很想写回忆杀博客了,虽然疫情了几年在大学的时光就有几年很亏,但是我真的还是感觉大学时光真的挺值得我回忆的......
#碎碎念 感觉从今天开始我也要健身了,快死了😭天天在家不运动,搬家完运动就中断了
#碎碎念 #AI #图生视频
睡了,下午睡的觉消耗完毕。
我手办动了萌死我了啊啊啊啊wwww
挂着跑个 60s 的视频明天发 B 站

The chibi girl twirls joyfully, her yellow dress swirling as the dango stick bobs playfully.
#AI #分频道 #碎碎念
其实咱有一个不为人知的 AI 生图/视频讨论频道,但是最新更新甚至在 23 年底,没宣传过却有一些订阅,后面本地跑着玩玩儿的视频就都发这儿喵。

但是 u1s1,可以看得到 AI 发展史,进步真的是巨大的。
当年 Pika 抠抠嗖嗖的还有水印,现在可以本地跑无水印的了以前都没想过。

https://t.me/ai_paint_discuss
#AI #折腾 #图生视频
成功在 5090D 上跑起来了 FramePack,遇到了经典 CUDA 架构兼容性问题

官方解决方案是这样的,先卸载旧的 PyTorch 然后装 cu128,我这边是解决了。但是速度比 GitHub 上说的要慢一些(一开始慢,后面快)
pip uninstall -y torch torchvision torchaudio
pip install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu128

然后愉快的跑起来了,效果是很 Amazing 了,太 NB 了。(用之前 AI 生的头像结合 AI 给的 Live2d 视频提示词然后跑 AI Live2d 视频)

Use TeaCache 的速度是大概 2.3~2.5s 一帧,感觉这个速度肯定是有点问题的,不过问题不大。

提示词是:

Transform the anime character into a Live2D-style subtle animation, maintaining the original pose while adding these micro-movements: slight head tilting (within 3-5 degrees range), hair gently flowing in a mild breeze, natural and slow blinking, occasional subtle lip movements, light fabric movements on clothing, and natural lighting/shadow changes that follow the character's micro-movements. Keep the overall scene stable, ensure smooth and natural motion without exaggerated movements. Maintain high image quality, 60fps, with a 5-10 second animation loop.


ps: 经典 webui 连着连着就断了最后只能去 output 文件夹里直接拿23333

https://fixupx.com/karminski3/status/1913775123913707699
karminski-牙医 (@karminski3): 来看这个牛逼的视频生成框架——FramePack

最牛逼的地方在于:使用 13B 模型生成 1 分钟视频(60 秒),30fps(1800 帧),最低所需的 GPU 内存为 6GB。(是的,6GB,不是打字错误。笔记本电脑 GPU 也可以。)

官方只提供了windows构建版本,下载后使用 update.bat 进行更新,使用 run.bat 运行。框架会直接从HuggingFace 上下载模型(大概30G,注意流量)。然后就能用了

地址:http://github.com/lllyasviel/FramePack
Back to Top