呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437

AI 摘要:本期《React Status》全面概述了 React 生态系统的最新进展,包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南,以及 AI 辅助 UI 构建的效率对比。此外,还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成,以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库,并简要介绍了 JavaScript 领域的其他重要动态,如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
React Compiler 新版文档 – React 团队正努力改进 React Compiler(一个处于发布候选阶段的预编译优化工具)的官方文档,以便开发者深入学习和使用。
Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库,支持复制粘贴式开发,并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法,对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍,强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy(一个流行的 Node.js 静态站点生成器)的经验,并展示了性能提升。
使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例,用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年,帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单,提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本,新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件,包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试,该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。
React Compiler – React
#优质博文 #前端 #css #javascript #新动态
🚀 Frontend Focus#695

AI 摘要:本文是《Frontend Focus》第 695 期(2025 年 6 月 4 日)的摘要,涵盖了前端开发的最新动态、技术教程和工具资源。文章重点介绍了 OKLCH 颜色生态系统及其工具、CSS 新功能(如 if() 函数和 reading-flow 属性)、Web 平台状态更新以及多个实用工具和教程,内容涉及 HTML 对话框样式优化、浏览器自动化工具、AI 在 Web 开发中的应用等,旨在为前端开发者提供前沿技术资讯和实用资源。

OKLCH 颜色生态系统与工具 - 详细介绍了 OKLCH 颜色模型的优势,浏览器支持情况良好,并推荐了相关工具和最佳实践。还提到了一场题为《Programmable Colors: Bridging Design and Code》的相关演讲,值得观看。
WebStatus.dev 更新:更丰富的数据与洞察 - 开源的 Web 平台状态网站新增了功能覆盖范围、使用时间线、移动端数据等更新,帮助开发者查询和跟踪各类 Web 功能在不同浏览器中的兼容性。
CSS if() 函数与 reading-flow 属性(Chrome 137) - 展示了 CSS if() 函数的强大功能(目前仅在 Chrome 和 Edge 中可用)以及 reading-flow 属性的应用,附带简单直观的演示。额外推荐了 CSS Tricks 上关于 reading-flow 和 reading-order 的深入文章
• Rachel Andrew 总结了 Web 平台的最新变化和重要新增功能 - 包括 if() 函数、Web Push 等
• [Astro 生态系统的最新动态](https://astro.build/blog/whats-new-may-2025
Browser Company 停止开发 Arc 的原因说明
IE6、AI 与 Web 浏览的未来:RL Nabors 开启新系列,探讨 AI 如何改变 Web,提出“Chrome 是下一个 IE6”的观点,分析 Google 偏离 Web 标准可能导致浏览器停滞。
Smooothy:流畅、可扩展的滑块/轮播组件,包括键盘控制、视差、速度的自定义,以及 React 和 Vue 的实现。
MiNi PhotoEditor:一款带有特效、滤镜和裁剪功能的在线 WebGL 照片编辑器  #webgl
Bits UI:无头 Svelte 组件库 #组件库 #svelte
字体生成器 :使用 Unicode 字符生成精美文本 ——输入一些文本,此工具将生成无数纯 Unicode 格式的精美字体,供您复制粘贴。示例:𝔽𝕣𝕠𝕟𝕥𝕖𝕟𝕕 𝔽𝕠𝕔𝕦𝕤、snɔoℲ puǝʇuoɹℲ、F͜͡r͜͡o͜͡n͜͡t͜͡e͜͡n͜͡d͜͡ F͜͡o͜͡c͜͡u͜͡s͜͡ 等等。不过,务必注意可访问性以及某些设备(例如屏幕阅读器)的处理方式。
Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog
#优质博文 #前端 #react #组件库 #新动态
非常好 Mantine!

React Status #428
AI 摘要:本期 React Status 聚焦 React 生态的重要更新与实践指南,涵盖 Mantine 8.0 组件库升级、React 性能优化策略、React Server Components 与 Astro 的对比、数据架构设计等核心内容,同时介绍了 Relay、Tiptap 等工具的最新版本,并汇总了 JavaScript 生态的动态。

1. Mantine 8.0 发布
• 新增 20+ 组件(如 GitHub 风格热力图、树形组件、半圆进度条)和子菜单功能。
• 图表功能增强(集成 Recharts),作者 Vitaly Rtishchev 等。

2. 简讯摘要
• 匿名 Reddit 用户分享大厂 React 招聘流程
• React Conf 2025 将于 10 月在拉斯维加斯举办。
• Tiptap 3.0 Beta 发布(无头富文本编辑器框架)。

3. 工具与库更新
• react-sounds:为 React 应用添加音效。
• Relay v19:Facebook 的 React/GraphQL 框架,兼容 React 19。
• mono-jsx:服务端 JSX 运行时,支持多环境(Node、Deno 等)。
• PptxGenJS 4.0:JavaScript 生成 PowerPoint 文件。
• 其他:Material UI 7.1(支持 Tailwind CSS 4)、React Modal Sheet 4.4 等。
Version v8.0.0 | Mantine
#优质博文 #前端 #动画 #node #新动态 #javascript
📉 JavaScript Weekly Issue #734

AI 摘要:本期 JavaScript Weekly 涵盖多个技术动态:GSAP 动画库全面免费化、V8 编译优化、Node.js 版本更新、React 指令解析等。同时介绍了 Deno、Prisma 等工具更新,以及 PWA 离线应用、PDF 处理等实用教程。

1. GSAP v3.13 免费发布
Webflow 收购后,GSAP(GreenSock)动画库及其付费插件(如 MorphSVG)完全免费,含商业授权(包括以前付费的插件,如 MorphSVG 和 SplitText
• 提供演示案例和详细文档,但需注意其非开源许可(禁止与 Webflow 直接竞争)

2. 工具与框架更新
• Node.js:v18 终止支持,v24 即将发布。
• Deno 2.3:支持 FFI 和 Node 原生插件。
• Koa 3.0:现代化 HTTP 中间件框架,对标 Express。
• PDFSlick 3.0:基于 PDF.js 的 PDF 查看工具,支持多文档和注释。 #react #pdf #组件库

3. 教程与文章
What Does "use client" Do?:Dan Abramov 解析 use client 和 use server 的跨环境协作。
通过 Apps Script 将 Google Analytics 数据导出到 Google 表格Google Apps Script是一个基于 JavaScript 的平台,用于动态自动化各种 Google 应用程序中的任务。以下是如何使用它将 Google Analytics 数据导入 Google 表格。
• 字符串转换:Dr. Axel 探讨 JavaScript 中值到字符串转换的复杂性
• V8 优化:Chrome 136 引入显式编译提示,加速启动性能。

4. 其他动态
• Redis 8 重新开源(AGPL 许可)。
• jQuery 20 周年活动预告(2026 年)。
Tiny Emus 展示了近 200 个在浏览器中运行的模拟器,主要用于 8 位平台、游戏,甚至一些视觉 CPU 演示。
3.13 release | GSAP | Docs & Learning
#优质博文 #react #前端 #新动态
React Status #426

AI 摘要:本期 React Status 聚焦 React Compiler 进入 RC 阶段,介绍了 Dan Abramov 关于 "Impossible Components" 的深度解析,以及多项工具更新(如 React Three Map 1.0、ChartDB 等)。同时涵盖社区动态(如 RedwoodJS 拆分计划)和 JavaScript 生态新闻(如 pnpm 10.9 发布)。

1. 社区动态
React Compiler 进入候选版本阶段,计划未来几个月正式发布。
• 该团队还一直与 swc 项目合作,本次版本包含实验性的 swc 支持。
• RedwoodJS 拆分为 Redwood GraphQL 和 RedwoodSDK,后者推出新主页
• React Router 安全漏洞修复(Remix 2.16.3 / React Router 7.4.1)。
• pnpm 10.9 支持 JSR 包安装。
• Microsoft Edge 团队增强提案:建议增强 console.context() 方法, 以便通过视觉调整和过滤机制使其对开发人员更有用。

2. 工具与库更新
• React Lite YouTube Embed 2.5:更快速、隐私友好的 YouTube 视频嵌入方案。
• Next.js 15.4 Canary 多个测试版发布。
• React 组件更新:包括 json-edit-react(JSON 编辑器)、React Spinners(加载动画)、React Suite(组件库)和 React Uploady(文件上传工具)。

3. 博文与工具
📄Dan Abramov 探讨 "Impossible Components"(混合仅限服务端和仅限客户端特性的组件的所谓“不可能”组件),通过 React Server Components 实现解决方案。
• 关联阅读:Darius Cepulis 旧文《React 19 lets you write impossible components》
📄 在 React 应用中为受保护的路由自动执行 Cypress E2E 测试 Emeka Okoli
📄 2025 年基于 React 的静态站点生成器比较 Morel、Radakovic 和 Dwivedi
📄 如何在 RedwoodSDK 中使用 React 服务器函数流 Herman Stander
📄 使用 Vercel 的 AI SDK Robin Wieruch 构建全栈 AI 聊天
Frimousse:轻量级无样式 React Emoji 选择器。 #组件库
Spectacle:创建流畅的 React 演示文稿
React Three Map 1.0:将 3D 对象带入 2D 地图。React Three Fiber  与 react-map-gl 之间的桥梁,很酷。 Demo
ChartDB:开源数据库架构图编辑器,大学生课设最爱,支持 Postgres、MySQL、SQL Server、SQLite 等数据库,使用 React 构建,可自部署,在线演示
React Compiler RC – React
#前端 #新动态 #优质博文 #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 现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers
#前端 #svg #icon #开源 #动画 #组件库 #动态图标
https://github.com/cyberalien/line-md

Line MD 是一个基于 SVG 的开源图标库,专为现代 Web 设计和开发优化。其特点包括轻量级、可缩放、可自定义,并支持多种前端框架(如 React、Vue 等)。该库提供了一组简洁、线性的图标,适用于 UI 设计。项目托管在 GitHub 上,允许开发者贡献新图标或修改现有图标,适用于需要高质量矢量图标的 Web 应用开发。

可以在 https://icon-sets.iconify.design/line-md/ 上浏览所有图标

Refs: 另一个动态图标库 https://icons.pqoqubbw.dev/ 是使用 motion + svg GitHub - cyberalien/line-md: Animated Material Icons. Icons are animated using SVG Animations Level 2 spec, no scripts.
#工具推荐 #tools #组件库 #react #开源
star react-easy-crop
AI 摘要:react-easy-crop 是一个用于 React 的简单图片裁剪组件,支持图片和视频裁剪,提供直观的用户交互界面。它支持拖动、缩放、旋转等操作,易于集成和自定义。适合在头像上传、图片编辑等场景中快速实现裁剪功能。 GitHub - ValentinH/react-easy-crop: A React component to crop images/videos with easy interactions
#工具推荐 #前端 #组件库 #tailwind #react #nextjs #motion #落地页 #tools #动画

昨天群里看到的,相当漂亮的落地页酷炫组件库,且适用我的技术栈,加入知识库方便检索。

Aceternity UI 是一个前端UI组件库,专为快速构建美观网站而设计。用户可以通过复制粘贴组件代码,轻松集成到项目中,无需担心样式或动画。由 Next.js、React、TailwindCSS 和 Framer Motion,提供丰富的模板和组件,帮助开发者迅速提升网站外观和功能。

https://ui.aceternity.com/
#工具推荐 #astro #组件库 #开源 #趣站
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集,利用Astro框架的优势。它提供了一套可重用的组件和工具配置,关注通用的网页模式和增强功能,支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想,允许使用最小化的代码和小型文件,避免传统UI框架的臃肿,同时支持动态JS小组件的插入,确保未来兼容性和代码的高效性。

我是在这里面发现了一个 astro-tooltips 试了一下挺好用的,网页也很好看。

https://code.juliancataldo.com/#julians-web-garden Julian's Web Garden | Building blocks for making progressive and future-proof websites.Components collection features Astro, HTML…
#前端 #组件库 #AI
阿里的 Ant Design X 开源了,可以做自己的 AI 套壳站

Ant Design X 是一款为构建 Copilot 应用量身打造的 UI 组件库,旨在通过灵活的原子组件和高效的对话数据管理工具,帮助开发者快速创建个性化的 AI 对话界面。


GitHub 地址:https://github.com/ant-design/x GitHub - ant-design/x: Craft AI-driven interface effortlessly🤖
#快讯 #前端 #组件库 #拖拽
33k Stars 知名前端库停止维护,npm 包已弃用!

好像之前用过这个库,还有印象。后来改成 react-dnd 了,大伙的拖拽库都选哪家啊,好奇。
不过这篇文章看着感觉 AI 味好浓()

AI 摘要:知名前端库 react-beautiful-dnd 近期宣布停止维护,原因在于其性能、灵活性和可访问性不足。该库作者转而开发了新一代拖拽库 Pragmatic drag and drop,旨在提升体验并支持多种前端框架。此外,其他可替代方案包括:继续使用并维护 react-beautiful-dnd 的 fork 版本、迁移至 dnd-kitreact-dnd 等库。其中,dnd-kit 是轻量高效的 React 拖拽方案,react-dnd 则适用于复杂拖拽界面开发。另一个新兴方案 Swapy,以其简洁的实现获得快速关注。

from 微信公众号 前端充电宝 GitHub - atlassian/pragmatic-drag-and-drop: Fast drag and drop for any experience on any tech stack
#前端 #组件库 #工具推荐 #tools
发现我 star 过这个组件库但好像没推过,再 mark 一下:Magic UI

有人用过这个 MagicUI 没有?

https://magicui.design

是一个全新思路的组件库,主打一个 Landing page 上面的动画视觉效果,完美适配 shadcn/ui ,组件我全都感受了一遍,好喜欢的,如果大家想把页面的颜值上升一个等级,强烈建议试试看。Stars:9.3K

我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。


Source Twitter@vikingmute Magic UI
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我又忘掉了什么
科技爱好者周刊(第 288 期):技术写作的首要诀窍

1. 2023年前端技术盘点与展望(中文) 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法(英文)📓 every() 方法对于空数组总是返回 true,这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库,适合用来搭建基于 Web 的音频应用,基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端,支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器,可视化设定动画,自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器,符合最新规范,使用 C++ 编写,可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体,可以在线使用它们进行文字渲染。
它还支持网页手写八个字,生成自己的 AI 字体。 #AI 【真会玩】
 
 
Back to Top