AI 摘要：本期《科技爱好者周刊》聚焦科技前沿动态与工具资源，涵盖了 AI 应用、硬件创新、月球生态实验等多个领域，同时分享了大量开源工具、开发资源及思想观点。文章从 Meta AI 新应用、月球养鱼计划到 3D 打印建筑等，展现了科技如何改变生活与未来的可能性。此外，还探讨了 AI 隐私问题、Web 开发趋势及创造力与限制的关系。

• 文章精选
• ChatGPT o3 照片定位：o3 模型可通过照片精准猜测拍摄地点，利用街景地图训练数据，甚至能判断具体拍摄位置，提醒用户上传照片需注意隐私泄露风险。
• 命令行设置 MacBook：介绍 macOS 内置命令行工具，适合快速配置新电脑，提高效率。
• Zip 炸弹保护服务器：作者通过体积小但解压后巨大的 Zip 文件对抗网络爬虫，分享独特防御策略。
• 工具推荐：列出 17 款开源工具，包括桌面宠物 BongoCat、条形码生成器 Barcode Maker、输入法切换工具 Input Source Pro、QBin 开源的在线文本编辑与分享服务等。
• BongoCat：开源桌面宠物，支持多平台（macOS、Windows、Linux）。
• Barcode Maker：开源条形码和二维码生成网站。
• Fread：支持 Mastodon、Bluesky、RSS 协议的安卓"微博客"客户端。
• DeckTap：局域网内手机遥控电脑幻灯片演示工具。
• Input Source Pro：Mac 输入法切换工具，支持应用/网站默认输入法设置。
• QBin：在线文本编辑与分享服务，支持代码、图片、视频分享。
• EasyEditor：低代码引擎，用于可视化搭建 Web 应用。
• PakePlus：基于 Tauri2 的工具，将网站打包为桌面/手机应用。
• 柠檬表单：开源表单问卷系统，自带管理后台。
• MotionEaseTune：安卓防晕车应用，通过 100Hz 声音缓解症状。
• OpenApi 接口代码生成器：根据 OpenAPI 文档生成多语言客户端代码。
• MyOCR：基于 Python 的本地 OCR 文字识别框架。
• SimonAKing-HomePage：使用 WebGL 流体动画的个人网站模板。
• 酷监控：开源监控控制台，支持网站/接口/HTTPS 证书监控。
• FindJSONPath：在线 JSON 工具箱，支持 mock 数据生成与路径可视化。
• 拼字幕：在线字幕拼图制作工具。
• YouTube Playlist Processor：用 AI 将 YouTube 播放列表转为电子书。
• 资源分享：推荐免版权素材搜索引擎、FeedMe 提供多个信息源最新内容的 AI 摘要、吉卜力电影高清图等资源，方便开发者与创作者获取灵感与素材。
• 图片与历史：介绍 1982 年柯达盘式胶片相机，探讨其便携设计与画质缺陷导致的停产原因。
• 文摘与言论：分享约翰·巴洛的人生信条，强调对可能性与不确定性的开放态度；回顾 25 年来 Web 开发技术趋势的更迭，讽刺技术炒作；引用多位学者与从业者关于创造力、AI 发展

GitHub

GitHub - runjuu/InputSourcePro: Switch and track your input sources with ease ✨

Switch and track your input sources with ease ✨. Contribute to runjuu/InputSourcePro development by creating an account on GitHub.

AI 摘要：本期《Awesome JavaScript Weekly》汇集了 JavaScript 领域的最新资讯、文章、工具和活动，涵盖了技术趋势、框架更新、代码优化技巧以及即将举行的行业会议。文章内容包括 Deno 的衰落、函数式 HTML 的探讨、JavaScript 项目工具迁移、SVG 优化技巧、Promises 工作原理、Next.js 与 Ruby on Rails 的对比等。此外，还介绍了多个热门 JavaScript 库和项目，如 draw.io 和 No-as-a-Service，并推荐了即将于阿姆斯特丹举办的 JSNation 和 React Summit 会议。

1. 热门新闻与文章：
• Deno’s Decline (6 Regions and Falling)：探讨了 Deno 作为 Node.js 替代品的衰落趋势，分析其在多个地区的市场表现和用户反馈。
• Functional HTML — overreacted：介绍了函数式 HTML 的概念，探讨如何以函数式编程思维构建 HTML 结构，提升代码可维护性。
• Reducing SVGs by 90% with JavaScript Tricks：分享了使用 JavaScript 优化 SVG 文件的技巧，显著减少文件体积并提升加载速度。
• How Promises Work in JavaScript Behind the Scenes：深入解析了 JavaScript 中 Promises 的工作原理，帮助开发者理解异步编程的核心机制。
• JavaScript Obfuscation Through File Stream Side-Channel：探讨了通过文件流侧信道进行 JavaScript 代码混淆的技术，关注安全与性能平衡。
• Recursive Data Structures and Lazy Evaluation：讲解了递归数据结构和惰性求值在 JavaScript 中的实现与应用场景。

2. 即将举行的会议：
• JSNation：年度 JavaScript 盛会，2025 年 6 月 12 日和 16 日在阿姆斯特丹及线上举办，拥有 50+ 位演讲者。
• React Summit：全球最大的 React 会议，2025 年 6 月 13 日和 17 日在阿姆斯特丹及线上举行，早鸟票已开售。

3. 热门库与项目：
• No-as-a-Service (NaaS)：一个简单的 API，返回随机的拒绝理由，适用于模拟拒绝场景或娱乐用途。
• DesktopCommanderMCP：为 Claude 提供终端控制、文件系统搜索和差异文件编辑功能的 MCP 服务器。
• draw.io：一个基于 JavaScript 的客户端编辑器，适用于通用图表绘制。
• claude-task-master：一款 AI 驱动的任务管理系统，可集成到 Cursor 等工具中。
• context7：Context7 MCP 服务器，为 LLM 和 AI 代码编辑器提供最新的代码文档支持。

AI 摘要：本文是少数派编辑部的一期特别篇，聚焦于编辑们在电子阅读器和阅读软件中使用的字体推荐。文章从中文和英文两个方面，详细介绍了多款适合屏幕阅读的字体，包括方正博雅宋、方正楷体、Literata 和方正悠宋等，分析了它们的设计特点、适用场景及优缺点。编辑们分享了个人使用体验，探讨了印刷字体与屏幕显示的适配性，旨在帮助读者提升电子阅读的舒适度和美感。

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），供有兴趣的读者深入研究。

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 优化性能，但效果有限，并提醒读者谨慎使用此类技术。

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

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”的可视化文章。

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 模型实现文本改写与生成功能。

Chrome for Developers

Chrome 137 beta  |  Blog  |  Chrome for Developers

Discover what's coming to Chrome with the latest beta.