呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #JavaScript #新特性
When can I use Temporal?
author John Dalziel
When can I use Temporal?
AI 摘要:本文详细探讨了 JavaScript 中 Temporal API 的背景、必要性以及其开发进展缓慢的原因。Temporal API 是对现有 Date API 的重大升级,旨在解决其功能不足和不一致的问题,提供更全面的日期和时间处理能力。尽管提案自 2017 年开始已进入 TC39 的第 3 阶段,但由于与现代标准(如 IANA、ISO-8601 等)的复杂互操作性要求,开发耗时近八年。目前,Firefox 已率先实现,Chrome 和 Safari 也在推进中,作者乐观预测其可能在年内正式发布。
1. 什么是 Temporal API?
• Temporal API 是 JavaScript 对 Date API 的 overdue 替代品,旨在提供更现代化的日期和时间处理功能。
• 作者希望其能在今年内正式在浏览器中发布。
2. 为什么需要替换 Date API?
• JavaScript 的 Date API 是 1995 年 Brendan Eich 快速开发时直接从 Java 的 java.util.Date 复制而来,存在诸多缺陷(如 Y2K 问题)。
• Java 早已废弃并更新了其 Date API,而 JavaScript 却沿用了 30 年,导致功能不足(例如缺乏对持续时间、间隔等的支持)和不一致性。
• 现有解决方案依赖第三方库,这些库因需要传输时区和本地化数据而变得臃肿。
• Temporal 作为一个命名空间,将原生支持时间戳、持续时间、间隔和时区管理,极大增强浏览器的日期时间能力。
3. 为什么 Temporal API 开发耗时如此之长?
• Temporal API 自 2017 年提出,至今已耗时八年,仍处于 TC39 的第 3 阶段(共 4 阶段)。
• 主要延迟原因并非功能范围,而是与现代 web 和计算标准的互操作性需求:
• 时区字符串基于 IANA Time Zone Database。
• 时间戳字符串基于 RFC9557(RFC3339 的更新,2024 年 4 月通过)。
• 持续时间字符串基于 ISO-8601 标准。
• 这些标准的协调(如 IETF 对 RFC3339 的扩展)耗费了大量时间。
• 此外,Temporal 与 ECMA-402 国际化 API(例如 Intl.DateTimeFormat)的数据来源(如 Unicode CLDR)也需整合,进一步减少对大型库的依赖。
• 2024 年 6 月,为加速发布,Temporal 范围被缩减,自定义日历和时区功能被移除,但未来可能通过 Temporal v2 提案恢复。
• 当前进展:
• Firefox 已于 139 版本(2023 年 5 月 27 日)实现。
• Chrome V8 部分实现了 Temporal.Instant,基于 Rust 库 temporal_rs。
• Safari 的 JavaScriptCore 也在开发中。
• 进入第 4 阶段需“两个兼容实现通过验收测试”,目前仍未达成,但作者乐观预测年内可能实现。
• 当前用户可通过 Firefox 或 Temporal polyfill 进行测试。
author John Dalziel
#Newsletter #前端 #JavaScript #新动态
JavaScript Weekly #744
JavaScript Weekly #744
AI 摘要:本期《JavaScript Weekly》(2025 年 7 月 11 日,第 744 期)涵盖了 JavaScript 生态系统的最新动态,包括 Vercel 收购 NuxtLabs、TC39 最新会议总结、TypeScript 5.9 Beta 发布、Node.js 新版本更新等重要新闻。文章还探讨了 JavaScript 函数声明的细微差别、现代工具中的 Rust 趋势以及多个实用工具和库的发布。此外,涉及了 Web 性能优化、代码问题修复及跨平台开发的最新技术文章和资源。
1. Vercel 收购 NuxtLabs:Vercel 收购了负责 Nuxt 项目的公司,并支持其核心团队,Nuxt 保持开源,Vue 创始人对此表示乐观。Vercel 目前管理多个关键项目如 Next.js、 Turborepo 等,CEO Guillermo Rauch 分享了更多细节。
2. TC39 会议总结:详细报道了 5 月 ECMAScript 委员会会议,讨论了 Array.fromAsync、资源管理、Temporal API 及 AsyncContext 等提案的进展和决策。
3. 简讯:
• TypeScript 5.9 Beta 发布,支持延迟模块评估(import defer)。
• Nginx 的 JavaScript 模块(njs)升级至 QuickJS,支持 ES2023。
• JS1024 代码竞赛剩余一周,鼓励提交小于 1024 字节的 JS/GLSL 程序。
• Oliver Stenbom 反思 Rust 在现代 JavaScript 工具生态中的普及。
4. 版本发布:
• Node.js v24.4.0 发布,提醒下周将有安全更新。
• 其他工具更新包括 Oxlint 1.6、VS Code v1.102、Ember 6.5、Angular 20.1 等。
5. 文章与教程:
• 普通函数与箭头函数的区别:James Sinclair 深入解析两种函数声明的细微差异,帮助开发者选择合适的语法。
• JavaScript 作用域提升问题:Parcel 作者 Devon Govett 讨论作用域提升与现代 JS 模式的冲突,考虑在 Parcel v3 中移除此功能。
• 代码点安全的截断:James Mulholland 解决 CSV 导入中 emoji 导致的错误,提出使用代码点感知方法。
• 其他技术文章:
• Bun 解析 10 亿行数据的性能优化(Tae Kim)。
• Tauri 多进程中 JS 存储的松散同步(Costa Alexoglou)。
• Promise 状态管理探讨(Lydia Cho)。
• Temporal API 的使用时机及 Date API 替换的挑战(John Dalziel)。
• 2025 年是否仍需使用 jQuery 的讨论(Suren Enfiajyan)。
6. 工具与代码库:
• Driver.js:用于页面导览和上下文帮助的 Vanilla JS 库,功能流畅且维护良好。
• jsonrepair:修复无效 JSON 文档,支持 Node、CLI 及在线使用,适用于处理 LLM 或不合规 JSON。
• line-numbers:为 HTML 元素添加行号的 Web 组件,适用于展示源码片段。
• cRonstrue 3.0:将 Cron 表达式转换为自然语言,支持多语言。
• 其他工具:Next.js Boilerplate 5.0、React Scan 0.4、html-midi-player 1.6、CKEditor5 46.0、Recharts 3.1、Vuetify 3.9。
7. 其他生态动态:
• Chrome 137 支持 CSS 内联条件(if()函数)。
• SVG 生成技术可替代 GIF 并用于 GitHub README。
• 前 Meta 工程师分享 Meta 如何在 Facebook 中使用 React。
• PlanetScale 发布缓存优势的互动文章。
• Claude Code 借助 Bun 成为单文件可执行程序。
• ANSI.tools 提供 ANSI 转义码分析工具。
#优质博文 #前端 #无障碍 #WCAG
Please, can we have ARIA Notify
author Nic Chan
Please, can we have ARIA Notify
AI 摘要:本文作者 Nic Chan 强烈呼吁推动 ARIA Notify API 的实现,以解决当前 ARIA Live Regions 在无障碍开发中的诸多问题。文章详细分析了 Live Regions 的局限性,包括隐藏元素时的无效性、模态对话框中的管理复杂性、开发者的实现难度、规范内置的不一致性以及国际化翻译支持的不足。作者通过自己在 Audiom 项目中的经验,阐述了 Live Regions 在实际应用中的困境,并对 ARIA Notify API 寄予厚望,认为它能提供更精细的控制和更好的用户体验,同时希望未来能解决翻译等问题,避免成为另一个技术上存在但实用性受限的工具。
author Nic Chan
#AI
这几天好累没有更新🥹 简单 mark 一下。
https://fixupx.com/Manjusaka_Lee/status/1944414735715479807
这几天好累没有更新🥹 简单 mark 一下。
https://fixupx.com/Manjusaka_Lee/status/1944414735715479807
NadeshikoManju@薫る花は凛と咲く7月5日播出(@Manjusaka_Lee):讲一下目前自己对于目前 AI 路线的一个小想法
个人目前觉得 AI Agent 在迎来自己的真正的 iPhone4 时有一个问题是需要解决。即如何高效的去创建 Sandbox。
如同大家所看到的一样,目前 MCP 也好,还是其余协议也好,随着我们赋予模型或者 Agent 的权限越来越大。意味着攻击手段也会越来越多样化(如同容器一样,你可能永远不知道你引入的 prompt 或者你依赖的 API Provider 加了什么料),比如最近的一个很有趣的例子是附录1提到基于 Supabase MCP 攻击。
这意味着我们需要一个更有效率的 Sandbox 让我们进行 dry run 的操作。
而更有效率的 Sandbox 意味着几点
1. 强隔离(runc 这种逃逸满天飞的还是有点不太适合)
2. 启动快
3. 能耗小
而在这方面,Apple 实际上进行了一个先手布局。在 macOS 11.0 之后,Apple 发布了一套快速,轻量的虚拟框架 vz(参见附录2),而最近,Apple 更进一步的发布了开源的 container 套件(参见附录3)。VZ 开发体验相对良好,能耗表现极好。我觉得是为后续 macOS 生态的 AI Agent 铺平了道路
说回下一个时代的 Sandbox,看着几点主要诉求,可能很多同学第一时间就反应过来了这不是 Serverless 之前衍生出来的高性能的安全容器的需求嘛?这个时候,再去会看 NSDI 2020 AWS 发布的 Firecracker: Lightweight Virtualization for Serverless Applications (参见附录4),就会有一种恍惚感。技术路线总是会在不经意间交叉
而至于 Windows,其实 WSL 的开源我觉得也是在为后续的可定制化的 AI Sandbox 打样。但是我自己对于 hyperv 体系不甚了解就不在此处乱讲了。
差不多就这样,深夜的一点胡乱思考
附录:
1. https://read.readwise.io/new/read/01jztvkzkv792149kne27x2v95
2. https://developer.apple.com/documentation/virtualization
3. https://github.com/apple/container
4. https://www.usenix.org/conference/nsdi20/presentation/agache
但其实现场直接有人问尤雨溪这个经典问题了,前面10个工具链不够好,又开发一个,于是我们有11个了,怎么面对这种问题?
回答是需要时间,实现再好也不会有魔法让所有想切换的人一下子换成vite+工具链;
演讲前文也提到过,在合适的时机做合适的事很重要,vite实际上从起步发展到现在,进展非常迅速,社区接受度已经很高了(已经被广泛采用或者作为大部分框架的默认脚手架),是前端工具链最有希望做成这件事的团队。
如果问我,我会说看看其他领域怎么解决类似问题的,cargo的优秀示范在前面,py那边也要uv在做类似的生态位,前端工具链当然也需要这样一个角色
#优质博文 #webgl #r3f #性能优化 #react
Three.js Instances: Rendering Multiple Objects Simultaneously
author Matias Gonzalez Fernandez
Three.js Instances: Rendering Multiple Objects Simultaneously
AI 摘要:本文详细介绍了在 Three.js 中使用实例化(Instancing)技术来优化性能,同时渲染多个对象。通过实例化,可以将多个共享相同几何形状和材质的对象合并为一个绘制调用(Draw Call),显著减少 CPU 到 GPU 的通信开销,从而提升渲染效率。文章结合 React Three Fiber 和 drei 库,提供了从基础实例化到复杂场景(如森林渲染)的完整教程,涵盖了自定义着色器、实例属性调整以及多种实例集的实现方法。
1. 引言:介绍了实例化的基本概念及其性能优势。实例化允许在一次绘制调用中渲染多个共享几何形状和材质的对象,例如渲染森林中的树木、岩石和草地时,可以大幅减少绘制调用次数,提升性能。
2. 基础实例化:以渲染一千个盒子为例,展示了传统方法与使用 drei/instances 的实例化方法的对比。传统方法需要一千次绘制调用,而实例化方法仅需一次,显著优化了性能。
3. 多组实例化:讨论了如何使用 drei 的 createInstances() 函数创建多个实例集,例如同时渲染盒子和球体(一千个盒子与一千个球体),最终仅需两次绘制调用。
4. 自定义着色器的实例化:讲解了如何为实例化对象创建自定义着色器材料,包括顶点动画(如 blob 效果)。通过 instanceMatrix 属性解决位置重叠问题,确保每个实例有独立的变换。
5. 调整实例属性:介绍了如何通过 InstancedAttribute 为每个实例设置自定义属性,例如为 blob 动画添加时间偏移(timeShift),实现独立动画效果。
6. 创建森林场景:以渲染一千棵树为例,展示了如何加载 3D 模型并应用实例化技术,最终仅用三次绘制调用完成整个森林场景(包括天空盒和地面)。还通过随机位置、高度和旋转增加场景多样性。
7. 进一步阅读:提及了未深入探讨但值得关注的主题,如批量网格(Batched Meshes)、骨骼动画(Skeletons)以及变形(Morphing)与批量网格的结合。
author Matias Gonzalez Fernandez