#前端 #新动态 #优质博文 #css #html
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

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 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！

AI摘要：新增插件聚焦：WebGL（Shader）、Tailwind 工具链（高亮/文档）、国际化（i18n）、设计协作（Figma）。
核心工具保留：GitLens、ESLint/Prettier、Tailwind 生态插件。
效率提升：通过 CSV 处理、项目管理、注释翻译等插件优化工作流。
个性化选择：外观特效（如 Power Mode）按需启用。
作者备注：部分插件因转用 Cursor 编辑器或使用频率低而弃用，推荐列表基于实际开发场景筛选。

#碎碎念 #老番
爷青回，VCB 好😭（
Kamisama Hajimemashita / 元气少女缘结神 10-bit 1080p/720p HEVC BDRip/DVDRip [S1-S2 + OAD Fin]

#前端 #demo #css #交互设计 #design
好酷哦，感觉这个加上音效一定会很解压（

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

#前端 #demo #css
还挺真的

CSS旋转骰子 —— Jon Kantner 使用“颜色和盒影动画的混合”完美地再现了一个六面骰子。看看那些点子里的光泽！

via Stone Buttons, offset-path, and OKLCH Color | CodePen Spark Feed 436

#AI #design
好棒的设计，喜欢
https://fixupx.com/OikawaRizumu/status/1905314820641226811

🧵 Thread • FixupX

绚香音 Rizumu (@OikawaRizumu)

让 GPT 4o 给我的软件设计了一版 UI ，居然有点好看 😂

Quoting 绚香音 Rizumu (@OikawaRizumu)

项目开源在这里，感兴趣可以玩玩看～
https://github.com/LittleSound/bekuto3d

cosine - 前端人の日常频道

#碎碎念 #移动端适配 #坑 我恨 Safari（咬牙切齿） 当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常 我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity…

#碎碎念 #坑
🤡 败了，经过几天的奋斗认清事实了，不用 svg 了直接定位了，svg + foreignObject + transform + 一些 xy 魔法在 Safari 里就是古神一般的存在，同样的代码在 Chrome 里 work 的非常自然，打开 Safari 的时候定位全乱是多么痛的体验，调试起来也是完
折磨。换了 dom + 绝对定位实现完整个人都舒心了无比流畅。

为什么，为什么这个定位会偏，为什么安卓上不会偏（选中）（看size看坐标）（对的啊）

有空想办法整整最小复现看看。

将您的SVG 图片带入现实世界：
https://github.com/LittleSound/bekuto3d

#优质博文 #前端 #react
从 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 风痕

fenghen.me

从 React 看前端 UI 代码范式革命 | 风痕 · 術&思

alt text

前言

本来打算写的主题是“我为什么讨厌 React Hooks API”，展开聊聊“小甜甜”是如何变成“牛夫人”的，没想到越写越严肃：）

React 是两次前端范式革命的引领者，至今仍有繁荣的社区和旺盛的创造力；
React 多次天才又激进的创新，一些想法被借鉴改良、一些引发广泛质疑，大部分是被认同和接受的； ...

#碎碎念 #搬家
一盒子白色充电头展览
你别说这插座真香，还可以刷机还可以塞充电头

#优质视频 #碎碎念
我不怎么看搞笑视频，但是这个真的笑死我了。
《双影奇境》真人版
@小叮当的伙伴们:
搞笑 - 两天磨一剑，终于把双影奇境校园版复刻出来了。有失误全伤通关，最后boss太难打了，无奈只能开桂，大家想玩的可以自己去拍。想看下一章节《激战食堂》的，可以在评论区给我们脚本！

Bilibili

《双影奇境》真人版_哔哩哔哩_bilibili

两天磨一剑，终于把双影奇境校园版复刻出来了。有失误全伤通关，最后boss太难打了，无奈只能开桂，大家想玩的可以自己去拍。想看下一章节《激战食堂》的，可以在评论区给我们脚本！, 视频播放量 1658945、弹幕量 760、点赞数 84266、投硬币枚数 25327、收藏人数 27300、转发人数 21489, 视频作者 小叮当的伙伴们, 作者简介 四个抽象大学生和一根香蕉up主，深大机电学院理工男，追求拍啥像啥。商务合作15889483994，相关视频：【双影奇境】策划出这一段人机验证的真是神人了🥵，3分…

#优质博文 #前端 #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?

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

Stack Overflow

How to use z-index in svg elements?

I'm using the svg circles in my project like this,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<g>
<g id="one">
<circle fill="green"...

Akasha Terminal: dev🍃

转转上门抢劫，mbp 也没卖掉，添点钱全款买了新的（

在这里同出一个 M1 Pro 的 MBP，银色，16+1T，10 核 CPU+16 核 GPU，美版，Apple Intelligence 已经可用

成色自定义 9 成新：
A 面有个非常小的凹坑（剪刀不小心砸到了），ACD 面有一些正常使用的细小划痕，键盘祖传打油（售后可以免费换，过保也行），电池健康 98% 左右

转转报价 6k，闲鱼均价 7.5k，群友优惠按均价立减 -300

某人看我换了之后自己也想换，所以后面可能还会出个 MBP14（
#二手

#碎碎念 #二手
mac 滞销，帮帮我们
这下可能要出三个 mac 换两个 mac 了。

1. MacBook Air M1 丐版 (深空灰) 8+256 自定义成色 9 成新以上，无拆无修，电池健康大概 90% 左右 群友优先，太惨出不掉的话，过两周安定下来再挂闲鱼上，闲鱼看了下，类似成色成交价都在 2600 左右，群友优惠 2400 吧
已出

2. M1 Pro  MBP，银色，16+1T，10 核 CPU+16 核 GPU，美版，Apple Intelligence 已经可用
成色自定义 9 成新：A 面有个非常小的凹坑（剪刀不小心砸到了），ACD 面有一些正常使用的细小划痕，键盘祖传打油（售后可以免费换，过保也行），电池健康 98% 左右
转转报价 6k，闲鱼均价 7.5k，群友优惠按均价立减 -500

3. 自用 MBP 14 寸 16+512g 深空灰，跟上面差不多，详细描述稍后补充，群友按闲鱼均价 -500

cosine - 前端人の日常频道

#前端 #优质博文 #新动态 #chrome #css 试了试总结功能，真好用喵！搭配自己的 md2tg bot 可直接 copy 了。 New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more! Moe Copy AI 总结：Chrome 2025 年第一季度更新聚焦于 CSS 布局控制（如 text-box）、开发者工具增强（文件系统 API 扩展、DOM 状态保留…

#碎碎念 #AI
突然有感而发，我对 AI 摘要、总结内容之类的态度是用来后期检索和回忆的，所以在有内容的同时准确性不那么重要，应该不会有人摘要完了就不读原文吧，除非不感兴趣的文章。（因为看到好像有人很反感 AI 摘要总结之类的）

并且我写东西也是，只要发出去了别人随便怎么造都行（心态好像不太正确）

Akasha Terminal: dev🍃

近期打算把吃灰大半年的 MacBook Air M1 丐版 (深空灰) 出掉。
自定义成色 9 成新以上，无拆无修，电池健康大概 90% 左右，具体忘了，等忙完这几天再看看。
3年经验前端群友亲测严选，vscode 装 120+ 插件高强度办公一年基本流畅（划掉
就是写了 80T 的 swap（
还试过外接4K显示器一线连，基本流畅不是问题，就是内存压力没绿过
转转回收只肯出1.9K，上门抢劫了属于是（
群友优先，太惨出不掉的话，过两周安定下来再挂闲鱼上（

#碎碎念 #二手
是谁写了 80T 的 swap，好难猜啊。
出俺实习的时候用过的mac（逃）
真女生自用9成新

#优质博文 #前端 #css #course
经典八股，适合初学者（）
CSS vertical alignment: Best practices and examples

AI 总结：文章介绍了CSS垂直对齐的多种方法，包括Flexbox、Grid、绝对定位和基于表格的方法。Flexbox和Grid提供灵活且响应式方案，而绝对定位和表格方法则在兼容性方面有优势。文章详细比较了每种方法的优缺点、浏览器兼容性和适用场景，并提供了代码示例和可交互的CodePen链接。最后，文章也讨论了垂直对齐对可访问性和可读性的影响，建议在长文本中尽量避免使用垂直对齐，并优先选择Flexbox或Grid以确保响应式布局。

1. CSS垂直对齐的背景与挑战
• 早期CSS缺乏直接垂直居中的方法，开发者常依赖JavaScript或Hack方案（如table-cell）。
• 现代CSS（Flexbox、Grid等）提供了更简单、灵活的解决方案。

2. 垂直对齐的定义
• 顶部对齐（Top）：元素紧贴容器顶部。
• 居中对齐（Middle）：元素与容器顶部和底部距离相等。
• 底部对齐（Bottom）：元素紧贴容器底部。

3. 关键技术与示例
• Flexbox：
• align-items: center（垂直居中）、justify-content: center（水平居中）。
• align-self控制单个项目对齐。
• margin: auto实现快速居中（仅限单个元素）。
• Grid：
• place-items: center（单行代码实现居中）。
• grid-row精确控制行位置。
• 绝对定位：
• top: 50% + transform: translateY(-50%)经典方案。
• position: absolute + margin: auto（需固定高度）。
• 传统方法：
• vertical-align：适用于行内元素或表格单元格。
• line-height：单行文本居中（需匹配容器高度）。
• 伪元素法：通过::before和::after分配空间（较少用）。

4. 注意事项
• 无障碍性：垂直对齐文本可能影响阅读障碍用户，建议仅用于标题等短内容。
• 响应式设计：优先选择Flexbox/Grid，避免传统方法（如table-cell）的兼容性问题。
• 浏览器兼容性：Flexbox/Grid需注意部分旧版本浏览器的前缀支持（如Safari 7-8）。

5. 结论
• 推荐方案：Flexbox和Grid是现代布局的首选，兼顾灵活性与响应式。
• 兼容性场景：绝对定位或vertical-align可作为备选。
• 开发者建议：根据具体需求（如元素类型、布局复杂度）选择合适方法。

提示：文章包含交互式CodePen示例（原文链接可查看），帮助直观理解不同技术的效果。

via Facundo Corradini