呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#前端 #新动态 #优质博文 #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 编辑器或使用频率低而弃用,推荐列表基于实际开发场景筛选。
#前端 #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
#碎碎念 #二手
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
这下可能要出三个 mac 换两个 mac 了。
已出
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
经典八股,适合初学者()
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