#优质博文 #CSS #前端 #布局 #新特性 #Grid
Brand New Layouts with CSS Subgrid • Josh W. Comeau

AI 摘要：文章深入浅出地介绍了 CSS Subgrid 的原理、语法以及在实际布局中的强大应用。作者从传统嵌套 Grid 布局的局限出发，展示 Subgrid 如何让子元素共享父网格结构，从而解决嵌套布局中兄弟元素协调、行列同步、可访问性与语义等长期难题。文末作者也提醒了 Subgrid 的坑点（如行空间保留、编号重置和不支持流式网格）及兼容性策略，最后展示了灵活采用 Subgrid 逐步优化布局的思路。

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

1. Subgrid 基础与语法逻辑
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套元素难以精确控制。
• Subgrid 允许共享父级 Grid 的行列定义，实现层级布局的连贯性。
• 示例演示如何让 <ul><li> 等语义化标签参与同一布局网格。
• 对比 Flexbox 及嵌套 Grid 的替代方案，指出 Subgrid 提升结构语义与简洁性。

2. 新布局可能性（New layout possibilities）
• 演示艺术作品集卡片布局中跨元素对齐的问题。
• Subgrid 能让兄弟卡片实现列宽一致、响应式调整，避免文字长度影响列宽。
• 动态响应内容变化，提高布局的自适应表现与一致性。

3. 使用 Subgrid 时的坑点与避坑指南（Subgrid Gotchas）
• 行空间保留(Row reservation)： 必须显式定义跨越行数，否则子网格会被压缩成单行。
• 网格线编号重置： Subgrid 继承父网格模板但重编号，索引从 1 重新开始。
• 不支持流式网格(Fluid grid)： auto-fill / auto-fit 等流体布局参数目前无法与 Subgrid 结合。
• 浏览器兼容性： 主流浏览器 2023 起支持，但覆盖率未达 90%，需提供 Fallback。

4. 向后兼容策略（Fallback for older browsers）
• 使用 @supports not (grid-template-columns: subgrid) 提供替代布局。
• 优先保证视觉与交互体验的一致性，而非强求原样重现。
• 建议在小规模组件中逐步应用 Subgrid。

5. 实战展示与结语
• 以 Stripe Developer 网站为典范，展示多层 Subgrid 嵌套布局的极限用法。
• 鼓励开发者从小范围、局部组件开始接入 Subgrid 改造。
• 强调 Subgrid 带来的语义与结构清晰性提升，呼吁更多实验与实践。

author Josh W. Comeau

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…

POLEBUG - WHAT ARE YOU THINKING?

去了创业公司之后彻底祛魅了，没有所谓的创业的激情，只有自怀理想的打工人自愿加班，而被资本家无情压榨 😅

#碎碎念
一些小感想：我一直会秉持着工作是工作，生活是生活的想法，无论如何都不会觉得「这公司很好我会一直待下去」，心里一直是很残酷的认为没有乌托邦没有完美的公司，自己分内该做的事儿做好就行了，不抱有期待就不会有失望，不接受任何职场 PUA 以及自我否定和画饼也不会表露真实想法，也不会追求绩效或完美。

摸鱼不会有愧疚感，认真做进入心流的时候超过上班时间了也不认为是加班。这其实挺反常的？但是大多数时候这种心态让我在工作上没有烦恼过特别多。

「只要我不付出我的真心就不会受伤」

现代职场，会让很多这样有激情的人激情磨灭，相比起来我还是太佛系了。

当然，我认为也是有不少很好的公司的，所以找工作的时候，老板/团队氛围其实是超乎想象的重要的一环，但这个又不好评估，我的话只会往坏里期待，调低预期，然后再拔高。

#Newsletter #前端 #周刊更新
周刊第 17 期！ 这周给博客优化了一下 UI，代码块和列表、标题的样式都加上了，然后给博客主题换了个名字，正式一些。

现在的主题叫 astro-koharu，博客的正式地址也挪到了 blog.cosine.ren

“小春日和” （こはるびより）指的是晚秋到初冬这段时期，持续的一段似春天般温暖的晴天。也就是中文中的“小阳春”。

下一步打算自己弄个评论系统，Remark42 感觉没动力用，想参考 Valine 自己弄一个，然后把旧的评论迁移过去。

FE Bits Vol.17｜WebGPU 主流浏览器全支持，AntD 6 正式发布

GitHub

GitHub - cosZone/astro-koharu: [WIP] “小春日和” 是一个萌系 / 二次元 / 粉蓝配色的 astro 主题博客，灵感来自 Hexo 的 Shoka 主题，但不再追求一比一复刻，而是保留它的优点，用更轻量的技术栈，做一款属于自己的个人博客主题。

[WIP] “小春日和” 是一个萌系 / 二次元 / 粉蓝配色的 astro 主题博客，灵感来自 Hexo 的 Shoka 主题，但不再追求一比一复刻，而是保留它的优点，用更轻量的技术栈，做一款属于自己的个人博客主题。 - cosZone/astro-koharu

#优质博文 #开源 #成长
写在 PicGo 即将 8 周年之际 - 少数派
也是一篇很有「情感」的文章啊

少数派 - 高品质数字消费指南

写在 PicGo 即将 8 周年之际 - 少数派

今天，在 PicGo 即将迎来 8 岁生日之际，我发布了它的 2.4.0 正式版；而我于今天也迎来了我 30 岁的农历生日。30岁，对我来说是个新的起点，人生的长跑，终点都一样，但是我可以有机会选择不同的起点。而你，我的朋友，未来的我们又会在哪里相遇呢？

#优质博文 #WebGL #GSAP #three #r3f #前端 #动画 #趣站
太有创意了。
网站：https://www.romanjeanelie.com/
文章：Letting the Creative Process Shape a WebGL Portfolio

AI 摘要：这篇文章详细记录了制作 WebGL 个人作品集的全过程。文章展现了一个从最初构想到最终实现的探索旅程。文中涉及诸多技术，包括 Next.js、Three.js、React Three Fiber 以及 GSAP（含 MorphSVG 插件），并分享了多个实现细节，如 Fold 效果、MeshPortal 场景嵌入系统、基于滚动速度的 Shader 动效，以及 SVG 到 Canvas 的性能优化。最终，作品以戏剧化的视觉语言融合作者在戏剧、电影与编程三重背景下的美学追求。

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

1. 起点：Fold 效果与创意萌芽
• 以 Vector Projection 实现自由方向的折叠效果
• Shader 中的假阴影计算增加立体感
• 从最初“主特效”到成为创意起点的自我修正

2. 构建中：角色与 MeshPortal 系统
• 创建带角色的屏幕，利用 Mixamo 动作资源
• 引入 MeshPortal 技术，将独立 3D 场景限制在屏幕范围内
• 建立系统实现 WebGL 与 DOM 布局同步（mask 区域）
• 采用 hash-based 导航配合 GSAP 动画实现平滑过渡

3. 节奏延伸：让角色起舞与滚动动效
• 通过基于速度的 Stretch Shader 让文字响应滚动加速度
• 利用 depth-aware 动线制造空间层次
• 前端 JS 调控 Shader uniform 实现自然的运动衰减与模糊

4. 创意突破：不再拘泥于“屏幕”
• 从平面屏幕过渡到文字形态（Morphing Plane to Text）
• 借助 GSAP MorphSVG 插件实现路径平滑过渡
• 优化性能：通过 Canvas 渲染替代 SVG DOM 调用，保持 60fps
• 将“WHO” 文字转化为剧场式的舞台： Cinema、Theater、Code 三部分，用视频投影营造剪影效果

5. 闭环：Contact 页与「MEET ME」交互收尾
• 通过算得精确的 DOM 与 WebGL 匹配 mask 完成动态过渡
• 使用 GSAP 的 back.out 缓动创造富表现力的弹性动画
• 利用镜头视角（FOV）和空间深度营造收尾的视觉叙事
• 以贴纸元素作为呼应起点的个人符号，为项目画上圆满句号

6. 总结与思考
• 作品的发展不是强行设计，而是对“创意呼吸”的倾听
• 通过“让过程塑形”，实现技术与自我表达的统一
• 最终成果是一种情感与视觉共鸣的体验，而非单纯代码演示

author Roman Jean-Elie

#优质博文 #CSS #前端 #新特性
How to Add and Remove Items From a Native CSS Carousel (…with CSS)

AI 摘要：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件。文章分为三步：HTML 结构设计、基础样式编写与添加按钮/标记逻辑，展示了未来 CSS 在交互与状态管理上的潜力。

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

1. CSS 新特性简介
• 概述 CSS Overflow Module Level 5 模块，引入 ::scroll-marker 与 ::scroll-button() 两个新伪元素。
• 说明这些特性如何在滚动内容中自动生成导航控件，无需脚本交互。
• 当前仅 Chrome 142+ 提供支持，但为未来原生组件交互铺路。

2. HTML 结构与逻辑绑定
• 使用 <input type="checkbox"> 控制轮播项的显示与隐藏。
• 每个复选框对应一个 <li> 滑块，可预选或取消以动态控制内容。
• 通过 .component:has(input:not(:checked)) 实现逻辑选择，隐藏未选项。
• 结构层清晰，可改造为 <form> 以实现数据序列化提交。

3. CSS 基础样式与响应式设计
• 使用 max-width 与 aspect-ratio 实现轮播容器的响应式尺寸。
• 当存在选中项时使用 display: flex; 和 min-width: 100% 水平展示滑块。
• 未选中时显示占位样式，增强组件的状态反馈。

4. 滚动控制与标记实现
• 使用 scroll-snap-type: x 与 scroll-behavior: smooth 实现平滑滑动与对齐。
• 通过 anchor-name 将轮播容器转变为锚点，利用 position-anchor 精准定位滚动按钮与标记组。
• scroll-marker-group 属性控制标记插入位置，可调节排列与间距。
• 各标记通过伪类 :target-current / :target-before / :target-after 呈现不同状态风格。
• 实际布局通过固定定位 (position: fixed) 与锚点对齐 (justify-self: anchor-center) 来分布按钮与标记。

5. 滚动按钮的添加与行为控制
• 使用 ::scroll-button(left/right) 生成左右切换箭头。
• 通过 :enabled 控制显示状态，避免无效方向交互。
• 再次利用锚点定位调整按钮相对位置，内容用 Unicode 符号构建箭头。
• 补充 scroll-snap-align: center，保证切换时对齐完整幻灯片。

6. 扩展与应用
• 相同机制可拓展至分页、标签页等滚动式界面组件。
• 展示了未来 CSS 在状态驱动组件中的可行性与可维护性。
• 示例：产品展示轮播，可根据颜色选项动态切换视图。

author Daniel Schwarz

Frontend Masters

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons…

#优质博文 #前端 #安全
以 0.0001 美分的价格干掉 Next.js 服务器

AI 摘要：Harmony Intelligence 团队报告发现 Next.js 自托管版本存在严重的拒绝服务（DoS）漏洞，攻击者仅需一个精心构造的 HTTP 请求即可导致服务器内存被耗尽而崩溃。漏洞由 AI AppSec Agent 在测试期间意外发现，已由 Vercel 于 2025 年 10 月修复。防御建议是尽快升级至 Next.js 15.5.5 或以上版本，并在生产环境使用可限制请求大小的反向代理，因为仅靠请求频率限制并不能防御此类攻击。

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

1. 漏洞概述
• 漏洞类型：拒绝服务 (DoS)，通过发送大体积的 HTTP 请求流导致服务器内存耗尽并崩溃。
• 受影响范围：所有带有中间件的自托管 Next.js 服务器（Vercel 托管的不受影响）。
• 受影响版本：≤15.5.4、14.x、13.x 等旧版本。

2. 发现经过
• 漏洞在测试 AI AppSec Agent 能否独立识别已知认证绕过问题（CVE-2025-29927）时意外被触发。
• AI 代理可访问源代码并在安全沙盒中运行，对应用执行自动化渗透探索。
• 意外发现 Next.js 官方源码中 cloneBodyStream 函数复制无大小限制的请求体，从而导致内存占用过高。

3. 技术细节
• 漏洞根源在于 body-stream.ts 中的 cloneBodyStream：函数会将整个请求流读入内存。
• 攻击者仅需持续发送数据流片段即可造成服务器崩溃，资源消耗极低。
• 修复补丁通过在内存缓冲区超过 10MB 时抛出异常来限制流大小。

4. 影响与安全评级
• 全球 300 万个活跃 Next.js 部署中约 55% 为自托管环境（企业约 80%）。
• 初始漏洞报告时 Vercel 尚未在文档中明确推荐使用反向代理限制请求大小。
• 推荐 CVSS v3.1 评分 7.5（高危），依据类似 Node.js 漏洞 (CVE-2018-12121) 的评估逻辑。

5. 缓解措施（Mitigation）
• 推荐立即升级至 Next.js 15.5.5 或 16.0.0 及以上版本。
• 配置诸如 nginx 的反向代理来限制请求体大小，例如默认 client_max_body_size = 1MB。
• 确保应用服务器不对外直接暴露，全部流量应经过代理层。
• 仅靠应用层的 rate limit、bodyParser.sizeLimit 或 express-rate-limit 等代码级限制无效，因为漏洞触发点在中间件执行前。

6. 信息披露时间线
• 2025-08-07：私下通知 Vercel 并持续每周跟进。
• 2025-09-23：Vercel 第一次回应。
• 2025-10-13：Vercel 发布补丁 (v15.5.5)。
• 2025-11-26：公开披露与缓解方案发布。

author Alex Browne

Harmonyintelligence

Harmony Intelligence - Taking down Next.js servers for 0.0001 cents a pop

Our AI AppSec Agent discovered an unauthenticated DoS vulnerability that crashes a self-hosted Next.js server with a single HTTP request and negligible resources.

#优质博文 #AI #AST #React #前端 #测试 #工程实践 #ClaudeCode #codemod #course
好文章，关于使用 AI 进行重构迁移的教科书式文章。
Migrating 6000 React tests using AI Agents and ASTs

AI 摘要：作者在 Filestage 的前端项目中使用 AI Agents（特别是 Claude Code）与 AST（Abstract Syntax Tree）技术，将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程，最后总结出 AI 在大规模代码迁移中的优势与局限，并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

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

1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败，暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南，分析版本差异与新 API。
• 确定主要变化：异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14，避免一次性大变更。
• 生成迁移指南并提交第一份 PR，保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST，再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果（例如导入路径、 renderWithUserEvent 封装替换）。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件，执行 lint 检查与单测验证。
• 持续观察失败案例，不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字；codemod 从 271 行发展到近千行，测试覆盖更完备。
• 共执行 50 次迁移，形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入，AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断，验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移，每个 PR 约半小时。
• 若纯人工迁移，估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制，是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。

author Elio Capella Sánchez

Eliocapella

Migrating 6000 React tests using AI Agents and ASTs

How I used AI to migrate 970 test files with 6000+ test cases from React Testing Library v13 to v14 in one week, through 50 PRs that would have taken months manually.

#前端 #course
老仓库了，适合初学者。
JavaScript Algorithms and Data Structures
一个涵盖经典算法与数据结构的 JavaScript 示例仓库，其中每个算法和数据结构都有其独立的 README 文件，包含相关的解释和进一步阅读的链接。

GitHub

GitHub - trekhleb/javascript-algorithms: 📝 Algorithms and data structures implemented in JavaScript with explanations and links…

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms

#优质博文 #react #前端 #JavaScript #Astro
还是看业务复杂程度～不过我觉得 Astro 超好用www
Why use React?

AI 摘要：作者以一种反思式的语气询问开发者——我们为什么要在浏览器里使用 React？文章从技术惯性、前后端职责演变、开发者文化到框架优先级等多个角度分析 React 的盛行原因与隐形代价。作者最终的立场是：在服务端使用 React 无可厚非，但在客户端运行 React 则可能损害用户体验。若仅因文化或团队习惯而加载庞大的 React 库，不如考虑 Preact、Astro 或直接用原生 JavaScript（vanilla JS），以提升性能和用户友好度。

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

1. 选择 React 的现象与动机
• 多数开发者使用 React 并非出于设计或性能考虑，而是出于团队惯性或工作要求。
• 作者将“被强制使用的技术”定义为企业级软件（enterprise software）。
• 惯性（Inertia）被认为是 React 持续流行的首要原因。

2. 前端与后端的边界变化
• 过去前端与后端有清晰分工，如 HTML、CSS、JavaScript 属于前端，PHP、Ruby、Python 属于后端。
• 随着 JavaScript 可在服务器端执行，开发者常忽视客户端代码的性能代价。
• 客户端执行环境有限，文件体积和加载时间至关重要，而服务端则可通过硬件“买掉”性能瓶颈。

3. React 开发者文化与生态迁移
• React 从最初强调虚拟 DOM 到后来因组件化架构与 JSX 被开发者喜爱。
• React 不再只是前端库，而是类似 Rails、Django 的全栈式生态。
• 这种文化层面的认同让开发者倾向于“全用 React”，即便这并不总是对用户友好。

4. 框架优先级与替代方案
• Next.js 推行服务端渲染（SSR），但仍倾向输出同样的客户端 React 代码，造成资源浪费。
• Astro 框架提出“最小化客户端 JavaScript”的思路，保留 JSX 作者体验但减轻用户负担。
• React/Next/Vercel 生态的惯性使这种思路被边缘化，但 Astro 展示了另一种可能。

5. 回归问题：为什么在浏览器使用 React？
• 若使用 React 只是团队协作或文化原因，可仅在服务端保留 React。
• 前端若非单页应用（SPA），应尽量减少 JavaScript 框架负担。
• 若确需前端状态管理，可考虑 Preact 或探索原生 JavaScript 的能力。
• 作者倡导：让框架留在服务器，充分利用浏览器本身的强大功能。

author Jeremy Keith

Adactio

Why use React?

Or, more precisely, why use React *in the browser*?

#优质博文 #CSS #前端
light-dark() isn't always the same as prefers-color-scheme

AI 摘要：这篇文章探讨了 CSS 新特性 light-dark() 与经典媒体查询 prefers-color-scheme 之间的区别。作者原以为前者可以“一键取代”后者，但在实际项目中发现，light-dark() 依赖于 color-scheme 属性的正确设定，而 prefers-color-scheme 完全基于操作系统的偏好。两者虽然目标相似（响应亮/暗模式），却响应机制不同，导致主题切换时的表现并不一致。开发者在实现自定义主题时，应理解它们的区别，以正确控制组件的配色逻辑。

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

1. 新特性背景与初衷
• 作者在 “Today I learned” 系列中分享 CSS 的最新学习经验
• 以为 light-dark() 能替换 prefers-color-scheme，从而精简代码
• MDN 对 light-dark() 的定义：能为属性设置两种颜色，而无需媒体查询

2. light-dark() 的工作条件
• 必须在 :root 或容器上设置 color-scheme: light dark; 才能生效
• 若未设定 color-scheme，light-dark() 无法根据系统主题切换
• prefers-color-scheme 无论 color-scheme 是否存在，都能响应操作系统主题

3. 实际项目中的表现差异
• 以 Web Weekly 网站重构为例，作者使用 Tailwind CSS 配置了自定义颜色变量
• light-dark() 自动翻转颜色逻辑，但 prefers-color-scheme 与 color-scheme 之间无联动
• 当通过 color-scheme 切换主题时，light-dark() 能正确响应；而 prefers-color-scheme 仍只看系统设置
• 这种行为差异源于 prefers-color-scheme 的历史兼容性设计

4. 结论与经验
• light-dark() 并非 prefers-color-scheme 的替代品，而是基于 color-scheme 工作的全新机制
• prefers-color-scheme 更偏向全局系统偏好，light-dark() 更适合组件级主题控制
• 实现主题切换前，应明确两者触发机制，避免预期不符

author Stefan Judis

Stefanjudis

light-dark isn't the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.

#tools #前端 #color #设计 #网站
Color Palette Pro
一款能像音乐合成器一样自由调制色彩的在线调色工具，支持多种色彩空间与样式切换，实时生成色阶、色环、阴影与高光调和效果，非常适合设计师进行系统化配色或视觉一致性探索。

主要是设计的非常漂亮诶，但是交互我觉得很容易看不懂也没有 tooltip 之类的～

#碎碎念 #优质视频
很喜欢长大之后对得失已经不是那么在意了的自己，也不讨厌小时候笨笨的情感外露的我自己。

其实我的印象里，是 2019 年记忆最深刻，那年我大一入学，高考完毕，院运动会，OJ 周赛，欣欣向荣。虽然其实后面四年我过得也不差，但是疫情来了，校运动会不开了，各方面也都受到了很大限制，四年大学基本上三年疫情。

说来惭愧，妈咪把我养的很好，从小到大没做过任何家务（洗碗、做饭、打扫卫生），每天家里都是干干净净的，是个生活白痴，很多常识性的东西都是靠后面自己看，所以现在我会回馈她（）

哎哟，煽情剑法。
【“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”】
https://www.bilibili.com/video/av115591042105827

Bilibili

“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”_哔哩哔哩_bilibili

“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”, 视频播放量 2041625、弹幕量 1862、点赞数 278397、投硬币枚数 16800、收藏人数 65213、转发人数 8647, 视频作者 唯美风景线, 作者简介 “平凡生活的调味剂，美景分享” 合作vx wmfjx0225备注来意，投稿任意网盘 素材来自网络，侵权联系即删，相关视频：2026将是最爽的一年，原来2015年已经是九年前了，拍摄于2012年1月13号，在…

#前端 #AI #ClaudeCode
这个好，现在可以用 cc 的插件弥补他的前端设计技能，
在 Claude Code 里用这两条命令：

/plugin marketplace add anthropics/claude-code

/plugin install frontend-design@claude-code-plugins

https://fixupx.com/trq212/status/1993786550656897491

Thariq(@trq212):Opus 4.5 is our best model yet for design & vision.
Here are some of my favorite UIs we made with Claude Code's frontend-design plugin.
To try this yourself add our marketplace in Claude Code:
/plugin marketplace add anthropics/claude-code
and then install the plugin:
/plugin install frontend-design@claude-code-plugins

🧵 Thread • FixupX

Thariq (@trq212)

Opus 4.5 is our best model yet for design & vision.

Here are some of my favorite UIs we made with Claude Code's frontend-design plugin.

#优质博文 #webgpu #前端 #浏览器 #新动态
WebGPU 现在也是全面支持了，但是 Safari 是 iOS 26 才支持，而且 Safari 移动端给的显存嘛……少少的。

WebGPU is now supported in major browsers

AI 摘要：文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持，这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL，更在性能与设计层面跃升，支持现代 GPU 功能、Compute Pipeline（通用计算管线）和 Render Bundles（渲染指令集复用）等特性，为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度，包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持，并感谢各大公司与开发者的多年协作。

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

1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者，提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言（Shader Language）。
• 支持 Compute Pipeline，让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令，提高性能、降低 CPU 开销。
• 示例：Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。

2. 浏览器与系统支持现状
• Chrome / Edge：在 Windows（Direct3D 12）、macOS、ChromeOS 自 v113 起支持；Android 自 v121 起支持。
• Firefox：Windows 自 v141 起支持，macOS ARM64 自 v145 起支持。
• Safari：在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中，可查看 Implementation Status。

3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU，包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用，方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具，可将原生 GPU 应用移植至 Web。

4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者，包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。

author François Beaufort

web.dev

WebGPU is now supported in major browsers  |  Blog  |  web.dev

Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.

#优质博文 #css #前端 #浏览器 #新特性
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

AI 摘要：文章介绍了 Chrome 144 对 CSS 属性 overscroll-behavior 的改进：该属性现在在“不可滚动的滚动容器”上也有效，这意味着开发者可以用简单的 CSS 代码阻止页面在对话框（<dialog>）打开时滚动。作者解释了这一特性的技术背景、过去的限制及其在不同浏览器支持上的现状，并展示了一个实现示例。

author Bramus!

Bram.us

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)…