筷筷小报#11 - 小报当然得小

筷筷小报#11 推荐了一站式 iframe 生成器，这是一个多功能的可视化配置工具。视频推荐包括英语学习方法、适合编程时听的Lofi Girl音乐、软件开发原则的讨论，以及网页滑动跟随效果的实现方法。文章推荐了一篇关于React渲染机制的交互式指南。播客推荐讨论了AI时代大数据平台的发展和挑战。最后，分享了关于努力、不同层级看待事物角度和《一个人消失在世上》的引述。

筷筷小报#10 - 想不出标题这被子就这样吧

筷筷小报#10 介绍了WebAV，一个基于WebCodecs构建的用于在Web平台上创建和编辑视频文件的SDK。文章还提到了Faker，一个用于生成虚假数据的工具。工具推荐部分介绍了Follow，以及NPM Chart。视频推荐包括错误处理方法的讨论、远程办公日常的vlog，以及前端服务端技术栈的介绍。文章推荐探讨了AI带来的变化、流式LLM APIs的工作方式、LLM推理输出JSON格式的限制方法，以及JavaScript对象在V8引擎中的内存管理和优化策略。播客推荐讨论了播客的盈利模式和创作经验。最后，分享了一个关于英语学习的观点，强调用英语去学习自己喜欢的东西。

浏览器渲染原理

浏览器渲染原理涉及将HTML字符串转换成像素信息的一系列步骤。文章详细介绍了渲染流水线，包括解析HTML和CSS生成DOM树和CSSOM树、样式计算形成渲染树、布局/重排确定元素位置和尺寸、分层优化绘制效率、绘制/重绘生成绘制指令、分块并光栅化每个块，以及最终的绘制呈现。文章还探讨了Reflow和Repaint的概念，解释了为什么transform操作效率高，因为它只影响渲染流程的最后一个阶段，并且与渲染主线程的阻塞无关。

筷筷小报#9 - 祝各位 1024 快乐

筷筷小报#9 工具推荐部分介绍了 rrweb，一个用于录制和回放用户网页交互的工具。视频推荐包括作者最爱的 polebug vlog、现代前端开发必知系列之用户体验优化，以及如何挖掘学习的价值。文章推荐探讨了使用海龟汤游戏数据评估大模型推理能力，以及基于AST的代码问题修复方案。播客推荐讨论了AI编码的发展阶段、个人开发者如何利用AI提高效率，以及如何庆祝程序员节。最后，分享了关于远程办公时间规划的见解，强调了任务优先级排序和习惯可持续性的重要性。

筷筷小报#8 - Next.js 带来的心智负担你受的了吗

本文讨论了 Next.js 15.0.0 的新特性及其带来的心智负担，特别是多层缓存策略的复杂性。文章还提到了即将举行的 Next.js 开发者大会。工具推荐部分介绍了开源许可证选择器、player.style（一个提供美观播放器主题的网站）和 CodeImage（一个美化代码截图的工具）。视频推荐包括程序员下班后的学习记录和开源项目中的坑。文章推荐部分涉及 eBay 实验平台的网站性能优化实践、前端非侵入式骨架屏自动生成方案，以及构建时组件的优势。播客推荐包括对 AI 播客的讨论和 WebWorker 3周年联欢。最后，分享了关于如何快速验证想法的句子。

筷筷小报#7 - 两步搭建自己的博客

本文介绍了如何使用 Astro 和 Vercel 两步搭建个人博客的简单方法。此外，文章还推荐了 Humanify 工具，这是一个基于 AI 的工具，用于逆向分析混淆后的 JavaScript 代码。视频推荐包括旅行感悟、网络安全协议的新发展，以及 Web 性能优化和 B站前端错误监控实践的相关文章。播客推荐则涉及全息显示的 AR 眼镜、澳洲工作环境的复杂性，以及东亚家庭中母女关系的探讨。

使用沉浸式翻译打平信息差

本文介绍了一种浏览器插件，它利用大语言模型，以中英文隔段落对照的形式提供翻译，提高阅读效率。该插件支持网页、YouTube字幕、电子书等多种格式的翻译。文章还提供了豆包大模型的接入教程，包括获取API Key和配置翻译插件的步骤。此外，还对比了不同翻译平台的效果，展示了沉浸式翻译插件的翻译质量。

筷筷小报#6 - 如果前端有一套统一的工具链...

筷筷小报#6 介绍了尤雨溪创立的 VoidZero 公司，该公司旨在为 JavaScript 生态系统构建一个开源、高性能且统一的开发工具链。文章还推荐了 Requstory 和 Polymet 这两个利用 AI 将想法转化为用户故事和流程图，以及可交互原型图的工具。视频推荐包括前端性能优化方案、程序员的黑客松记录、关于目标设定和保持动力的 TED 演讲，以及 ViteConf 2024 的录播。文章部分则宣布了 VoidZero 的成立，并阐述了其愿景。播客推荐讨论了自动驾驶领域的算力和人力问题。最后，以一句国庆节的祝福作为结尾。

筷筷小报#5 - Vite Conf要来辣

筷筷小报#5 预告了即将举行的 Vite Conf 大会，并分享了作者准备观看的演讲。工具推荐部分介绍了 abtest.design，一个 A/B 测试结果库，汇集了顶尖应用程序的案例。视频推荐包括程序员学习记录 vlog、现代前端开发必知系列、console 的多种用法，以及交互与视觉融合的高级案例。文章推荐部分讨论了 Follow 应用的设计理念，以及一家公司为何拒绝为客户添加定制模块。播客推荐包括非互联网企业如何提升技术和背景、性别议题探讨、海外市场推广策略，以及参与开源如何保持技术热情。句子部分分享了一首诗《只要有一个女人》和对《刀锋》中拉里修行之旅的思考。

筷筷小报#4 - 怎样提出一个好问题？

筷筷小报#4 探讨了如何提出一个好问题，强调了提问的本质和如何通过构建提问分析框架来提高提问的质量。在开源动态部分，介绍了 Follow，一个基于 web3 的信息浏览器，它通过 RSS 为用户提供个性化的信息流，并采用区块链技术激励用户和创作者。同时，报道了 Vite 6.0.0-beta.0 和 TypeScript 5.6 的发布，带来了新特性和改进。工具推荐部分再次提到 Follow，并介绍了 GitHub Star History 工具。视频推荐包括程序员学习记录 vlog、提问技巧教程和灰度发布与 AB Test 的详细介绍。播客部分则聚焦于性别不友好的语言表达和如何通过日常话语反抗父权制。最后，分享了关于如何跳出工作无聊怪圈的见解。

筷筷小报#3 - Vue 3.5 来啦

筷筷小报#3 报道了 Vue 3.5 的正式发布，代号“天元突破红莲螺岩”。此版本着重于内部优化和新功能，以提升性能和开发体验。此外，推荐了墨滴（mdnice.com）工具，它是一款 Markdown 快速排版美化并快速分发的网页效率工具，支持一键分享到多个平台。文章还包含多个视频推荐，包括 Obsidian 同步方案的介绍、程序员学习记录 vlog，以及探讨无解的计算机问题的系列视频。

筷筷小报#2 - Rspack推出正式版，准备好升级你的前端构建工具了吗？

重点介绍了 Rspack 1.0 正式版的发布，这是一个基于 Rust 的高性能 Web 打包工具，旨在提供比 webpack 更快的构建速度。Rspack 1.0 已经实现与 webpack 的主要配置兼容，并适配了 webpack 的 loader 架构，支持多种 loader。此外，Rspack 1.0 还带来了新特性和优化，包括性能提升、兼容性改进、模块联邦 2.0 支持等。文章还提到了 Zustand 5.0 预发布版本，以及 Shots 工具，后者可快速创建产品宣传图。同时，文章还推荐了关于创建 NPM 包的文章、《HelloGitHub》第 101 期内容，以及讨论 Next.js 和现代前端工具链的视频和播客。最后，文章分享了关于注意力和自我观察的深刻见解。

筷筷小报#1 - 使用沉浸式翻译打平信息差

筷筷小报#1 介绍了 ViteConf 2024 大会、TC39 新提案安全赋值运算符以及沉浸式翻译工具。ViteConf 2024 将于10月3日至4日线上举行，聚焦于构建下一代前端工具链。安全赋值运算符提案旨在简化错误处理并增强代码可读性。沉浸式翻译工具利用大模型能力，提供中英文隔段落对照翻译，提升阅读效率，适用于多种文件格式和网页内容。此外，文章还推荐了Refactoring.Guru 图解设计模式资源，并分享了相关视频、播客和文章。

CMJ和ESM

CMJ和ESM 是JavaScript中两种不同的模块化标准。CommonJS（CMJ）是社区标准，主要在Node.js环境中使用，它使用函数实现模块化，支持动态依赖，并且依赖是同步执行的。而ES Module（ESM）是官方标准，使用新语法实现，支持所有环境，并且同时支持静态和动态依赖，其中动态依赖是异步执行的。

WebSocket

WebSocket是HTML5引入的一种网络通信协议，它允许在单个TCP连接上进行全双工通信，从而实现服务器与客户端之间的实时数据交换。与传统的HTTP请求-响应模式不同，WebSocket提供了一种更为高效的实时通信解决方案。在实时性要求较高的场景，如股票K线图、聊天应用、警报通知等，WebSocket通过减少不必要的请求和连接建立，提高了通信效率和实时性。它通过一个特殊的握手过程建立连接，使用ws://或wss://协议前缀，并在请求头中包含特定的升级标记。一旦握手成功，WebSocket连接便建立，允许服务器主动推送消息给客户端。尽管WebSocket在实时性方面具有优势，但它也有局限性，比如对旧版本浏览器的兼容性问题，以及在消息量较少时维持TCP连接可能导致的资源浪费。因此，在实际应用中，开发者需要根据具体场景权衡使用WebSocket与轮询技术。

函数柯里化

函数柯里化是一种编程技巧，它允许将一个多参数函数转换成一系列单参数函数，从而实现参数的复用和延迟求值。本文通过示例代码，首先介绍了柯里化的基本过程，然后展示了其在实际开发中的应用，如参数复用在正则表达式校验函数中的优势。文章还提供了一个经典面试题，演示了如何实现一个能够接受不定数量参数的柯里化函数，并讨论了JavaScript中的toString方法和隐式类型转换的概念。

手写一个call方法

本文详细介绍了如何手动实现JavaScript中的call方法。call方法允许我们调用一个函数，并将this关键字的值设置为提供的值。文章通过文章开头的步骤展示了手写call方法的过程。文章还提到了使用Object.defineProperty来设置属性不可枚举，以避免在this枚举时出现意外属性。通过这些步骤，我们能够实现一个自定义的myCall方法，它能够正确地将函数调用的上下文设置为指定的对象，并执行函数。

缓存基本原理

本文深入探讨了客户端缓存的概念和工作原理，以及如何通过HTTP协议实现高效的缓存策略。客户端缓存通过将响应结果保存在本地，如浏览器中，减少了服务器的重复处理压力。文章详细解释了缓存策略的关键问题，包括哪些资源应该被缓存、缓存时间的设置、服务器资源更新时的客户端缓存更新机制，以及缓存过期后的处理方法。 文章进一步分析了HTTP响应头中的缓存指令，如Cache-Control、ETag、Last-Modified等，这些指令指导浏览器如何进行资源的缓存和验证。同时，介绍了客户端在发起请求时如何利用缓存，以及在缓存失效时如何通过协商缓存机制与服务器通信，以确定资源是否需要更新。 此外，文章还讨论了Cache-Control的不同设置选项，如public、private、no-cache、no-store和max-age，以及Expires和Vary头的使用，这些工具共同作用于资源的缓存控制。最后，文章总结了服务器和浏览器在缓存过程中的角色和行为，以及使用版本号或hash值来管理资源更新的现代实践方法。

控制并发数量

这篇文章教你如何控制请求并发的数量。例如有100个请求需要发送，如何控制只并行发送四个请求。

跨域问题及解决方案

跨域问题通常由浏览器的同源策略引起，它限制了不同源之间的资源访问。本文介绍了跨域问题的概念、原因以及解决方案。同源策略要求协议、域名和端口号完全相同，而跨域问题主要出现在网络通信和JS API中。CORS（跨域资源共享）是解决跨域问题的一种机制，它通过HTTP头允许服务器标示其他源访问资源。CORS将请求分为简单请求和预检请求，简单请求满足特定条件，而预检请求需要服务器的明确允许。此外，文中还讨论了如何通过配置实现跨域请求附带cookie，以及如何通过设置响应头Access-Control-Expose-Headers来获取非标准响应头。除了CORS，文中还提到了JSONP和代理作为跨域解决方案，但它们各有局限性。最后，文中提供了选择跨域解决方案的决策图，强调保持生产环境和开发环境一致的重要性。

浏览器的通信能力

浏览器可以代替用户完成http请求，代替用户解析响应结果，可以称为用户代理 user agent。简单写写

网络分层模型和应用协议

简单写写网络分层模型和应用协议

使用Array.fill()初始化一个二维数组的小坑

在js中初始化一个二维数组嵌套两个new Array是不行的！通常使用new Array结合map或使用Array.form来初始化一个二维数组。

Vue 常见优化手段

探索Vue框架中提升应用性能的多种策略。

JS中的属性描述符

探索JS中属性描述符的奥秘，了解如何利用Object.defineProperty()和Object.getOwnPropertyDescriptor()来精准控制对象属性的行为。从属性的可写性、枚举性到配置性，再到getter和setter的巧妙应用，本文将带您熟悉这些高级特性，提升前端开发技能。

什么是事件循环

事件循环是浏览器的核心原理。该片段会讲清楚事件循环的前因后果，帮助更好的理解事件循环。

获取指定页面的小程序二维码

一个方便复用的代码片段

异步emit

在编程中，特别是在涉及事件驱动或响应式编程的框架中，异步emit（即异步发送事件）是一种常见的模式。通过异步emit，事件的发送者和接收者之间不需要直接依赖。这有助于降低系统的耦合度，使得各个组件更容易维护和扩展。