#demo #前端 #WebGL #Shader
reczko_konrad/1985296691331809574
酷到没边了！前端梦想的样子（x）
会弹弹弹的滑动条，利用 TypeGPU 0.8 打造的 Q 弹丝滑的 Jelly Slider！Shader 直接用 TS 编写。

在线体验 Jelly Slider Demo

Ever since I first saw this I wanted to try implementing it in TypeGPU, and I finally got around to it while testing the new 0.8 release.

You can try out the Jelly Slider here:
https://docs.swmansion.com/TypeGPU/examples/#example=rendering--jelly-slider

Had a lot of fun brainstorming optimisations with @iwoplaza and the team, and it should run well on most modern devices.

Built entirely with TypeGPU, no extra libraries, with all shaders written in TypeScript. The prototyping speed with features like console.log on the GPU and “bindless” resources made the process really smooth.

#Newsletter #前端 #周刊更新
周刊第 26 期！这周给博客加了很多新功能好爽www
给我的博客新增了以前的 shoka 语法兼容和歌单版块，都来看我的歌单！！
FE Bits Vol.26 | Gatsby 支持 React 19，Rspress 2.0 发布

#codepen #demo #CSS #前端
不规则网格上带有凹面圆角的卡片

“卡片和按钮之间的缝隙实现了真正的透明效果。没有尖角，全部都是圆角。除了 .jpg 格式的卡片背景图外，没有其他图片。卡片形状会根据按钮的大小和形状进行调整——您可以尝试只更改按钮元素的字体大小来查看效果。这不需要任何 JavaScript 代码——一切都归功于 CSS 子网格的神奇功能！”

author Ana Tudor
source

#碎碎念
整点 steam deck 笑话

#tools #语音合成 #TTS #AI #开源
jamiepine/voicebox 一款由 Qwen3-TTS 驱动的开源、本地优先语音克隆与合成工具

Voicebox 是一款功能强大的开源语音合成工具，被定位为 ElevenLabs 的本地化替代方案。它允许用户在本地机器上进行高保真声音克隆和语音生成，无需依赖云端服务，从而确保数据隐私。该工具集成了类似数字音频工作站（DAW）的多轨道编辑器，支持多角色对话混音和 API 扩展，并在 Apple Silicon 设备上通过 MLX (Machine Learning eXchange) 框架实现了极速的硬件加速推理。

GitHub

GitHub - jamiepine/voicebox: The open-source voice synthesis studio powered by Qwen3-TTS.

The open-source voice synthesis studio powered by Qwen3-TTS. - jamiepine/voicebox

cosine - 前端人の日常频道

#碎碎念 #折腾 这周把心心念念的博客歌单和播放器加上了，向全世界安利山山~ 最近做了很多更新，为 astro-koharu 主题添加了之前 Hexo Shoka 主题的 Markdown 扩展语法兼容支持，可在这里查看全部新增的语法演示：Shoka 主题 Markdown 语法演示 然后增加音乐播放器和歌单页面，都可以开关～ 一点一点变成我想要的样子了～ Release v2.6.0 · cosZone/astro-koharu · GitHub 歌单 | cosine = 余弦の博客 = WA 的一声就哭了

#碎碎念 #折腾
and 这周给 Moe Copy AI v0.3.5 新增了完整的 Prompt Template 管理功能，支持预设模版和自定义模版。之前还添加了深色模式！（是的没错都是我自用的功能）
https://moe.cosine.ren/docs/changelog

#优质博文 #前端 #CSS #锚点定位 #course
Drawing Connections with CSS Anchor Positioning - Roland Franke
锚点定位真好玩儿吧：在无需 JavaScript 的情况下实现 UI 元素（如评论与其回复）之间的视觉连线。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

• 核心挑战： 在 CSS 中视觉化连接相关元素（如评论线、Tooltip 工具提示）通常很棘手，传统方案往往依赖 JavaScript 计算、额外的标签或不稳固的布局假设。
• 锚点定位机制：
• 使用 anchor-name (锚点名称) 为一个元素命名作为参考点。
• 使用 anchor-scope (锚点作用域) 限制锚点名称的影响范围，确保组件的独立性。
• 在另一个元素中使用 anchor() (锚点函数) 获取参考元素的边界位置（如 start, end, center）。
• 代码实现：
• 通过为 .comment 和 .reply 定义锚点名，在回复的 ::after 伪元素中利用 inset 属性引用这些锚点，从而精确绘制连接线。
• 结合 Logical Properties (逻辑属性) 如 inset-block-start，使布局能够自适应不同的语言和书写方向。
• 技术优势：
• 无需 JavaScript： 减少了脚本负担，提升了性能。
• 布局感知： 当内容增长或容器变动时，连接线会自动更新位置。
• 代码简洁： 减少了冗余的 Wrapper (包装) 元素。
• 浏览器兼容性： 目前处于 Baseline: Newly available (基线：新近可用) 阶段，主要在最新版本的 Chromium 系浏览器中得到支持，建议作为 Progressive Enhancement (渐进增强) 使用。

author Roland Franke

Roland Franke - Frontend Developer

Drawing Connections with CSS Anchor Positioning - Roland Franke

A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.

#优质博文 #前端 #CSS #JavaScript #新特性 #Chrome
New to the web platform in January
汇总了 2026 年 1 月 Web 平台的重大进展，重点介绍了 Chrome 144 和 Firefox 147 稳定版的发布。其中，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 随着 Firefox 的支持正式达到 Baseline Newly Available 状态。此外，Chrome 144 引入了期待已久的 Temporal API、声明式的 <geolocation> 元素以及用于自定义页内搜索样式的 ::search-text 伪元素

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 稳定版浏览器发布（Stable browser releases）
• Baseline 状态更新：随着 Firefox 147 的发布，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 现已在所有主要引擎中可用，正式进入 Baseline 阶段。
• CSS 锚点定位 (CSS Anchor Positioning)：允许元素相对于“锚点”元素进行定位，适用于工具提示 (Tooltips)、菜单和弹出层。
• Navigation API：提供了一种现代化的方式来启动、拦截和管理应用程序中的导航，是单页应用 (SPA) 的核心增强。
• Temporal API：Chrome 144 引入了这一重磅 JavaScript API，作为 Date 对象的现代替代方案，提供更强大的日期和时间处理功能。
• 声明式 <geolocation> 元素：Chrome 144 新增了由用户激活的地理位置控制控件，简化了权限流程并减少了对复杂 JavaScript API 的依赖。

2. CSS 与样式增强（CSS Enhancements）
• ::search-text 伪元素：Chrome 144 支持自定义浏览器“页内查找”结果的样式，类似于 ::selection。
• caret-shape 属性：开发者现在可以指定文本插入光标的形状，如条状 (bar)、块状 (block) 或下划线 (underscore)。
• 视图过渡 (View Transition) 增强：Firefox 147 开始支持单页应用 (SPA) 的视图过渡类型识别，并支持通过 Document.activeViewTransition 获取当前活动的过渡对象。

3. Beta 版预览与未来动态（Beta browser releases）
• Chrome 145 Beta：引入了 text-justify 属性、多列布局改进（column-wrap 和 column-height）以及可自定义的 <select> 列表框。
• Firefox 148 Beta：支持 Location.ancestorOrigins，用于检测文档是否被嵌入到 <iframe> 中以及被哪些站点嵌入。

author Rachel Andrew

web.dev

New to the web platform in January  |  Blog  |  web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during January 2026.