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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #vite #工程化 #前端 #开源 #新动态
VueConf 上说的 Vite+,介绍文章也来了(
Announcing Vite+

AI 摘要:Vite+ 是在 ViteConf 上发布的全新统一工具链(unified toolchain),旨在整合构建、测试、格式化、代码规范检查和库打包等开发环节,解决 JavaScript 工具碎片化与性能瓶颈问题。它在 Vite 基础上新增 vite new、vite test、vite lint、vite fmt、vite lib、vite run、vite ui 等命令,并基于 Rust 实现完整编译链以实现极致性能。Vite+ 将采用 “source-available” 的商业许可策略,对个人及开源用户免费,对企业采取付费订阅模型,目标是构建可持续的前端生态。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. Vite+ 简介
• 来源于 Vite,同样可从 npm 安装;作为简体升级版,整合更多开发命令。
• 目标是提供统一的前端工程体验,使复杂项目的开发、测试与构建更加高效。
• 与 React、Vue、SvelteKit 等框架无缝兼容,并可直接用于单体或 monorepo。

2. 核心特性与命令集
• vite new:生成新项目或为 monorepo 生成代码模块。
• vite test:由 Vitest 驱动,兼容 Jest API,支持浏览器测试、分片和可视化回归测试。
• vite lint:集成 Oxlint,支持类型感知检查,性能比 ESLint 快百倍。
• vite fmt:即将发布的 Oxfmt 格式化工具,兼容 Prettier,提供更多换行与格式控制能力。
• vite lib:用于构建库,集成 tsdownRolldown,自动生成类型声明。
• vite run:智能缓存的任务执行器,无需显式配置即可获得细粒度缓存。
• vite ui:图形化开发工具,展示模块解析、打包与摇树分析等信息。

3. Rust 驱动的底层实现与性能优化
• 全链路由 Rust 重构实现,包括 parserresolvertransformerminifierbundler
• 高度性能调优,并被 Framer、Linear、Atlassian、Shopify 等公司采用。
• 暴露 parse 和 transform API,便于二次开发。

4. 解决的问题:JavaScript 工具生态的碎片化
• 多项目多团队导致依赖不一致、安全审核复杂与工具迁移成本高。
• Vite+ 旨在提供统一、协同的工具基础架构,减少配置、调试与迁移成本。
• 通过一致的命令与生态整合,提升开发协作效率。

5. 商业化与开源策略
• 将采用 “source-available” 策略:个人、开源、小型团队免费使用;企业需订阅授权。
• 收费部分将反哺 Vite+ 及其基础开源项目(Vite、Vitest、Rolldown、Oxc)。
• 承诺上述基础项目始终保持 MIT 开源许可。
• 目标是在维持社区信任与生态创新的前提下,探索开源项目的可持续商业模式。

6. 计划与参与方式
• 预计 2026 年推出公开预览版。
• 招募早期试用用户,可访问 viteplus.dev 参与测试。
• 官方希望社区共同塑造 Vite+ 的发展方向。


author Evan You Announcing Vite+
#优质博文 #React #性能优化 #前端 #工程化 #新动态
React Compiler 1.0 来辣!(虽然是 10.7 的消息但是我真的很忙才看到)
不过想尝鲜的应该早用上了()
React Compiler v1.0 – React

AI 摘要:React 团队发布 React Compiler 1.0,这是一个稳定且可在生产环境中使用的构建时优化工具。它可自动分析 React 组件与 hooks 的数据流与可变性,实现自动记忆化,从而减少渲染次数并提升性能。该编译器适用于 React 与 React Native,与 Babel、Vite、Next.js、Expo 等生态紧密集成,并提供增量迁移指南和内置 lint 规则以强化 “Rules of React”。此次发布标志着历时近十年的工程成果落地,开启 React 新的性能优化时代。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 背景与发布概况
• React Compiler 1.0 正式发布,可在 React 与 React Native 中使用。
• 支持与 Expo、Vite、Next.js 等集成,默认在新项目中启用。
• 历经十年研发,从 Prepack 到 HIR(高阶中间表示 High-Level Intermediate Representation)的多次重构。

2. 编译器原理与功能
• React Compiler 作为构建时优化工具,在 Babel 插件阶段分析 AST(抽象语法树 Abstract Syntax Tree)。
• 通过自动记忆化优化组件与 hooks,可在条件渲染后仍实现 memoization。
• 拥有验证与诊断机制,通过数据流分析发现潜在违反 Rules of React 的代码。
• 与 eslint-plugin-react-hooks 集成,为开发者提供静态规则检测支持。

3. 安装与使用方式
• 支持 npm、pnpm、yarn 等安装方式:babel-plugin-react-compiler@latest。
• 改进了依赖分析算法,支持可选链与数组索引依赖。
• 提供 Playground 与文档供开发者测试优化效果。

4. 性能表现与生产验证
• 已在 Meta Quest Store 等大型应用投入使用。
• 实测初始加载与页面切换性能提升 12%,部分交互速度提升 2.5 倍。
• 性能提升同时保持内存中性,证明优化可靠。

5. 兼容性与 Lint 集成
• 兼容 React 17+,React 19 可直接启用编译器特性。
• ESLint 规则合并入 eslint-plugin-react-hooks@latest,替代独立插件。
• 强化了 setState、ref 等模式检测,防止渲染循环和 unsafe 渲染行为。

6. 与 useMemo / useCallback 的关系
• 默认由编译器自动进行 memoization,大多数情况下无需手动使用 useMemo/useCallback。
• 对需要精准控制依赖的场景仍建议保留或使用手动记忆化。

7. 新项目与渐进式迁移方案
• Expo SDK 54+ 默认启用编译器,Vite 与 Next.js 模板可直接启用。
• 提供渐进迁移指南,帮助旧项目分阶段集成 React Compiler。

8. swc 与构建工具支持
• 支持 Babel、Vite、Rsbuild 等构建工具,swc 插件仍在实验阶段。
• Next.js 15.3.1+ 可显著提升构建性能,Vite 通过 vite-plugin-react 启用编译器。
• 正在与 oxc 团队合作,为未来 rolldown 支持做准备。

9. 升级与版本管理建议
• 未来版本可能改变 memoization 策略,需保持端到端测试。
• 建议固定编译器版本(--save-exact)以避免意外行为变化。
• 强调遵守 Rules of React 以确保编译器优化安全有效。


author Lauren Tan, Joe Savona, Mofei Zhang React Compiler v1.0 – React
#优质博文 #react #前端 #新动态
国庆假期搬家加去医院各种因素忙的不可开交,断更好几天,突然看到这么个事儿 23333 大好事儿啊。
Introducing the React Foundation – React

AI 摘要:React 官方宣布将成立独立的 React Foundation,并将 React 与 React Native 从 Meta 转移至该基金会名下,以推动社区自治和生态中立化。基金会将管理基础设施、举办 React Conf、支持生态项目并发放资助。同时,React 将建立独立的技术治理结构,由社区贡献者共同制定方向,确保没有单一机构主导。此次改革标志着 React 迈入新阶段,进一步强化其作为开放社区核心技术的可持续性。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 背景与愿景
• React 诞生于 Meta,但已成长为由全球开发者共同维护的开源生态。
• 由于贡献者与公司参与度不断提升,React 超越了单一企业项目的边界。
• 成立基金会意在支持更广泛的社区、促进生态资源分配与治理独立。

2. React Foundation 的定位与结构
• 基金会将成为 React、React Native 与相关项目(如 JSX)的新家。
• 职责包括维护基础设施(GitHub、CI、商标)、组织 React Conf、资助生态项目。
• 由董事会治理,设有执行董事 Seth Webster;初始成员包括 Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion 与 Vercel。
• 目标是形成供应商中立 (vendor-neutral) 的社区运作机制。

3. 技术治理(Technical Governance)改革
• 技术方向将由实际参与 React 开发与维护的人员共同决定。
• 将建立与基金会独立的新治理结构,避免公司影响过度集中。
• 计划通过社区反馈完善方案,未来将公布具体实施细节。

4. 社区感谢与未来展望
• 官方感谢数千名开发者与企业的长期贡献。
• 认为基金会与新治理模式能确保 React 的长期稳定与活力。
• 强调这一变化是 React 成熟化与开放化的重要里程碑。


author Seth Webster, Matt Carroll, Joe Savona, Sophie Alpert Introducing the React Foundation – React
#优质博文 #AI #MCP #新动态 #开源
GitHub 推出官方 MCP Registry,统一入口快速发现和使用 MCP servers。
Meet the GitHub MCP Registry: The fastest way to discover MCP Servers

AI 摘要:本文介绍 GitHub 推出的 MCP Registry,旨在解决以往 MCP servers 分散、难以发现和管理的问题。通过集中托管与社区协作,开发者可以在一个统一平台上更快找到所需工具,与 GitHub Copilot、VS Code 等生态无缝集成。文章强调该平台对开放互操作标准的贡献,以及合作伙伴(如 Figma、Postman、HashiCorp、Dynatrace 等)所带来的典型应用场景,展示 MCP Registry 在推动 agentic workflows 与 AI 生态健康发展的重要性。
MCP Registry
#优质博文 #新动态 #后端 #数据库 #ORM #Prisma #AI
Vibe Coding 给 Prisma 都整的加了个安全护栏了(草
太体贴了哥(
Release 6.15.0 · prisma/prisma

AI 摘要:本次版本聚焦稳定性与平台适配:为可能由 AI 代理触发的破坏性命令加入安全确认护栏;统一 prisma-client 运行时选项并允许无模型 schema 生成客户端;提供与 Vercel Fluid 的连接池托管方案;宣布 Prisma Postgres Management API 达到 GA 并接入 Pipedream;为 npx create-db 新增 --json 输出;强化 Prisma Postgres 直连能力,接近 GA,同时继续提供企业级支持服务。

1. 亮点
• AI 安全护栏:CLI 识别常见 AI 代理(如 Claude Code、Gemini CLI、Qwen Code、Cursor、Aider、Replit),对 prisma migrate reset --force 等破坏性操作要求显式确认,避免 AI 自动执行不可逆数据库重建。文档
• prisma-client 运行时与 schema 灵活性:
• 运行时输入统一:node 移除改用 runtime = "nodejs";deno-deploy 移除改用 runtime = "deno";vercel 替换为 runtime = "vercel-edge";edge-light 作为 vercel-edge 的别名。
• nodejs、deno、bun 共用内部代码路径但保留独立输入值;VS Code 扩展已同步更新。
• 支持的运行时为:nodejs、deno、bun、workerd(alias cloudflare)、vercel-edge(alias edge-light)、react-native。
• 生成阶段改进:即使 schema 无模型也可用新生成器 prisma-client 成功生成客户端(与旧 prisma-client-js 一致)。文档
• 与 Vercel Fluid 协作:为解决无服务器挂起导致的连接泄漏,结合 Vercel attachDatabasePool 与 Prisma driver adapters,挂起前释放空闲连接,防止耗尽连接池;提供 pg + PrismaPg 的示例用法。Vercel 介绍 · 部署文档
Release 6.15.0 · prisma/prisma
#优质博文 #CSS #tailwind #组件库 #前端 #新动态
daisyUI 5 is here: What’s new and what to expect - LogRocket Blog

AI 摘要:文章介绍了 daisyUI 5,这是 Tailwind CSS 最受欢迎的组件库之一的新版本。daisyUI 5 并非简单升级,而是一次彻底重构:性能更高、体积更小、定制性更强,并与 Tailwind CSS 4 完美结合。文章通过组件迁移示例,展示了配置方式改变、Class 命名调整、新的主题引擎(Theme Engine)、以及全新的组件和样式修饰符的使用方式。总体来看,daisyUI 5 为前端开发者提供了更高效、更现代化的 UI 构建体验。

1. 生态与版本更新背景
• daisyUI 是 Tailwind CSS 社区最流行的组件库之一,因默认设计合理、组件数量齐全、可扩展性强而受到广泛欢迎。
• Tailwind CSS 4 发布,引发生态演进,daisyUI 5 应运而生。
• 本次更新不仅是版本升级,而是一次完全的重写。

2. 核心变化与性能优化
• daisyUI 5 对底层架构进行了重构,实现更小、更快、更轻量化。
• 性能优化依赖 现代 CSS 特性 和 Tailwind CSS 4 的新能力。
• 采用零依赖架构 (zero-dependency),大幅提升构建与运行效率。

3. 组件迁移与配置调整
• 配置方式改变:从 tailwind.config.js 插件数组转移到直接写在 CSS 中。
• 迁移流程:停止旧 CLI → 更新依赖 → 简化配置 → 修改 Class 命名 → 保持 UI 视觉一致。
• 定制主题方式变更:daisyUI 4 使用 --p、--b1 等变量;daisyUI 5 采用更直观的 CSS 变量与 @plugin "daisyui/theme"。

4. 全新主题引擎 (Theming Engine)
• 支持更强的主题变量控制,不仅限于颜色,还包括按钮圆角、边框宽度等非色彩属性。
• 新版主题生成器 (Theme Generator) 提供可视化工具,可实时创建、预览与导出完整主题。
• CSS 变量更易被开发者调试与定制,主题系统更透明和灵活。

5. 新增功能与设计增强
• 新增组件:Validator(校验提示)、List(列表)。
• 新增样式修饰符 (style modifiers):btn-soft、btn-dash 等。
• 新的全局效果变量(effect variables),为组件带来更高级的视觉质感和立体感。

6. 开发者价值与未来展望
• daisyUI 5 更快、更轻、更强定制性 → 提升开发效率。
• 与 Tailwind CSS 4 深度集成 → 保持前沿兼容性。
• 给前端开发者更灵活的UI设计工具,成为现代 Web 开发的重要一环。


author Ikeh Akinyemi daisyUI 5 is here: What’s new and what to expect - LogRocket Blog
#优质博文 #Chrome #前端 #CSS #新动态
Chrome 140 Beta 版

AI 摘要:Chrome 140 Beta 版为 Web 开发者带来了一系列重要更新。在 CSS 与界面方面,新增了类型化算术 (Typed Arithmetic) 以增强 calc() 的能力,引入了 scroll-target-group 属性改进滚动导航,并对视图过渡 (View Transition) 进行了多项功能增强。Web API 方面,提供了 Uint8Array 与 Base64/十六进制的内建转换方法,并通过权限提示限制本地网络访问以提升安全性。此外,还为独立式 Web 应用 (IWA) 引入了 Controlled Frame API,并开启了 clipboardchange 事件、来电通知等新的源试验 (Origin Trial)。此版本也为提升无障碍性而弃用了一些历史性的 <h1> 字号规则。

1. CSS 类型化算术 (Typed Arithmetic):允许在 calc() 函数中进行带单位的数学运算,如 calc(10em / 1px),方便排版和单位转换。
2. 滚动与视图增强:scroll-target-group 属性:用于定义滚动标记组容器,配合 :target-current 伪类可高亮当前视图内的目标锚点。
3. ScrollIntoView 容器选项:新增 container: 'nearest' 选项,可仅滚动最近的祖先滚动容器。
4. 视图过渡 (View Transition) 增强:伪类可继承更多动画属性,并支持嵌套视图过渡,以实现更复杂的过渡效果。
5. overscroll-behavior 传播修复:该属性现在从根元素 (<html>) 而非 <body> 传播,与其他浏览器行为保持一致。
6. 排版与无障碍性:在 content 属性的替代文本中支持 counter() 和 counters() ;支持在 @font-face 规则中使用 font-variation-settings 描述符。弃用 <h1> 元素在特定容器内的特殊字号规则
7. API 与交互改进:caret-animation 属性允许开发者手动控制光标动画,避免与默认闪烁行为冲突;highlightsFromPoint API 允许通过坐标点检测自定义高亮区域;ToggleEvent 新增 source 属性,可获取触发该事件的源元素;修复 SVG foreignObject 污染画布 (Canvas) 的问题,使其在使用 blob 网址时行为与其他浏览器一致。


author Rachel Andrew Chrome 140 Beta 版  |  Blog  |  Chrome for Developers
#Newsletter #前端 #新动态 #周刊更新
周刊第 2 期,把上一期没放的一些素材放进去了~
另外,这次尝试了 SaveToNotion 的一套流程结合我的插件感觉更丝滑了,Notion 数据库确实是个好东西,平常看到的好东西也能加进去了。

FE Bits 前端周周谈 Vol.2|V8 提速 JSON.stringify 2x,Vite 周下载首超 Webpack
#AI #新动态
想了想还是发一下,毕竟 OpenAI 终于发了呢
https://openai.com/open-models
gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B
两个都是 MoE 架构的推理模型.


https://fixupx.com/karminski3/status/1952828063374557618

karminski-牙医 (@karminski3): 就在刚刚 OpenAI 发布了两个开放权重模型! 给大家带来深度解析!

gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B

两个都是 MoE 架构的推理模型.

首先, 这两个模型发布的就已经是量化版本了, 他们的 MoE 层直接用 MXFP4 精度训练的! 这意味着暂时没有办法微调这两个模型了 (现有微调框架不支持, 得等等).

然后, 大家肯定知道 OpenAI 搞了各种奇怪的命名, 比如 O3-mini-high, 这个 high 是啥? 现在答案揭晓, OpenAI 的模型是可以配置推理努力程度的. 分为三档, low, medium, high. 当然 high 模式下跑分最高, 相对的思考时间更长.

Agent 功能适配得非常好, 原生针对 function call, 网页浏览, 执行 python 代码, 各种结构化输出进行了优化. 这也能从从跑分上看出来, 使用 tool 后分数均有提升.
Open models by OpenAI
#Newsletter #前端 #新动态 #周刊更新
我做了!在大伙的撺掇下先做了周刊第 1 期发了再说!反正也是每周本来就有在做的,欢迎订阅看看反馈纠错~

FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布

PS:感觉 Quaily 确实挺棒的。等晚点公众号审核过了可以也同步 md 转公众号。
也欢迎用 Folo RSS 订阅

因为是第一期所以后面内容有点多,把上上周之类的事件也放进去了,下期就不会那么长了。
#Newsletter #React #前端 #JavaScript #新动态
⚛️ React Status #438 — July 30, 2025

AI 摘要:本期 React Status 精选了 React 及其周边生态的最新动态,包括 TanStack DB 的首次 beta 发布、Reaper 死代码分析 SDK、新的 React Native 动画库 Reanimated 4 及多款工具库,还有 TypeScript、Parcel、Remix、Next.js 等重要更新。内容从核心库、开发工具到行业热点,全面展示了前端开发领域的创新趋势,尤其突出数据管理、性能优化、工程实践和 JavaScript 生态的多元演进。

1. 生态与社区动态
TanStack DB 首个 beta 版发布,为 TanStack Query 带来高效增量更新与乐观写入能力,实现在本地侧存储场景的差分数据流 (differential dataflow)。
The Useless useCallback:React 状态管理与性能相关实践讨论,分析 useCallback、useMemo 潜在问题,展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
TypeScript 5.9 RC 发布,带来 import defer 和 --module node20 等新特性。
Stack Overflow 2025 调查显示 React 继续蝉联 “最受开发者渴望(most desired)” Web 技术头名,尽管 Svelte 更 “受人钦佩(admired)”
Parcel 深入支持 React Server Components,并解析 "use client" 等指令的实际作用机制。
React Native 下一个版本中引入预编译的 iOS 版本,RC3 阶段承诺将构建时间缩短 10 倍

2. 文章与深度实践
• 《Remix 3 和 React-中心架构的终结》 探索 React 未来架构趋势。
• 《Next.js 运行时密钥注入实战》 深入分析密钥管理在微服务和 SSR 场景下的重要性。
• 《将 JSX 改写为 Astro 的思考》 带来组件语法和工程结构的迁移经验。

3. 代码、工具与库
React Native Reanimated 4 正式带来类 CSS 动画与过渡体验到 React Native,兼具复杂能力与高性能。
Better Upload 支持各类 S3 兼容存储的极简文件上传,适配 Next.js、TanStack Start、Remix 和 Hono 等框架。
Rooks.js 8.4 提供接近 100 个自定义 hooks,涵盖在线状态、窗口大小、语音合成、键盘输入等各类场景。
• 新发布与更新工具还有 React Three Viverse 教程、Tinybase 6.5、TanStack Form 1.15、IntentUI 3.3、Preact 10.27、BlockNote 0.35、React-three-fiber 9.3、Ink 6.1 等,覆盖数据存储、表单、组件库、Notion 风格编辑器、命令行应用等多样领域。

4. JavaScript 生态其他重点
• JavaScript 各类运行时和引擎历史盘点。
• es-toolkit 成为 Lodash 100% 兼容替代,已被 Storybook、Recharts 等主流项目采用。
• Zod 对决 Valibot 的 JS/TS 校验器评测视频。
• Hugging Face Transformers.js 让机器学习模型直接运行于浏览器,并支持多种音频与文本模型。
Vercel 发布 Fluid compute 平台,该平台本质上提供 “无服务器服务器(serverless servers)”。
• Google OSS Rebuild 通过比对源码与上游,进一步保障开源生态(如 npm)安全。


author React Status 编辑团队 Stop Re-Rendering — TanStack DB, the Embedded Client Database for TanStack Query | TanStack Blog
#新动态 #ChromeDevTools #前端 #调试 #性能优化 #AI
What's new in DevTools, Chrome 139

AI 摘要:Chrome DevTools 139 版本专注于提升开发者体验、生产力及工具可靠性,修复了大量已知问题并增强了测试覆盖率。此次更新亮点包括在 AI 辅助中支持上传图片以提供视觉上下文,在 Network 面板中新增请求头列,以及对核心面板如 Performance、Sources 和 Elements 的持续改进,同时优化了各种调试和辅助功能,旨在提供更流畅、更稳定的开发工作流程。

1. 工具性能与稳定性改进
• 核心开发体验提升: 本版本优先提升产品卓越性,解决了大量已知问题,包括长期存在的视觉故障、可用性问题和设计不一致,将开放问题数量减少了 27%。
• 幕后测试覆盖率增强: 大幅提升了 DevTools 的测试覆盖率,调查并修复复杂的测试失败,并将测试相关问题减少了 54%,从而带来了更流畅、可靠和高效的日常调试和开发工作流程。

2. AI 辅助与智能功能
• AI 辅助支持图片上传: 在 AI 辅助面板中,现在不仅可以自动截屏,还可以上传任意图片到与 Gemini 的聊天中,为提示提供额外的视觉上下文。
• Google I/O 2025 亮点整合: 强调了在 Google I/O 2025 中展示的新 DevTools 功能,包括 Sources 面板连接工作区并保存修改、Gemini 驱动的 CSS 修改和保存、查询性能洞察、自动标注性能发现,以及新的性能洞察功能(重复 JavaScript 和遗留 JavaScript)。

3. 开发者工具面板更新
• Network 面板增强: 在 Network 面板中,现在可以右键点击请求表格中的列名,并选择多个请求头将其添加为列。
• Application 面板改进: 清除 IndexedDB 对象存储时,现在会显示确认对话框,以防止不可逆的操作。
• Sources 面板优化: Logpoints 和条件断点旁边的代码行徽章现在在悬停时会显示相应的日志消息或条件工具提示。
• Performance 面板新洞察: "Layout shift culprits" 洞察现在显示未设置大小的图片链接;"LCP request discovery" 洞察现在显示最早起始点之后的图片加载延迟;修复了部分用户本地存储的过期节流设置格式;事件日志过滤速度得到提升。
• 动画面板调整: 弃用了预览截图功能,因为点击预览动画组提供了类似且更好的体验。
• 辅助功能改进 (Accessibility): Sources > DOM 断点侧边栏(如果存在)添加了 aria-labels;修复了 Console 中 Live expression 文本字段内的 Shift + Tab 键盘导航问题;Settings 现在支持 Cmd/Ctrl + +/-/0 缩放快捷键;Elements > Styles 中的 CSS 提示和警告图标以及 Angle clock 现在可以通过键盘聚焦。


author Sofia Emelianova What's new in DevTools, Chrome 139  |  Blog  |  Chrome for Developers
#优质博文 #npm #安全 #CSS #JavaScript #前端 #新动态
啊这,我居然才知道,第一句话就蚌埠住了。
PS: 现在看 npm 页面已经恢复了
npm 'accidentally' removes Stylus package, breaks builds and pipelines

AI 摘要:npm 不慎移除了被广泛使用的 Stylus 库,导致全球开发者构建和 CI/CD 流程中断。移除原因是 Stylus 的一位维护者发布了无关的恶意软件包,导致其账户及关联软件包被禁,Stylus 库也因此受牵连。目前,npm 和 GitHub 正在努力恢复 Stylus,并提供了临时解决方案以帮助开发者通过直接引用 GitHub 仓库或使用 overrides 功能来恢复其项目。

1. 事件总览
• Stylus 库被意外下架: 全球最大的软件注册表 npm 意外地移除了所有版本的 Stylus 库,并替换为一个“安全占位页面”,导致依赖该库的全球构建和 CI/CD 流程中断。
• 开发者与维护者回应: Stylus 开发者 Lei Chen 在 GitHub 和 X(原 Twitter)上声明 Stylus 被 npmjs 意外禁用,并寻求帮助以尽快恢复。
• 广泛的影响: 每周近 300 万次下载的 Stylus 库被下架后,大量依赖它的项目如 typescript-plugin-css-modules、Frappe/ERPNext 和 Angular 12 等的构建相继失败,引发开发者不满和担忧。
• 事件真相揭示: 供应链安全公司 Mend.io 的安全研究员 Tom Abai 调查发现,Stylus 库本身是干净且功能正常的。问题在于 Stylus 的一位维护者“panya”发布了三个无关的恶意软件包(如包含依赖混淆漏洞的 PoC),导致其账户被封禁,进而关联的 Stylus 库也被错误地移除。
• 临时解决方案: 针对 Stylus 库被移除,开发者可采取以下临时措施:
• 在 package.json 的 dependencies 中动态引用 GitHub 上的 Stylus 特定版本(例如:"stylus": "github:stylus/stylus#version-you-need")。
• 使用 npm v8.3.0 及更高版本支持的 overrides 功能来指定 Stylus 版本。
• 在应用上述更改后,需清除 npm 缓存(npm cache clean --force)。
• 维护者建议: Stylus 维护者 Lei Chen 确认 Stylus 不含恶意代码,并指出 npmmirror.com(由阿里巴巴赞助的非营利镜像)已恢复对该库的访问。他建议受影响的公司重新评估 npmjs 与 npm mirror 的关系,并设计更可靠的开发流程。
2. 安全事件分析
• 恶意行为与误伤: 事件起因是 Stylus 维护者之一“panya”发布了恶意软件包,但这些恶意软件包与 Stylus 库本身无关。npm 采取封禁账户并移除所有关联软件包的措施,却无意中“误伤”了无辜且重要的 Stylus 库。
• 官方回应: GitHub Trust & Safety 团队已回复 Stylus 维护者,确认问题是由于一名维护者发布了恶意软件包导致账户被暂停及关联软件包被移除,并表示工程师正在努力恢复 Stylus。
• 事件特殊性: 此次事件是首例由注册表因管理错误而下架整个合法开源项目的重要案例,与此前开发者因争议或抗议而自行撤回库的情况不同。


author Ax Sharma npm 'accidentally' removes Stylus package, breaks builds and pipelines
#Newsletter #node #新动态
NodeWeekly #587

AI 摘要:本文是 NodeWeekly 第 587 期(2025 年 7 月 22 日)的newsletter,聚焦 Node.js 生态系统的最新动态与技术进展。内容涵盖 Node.js 与 PHP 的跨生态系统整合(如 Laravel 在 Watt 运行时的支持),Node.js 安全更新,工具与库的最新版本发布(如 Bun v1.2.19、NAPI-RS v3),以及社区内的其他热点话题(如 WebAssembly 发展现状与 npm 开发者面临的钓鱼攻击)。此外,还包括了多个实用工具、教程和文章推荐,旨在为开发者提供全面的技术资讯和资源。

1. Laravel and Node.js: PHP in Watt Runtime:介绍 php-node 项目如何通过 Watt 应用服务器进一步支持 Laravel 应用的运行,探索 PHP 和 Node.js 生态系统的融合。
2. eslint-config-prettier 包的安全漏洞分析,Node.js http/https 原生支持代理(通过环境变量启用),Bun v1.2.19 新功能(pnpm 风格的 node_modules 隔离、VS Code 测试集成等),以及 pnpm 即将支持锁定 Node.js 版本。
3. Endor: Add Services as Node Dependencies:介绍 Endor 项目,通过简单的 npm install 和 endor run 命令,快速创建沙盒环境,支持 Postgres、MariaDB 等服务。
4. Articles and Case Studies:包括使用 Eleventy(Node 静态站点生成器)迁移网站提升 24% 性能的案例;基于视觉语言模型构建字体搜索引擎的教程;
5. 推荐多个工具和库:npq(安装前审计包安全)、NAPI-RS v3(支持 WebAssembly 的 Node.js 插件框架)、YouTube.js 15.0(非官方 YouTube API 客户端)、stripe-sync-engine(Stripe 到 Postgres 同步引擎)以及其他如 NeutralinoJS、Corepack、ESLint 插件等的最新版本更新。
6. 汇总更广泛的技术动态:Andy Wingo 关于 WebAssembly 现状的文章,Deno 团队分享的 JavaScript 历史视频,git-quick-stats.sh 工具,以及针对 npm 开发者的钓鱼攻击警告。
#Newsletter #新动态 #前端 #CSS #HTML #JavaScript #WCAG #性能优化 #tools #AI
🚀 Frontend Focus #702 — July 23, 2025

AI 摘要:本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面,为开发者提供了丰富的学习资源和行业洞察,同时介绍了多款前端实用工具和库,以及一些趣味简讯和广告。

1. 社区动态
HTML 2025 年度调查启动:第三届年度 HTML 调查,旨在了解开发者如何使用 Web 平台日益增长的能力,其结果将直接影响明年 Interop 项目的优先级。
WCAG 纯英文版:让无障碍标准易于理解:一个可搜索的资源,为官方 Web 内容无障碍指南(WCAG)提供了一个初学者友好的指南,使其更易于消化。
Firefox 141 发布:新版本增加了垂直标签页和 AI 标签组织智能功能。
GitHub 支持欧盟主权技术基金:GitHub 正在倡导设立一项欧盟主权技术基金。
为什么不信任 WCAG 2.2 以及对 3.0 的期望:Daniel Schwarz 提出了他对 WCAG 2.2 的担忧,并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
时间不多,范围却很多:滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
小屏幕,大影响:为功能手机开发 Web 应用的被遗忘艺术:探讨了功能手机在2025年仍有意义的原因,以及如何为这类设备构建和发布Web应用。
Tailwind 是“最糟糕的综合体”:一篇观点文章,认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
2025 年前端性能检查清单:一份高层次的清单,列出了创建快速、高效 Web 应用时需要牢记的事项。
利用 Web Speech API 让你的网站开口说话:一种简单直接的方法,为网站添加语音功能。
糟糕导航的隐性成本:信息架构如何直接影响业务指标:探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
Glass3D 生成器:一个生成 3D 玻璃效果的 CSS 工具:一个允许编辑背景滤镜设置、颜色和纹理的工具,并实时预览效果。
• Astro 5.12 发布:新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3:无头富文本编辑器框架:为构建强大的富文本编辑体验提供了基础,v3 版本包含大量开发者体验改进,如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
macOS 光标 PNG 图片集合:一个提供各种 macOS 光标 PNG 图片的网站。


author Frontend Focus 编辑团队
#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
#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701

AI 摘要: 本期《Frontend Focus》(第 701 期,2025 年 7 月 16 日)涵盖了前端开发的多个热点话题,包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用,以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持,并探讨了 AI 对开源开发者生产力的影响,旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”:通过一个项目案例,Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计,提醒开发者考虑更广泛的用户需求,设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”:Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》(DMA),存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”:Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用,探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯(IN BRIEF):
Mozilla 将在 Firefox 141 中添加 WebGPU 支持(初期仅限 Windows,后续扩展至 macOS 和 Linux)。
一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈
• Andy Bell 分享了一个 CSS 代码片段,为锚定 URL 添加必要的空间,提升用户体验。
5. 文章、观点与教程(Articles, Opinions & Tutorials):
CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度,并展望未来发展。
纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源(Tools, Code & Resources):
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架,基于 D3,支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目,用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具,可将图像分割为自定义网格并下载。
Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用,利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表,包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具,帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具,包含 1000+ 字体(需注册)。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。
I’m more proud of these 128 kilobytes than anything I’ve built since
 
 
Back to Top