呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #CSS #前端
The Hidden Selectors of The HTML Element
[以下是方便搜索索引的大纲（AI 生成），请读原文]
author Temani Afif
The Hidden Selectors of The HTML Element
AI 摘要：本文来自 Temani Afif 的 CSS 小贴士系列，介绍了除 html {} 与 :root {} 外，还能选中 <html> 元素的几种“隐藏”选择器，如嵌套选择器 &、:scope、:has()、:not() 等，并通过组合操作符展示了多种有趣写法。虽然这些技巧在实际开发中不一定实用，但它们揭示了 CSS Selector 机制的底层逻辑与灵活性，是一次颇具趣味性的语法探索。
[以下是方便搜索索引的大纲（AI 生成），请读原文]
1. 根元素的经典选择方式
• 介绍了我们熟知的两种方式：html {} 与 :root {}
• 提出问题：是否存在其他隐藏选择器可用于选中 <html> 元素
2. 嵌套选择器（Nesting Selector &）
• 在非嵌套上下文中，& 等效于 :scope
• 可直接用作选择 <html> 元素
3. :scope 选择器
• 当没有定义作用域根节点时，:scope 默认代表整个文档根，即 <html>
• 示例代码展示了如何直接使用 :scope { ... } 来作用于全页面样式
4. :has() 选择器的新奇用法
• <html> 是唯一同时包含 head 与 body 的元素，可利用结构特征进行反向匹配
• 示例：:has(head) 或 :has(body) 都能命中 <html>
5. :not() 与组合筛选
• <html> 是唯一没有父节点的元素，可利用 `:not(* *)`（排除有祖先的元素）进行匹配
• 加入子代组合符 > 可形成如 :not(* > *) 的结构，用“CSS 符号表情”形式趣味收尾
6. 组合选择器的实验与调侃
• 展示 :is() 、:where() 与多重 & 的奇怪组合写法（如 &&&&）
• 指出这些写法在逻辑上可行但缺乏实际用途，更多是对 CSS Selector 灵活性的探索
7. 结语与扩展阅读
• 作者认为这些“隐藏选择器”是有趣但不实用的实验
• 附带更多 CSS Tips，如 Direction-Aware CSS Shapes 与 Direction-Aware Arrow Shape using corner-shape，扩展了方向感知样式的应用视角
author Temani Afif
Css-Tip
The Hidden Selectors of The HTML Element
Discover alternative selectors for the html element beyond the classic `:root{}` and `html{}`
#博客更新 #碎碎念 #前端 #安全
昨晚改好了，记录一下复盘。
只能说还得是 Docker 救大命，这要是 pm2 跑的话……以前懒得写 Docker Compose 的时候，很多应用会用 pm2 跑，现在不敢了。
React RCE 漏洞影响自建 Umami 服务 —— 记 CVE-2025-55182
昨晚改好了，记录一下复盘。
只能说还得是 Docker 救大命，这要是 pm2 跑的话……以前懒得写 Docker Compose 的时候，很多应用会用 pm2 跑，现在不敢了。
React RCE 漏洞影响自建 Umami 服务 —— 记 CVE-2025-55182
#安全 #碎碎念 #react
React 这个 CVE……影响范围比我想的还大得多，自建的 umami 服务今天突然发现 504 了才想起来，沃日，它是 Nextjs 写的啊！！！！
虽然是在 docker 里跑的并且炸的是我一个不常用的服务器，最大的损失是 CPU 占用率突然飙到 100% 了一段时间，统计数据丢了不少。
随便找了一篇博客：
安全漏洞核弹|又一个CVSS10.0满分的安全漏洞爆发｜我的服务被攻击了，拆解攻击过程
React 这个 CVE……影响范围比我想的还大得多，自建的 umami 服务今天突然发现 504 了才想起来，沃日，它是 Nextjs 写的啊！！！！
虽然是在 docker 里跑的并且炸的是我一个不常用的服务器，最大的损失是 CPU 占用率突然飙到 100% 了一段时间，统计数据丢了不少。
随便找了一篇博客：
安全漏洞核弹|又一个CVSS10.0满分的安全漏洞爆发｜我的服务被攻击了，拆解攻击过程
#优质博文 #React #SSR #ISR #前端 #工程化 #构建系统
Build your own web framework - Vercel
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Lydia Hallie
via @hyoban 投稿
Build your own web framework - Vercel
AI 摘要：本文由 Vercel 的 Lydia Hallie 撰写，介绍如何利用 Vercel 的 Build Output API 构建一个基于 React 的简易 Web 框架，支持静态渲染（Static Rendering）、增量静态再生（Incremental Static Regeneration, ISR）、服务端渲染（Server-Side Rendering, SSR）、边缘函数（Edge Functions）和自动图片优化等功能。文章不仅讲解框架涉及的文件结构和构建流程，还展示如何将每种渲染模式映射为 Vercel 可识别的输出，从而部署到无服务器（Serverless）和 Edge 环境。虽然该示例为教学版，但完整演示了现代框架实现高性能与可扩展架构的关键思路。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 框架目标与核心组件
• 通过 Vercel Build Output API 构建自定义 Web 框架
• 实现静态页面、增量渲染、服务端渲染、边缘渲染和图片优化等现代框架功能
• 所有页面位于 pages/ 目录，并根据配置选择不同渲染策略（static、ssr、prerender 或 edge）
2. 页面设计与优化策略
• Landing Page：通过图片优化与 Edge 缓存提升首页首字节时间（TTFB）
• Products Page：结合静态与动态渲染，利用 ISR 实现自动再生更新
• Popular Page：借助 Edge Functions 根据用户地理位置实现个性化推荐
3. 框架实现细节
• Static Rendering：
• 使用 ReactDOMServer.renderToString 将组件预渲染为 HTML
• 输出文件结构至 .vercel/output/static，生成可 Hydrate 的 JS 包
• Incremental Static Regeneration (ISR)：
• 创建 .func 文件夹与 prerender-config.json 配置缓存过期与再生逻辑
• 增设 fallback HTML 提供渐进体验
• Serverless Functions：
• 每个动态页生成一个 Lambda（serverless）函数，用于按需（re）生成页面
• 利用 .vc-config.json 定义运行时、入口点与上下文
• Edge Server Rendering：
• 在 Edge Runtime 中使用 React 进行服务端渲染
• 动态注入 req 对象以生成个性化内容
4. 自动图片优化（Automatic Image Optimization）
• 自定义 Image 组件，将图片请求代理至 /_vercel/image
• 基于 vercel.config.js 生成 .vercel/output/config.json，统一图片格式（webp/avif）、域名和缓存策略
5. 构建与输出过程（Build Output）
• 遍历所有页面并执行对应的渲染方法
• 拷贝静态资源至 .vercel/output/static
• 自动创建 .vercel/output/config.json 配置文件
• 构建完成后可直接通过 Vercel 部署，享受边缘分发与函数服务
6. 结论
• 框架可作为理解现代渲染机制与 Vercel 部署架构的参考
• 虽非生产版本，但展示了现代框架（如 Next.js）背后的核心逻辑
• 适合框架作者或独立开发者应用 Vercel 的核心特性进行自研集成
author Lydia Hallie
via @hyoban 投稿
Vercel
Build your own web framework - Vercel
Build your own web framework that deploys to edge and serverless infrastructure.
#优质博文 #前端 #CSS #3D
The Deep Card Conundrum
有点感慨
[以下是方便搜索索引的大纲（AI 生成），请读原文]
author Amit Sheen
The Deep Card Conundrum
我喜欢这个解决方案，不仅因为它有效（而且效果非常好），还因为它教会了我一个谦卑的教训。
我曾一度认为 perspective-origin 是个“坏”属性。我对它抱有抵触情绪，因为我只把它看作是造成图像失真的根源。我一心只想找到制作 3D 的“正确”方法，却忽略了真正能解决问题的工具。
Cubiq 并没有这种偏见。他看到的是一个数学问题：“我需要当旋转方向为 Y 时，投影看起来要像 X。”然后他找到了控制投影的属性。
有点感慨
AI 摘要：本文由 Amit Sheen 撰写，讲述他如何在纯 CSS 的限制下实现具有真实 3D 深度和裁剪效果的“Deep Card”。传统做法会因 overflow: clip 扁平化 3D 空间而失败。作者在尝试数年未果后，受到 Cubiq 的启发，用 perspective-origin 动态校正视角，实现了既可保持 3D 空间又可裁剪内容的完美效果。这一方案不仅重燃了纯 CSS 的创造力，也提醒开发者，不要过早排斥某些特性，真正的创新往往在规则之外。
[以下是方便搜索索引的大纲（AI 生成），请读原文]
1. 卡片与“深度卡片”的概念
• 普通卡片是二维的，最多用阴影暗示层次；“Deep Card”试图在卡片内构建真实的体积。
• 技术目标：让元素在旋转时表现出真实景深与透视变化。
2. CSS 陷阱与规范限制
• 核心难题是 overflow: clip 与 transform-style: preserve-3d 无法共存。
• 依据 CSS Transforms Module Level 2 规范：含有分组属性的元素（如 overflow、opacity、filter）会被“扁平化”，导致 3D 效果丢失。
3. 伪 3D 的尝试（Faking It）
• 通过 scale() 与 translate() 等方式模拟透视变化。
• 优点：高性能、跨浏览器兼容；缺点：角度一大透视破碎，难以保持自然立体感。
4. 数学解法的探索之路
• 尝试为每层使用 clip-path 来动态裁剪，但计算复杂度极高，需要实时三角与投影运算。
• 作者几乎放弃时，收到开发者 Cubiq 的信息，成为突破契机。
5. 关键突破：perspective-origin 的反向运用
• 以往被认为“畸变丑陋”的属性被重新发掘。
• Cubiq 的公式通过基于旋转角度动态计算 perspective 与 perspective-origin，实现投影映射式的深度对齐。
• 结果：在被扁平化的上下文中实现了视觉上的真实 3D 效果。
6. 实现细节与代码结构
• HTML 结构：.card-container > .card > .card-content + .card-back。
• JS 监听鼠标位置，计算 --mouse-x、--mouse-y。
• CSS 关键：
• 外层提供全局 perspective。
• 内层通过 calc(cos/sin) 动态校正视角。
• overflow: clip 限定边界，translateZ() 生成深度分层。
• 注意 .card-layers 容器避免直接扁平化问题。
7. 深化与扩展效果
• 利用亮度变化、半透明叠加强化视觉深度。
• 控制 z-index 实现不同的层次呈现。
• 可添加交互，如点击翻转 180°（前后双面内容）。
• 内层动画（如视差滚动与文字 3D 动效）进一步扩展场景。
8. 启示与总结
• 结论：纯 CSS 也能实现真实的 3D 深度与裁剪效果。
• 哲思：别轻易排除技术手段，创新常源自对“禁区”的重新理解。
• 鼓励读者“go build something deep”——继续挑战 CSS 的极限。
author Amit Sheen
Frontend Masters
The Deep Card Conundrum
In the world of web design, we often talk about “cards”. Those neat little rectangles that group information together are the bread and butter of modern UI. But usually, these cards are as flat as the screens they live on. Maybe they have a subtle drop shadow…
#优质博文 #CSS #前端 #布局
The Downsides of scrollbar-gutter: stable; (and one weird trick)
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
author Chris Coyier
The Downsides of scrollbar-gutter: stable; (and one weird trick)
AI 摘要：本文阐述了 scrollbar-gutter: stable; 在解决页面布局因滚动条出现与否而引起的内容跳动（layout shift）问题上的便利，同时指出它在某些场景下（如 iframe 环境或元素居中对齐）会导致“空白滚动条占位”以及视觉不居中的副作用。作者进一步提出一种利用 CSS Scroll State 查询的替代方案，通过检测页面是否可滚动来动态调整内边距，为未来更灵活的滚动状态响应式设计提供了思路。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 引入与背景
• 提到 Zach 建议在样式表中默认使用 scrollbar-gutter: stable;。
• 该属性能为滚动条预留空间，避免内容在滚动条出现或消失时的跳动。
• 应用场景：在系统设置为“始终显示滚动条”时尤为明显。
2. scrollbar-gutter: stable; 的优点与原理
• 通过为滚动条占位，页面在加载更多内容时不会发生横向位移。
• 浏览器支持广泛，适合用于布局稳定性的优化。
• 视觉表现：用白色或暗色条带代替滚动条区域，从而避免内容的移动。
3. 使用中的缺陷与视觉问题
• 在 CodePen 等 iframe 环境中，会出现“纯白空隙”（白条）的问题。
• 在非 iframe 环境下虽无白条，但元素居中计算仍未考虑滚动条占位。
• 导致视觉上轻微偏移，尤其在内容需要精确居中时效果不佳。
4. 替代方案：基于 Scroll State 的新思路
• 介绍 CSS scroll-state 容器查询用法，通过判断页面是否可滚动来实现自定义布局调整。
• 示例代码展示了如何利用自定义 CSS 变量和 vendor prefix 控制滚动条宽度。
• 该方法灵活但依赖较新的浏览器支持，尚属实验性方案。
• 作者希望未来能有系统级变量（如 env()）能动态获取滚动条宽度，提升可用性。
5. 总结与展望
• scrollbar-gutter: stable; 简单易用，但小缺陷让人犹豫是否应作为默认。
• CSS Scroll State 提供潜在方向，让开发者更精确地应对滚动相关的布局变化。
• 未来网页布局中可能会实现更智能的滚动状态适配机制。
author Chris Coyier
Frontend Masters
The Downsides of scrollbar-gutter: stable; (and one weird trick)
The esteemed Zach (Leatherpants), blogged about the virtues of scrollbar-gutter: stable;, suggesting it might be good in a starter stylesheet. (Hey, I’ve got one of those.) The thing that it solves is content-shifting. If you have a page that, upon first…
#博客更新 #AI
我的 Claude Code 使用小记 2
距离我 8 月份写下《我的 Claude Code 使用小记》已经过去了近 4 个月，在这段时间的高强度使用后，是时候分享一些新的体验了。
很短，并且比较支离破碎流水账，主要是为了记录。
我的 Claude Code 使用小记 2
距离我 8 月份写下《我的 Claude Code 使用小记》已经过去了近 4 个月，在这段时间的高强度使用后，是时候分享一些新的体验了。
很短，并且比较支离破碎流水账，主要是为了记录。
#优质博文 #前端 #CSS #排版 #设计 #layout #容器查询
Getting Creative With “The Measure”
[以下是方便搜索索引的大纲（AI 生成），请读原文]
author Andy Clarke
Getting Creative With “The Measure”
AI 摘要：本文从传统排版学出发，探讨了 “measure（行长）” 概念如何指导现代网页设计。作者建议以内容可读性为核心，用自定义 CSS 属性结合 ch 单位控制文本宽度，将 measure 延伸到多栏布局、网格系统 (Grid)、以及容器查询 (Container Query) 的设计逻辑中。通过以内容为依据而非设备尺寸来设定断点，设计者可以创造出更自然、更连贯、更具可读性的排版系统。
[以下是方便搜索索引的大纲（AI 生成），请读原文]
1. 传统排版中的 measure 概念
• “Measure” 起源于金属活字时代，指每行文本能容纳的宽度，是版面设计的核心要素。
• 好的 measure 提高阅读舒适度，差的 measure 会让读者疲劳。
• 从排版角度来看，measure 应成为布局决策的依据，而非被动的结果。
2. 使用 CSS 自定义属性定义 measure
• 使用 --measure 自定义属性并以 ch 单位（字符宽度）定义行长。
• 推荐 60–70 字符每行为理想可读长度。
• 不同字体的 x-height 与字宽会影响实际视觉行长，需通过视觉调整。
3. 保持文字可读性
• 通过 max-inline-size: var(--measure) 控制正文宽度取代 max-width。
• 运用 CSS 逻辑属性 (Logical Properties) 进行方向无关的布局。
• 有效防止“大屏长行综合症”，保持阅读舒适。
4. 设计多栏文本 (Multi-column Layout)
• 使用 column-width: var(--measure) 让浏览器自动计算可读列数。
• 单栏与多栏布局可自适应，不需媒体查询。
• measure 让版面转换更加平滑自然。
5. 用 measure 引导网格布局 (Grid System)
• 在网格定义中，将主文本区的列锁定在 measure 宽度，如 grid-template-columns: minmax(0, var(--measure)) 1fr;。
• 第一列保持理想阅读宽度，第二列灵活适配剩余空间。
• 强化内容与版面之间的连结感。
6. 以 measure 为条件的容器查询 (Container Queries)
• 打破以设备宽度设断点的思维，用内容本身触发布局变化。
• 当容器宽度小于 measure 时，布局可自动折叠至单栏。
• 创建 “内容驱动 (Content-driven)” 的响应设计，而非 “设备驱动 (Device-driven)” 布局。
7. 构建 measure 系统
• 定义多个 measure 变量（如 --measure-s, --measure-l）应对不同文本类型。
• 小 measure 用于说明文字，标准 measure 用于正文，大 measure 用于标题与引导。
• 统一的行长节奏让页面更具整体性与阅读流畅感。
8. 从 measure 出发重新理解设计
• 以 measure 为核心的设计能让排版从“试错”转变为“对话”。
• 内容与布局相互协调，带来更有意识和一致性的视觉节奏。
author Andy Clarke
CSS-Tricks
Getting Creative With “The Measure” | CSS-Tricks
A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?
#碎碎念 #追番
现在向我们走来的，是 2026 续作年！
2026年1月新番表
想看
还有不在这个季度的
什么时候能看到游戏人生第二季
现在向我们走来的，是 2026 续作年！
2026年1月新番表
想看
我推的孩子 第3期
葬送的芙莉莲 第2期
公主大人 接下来是“拷问”时间 第2期
神八小妹不可怕
相反的你和我
超时空辉夜姬！
还有不在这个季度的
孤独摇滚 S2
入间同学入魔了！ S4
药屋少女的呢喃 S3
100女友 S3
欢迎来到实力至上主义的教室 S4
什么时候能看到游戏人生第二季
#前端 #demo #codepen #CSS
CSS 之神在上，这太酷了。
Animated Hover Disclosures
https://fixupx.com/jh3yy/status/1940066323658158198
CSS 之神在上，这太酷了。
Animated Hover Disclosures
jhey ʕ•ᴥ•ʔ(@jh3yy): transitioning CSS grid-template-columns on :focus/:hover means the parent container won't change size 🏅
https://fixupx.com/jh3yy/status/1940066323658158198
#优质博文 #前端 #React #安全 #RCE #POC
CVE-2025-55182 React Server Components RCE POC
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
Source
CVE-2025-55182 React Server Components RCE POC
AI 摘要：作者展示了 CVE-2025-55182 漏洞的具体利用方式，说明该漏洞出现在 React Server Components 的反序列化机制中。通过伪造 Chunk 对象以及操控 then 方法触发链式调用，攻击者可以利用 Next.js 的服务端组件解析逻辑实现远程代码执行 (RCE)。文章详细讲述了漏洞的产生原理、攻击向量和具体请求示例，说明此问题的严重性与利用条件。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 漏洞背景与影响范围
• 漏洞编号为 CVE-2025-55182，影响 React Server Components 的反序列化过程
• 可在 Next.js 16.0.6 环境下触发
• 利用对象结构中的 $@ 标记机制篡改 Chunk 引用并控制反序列化流程
2. 核心利用思路 (Exploit 原理)
• 使用 $@ 引用构造伪造的 Chunk 实例
• 将 Chunk.prototype.then 作为根对象的 then 属性，使得在 Promise 处理时自动触发攻击逻辑
• 通过修改 status 为 RESOLVED_MODEL 调用 initializeModelChunk 以执行受控对象的代码路径
3. 攻击链实现与触发机制
• 攻击目标是触发 Blob 反序列化流程
• response._formData.get 被重写为 JavaScript Function 构造器，实现任意代码执行
• 构造的 multipart/form-data 请求载荷通过控制 _prefix 字段注入任意命令（例如 child_process.execSync('xcalc')）
4. 安全意义与防护思考
• 漏洞本质源于反序列化信任边界不明与模型解析机制的未过滤输入
• 需加强 React Server Components 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本
Source
Gist
CVE-2025-55182 React Server Components RCE POC
CVE-2025-55182 React Server Components RCE POC. GitHub Gist: instantly share code, notes, and snippets.
#前端 #CSS #demo
这太酷了~
https://fixupx.com/jh3yy/status/1816290576087515620
这太酷了~
jhey ʕ•ᴥ•ʔ (@jh3yy): This CSS trick is fascinating ⭐️
By setting: [type=range] { overflow: hidden; }
You can create a view timeline on the handle:
::-webkit-slider-thumb { view-timeline: --thumb inline; }
And then you can use that to build all sorts of custom range sliders 🚀
https://fixupx.com/jh3yy/status/1816290576087515620
#音乐
喜欢
「蝴蝶（冰火歌会）」- 洛天依/沢渡禾安
专辑: 蝴蝶
#网易云音乐 #flac 21.28MB 809.94kbps
via @Music163bot
喜欢
「蝴蝶（冰火歌会）」- 洛天依/沢渡禾安
专辑: 蝴蝶
#网易云音乐 #flac 21.28MB 809.94kbps
走吧就算我们无法让大雨停下
还有我陪你在雨里放肆奔跑啊
地球上天空下我们做一对傻瓜
你我生来时就注定天真而伟大
你啊就算永远无法被世界回答
没关系还有名为自己的魔法
你啊就算下一秒全世界都崩塌
还有我在你身边说我爱你啊
via @Music163bot
