呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #tools #EPUB #开源 #rust
聊聊 Web 与 EPUB 的公式渲染问题
author Losses Don
聊聊 Web 与 EPUB 的公式渲染问题
AI 摘要：本文深入分析了 Web 和 EPUB 环境下数学公式渲染的常见问题，如浏览器兼容性差、EPUB 阅读器限制（如不支持 JS/SVG）、字体对齐困难等。作者提出了一种基于 Typst 的解决方案 Gladest，强调其“通用性”、“便利性”和“兼容性”三大设计原则。文章详细剖析了排版中的核心问题（如基线对齐、字体参数差异），并解释了 Gladest 如何通过 Typst 的轻量化工具链和 Rust 的高性能实现高效渲染。此外，作者呼吁字体厂商提供更友好的 Web Font 支持以改善排版体验，并分享了 Gladest 在解决多系统单位不一致性（如 em 单位标准化）和边距调整上的技术细节。
1. Web 与 EPUB 公式渲染的痛点
• 数学公式在 Web 和 EPUB 中的渲染存在兼容性问题，尤其在 EPUB 环境中（如电子墨水屏设备）表现更差，缺乏 JavaScript 和 SVG 支持。
• 主流工具（如 MathML、MathJax、KaTeX ）在特定场景下存在局限性，如字体兼容性、无 JS 环境支持等。
2. Gladest 的设计目标与实现
• 通用性：统一不同场景（博客、EPUB）的公式渲染工具，减少工具链碎片化。
• 便利性：基于 Typst（Rust 生态）开发，避免 LaTeX 的复杂性和历史包袱，支持LaTeX语法兼容层（mitex）。
• 高性能：利用 Rust 多线程能力，渲染速度显著优于传统方案（如 GladTeX ）。
3. 排版对齐的核心挑战
• 字体与基线对齐：图文混排时需处理不同字体的基线、x 字高、大写高度等参数差异，CSS 现有属性难以完美解决。
• 跨系统单位统一：通过 em 单位协调 Typst 与 Web 的渲染尺寸，确保公式在不同分辨率设备下的清晰度。
• Typst 的边距问题：Typst 硬编码的边距需通过 CSS 反向调整（如margin: -0.455em）以避免布局异常。
4. 行业呼吁与解决方案
• 提倡字体厂商提供分块优化的 Web Font（如WOFF2格式），以改善跨平台渲染一致性，IBM Plex Sans CJK 字体为范例。
• 强调开发者需主动适配字体参数，确保垂直对齐的精准性。
5. 未来计划
• 完善 Gladest 的自定义字体功能，增强基础稳定性后扩展字体元信息解析能力。
author Losses Don
螺莉莉的数据中心
聊聊 Web 与 EPUB 的公式渲染问题 | 螺莉莉的数据中心
如果你曾经尝试写过有大量数学公式的博客文章，那我相信你一定因为数学公式渲染的问题而略微痛过。而如果你尝试在 EPUB 里面排大量数学公式，额……朋友，你现在还好吗……
如果你只是单纯想在浏览器里面把一个公式渲染出来，其实这并不难。一方面我们有
MathML 这样的标准，另外一方面像是 MathJax、KaTeX 这类渲染库都能把事情做好。但如果你稍微有那么一丢丢额外的追求，那么事情就会变得无比麻烦。
比如：Chromium 的 MathML 兼容性其实没你想象当中的好，Firefox 这边如果你把数学公…
如果你只是单纯想在浏览器里面把一个公式渲染出来，其实这并不难。一方面我们有
MathML 这样的标准，另外一方面像是 MathJax、KaTeX 这类渲染库都能把事情做好。但如果你稍微有那么一丢丢额外的追求，那么事情就会变得无比麻烦。
比如：Chromium 的 MathML 兼容性其实没你想象当中的好，Firefox 这边如果你把数学公…
#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性
3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性
在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。
这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。
3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685
Chrome for Developers
现在可以使用 CSS 自定义 <select> 元素 | Blog | Chrome for Developers
界面保持不变，焕然一新。
#前端 #新动态 #tools #node #javascript
1. Node.js TSC 投票决定停止分发 Corepack —— Corepack 是作为与 Node 捆绑在一起的 （实验性）工具引入的，用于帮助管理包管理器的版本。Corepack 将作为单独安装的工具继续存在，但根据最近的 TSC 投票 ，它将从未来的 Node 版本中逐步淘汰。
2. Runtime compatibility 运行时兼容性表网站，显示不同 JavaScript 运行时之间的 API 兼容性。数据取自 Runtime-compat-data，基于 MDN 的格式。—— 这个自动更新的运行时兼容性表可让你了解不同的服务器端 JavaScript 运行时如何/是否支持不同的 API。
via Node Weekly 571
1. Node.js TSC 投票决定停止分发 Corepack —— Corepack 是作为与 Node 捆绑在一起的 （实验性）工具引入的，用于帮助管理包管理器的版本。Corepack 将作为单独安装的工具继续存在，但根据最近的 TSC 投票 ，它将从未来的 Node 版本中逐步淘汰。
2. Runtime compatibility 运行时兼容性表网站，显示不同 JavaScript 运行时之间的 API 兼容性。数据取自 Runtime-compat-data，基于 MDN 的格式。—— 这个自动更新的运行时兼容性表可让你了解不同的服务器端 JavaScript 运行时如何/是否支持不同的 API。
via Node Weekly 571
Socket
Node.js TSC Votes to Stop Distributing Corepack - Socket
Corepack will be phased out from future Node.js releases following a TSC vote.
#博客更新 #前端 #vscode #插件 #tools
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
AI摘要：新增插件聚焦：WebGL（Shader）、Tailwind 工具链（高亮/文档）、国际化（i18n）、设计协作（Figma）。
核心工具保留：GitLens、ESLint/Prettier、Tailwind 生态插件。
效率提升：通过 CSV 处理、项目管理、注释翻译等插件优化工作流。
个性化选择：外观特效（如 Power Mode）按需启用。
作者备注：部分插件因转用 Cursor 编辑器或使用频率低而弃用，推荐列表基于实际开发场景筛选。
#前端 #demo #css #交互设计 #design
好酷哦，感觉这个加上音效一定会很解压（
via Light & Dark Mode Themes with CSS | CodePen Spark Feed 437
好酷哦，感觉这个加上音效一定会很解压（
Volume Dials 音量调节按钮
Jon Kantner 受 Thomas Lau 的 Dribbble 照片启发，用这三个音量旋钮的漂亮的深色和浅色主题展示了他对 CSS 阴影和光线的掌握。
via Light & Dark Mode Themes with CSS | CodePen Spark Feed 437
关于「TheWan」 #app
2022 年下半年，我看了 Reorx 的一篇关于 n8n 的文章「使用自动化工作流聚合信息摄入和输出」，被他所说的「赛博空间」这一概念所吸引，搭建了我现在的这个频道，自动化同步我文章收藏、豆瓣记录、B 站投币、YouTube/Spotify 点赞等各个平台的记录，聚合了我在网络空间的数字痕迹。
当时一位颇为有缘的学弟找到我说想一起做一个这样的应用，每个人都可以建立自己的专属聚合频道但却不用去折腾 n8n、rsshub、telegram bot 这类繁琐的技术细节，我很感兴趣，一拍即合。
一开始信心很足，花了一个多月做了一个网站和配套的 api 与同步服务，还写了详细的文档，想着春节就能上线，但节后我的个人生活发生了很大的变化，我换了工作、搬家回了杭州，暂搁置了一阵子，再捡起时却已经缺乏了那一股劲。
随后的两年里这个产品既没有消亡却也未能如期上线，一次次跳票。甚至为了说服自己继续开发下去，我把它当成了一个技术 Playgroud —— 用 Rust 写了 api 服务，Go 写了同步服务，产品本身也从一个网页端迭代成了用 SwiftUI 写的原生 iOS App。
期间也有很多有意思的事。产品背后同步用的是 RSSHub，未曾想到自己现在也成为了项目的 maintainer，前段时间遇到一个小宇宙同步问题直接去上游一条龙修完了；以及期间也诞生了 Follow（现更名为 Folo），功能有些重合的点，一度让我对产品丧失了一大半的动力。
不过总觉得更多由于自己的原因跳票至今有些对不住一起的伙伴，所以在今年年初杭州和内蒙两场婚礼之间久违的空隙时间里完成了一个基础版本的开发，再经过和 Apple 审核近两周的 Battle 之下，终于上架了 App Store。
上午跟一位最早期就加入了 waitlist 并且日常有不少沟通的读者朋友讲了这个消息，他说：
自己很早之前就在博客里说过，想拥有一个自己的产品，后来真正开始做了才慢慢发现，即使是一个仅 1.1M 的小 App，从想法萌芽到最后打包上架都很不容易，但总之先迈出了第一步，回头看看，轻舟已过万重山。
欢迎感兴趣的朋友在 App Store 搜索「TheWan」或点击链接体验。
https://apps.apple.com/cn/app/thewan/id6670795669
2022 年下半年，我看了 Reorx 的一篇关于 n8n 的文章「使用自动化工作流聚合信息摄入和输出」，被他所说的「赛博空间」这一概念所吸引，搭建了我现在的这个频道，自动化同步我文章收藏、豆瓣记录、B 站投币、YouTube/Spotify 点赞等各个平台的记录，聚合了我在网络空间的数字痕迹。
当时一位颇为有缘的学弟找到我说想一起做一个这样的应用，每个人都可以建立自己的专属聚合频道但却不用去折腾 n8n、rsshub、telegram bot 这类繁琐的技术细节，我很感兴趣，一拍即合。
一开始信心很足，花了一个多月做了一个网站和配套的 api 与同步服务，还写了详细的文档，想着春节就能上线，但节后我的个人生活发生了很大的变化，我换了工作、搬家回了杭州，暂搁置了一阵子，再捡起时却已经缺乏了那一股劲。
随后的两年里这个产品既没有消亡却也未能如期上线，一次次跳票。甚至为了说服自己继续开发下去，我把它当成了一个技术 Playgroud —— 用 Rust 写了 api 服务，Go 写了同步服务，产品本身也从一个网页端迭代成了用 SwiftUI 写的原生 iOS App。
期间也有很多有意思的事。产品背后同步用的是 RSSHub，未曾想到自己现在也成为了项目的 maintainer，前段时间遇到一个小宇宙同步问题直接去上游一条龙修完了；以及期间也诞生了 Follow（现更名为 Folo），功能有些重合的点，一度让我对产品丧失了一大半的动力。
不过总觉得更多由于自己的原因跳票至今有些对不住一起的伙伴，所以在今年年初杭州和内蒙两场婚礼之间久违的空隙时间里完成了一个基础版本的开发，再经过和 Apple 审核近两周的 Battle 之下，终于上架了 App Store。
上午跟一位最早期就加入了 waitlist 并且日常有不少沟通的读者朋友讲了这个消息，他说：
不知不觉，这两年我娃都快一岁，你也结婚了，真快呀。
自己很早之前就在博客里说过，想拥有一个自己的产品，后来真正开始做了才慢慢发现，即使是一个仅 1.1M 的小 App，从想法萌芽到最后打包上架都很不容易，但总之先迈出了第一步，回头看看，轻舟已过万重山。
欢迎感兴趣的朋友在 App Store 搜索「TheWan」或点击链接体验。
https://apps.apple.com/cn/app/thewan/id6670795669
#前端 #demo #css
还挺真的
via Stone Buttons, offset-path, and OKLCH Color | CodePen Spark Feed 436
还挺真的
CSS旋转骰子 —— Jon Kantner 使用“颜色和盒影动画的混合”完美地再现了一个六面骰子。看看那些点子里的光泽！
via Stone Buttons, offset-path, and OKLCH Color | CodePen Spark Feed 436
将您的SVG 图片带入现实世界：
https://github.com/LittleSound/bekuto3d
https://github.com/LittleSound/bekuto3d
#优质博文 #前端 #react
从 React 看前端 UI 代码范式革命
author 风痕
从 React 看前端 UI 代码范式革命
AI 摘要：本文回顾 React 推动的前端两次范式革命（组件化与函数式 Hooks），分析其历史贡献与当前局限，并对比其他框架的改良方案。
文章以 React 为核心，梳理了前端 UI 代码范式的两次重大变革：
1. 第一次革命（组件化）：React 通过 JSX 打破传统关注点分离（HTML/JS/CSS 分离），引入数据驱动视图的组件化思想，解决了 jQuery 时代 DOM 操作混乱的问题。
2. 第二次革命（函数式 Hooks）：针对类组件的臃肿问题，React 推出 Hooks API，以 UI = f(state) 的理想化模型简化状态管理，但随之带来闭包陷阱、依赖管理等新挑战。
文章还批判性分析了 Hooks 的运行时机制缺陷（如重复渲染、状态过期），并对比 Solid.js 等框架的改良方案（如自动依赖收集），展望未来可能的范式演进。
author 风痕
#优质博文 #前端 #css #svg
又是被 svg 折磨的一天......所以 2025 了 SVG 2.0 现在是个什么情况？
https://www.w3.org/TR/SVG2/
https://stackoverflow.com/a/25302276
So… you can set an SVG circle’s radius in CSS?
via Paul Hebert
又是被 svg 折磨的一天......所以 2025 了 SVG 2.0 现在是个什么情况？
https://www.w3.org/TR/SVG2/
https://stackoverflow.com/a/25302276
So… you can set an SVG circle’s radius in CSS?
AI 摘要：文章揭示了CSS直接控制SVG圆形半径的可行性，解决了多文件同步维护的痛点，但指出相关浏览器支持文档的缺失，呼吁更清晰的标准化信息。
1. SVG圆形半径（r）可通过CSS设置
• 作者发现可以通过CSS的r属性直接设置SVG圆形的半径，且在现代浏览器（Firefox、Chrome、Edge、Safari）中均有效，但未找到明确的官方文档支持。
• 此功能可能源自SVG2草案，但浏览器支持情况未在常见资源（如MDN、CanIUse）中提及。
2. 应用场景：动态进度条动画
• 作者通过CSS变量（如--radius）计算圆的周长（--circumference），结合stroke-dasharray和stroke-dashoffset实现圆形进度条的动画效果。
• 关键代码逻辑：
• 通过半径计算周长（circumference = 2πr）。
• 根据百分比动态调整stroke-dashoffset，控制进度条显示比例。
• 旋转圆形使动画从顶部开始（默认从右侧开始）。
3. 开发痛点与解决方案
• 问题：原本需在SVG代码和CSS中分别定义半径，存在维护风险（如修改遗漏导致不一致）。
• 发现：通过CSS直接设置r属性可统一管理半径值，减少代码冗余。
4. 未解决的问题
• 浏览器对SVG2特性的支持范围尚不明确，缺乏权威文档参考，需依赖实际测试验证。
via Paul Hebert
