#Newsletter #JavaScript #前端 #安全 #react #WASM #node #CSS
JavaScript Weekly #746

AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

author JavaScript Weekly 编辑团队

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

#优质博文 #前端 #WASM #JavaScript #DOM
When Is WebAssembly Going to Get DOM Support?

AI 摘要：本文深入分析了 WebAssembly（WASM）与 Web 平台集成特别是直接访问 DOM（文档对象模型）的现状和未来可能性。作者强调，Wasm 自身并没有也可能不会获得直接 DOM 支持，但它自诞生以来就通过需要适量 JavaScript glue code（粘合代码）间接地实现了对 DOM 及其他 Web API 的访问。通过工具链和标准的持续推进，Wasm 集成会更加高效，但对纯“Wasm 直接操作 DOM”并无迫切需求或业界共识。开发重点应聚焦于优化性能和开发体验，而不是消除一切 JavaScript，Wasm 与 JavaScript 的共存将长期持续。

author Daniel Ehrenberg

#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 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…

#优质博文 #前端 #工程化 #javascript #新动态
🤖 JavaScript Weekly #742

AI 摘要： 本期 JavaScript Weekly 聚焦于 JavaScript 生态系统的最新动态，包括 ECMAScript 2025 规范的正式批准、Vite 7.0 的发布以及多个前沿工具和框架的更新。文章涵盖了 JavaScript 未来发展的提案、AI 工具在开发中的应用、以及多种实用库和工具的最新版本信息。此外，还介绍了多个技术文章和视频教程，帮助开发者提升技能和了解行业趋势。

1. Ecmascript 2025：有什么新功能？：Ecma 国际大会正式批准了 ES2025 语言规范，Dr. Axel Rauschmayer 提供了简洁的解读，方便开发者快速了解新特性。
2. JavaScript 未来发展提案：Deno 团队整理了 TC39 进程中正在推进的 9 个提案，并附上代码示例，展示了 JavaScript 未来的发展方向。
3. V8 团队的深度解析文章更新 - V8 中引入的两个新优化，旨在加速 WebAssembly。 #wasm
4. 版本更新：Transformers.js 3.6、zx 8.6、Node.js 多个版本更新、Prettier 3.6、Bun v1.2.17 和 SVGO 4.0 的发布信息。
5. Angular 团队创建了一套 LLM 提示和 AI IDE 规则文件，以帮助 Angular 开发者从 LLM 中获得更好的代码
6. 在复杂视觉应用程序中实现 Undo/Redo 系统
7. 没时间学习（Web）框架 X —— 你如何判断学习新事物是否值得花时间？
8. 在编写 WASM 组件时比较 Rust、JavaScript 和 Go
9. 如何撰写引人入胜的软件发布公告
10. 介绍了 Hono 4.8 跨运行时框架、LogTape 1.0.0 通用日志工具、Google 的 Gemini CLI AI 代理工具、PLJS 1.0 Postgres 插件、Marked 16.0 Markdown 解析器、Vue Infinity 数据虚拟化渲染工具、Spark Three.js 3D 渲染器以及多个图表库和框架的更新。

2Ality

Ecma International approves ECMAScript 2025: What’s new?

On 25 June 2025, the 129th Ecma General Assembly approved the ECMAScript 2025 language specification (press release), which means that it’s officially a standard now. This blog post explains what’s new.

#优质博文 #前端 #node #新动态
Node Weekly #577

AI 摘要：本期 Node Weekly 聚焦 Node.js 24 发布、AI Agent 开发、JavaScript 生态工具更新（如 Bun、Deno、Llama Stack），以及社区动态（如 Node.js Next 10 调查）等。

1. 社区动态
• Node.js 24 发布 成为新的 Current 版本，替代 EOL 的 v18 和 v23，附带：npm 11、V8 13.6（支持 RegExp.escape、Float16Array 等）、默认暴露 URLPattern API、Undici 7。
• Llama Stack 应用：Meta 的 Llama Stack 是一组统一的 API，用于处理现代 LLM 驱动的堆栈的众多部分，支持 RAG（检索增强生成），Michael Dawson 提供实践指南。 #AI #RAG
• Node.js Next 10 调查：Linux Foundation 发起，征集未来十年 Node.js 发展方向意见。
• Redis 重新开源：v8.0 恢复开源许可。
• GSAP 免费：商业动画库 GSAP 全面开放免费使用。
• ECMAScript 提案：显式资源管理（Stage 3）已在 Chrome 134+ 和 Node 24 实现。
• npm 恶意软件：攻击者仿冒知名库名发布恶意包。

2. 运行时与工具更新
• Bun v1.2.12：增强 Node 兼容性、现在可以通过终端上的 Bun 将浏览器控制台日志流式传输回去。
• Deno 2.3：改进单二进制编译，支持 FFI、Node 原生附加组件和本地 npm 包。
• PGlite 0.3：基于 WASM 的 Postgres，可在浏览器或 Node 中运行。 #WASM
• Prisma v6.7：加速从 Rust 转向 TypeScript。
• SVGO 4.0（SVG 优化）、Jira.js（Jira API 封装）、RedisSMQ（Redis 消息队列）……
• Josh Ceau 的 Operator Lookup 网站使得 JavaScript 运算符查找变得容易，甚至可以找到您以前从未遇到过的运算符，例如 >>>=。

Red Hat Developer

Retrieval-augmented generation with Llama Stack and Node.js | Red Hat Developer

With Llama Stack being released earlier this year, we decided to look at how to implement key aspects of an AI application with Node.js and Llama Stack. This post covers retrieval-augmented generation

#优质博文 #前端 #新动态 #javascript
JavaScript Weekly #732

AI 摘要：本期 JavaScript Weekly 是一份精简版通讯，主要涵盖 TC39 提案动态（如 Records/Tuples 提案被撤回，但 Enum 等新提案进展）、工具更新（如 Hako JS 引擎）、框架/库发布（WebStorm 2025.1），以及技术文章（WebGL 解析、React 实战案例等）。

1. TC39 提案动态
• Records/Tuples 提案撤回：原计划为 JS 引入不可变数据结构，但 TC39 会议决定终止
• 新提案进展：
• 将枚举引入 JavaScript 的提案进入 Stage 1（兼容 TypeScript 语法） Slidedeck
• Deferred re-exports proposal 进入 Stage 2，支持延迟导出模块
• Upsert 和 Composites 提案已得到推进

2. 工具与库
• Hako JS 引擎：基于 QuickJS 的高性能可嵌入引擎，可编译为 WebAssembly #wasm
• Firefox 139：默认启用 Temporal API（日期时间处理）

3. 发布与更新
• WebStorm 2025.1：强化 AI 支持、Angular/Next.js 集成
• 其他：tldts 7.0（URL 解析）、Redux Toolkit 2.7、Bun 1.2.10……

4. 文章与视频
• WebGL 渐变效果解析：通过 GLSL 实现流动渐变的技术详解
• SvelteKit 单页应用：无需服务器的单文件开发方案
•  部署 TypeScript：最新进展和可能的未来方向  Dr. Axel Rauschmayer

author Peter Cooper

GitHub

tc39/proposal-record-tuple

ECMAScript proposal for the Record and Tuple value types. | Stage 2: it will change! - tc39/proposal-record-tuple

#优质博文 #新动态 #前端 #javascript
JavaScript Weekly #730

AI 摘要：本期 JavaScript Weekly 涵盖了多个重要动态，包括轻量级 JS 运行时 Bare 的发布、Deno 与 Oracle 的 JavaScript 商标之争、React 19.1 新特性、Safari 18.4 更新，以及一系列工具和教程推荐。此外，还介绍了 Wasp 全栈框架、Anime.js 4.0 动画库等新工具，并分享了开发者资源和行业趋势。

1. Bare: 轻量级模块化 JS 运行时
• 类似 Node.js 但更精简，基于 V8 和 libuv，支持多引擎。
• 仅提供模块系统、插件系统和线程支持，依赖用户态模块扩展。

2. Deno 与 Oracle 的 JavaScript 商标争议
• Deno 向 USPTO 申请撤销 Oracle 持有的 "JavaScript" 商标。
• Ryan Dahl 呼吁开发者支持，签署公开信反对 Oracle 的商标主张。

3. 社区动态
• Safari 18.4 更新
• 新增 Declarative Web Push、迭代器助手、Error.isError，优化 JSON 解析性能。
• TC39 将讨论 TypeScript 风格枚举提案
• 长期以来一直有人提议将 TS 风格的枚举引入 JavaScript，作者 Ron Buckton 将在下次会议上向 TC39 提出该提案。 这里有一个幻灯片介绍了该提案的好处。
• ES2025 规范 进入候选阶段，预计将于 6 月最终获得批准。
• Express 5.1：长期存在的 Node.js Web 框架得到了升级，5.x 最终成为 npm 上的 latest 标记版本。
• Chrome 135+ 支持 CSS Overflow 5 规范，这使得创建原生滚动和轮播体验变得更加容易。
• Astro 5.6, Ember 6.3, Turborepo 2.5, Node.js v23.11.0, Bun v1.2.8......

5. 教程与文章
• 探讨 JavaScript 同步 await 的可行性（Dr. Axel Rauschmayer） 本文探讨了 JavaScript 中同步与异步代码的“颜色”问题，提出通过同步 await 解决现有异步编程的局限性，但分析了其潜在的性能损耗和操作风险，最终认为该方案可能不可行。
• 我第一次接触 WebAssembly 时学到的经验教训 本文作者分享了首次接触 WebAssembly（ #WASM ）的经验
• Breaking down circular dependencies in JavaScript 本文通过实验深入解析了 JavaScript 中的循环依赖问题，解释了其成因、表现场景、错误机制及解决方案，并对比了不同运行环境（浏览器、Node.js、打包工具）下的差异。
• GitHub 为项目维护者提供的一些提示： 每个维护者都需要知道的 5 个 GitHub Actions
• 如果您想写一篇可以刊登在 JavaScript Weekly 上的博客文章，那么阅读 Michael Lynch 撰写的《如何撰写开发人员阅读的博客文章》 是个不错的主意.. :-)

#前端 #优质博文 #javascript #rust #wasm
Rust 正在吞噬 JavaScript
https://leerob.com/n/rust

AI 摘要：本文详细探讨了Rust语言如何凭借其速度、内存安全和高性能成为替代传统JavaScript工具（如Babel、Terser、Prettier等）的新选择。文章首先介绍了Rust独特的内存管理机制——内存所有权，通过编译时检查消除运行时错误，进而在底层系统开发中表现优异。随后讨论了Rust在业界和开源项目中的应用，如SWC、Deno、esbuild、Rome，以及NAPI与WebAssembly的结合，为前端工具性能带来了质的飞跃。同时，文中也指出了Rust学习曲线陡峭以及生态尚未完全成熟的现状，探讨了未来如何平衡易用性和极致性能，从而推动JavaScript工具链向更高效、更统一的方向演进。最后文章更新了2023年后涌现的新项目，展望Rust将持续主导前端构建工具的发展。

via Lee Robinson

Leerob

Rust is Eating JavaScript | Lee Robinson

Why is Rust being used to replace parts of the JavaScript web ecosystem like minification (Terser), transpilation (Babel), formatting (Prettier), bundling (webpack), linting (ESLint), and more?

#优质博文 #跨端 #rust #wasm
大前端：如何突破动态化容器的天花板？

最终我们获得了一个如上图的高性能、安全的动态化容器，可以以Wasm的方式支持原生级别的性能，也可以将JavaScript 的前端工程的性能提升一截。

从某个角度看，像是我们把RN用Rust重写了，添加了Wasm解释器的支持。但用熟悉WebView架构的视角看，也可以看作是一个WebEngine Lite，只是试图绘制暂时用的系统UI。

文章写的挺有意思的。

AI 摘要：美团金服大前端团队在动态化容器性能提升方面做出了重要进展，提出了新的容器解决方案 Recce。长期以来，动态化容器因其复杂性，往往牺牲性能，导致用户体验下降。团队指出，现有容器方案如 React Native 和 WebView 在性能上存在明显短板，特别是在大规模视图节点处理时。

Recce 通过优化逻辑解释器的执行效率和通信效率，使页面加载速度提升了300%。团队选用了 Wasm 作为主要解释器，并结合 Rust 语言构建高性能的UI框架，避免了传统 JavaScript 框架的性能瓶颈。此外，Recce 还保留了 React Native 的优良特性，利用系统 UI 框架来优化渲染过程。

via 掘金 美团技术团队

突然掉落群友邀请码： nasuCk_v0T

#优质博文 #前端 #wasm
Web版Photoshop来了，用到了哪些前端技术？

photoshop.adobe.com

Weixin Official Accounts Platform

Web版Photoshop来了，用到了哪些前端技术？

就很强~

#优质博文 #前端 #wasm #rust
字节，不声不响发大教程：走进WebAssembly的世界
「对于 JavaScript、Python 等脚本语言来说，为了追求更高的性能，可以将性能热点模块通过 WebAssembly 来实现，从而获取高性能执行的收益。对于 Rust 开发者来说，利用语言的特性可以获取高性能和高安全性，但为了让开发者获得更低的开发门槛，可以编译为 WebAssembly 模块提供给类似 JavaScript、Python 等脚本语言使用，降低开发者门槛；对于 C++ 开发者来说，可以获得高性能」

juejin.cn

走进 WebAssembly 的世界 - 字节前端的专栏 - 掘金

走进 WebAssembly 的世界：本专栏从 WebAssembly 的基础入手，由浅入深的系统化介绍了 WebAssembly 的相关技术、底层设计原理、语言、库与工具链，并结合有代表性的实际业务场景，探讨其未来发展方向、发展趋势，同大家一起走入 WebAssembly 的世界。 - 掘金

打算将这里作为前端学习及日常分享的一个频道，偶尔也会分享自己的一些见闻，有自己觉得写的还不错的博文也会发在这里~
Gitbook 前端学习记录：https://book.cosine.ren/
个人博客：
xLog 👉 x.cosine.ren
Hexo 👉 https://ysx.cosine.ren
RSS订阅📢 https://x.cosine.ren/feed/xml

🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #图

#前端 #javascript #css #tailwind #react #node #typescript #工程化 #阮一峰的科技周刊 #chatgpt #rss #vscode #web3 #新标准 #wasm

book.cosine.ren

前言及目录 | 前端学习记录