呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #算法 #数据采样 #course
好棒的交互式教程，务必看看原文。（看了这篇打 ACM 的回忆涌了上来呜呜呜）
Reservoir Sampling
author Sam Rose
好棒的交互式教程，务必看看原文。（看了这篇打 ACM 的回忆涌了上来呜呜呜）
Reservoir Sampling
AI 摘要：本文详细介绍了蓄水池采样（Reservoir Sampling）这一算法技术，用于在未知数据集大小的情况下公平地随机选择样本。文章通过直观的例子（如抽牌和日志收集）以及逐步推导，解释了蓄水池采样的应用场景、数学原理和实现方法，强调其在处理大规模数据流时的内存效率和公平性。
1. 引言与背景：
• 介绍了蓄水池采样的核心概念，即在不知道数据集大小的情况下，如何公平地随机选择样本。
• 目标：让读者了解何时需要使用蓄水池采样、其背后的数学原理（仅用基本运算：减法、乘法和除法）以及简单的实现方法。
2. 已知大小的采样：
• 通过抽取10张牌中的3张为例，说明传统随机采样的方法（如洗牌或随机索引）。
• 指出当数据量巨大（如百万张牌）时，传统方法变得不切实际，尤其是当数据以流式方式逐个呈现且无法存储所有数据时。
• 提出了一个难题：如果每次只能看到一张牌且只能持有一张，如何公平地选择？
3. 未知大小的采样：
• 引入了蓄水池采样的应用场景，如日志收集服务中处理日志峰值时需要采样。
• 描述了问题：数据流中日志数量未知，无法存储所有日志，需在内存受限的情况下公平选择部分日志。
• 通过模拟日志流，展示了简单采样（如仅取前几个）的不公平性，强调需要一种公平的算法。
4. 蓄水池采样原理（单项选择）：
• 详细解释了蓄水池采样的核心思想：对于第n个元素，以1/n的概率替换当前持有的元素。
• 通过逐步计算概率，证明了该方法确保每个元素被选中的概率相等（公平性）。
• 举例分析了前几张牌的选中概率，确保读者理解数学推导（例如，第1张牌选中概率为100%，第2张为50%，第3张为33.33%）。
5. 扩展到多项选择：
• 介绍了如何从数据流中选择k个元素：新元素以k/n的概率被选中，并随机替换当前持有的k个元素中的一个。
• 提供了实现方法：使用大小为k的数组，生成0到n的随机数，若小于k则替换对应位置的元素。
• 通过公式和实例，验证了多项选择的公平性。
6. 应用于日志收集：
• 将蓄水池采样应用于日志收集场景，设置k=5，每秒发送最多5条日志。
• 展示了该方法的优势：在安静时段不丢失日志，在高峰时段限制发送量，且内存使用可控。
• 指出了一个权衡：日志发送不再是实时流，而是按时间间隔批量发送。
7. 进阶阅读与加权采样：
• 提到蓄水池采样的加权变体，适用于某些日志（如错误日志）更重要的情况。
• 提供了相关资源链接（Wikipedia），供有兴趣的读者深入研究。
author Sam Rose
#优质视频
我们发现了Win11操作总是不跟手的深层原因！
@epcdiy:
数码 - Win10只剩半年寿命了，Win11问题依然很多！在和朋友聊天的时候我发现，尤其是从早年XP时代、Vista、Win7、Win10一路用过来的朋友，总感觉使用Win11系统，各种交互总会慢半拍，就是很缺乏一种流畅的感觉，为什么？
我们发现了Win11操作总是不跟手的深层原因！
@epcdiy:
数码 - Win10只剩半年寿命了，Win11问题依然很多！在和朋友聊天的时候我发现，尤其是从早年XP时代、Vista、Win7、Win10一路用过来的朋友，总感觉使用Win11系统，各种交互总会慢半拍，就是很缺乏一种流畅的感觉，为什么？
#优质博文 #前端 #css #webgl #shaders
经常用～
Holograms, light-leaks and how to build CSS-only shaders
author Robb
经常用～
Holograms, light-leaks and how to build CSS-only shaders
AI 摘要：本文探讨了如何使用 CSS 的 mix-blend-mode 属性创建类似 WebGL 着色器的视觉效果，而无需依赖 JavaScript。作者 Robb Owen 详细介绍了通过 CSS 层叠、渐变和混合模式实现动态光效（如全息图、光漏等）的技术，强调了 CSS 在视觉效果上的潜力，同时也指出了性能问题，建议在实际应用中保持克制。
• 引言
介绍了 WebGL 和 GLSL 着色器在网页设计中的重要性，并提出 CSS 也可以通过 mix-blend-mode 实现类似效果，避免引入 JavaScript 依赖。展示了滚动时图像光效从橙色渐变为蓝色的示例，包含镜头光晕效果。
• 什么是 CSS '着色器'？
解释了 CSS 着色器的基本概念，即通过图像和多层 background-image 叠加，使用渐变、遮罩和混合模式控制层间互动。提供了基础 HTML 和 CSS 结构代码，确保各层与底层图像对齐。
• 模拟镜面反射（Specularity）
描述了如何使用渐变模拟光线从明到暗的变化，并通过 background-attachment: fixed 属性引入滚动时的动态效果，模拟视角变化的光反射效果。
• 了解混合模式（Blend Modes）
详细介绍了 CSS 中常用的混合模式（如 multiply、screen、color-dodge、color-burn），通过示例图像展示了各模式如何影响像素颜色混合的效果，为后续效果实现奠定基础。
• 层叠合成（Compositing Layers）
讲解了通过嵌套 div 和多重 mix-blend-mode 实现复杂的层叠效果，使用暗色图像作为遮罩（specular map）控制光照区域，结合 color-dodge 模式增强阳光绽放效果。
• 最终着色器效果
提供了完整的 HTML 和 CSS 代码，展示了效果的最终呈现，并通过视图模式切换帮助读者理解各层如何协同工作形成最终图像。
• 进一步探索，通过多个示例展示了 CSS 着色器的多样应用，包括
• 极光效果（Aurora Borealis）：通过重复渐变和 screen 模式模拟极光波动。
• 光漏效果（Light-leak）：使用彩色遮罩和红橙渐变模拟老式相机光漏。
• 全息图效果（Hologram）：通过多层遮罩和反向渐变结合 color-burn 模式实现双向全息效果。
• 总结与性能问题
强调了现代 CSS 的强大功能，但也指出了 mix-blend-mode 的性能问题，尤其是在复杂效果和动画中的表现。作者尝试了 backface-visibility: hidden 优化性能，但效果有限，并提醒读者谨慎使用此类技术。
author Robb
Robb Owen Digital
Holograms, light-leaks and how to build CSS-only shaders.
Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript
#前端 #优质博文 #新动态 #javascript
🔊 JavaScript Weekly #735
🔊 JavaScript Weekly #735
AI 摘要：本期《JavaScript Weekly》 (#735, 2025年5月9日) 聚焦 JavaScript 生态系统的最新动态，涵盖工具发布、框架更新和技术文章。文章主要介绍了 k6 1.0 负载测试工具、Node.js 24 的最新发布、VS Code 1.100 版本的特性更新，以及多个 JavaScript 相关库和工具的新版本发布，如 ESLint、Mantine 等。此外，还包括了关于 React、Astro、Electron 等技术的深入文章和教程，以及对 CSS 和数据库等周边技术的讨论，为开发者提供了丰富的资源和灵感。
1. 主要工具与发布
• k6 1.0: Go-Powered Load Testing with JavaScript：由 Grafana Labs 推出，基于 Sobek Go 引擎，支持用 JavaScript 编写测试脚本，1.0 版本强调稳定性、TypeScript 支持和扩展性。
• Node 24 (Current) Released：Node.js 最新“Current”版本，取代 v23，包含 npm 11、V8 13.6 引擎（支持 RegExp.escape、Float16Array 等新特性）、默认启用的 URLPattern API，以及 Undici 7。值得注意的是，v24.0.1 临时恢复了一些 EOL 特性以解决依赖问题。
• Visual Studio Code Version 1.100：为 JavaScript 开发者带来多项改进，包括“Next Edit Suggestions”（建议添加缺失导入）、支持 Node 的增强网络调试功能、提升类型信息可见性、远程 MCP 服务器支持，以及默认使用 GPT 4.1 模型。
• Releases：
• ESLint v9.26.0：支持 MCP，使其可直接被 AI 模型和编码代理使用。
• Mapbox GL JS 3.12：基于 WebGL 的交互式矢量地图库。
• Relay v19：Facebook 的 React/GraphQL 声明式框架。
• Material UI 7.1：现在 Tailwind CSS 4。
• 其他更新包括 Rspack 1.3.9、Babylon.js 8.7 和 Electron 36。
2. 文章与教程
• The Power of the Spread and Rest Syntax：简要介绍 JavaScript 中扩展和剩余语法的强大功能（作者：Matt Smith）。
• Migrating a Project from Prettier and ESLint to Biome：讨论从 Prettier 和 ESLint 迁移到 Biome 的过程，强调 Biome 作为一体化工具的潜力（作者：Damilola Olatunji）。
• 其他文章包括 React 编译器简介、Angular 中 DDD 的误解，以及 Fastify 与 Vue 的结合故事。
3. 代码与工具
• HelloCSV：一个前端 CSV 导入工作流工具，方便用户导入 CSV 文件。
• PptxGenJS 4.0：用 JavaScript 构建 PowerPoint 演示文稿，支持图形、文本、表格等，兼容多种演示工具。
• Hyparquet：无依赖的 JavaScript Parquet 文件解析库，支持浏览器环境。
• react-sounds：为 React 应用添加音效，示例设计精良。
• mono-jsx：无需构建步骤的服务器端 JSX 运行时，支持将 <html> 渲染为 Response。
• 其他工具包括 Prisma v6.7（从 Rust 向 TypeScript 迁移）、DOCX 9.5（生成 Word 文档）等。
4. 简讯与周边生态
• Node.js Next 10 Survey：Node.js 团队邀请开发者参与调查，指导未来优先事项。
• CSS Overflow 5 Spec：支持纯 CSS 滚动和轮播体验，Sara Soueidan 提供了可访问性和可用性分析。
• Postgres 18 Beta 1：重点优化 Linux 上的 IO 性能，预计 9 月或 10 月发布正式版。
• Google Gemini 2.5 Pro Update：据称在构建前端应用和美学网页开发方面表现更出色。
• 其他动态：包括 OpenJS 基金会新董事会成员公布、从 Next.js 迁移到 Ruby on Rails 的案例分享，以及 Sam Rose 关于“reservoir sampling”的可视化文章。
#新动态 #前端
Chrome 137 beta | Blog | Chrome for Developers
author Rachel Andrew
Chrome 137 beta | Blog | Chrome for Developers
AI 摘要：Chrome 137 Beta 版本引入了多项 CSS/UI 增强（如条件函数 if()、阅读流属性、SVG 变换支持）和 Web API 改进（如 WebAuthn 错误对齐、Blob URL 分区、WebAssembly 分支提示），并新增了 4 项 Origin Trials（全帧率渲染阻塞、非渲染 iframe 媒体暂停等）。此外，还扩展了系统强调色支持至 Windows/ChromeOS，优化了开发者工具链。
1. CSS 和 UI 更新
• if() 函数：支持条件值表达式，简化复杂逻辑。
• 阅读流属性：reading-flow 和 reading-order 控制无障碍工具的元素顺序。
• SVG 增强：
• 支持 transform 属性直接应用于 <svg> 根元素。
• <use> 元素可省略片段引用外部文档根元素。
• 系统强调色：accent-color 扩展支持 Windows 和 ChromeOS。
• 视图过渡：view-transition-name: match-element 为单页应用提供动画支持。
2. Web API 改进
• WebAuthn：统一支付凭证创建时的错误类型为 NotAllowedError。
• Blob URL 分区：按存储键（站点、来源等）分区访问，提升安全性。
• 崩溃报告：捕获未响应页面的 JavaScript 调用栈。
• Canvas：支持浮点像素格式，适用于高精度场景。
• Web Cryptography：新增 Ed25519 曲线算法支持。
• WebGPU：
• 允许 GPUTextureView 用于 externalTexture 绑定。
• 简化 copyBufferToBuffer 方法的重载。
3. 新增 Origin Trials
• 全帧率渲染阻塞：通过 full-frame-rate 令牌降低渲染帧率以优化资源分配。
• 非渲染 iframe 媒体暂停：通过权限策略控制不可见 iframe 的媒体播放。
• Rewriter/Writer API：基于设备端 AI 模型实现文本改写与生成功能。
author Rachel Andrew
Chrome for Developers
Chrome 137 beta | Blog | Chrome for Developers
Discover what's coming to Chrome with the latest beta.
#优质博文 #前端 #新动态 #javascript #css #node
Web Weekly #158
author Stefan Judis
Web Weekly #158
AI 摘要：本期 Web Weekly 聚焦前端开发领域的新提案、工具优化与实用技巧，涵盖 Edge 团队的 ariaNotify() 和 console.context() 提案、Node.js 双包风险、CSS 新单位 lh 的应用，以及 Chrome 原生 CSS 轮播的可访问性分析。同时推荐了有趣的 CSS 全息效果、小众浏览器和 JavaScript Set 新方法等资源。
1. Edge 团队新提案
• document.ariaNotify() ：简化无障碍通知的 DOM 操作，直接通过 JavaScript 触发屏幕阅读器提示。
• console.context() ：提供日志分组、样式和过滤功能，优化调试体验。
2. Node.js 双包风险警告
• 官方建议仅发布一种模块格式（CJS 或 ESM），避免因混合格式导致的兼容性问题。
3. CSS 新特性与实践
• lh 单位：基于行高的垂直间距控制，提升视觉一致性。
• Chrome 原生 CSS 轮播：新增 scroll-marker-group 等属性，但当前可访问性不足（Sara 评估，她的结论是：他们还没有准备好，但你自己要多读一读）。
• 纯 CSS 全息效果：纯 CSS 实现，利用 mix-blend-mode 和 background-attachment 实现。 解释博客
4. JavaScript 更新
• JavaScript Set 新方法：difference()、intersection() 等集合操作。
• JavaScript 类中的静态初始化块 - 不久前，我了解到您可以将 "nameless static " 块放入 ECMAScript 类中。他们是做什么的？
• RegExp.escape()：自动转义正则表达式特殊字符（Chromium 136+）。
5. 工具与资源推荐
• 小众浏览器：Vivaldi 及其他非主流选项。
• 自然语言日期解析库 wanasit/chrono
• Node.js 测试最佳实践指南 #测试
• MCP 服务器的集合 punkpeye/awesome-mcp-servers 。 #AI #MCP
6. 其他亮点
• 趣味网站：owlsintowels.org（猫头鹰主题）。
• 设计技巧：复杂曲线边框的 CSS 实现方案。
• My Three Strikes Rule for Blogging 第三次在对话中使用某个想法时，您必须将其写在博客上。 #技术写作
author Stefan Judis
Stefanjudis
Web Weekly #158
The `ariaNotify()` and `console.context()` proposals from the Edge team, Node.js dual package hazards and `lh` CSS unit use cases.
