呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #兼容性 #video #编解码 #视频
How to use transparent videos on the web in 2025
author Morten Just
How to use transparent videos on the web in 2025
AI 摘要:本文详细介绍了在网页中嵌入透明视频的技术挑战与实现方法。尽管透明视频在网页设计中具有巨大潜力(如叠加内容、动态形状变化等),但由于浏览器兼容性问题(Chrome 支持 VP9 格式,Safari 支持 HEVC 格式),开发者需提供多格式视频并动态适配。文章提出两种方案:
• 简易方案:通过合成视频与背景颜色模拟透明效果(如 Typeform 的案例),适用于背景抽象的场景。
• 真实方案:分别导出 HEVC(Safari)和 VP9(Chrome)格式的透明视频,通过 <video> 标签的多源加载实现跨浏览器兼容。
此外,文章还提供了视频转换工具(如 Rotato Converter、FFmpeg)的具体操作指南和代码示例。
1. 透明视频在网页中的应用潜力
• 透明视频(带Alpha通道)可实现创意效果,例如:
• 在HTML内容上方叠加视频
• 在另一个视频上叠加播放
• 动态改变视频形状
• 打破传统视频的“方框”外观,与页面内容自然融合
2. 当前技术挑战
• 浏览器兼容性问题:
• Safari支持HEVC/H.265格式的透明视频,但不支持VP9/WebM的透明通道。
• Chrome支持VP9/WebM的透明视频,但不支持HEVC的透明通道。
• 需同时提供两种格式以覆盖主流浏览器。
3. 实现透明视频的两种方法
• 简易方法(“障眼法”):
• 适用于背景为纯色或抽象动态的场景。
• 将前景视频与背景视频合并为单一文件,通过颜色匹配模拟透明效果(如Typeform的案例)。
• 标准方法(真实透明通道):
• 需分别导出HEVC(.mov)和VP9(.webm)格式的视频文件。
• 使用HTML5 <video>标签嵌套多个<source>,让浏览器自动选择兼容格式。
4. 视频转换工具与步骤
• 工具推荐:
• Rotato Converter:免费工具,一键转换HEVC和VP9格式。
• FFmpeg:命令行工具,支持高级参数调整(如CRF控制质量/大小)。
• 转换步骤:
1. 从编辑软件(如Rotato、Premiere)导出带Alpha通道的原始视频(建议720p)。
2. 转换为HEVC(Safari兼容)和VP9(Chrome兼容)。
3. 调整参数(如-crf控制压缩质量,-preset影响编码速度)。
6. 关键注意事项
• 文件大小优化:透明视频文件较大,需平衡质量与加载速度。
• 测试验证:在不同浏览器中检查透明效果是否生效。
author Morten Just
#优质博文 #前端 #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
#前端 #新动态 #优质博文 #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
#前端 #新动态 #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
#博客更新 #前端 #vscode #插件 #tools
2025 前端开发 vscode 常用插件推荐
终于写了,但是新增的插件其实也没多少 23333 大多数插件还是之前用的,一直好用。新增的工具倒是不少,但是应该会放另一篇文章里去,先去吃个萨莉亚再说,饿死我了!!
2025 前端开发 vscode 常用插件推荐
终于写了,但是新增的插件其实也没多少 23333 大多数插件还是之前用的,一直好用。新增的工具倒是不少,但是应该会放另一篇文章里去,先去吃个萨莉亚再说,饿死我了!!
AI摘要:新增插件聚焦:WebGL(Shader)、Tailwind 工具链(高亮/文档)、国际化(i18n)、设计协作(Figma)。
核心工具保留:GitLens、ESLint/Prettier、Tailwind 生态插件。
效率提升:通过 CSV 处理、项目管理、注释翻译等插件优化工作流。
个性化选择:外观特效(如 Power Mode)按需启用。
作者备注:部分插件因转用 Cursor 编辑器或使用频率低而弃用,推荐列表基于实际开发场景筛选。