Now vibe coding, so learning hammer FE ?
《嵌套Promise的实际用途》
标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程
总结：
文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。
文章要点：
- Promise的
- 函数式编程社区曾希望Promise能区分
- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回
- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性
文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/
标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程
总结：
文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。
文章要点：
- Promise的
then()方法同时承担了Functor的map和Monad的flatMap功能，会自动扁平化任意层级的嵌套Promise- 函数式编程社区曾希望Promise能区分
map()和flatMap()，但规范作者出于便利性考虑拒绝了这一提议- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回
{ promise: Promise<T> }结构来"绕过"Promise自动扁平化，实现了关键功能：保护"检查队列状态"和"放入任务"这两个动作的原子性，同时又不阻塞调度器等待任务实际执行完成- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性
文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/
《2026年JavaScript生态全景指南》
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
和.filter()`啦，而且是惰性求值不耗内存；Set之间可以玩集合运算，轻松找出技能交集和差集；`Promise.try()`让同步异步错误一网打尽；还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题～- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
Frontend Masters
What To Know in JavaScript (2026 Edition)
We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…
《原生JSON模块终于成为现实》
标签：#JavaScript #ESModules #JSON #Web标准
总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用
文章要点：
- 使用
- 动态导入同样支持：
- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（
- 浏览器仍需服务器返回
- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（
- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值
文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
标签：#JavaScript #ESModules #JSON #Web标准
总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用
import attributes语法with { type: "json" }，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。文章要点：
- 使用
import config from "./config.json" with { type: "json" }语法实现原生JSON导入，替代了以往需要打包工具转换的方式- 动态导入同样支持：
await import("./config.json", { with: { type: "json" } })- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（
a === b为true）- 浏览器仍需服务器返回
Content-Type: application/json，并遵循CORS规则- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（
with { type: "css" }），为未来其他结构化模块类型建立模式- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值
文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
《利用浏览器Canvas进行数据压缩》
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
#React 学习如何使用 React Three Fiber 创建一个简化版的移动游戏《跳跳路》的克隆版。#ReactThreeFiber #Threejs #JavaScript #TypeScript
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
JavaScript Game Tutorials
Crossy Road with React Three Fiber
In this tutorial, we learn how to create a simplified clone of the mobile game Crossy Road with React Three Fiber.
