打算将这里作为前端学习及日常分享的一个频道，偶尔也会分享自己的一些见闻，有自己觉得写的还不错的博文也会发在这里~
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

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

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

photoshop.adobe.com

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

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

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

#优质博文 #前端 #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 运算符查找变得容易，甚至可以找到您以前从未遇到过的运算符，例如 >>>=。

#优质博文 #前端 #工程化 #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 渲染器以及多个图表库和框架的更新。

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

#优质博文 #前端 #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 #前端 #安全 #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 编辑团队