开发者工具箱｜编程·开发工具·资源

3周打造288个纯前端计算器

开发者 Sudais Falak 用 3 周时间构建了纯客户端的计算器目录 CalcHive，包含 288 个工具，已在 Product Hunt 上线。

- 全部计算在浏览器端完成，数据不离开客户端，无服务器负载。
- 基于 Vercel 部署，首次 DOM 绘制时间控制在 0.4s 以内。
- 通过自动化脚本管理组件和 sitemap，每添加一个新布局模板自动更新索引。
- 覆盖自由职业、电商、金融等领域，如 Upwork 费率、Dropshipping 利润、复利计算等。

欢迎开发者体验并反馈移动端 UI 缩放与重计算性能。

原文链接
相关链接

#开发者 #工具

📢 频道：@DevToolboxHub

Agentic QA 流程替代脚本

Agentic QA 以自然语言目标为输入，让智能体自主探索、生成并维护测试，从而降低脚本维护成本。

· 目标导向的测试规划器把接受标准分解为可执行场景。
· 自主执行器结合 Playwright、Stagehand 或自定义 agent 进行浏览器/API 交互。
· 反馈循环与覆盖智能层让系统在 UI 变更时自动调整并主动生成新测试。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

技能文件模式：分离 Claude 上下文

Skills File Pattern 通过将 CLAUDE.md 拆分为多个专用文件，按需导入，降低 Claude Code 上下文冗余。
- core.md：存放模型 ID、API key、缓存 TTL 等全局约束，每次会话自动加载。
- design.md：存放颜色代码、图表类型、组件加载状态等 UI 规则，仅在前端任务时导入。
- workflow.md：定义工程师与 Claude 的分支、任务格式及文件操作边界，避免读取无关文件。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

人工智能生成代码的两种方式对比

本文通过同一退款功能的实现，比较了直接用自然语言提示（Vibe Coding）和先写规格说明（Spec Coding）两种 AI 辅助开发方式的结果。
• Vibe Coding 仅用 10 分钟生成初版代码，但随后出现重复退款、累计超额、网关超时无重试和竞态导致双重退款四类 bug。
• 修复这些问题花费约两周，涉及调试、测试、支持升级以及人工对账网关记录。
• Spec Coding 投入约 2.5 小时编写详细规格，AI 按规格生成代码，包含事务锁、幂等键、指数回退等机制，零生产环境 bug，半天内达到稳定。
原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

CloudNativePG 在 K8s 上运行 PostgreSQL 指南

CloudNativePG 是一个 Kubernetes 原生的 PostgreSQL 操作器，提供故障转移、备份、连接路由和滚动升级。
- 检查 bootstrap Job 的事件，定位准入控制器或 RBAC 导致的 Pod 创建被拒。
- 为带有 cnpg.io/cluster 标签的 CNPG 生命周期资源添加排除规则，以绕过资源限制策略。
- 固定 PostgreSQL 镜像版本（如 16.6），避免使用已知有段错误的 16.4 版本。
- 利用自动生成的 pg-main-rw、pg-main-ro、pg-main-r Service 实现读写分离和故障转移透明。

原文链接
GitHub

#开发者 #工具

📢 频道：@DevToolboxHub

使用 Kiro CLI 辅助开发者零经验构建并发布了 iOS 应用 AWS Security Quiz 。
- 采用 React Native/Expo 技术栈，终端风格 UI（黑底绿字），内含 48 道 AWS 安全选择题（日英双语）。
- 集成 Google AdMob 横幅广告，解决了 ATT 权限弹窗及模拟器崩溃问题，经 EAS Build 云构建提交 App Store。
- 通过 Kiro CLI 自动生成需求文档、技术设计、分阶段实现及审核驳回修复，全程实际操作约半天。
- 题目经外部审校确保技术准确性，并在应用内显示信息截至 2026 年 6 月的免责声明。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

在 Angular 项目中使用 Firebase Prompt 模板

Firebase 推出 Server Prompt Templates，将 Prompt 存储在服务端，通过 Angular 的 Dependency Injection 注入 TemplateGenerativeModel 实现免重新部署的 Prompt 更新。
· 支持在 Firebase Console 中直接创建和测试 Prompt 模板，无需在代码中暴露 Prompt 内容。
· 通过注入 IMAGE_GENERATOR_TOKEN 并指向 ServerTemplateService，实现不同路径下使用本地 Prompt 或服务端模板的切换。
· 更新服务端 Prompt 后，客户端仅需重新加载页面即可获取最新版本，免除重新构建和部署。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

使用 systemd-networkd 在 Linux 服务器上部署 WireGuard

本文介绍如何使用 systemd-networkd 声明式单元配置 WireGuard VPN，无需 wg-quick 额外脚本。
- 生成服务器和客户端密钥文件，设置 0440 权限并归属 root:systemd-network。
- 在 /etc/systemd/network/ 创建 50-wg0.netdev 与 50-wg0.network，填写 PrivateKeyFile、ListenPort、Peer 等字段。
- 启用 systemd-networkd，开启 IP 转发并添加 nftables MASQUERADE 规则，客户端即可访问互联网。

原文链接
相关链接

#开发者 #工具

📢 频道：@DevToolboxHub

浏览器录屏：长Canvas合成帧率不稳

单独录屏很简单，但加入摄像头覆盖后，实时Canvas合成在长时间录制中帧率明显下降。开发者分享了其Chrome扩展 Browser Recorder 的架构经验。

要点：
- 浏览器可分别获取屏幕流和摄像头流，但Canvas实时合成需同时解码、绘制、编码，多时钟（60fps屏幕、30fps摄像头等）不同步导致丢帧。
- 5-10分钟录制时问题暴露，且无明显错误，仅导出视频不流畅。
- 解决方案：屏幕与摄像头分开录制，Canvas仅作预览，最终在导出阶段逐帧合成。
- 导出时利用 OffscreenCanvas 实现画中画、缩放、裁剪效果，支持 MP4/WebM/MOV/MKV 格式。
- 一个小坑：视频元数据加载前 videoWidth/videoHeight 为0，需在 loadedmetadata 事件后设置 Canvas 尺寸。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

云上AI治理实战指南

本文为架构师提供云上AI治理的实用方法。核心要点：

- 影子AI扩大攻击面，多数组织不清楚已有多少AI集成在运行，需先建立真实资产清单
- 利用CASB与服务网格遥测追踪AI调用，但发现只是第一步
- 将治理嵌入交付管道，平衡安全、合规与开发者生产力，避免依赖人工流程

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

从 VS Code 到 Cursor 的切换体验

Cursor 是基于 VS Code 构建的 AI 增强编辑器，保留原有插件、快捷键和设置。
- 行内编辑通过自然语言描述即时完成，无需切换聊天窗口。
- 聊天功能能直接理解当前文件内容，提供代码解释和修改建议。
- 自动补全能预测多行意图，提升连续编辑流畅度。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

网页可访问性合规指南

原文链接

- WCAG 2.0、2.1、2.2 依次增补了移动端、低视力、认知等场景的成功标准。
- 符合流程包括审计、优先修复、实施、手工及辅助技术测试、持续监控。
- 常用开源检测工具：axe DevTools、Lighthouse、WAVE、Accessibility Insights。
- 级别 A 为最低可访问性，AA 为常见法规要求，AAA 为最高但难以全面达成。

#开发者 #工具

📢 频道：@DevToolboxHub

游戏开发者的两款AI音乐工具

开发者 Kai 最近开源了两款面向游戏音乐的 AI 工具：Clef Studio（Godot 插件）和 ACE Step Game Music Studio（Streamlit 应用）。
- Clef Studio：Godot 插件，内置 7 个 AI 协作 Agent，可通过自然语言生成 MIDI/MP3 音频并直接拖入 AudioStreamPlayer。
- ACE Step Game Music Studio：基于 ACE‑Step XL 模型的 Streamlit Web UI，输入自然语言即可得到完整音频，内置 17 种风格预设。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

浏览器端用 WASM + Web Worker 替代后端

作者使用 WebAssembly 和 Web Worker 在浏览器端实现了 Stockfish 国际象棋引擎，构建了免费的实时棋局分析器，属于其开发者工具套件 CipherKit。
· UI 负责 DOM 渲染、棋盘状态和棋子动画，Worker 负责通过 WASM 加载 Stockfish 进行计算。
· 主线程通过 worker.postMessage 发送 FEN，Worker 在后台异步执行深度（Depth 20+）评估并将结果流回主线程，不造成 UI 卡顿。
· 这样实现了零服务器延迟、零基础设施成本以及数据完全留在浏览器的隐私保证。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub

2026年免费文件对比工具

本文介绍几款2026年适用于开发者的免费文件差异对比工具。
- FileDiffs：完全在浏览器端运行，支持60+种文件格式，数据不上传，无需安装或注册。
- Meld：开源跨平台桌面工具，适用于Linux、Windows、macOS，擅长文件、目录及Git项目的可视化比较与合并。
- KDiff3：免费开源的三向合并工具，支持文件和目录的三路比较，适合复杂分支合并场景。
- Diffchecker：简易在线文本对比工具，操作快速但需将内容上传至服务器，格式支持较少。
原文链接
相关链接

#开发者 #工具

📢 频道：@DevToolboxHub

四种电话号码验证方式对比

本文介绍四种基于电话网络的用户号码验证方式：短信 OTP、闪呼、语音呼叫和数据验证，并说明各自的特点与适用场景。
短信 OTP：全球覆盖，用户输入六位码，Android 可通过短信检索 API 实现自动填充。
闪呼：呼叫后立即断开，利用来电显示作为码，Android SDK 可自动读取，iOS 需手动输入。
语音呼叫：通过文字转语音播报码，支持按键确认，适用于固定线、VoIP 或 SMS 不可达的号码。
数据验证：后台直接调用运营商接口，无需用户交互，需蜂窝数据并在双 SIM 设备上注意数据卡匹配。

原文链接

#开发者 #工具

📢 频道：@DevToolboxHub