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


Channel's geo and language: China, Chinese
Category: Telegram


面向开发者的实用工具、库与效率技巧,写代码更快更爽。投稿 @cangqilai123
#开发者 #编程工具 #效率 #程序员

Related channels

Channel's geo and language
China, Chinese
Category
Telegram
Statistics
Posts filter


2026 年七个 API 治理工具盘点

API 数量增长后,真正的挑战往往不在 API 本身,而是围绕它的规范、安全与文档管理。命名不统一、密钥泄露、文档缺失、离职员工权限未回收,这些问题在接口规模扩大后会迅速放大。API 治理工具正是为这类场景设计,帮助团队在 API 全生命周期内保持安全、一致与合规。

本文梳理了 2026 年值得关注的七款 API 治理工具,覆盖从轻量 lint 到企业级平台的不同需求:

• Apidog:将治理集成进 API 设计、测试、文档与协作流程,提供 SSO、SCIM、RBAC、Secret Scanner、Endpoint Compliance Check 与文档完整性检查
• Postman:适合已在平台内维护大量 API 资产、希望在现有工作流中引入治理标准的团队
• Spectral:专注 OpenAPI 与 API 风格指南的自动化 lint,支持自定义规则、CLI 与 CI/CD 集成
• Stoplight:将 API 设计、风格指南与治理结合,适合希望从设计阶段就贯彻标准的团队
• SwaggerHub:面向重度依赖 OpenAPI 的企业,提供集中化的 API 定义管理与治理规则
• Redocly:结合 OpenAPI 校验、文档生成与治理规则,可在 PR 流程中自动检查规范变更
• 42Crunch:安全优先的治理方案,侧重 API 安全测试、审计与合规策略

选择建议:以 lint 和标准执行为主可看 Spectral 或 Redocly;安全优先考虑 42Crunch;企业级平台可评估 SwaggerHub 或 Stoplight;已在用 Postman 的团队可直接在其生态内扩展治理;需要一体化 API 生命周期管理则 Apidog 更合适。


治理不应成为开发者的额外负担。好的治理工具应嵌入现有开发流程,在合并代码前发现问题、在发布前拦截密钥泄露、在开发阶段补齐文档缺口。与其等数百个 API 上线后再补救,不如尽早建立可自动执行的规范。

#开发者 #工具 #APIGovernance #Apidog #Postman #Spectral #Stoplight #SwaggerHub #Redocly #42Crunch #OpenAPI
@DevToolboxHub


AI 编程模型选型实测:按 ROI 而非榜单

一位初创 CTO 分享了自己挑选 AI 编程模型的完整方法。此前团队每月在单一编程助手 API 上烧掉 $14k,其中一半来自工程师并不喜欢的模型。他决定停止相信营销文章,用真实工作负载、真实花费对十个模型进行基准测试,按「每美元得分」计算性价比,三个月省下约 $9k/月。

测试覆盖五个真实任务:Python 递归函数实现、JS 异步竞态条件修复、TypeScript 实现 Dijkstra 算法、Go 服务代码审查(含隐蔽认证 bug)、Express.js 分页过滤端点。评分维度为正确性、代码质量、文档和边界情况,各 1–10 分,再除以美元成本。

结果榜单(按得分排序):DeepSeek-R1 9.4 分/$2.50,DeepSeek V4 Pro 9.1/$0.78,Kimi K2.5 9.0/$3.00,Qwen3-Coder-30B 8.8/$0.35,DeepSeek V4 Flash 8.7/$0.25,DeepSeek Coder 8.6/$0.25,Ga-Standard 8.5*/$0.20,Qwen3-32B 8.3/$0.28,GLM-5 8.0/$1.92,Hunyuan-Turbo 7.5/$0.57。

按每美元得分看,Ga-Standard 路由模型 42.5 居首,DeepSeek V4 Flash 34.8 次之,DeepSeek Coder 34.4 第三,而得分最高的 DeepSeek-R1 仅 3.8。作者指出「最佳模型」与「最佳 ROI 模型」几乎从不在同一行。

任务层面:简单函数实现用 Flash($0.25)即可,R1 的 $2.50 溢价不值得;算法难题 R1 值得,约 5% 的提示词会命中;关键服务代码审查必须用推理模型,廉价模型会漏掉 goroutine 泄漏和 defer 错误;CRUD 类样板代码用 $0.25–$0.35 的代码专用模型即可。


作者最终采用三桶路由策略:70% 提示词走 Flash($0.25/M),25% 走 Qwen3-Coder($0.35/M),5% 走 R1($2.50/M),加权均价约 $0.40/M,相比原默认 $3.00/M 降低 87% API 花费。同时强调通过统一 OpenAI 兼容接口封装多模型,避免供应商锁定,模型涨价或弃用时可在一小时内完成切换。

#开发者 #工具 #AI编程 #模型选型 #DeepSeek #Qwen #Kimi #GLM #Hunyuan #路由模型
@DevToolboxHub




用 CSS Grid 与 DOM 操作构建 PDF 布局编辑器

把 PDF 提取成 HTML 后,若想让用户在浏览器里自由重排和编辑版式,并不需要 position: absolute 或 canvas 覆盖层。提取出的 DOM 本身就是结构化的 CSS Grid 盒模型,配合 HTML5 拖放与原生 insertBefore / appendChild 调用,即可获得免费的布局重排能力。

核心思路是让浏览器原生布局引擎(CSS Grid + DOM 插入)替代 canvas 坐标覆盖层。绝对定位会破坏响应式文档流:文本编辑后元素不再重排、分栏布局塌陷、导出干净 HTML 或 Markdown 几乎不可能。而 CSS Grid 容器能原生对齐提取出的文档流。

编辑器提供双模式切换:Edit Mode 用于行内文本编辑,Selection Mode 用于布局操作。后者会切换 contentEditable、注入拖拽手柄,并支持 marquee 多选。拖放监听器直接变更 DOM 树,根据鼠标在目标元素的上半或下半决定 before 或 after 插入;多选通过 getBoundingClientRect 做重叠检测;分组操作将选中区域包裹进新的单列 grid zone。

直接编辑 HTML 时,右键元素会打开包含 Monaco 编辑器的原生 dialog。关键点在于 Monaco 需要在 dialog 绘制完成后测量容器,因此通过 requestAnimationFrame 延迟执行 layout() 与 setValue()。


这套方案已在浏览器端落地:打开 PDF Processor 拖入 PDF 即可试用,提取出的表格可交给 Table Formatter 进一步清理。Ginexys 提供 VS Code 扩展包与免安装 Web 工具,文档本地处理、不会离开机器。

#开发者 #工具 #PDF #HTML #CSSGrid #拖放 #Monaco #Ginexys #开源
@DevToolboxHub


AI 评审测试文档:9/10 模型只会复述

一项针对 10 款主流 AI 模型的基准测试显示,让大模型评审测试用例文档时,90% 的模型只会做表面总结,仅 Kimi K3 真正打开脚本与报告进行实证审计。

测试背景是某团队将 HMS 迁移至 AWS 的工程,包含 559 个批处理任务、150 个 Python 脚本、67 个应用及 Pester 迁移流水线,共四套测试文档。多数模型仅阅读标题与目录便生成结构化摘要,未核实文档中的数字是否自洽、文件是否真实完成、代码与文档描述是否一致。

Kimi K3 以 9.8/10 分大幅领先,发现四类关键问题:581 个禁用任务被误记为 FAIL 造成回归误报;部分应用文档仍是含占位符的模板;文档声明的 IT-04 场景在测试脚本中缺失;同一套件内任务数存在 559/617/629 三处矛盾。MiniMax-M3 与 Claude Sonnet 4 分列二三名,前者给出四层统一测试路线图,后者提供九维度对比矩阵。

完整排名:Kimi K3 9.8、MiniMax-M3 9.1、Claude Sonnet 4 8.7、Claude Opus 4 8.4、GLM-5.2 8.1、Gemini Pro 7.8、Qwen3.7 Plus 7.5、DeepSeek V4 Pro 7.2、Hy3 6.8、MiMo V2.5 Pro 6.2。


对工程团队的启示:提示词应明确要求模型对照实际文件核实声明,而非信任文档表面;不应以用例数量评判测试套件价值,需按其在测试金字塔中的层级评估;云迁移应构建四层测试生态,覆盖流水线、基础设施、技术断言与业务逻辑。

#开发者 #工具 #AI评测 #KimiK3 #MiniMaxM3 #ClaudeSonnet4 #测试文档 #Pester #AWS迁移 #CICD
@DevToolboxHub


dsh-market:为 DeepSeek Harness 插件装上管理面

dsh-market 为 DeepSeek Harness 推出基于浏览器的插件市场,可在 DSH Web 界面中浏览目录、安装插件、检查更新、调整加载顺序并导出备份。添加插件不再需要从终端开始,也无需手动核对配置文件。

项目定位不止于市场,而是本地 DSH 配置之上的运维层:可写入禁用规则、在需要重启时触发替换进程、存储备份,并暴露冲突插件与依赖版本的诊断信息。目录来自精选的 awesome-dsh-plugin 注册表,提供实时 JSON 源与离线快照回退,dsh-market 本身只是应用而非目录。

安装后的功能更为关键:支持逐插件更新检查、批量更新、卸载与热启停切换,后者通过向 cordis.patch.yml 写入 disabled 配置实现,DSH 约一秒内通过热模块替换完成重组并在启动时恢复状态。诊断页可识别重复加载项、依赖版本不匹配、多核心包版本、覆盖与无效配置;加载顺序工具会依据插件前后置规则给出排序建议,但仅在试组合成功后才会写入变更。
安装路径同样设限:优先使用 npm tarball 并核对注册表映射以防名称抢注,仅接受精选注册表列出的来源,其他来源一律拒绝。pnpm 10 及以上默认阻止构建脚本,终端或 CLI 类插件在安装前会被标记,缺失 pnpm 可在界面内检测并配置。
备份功能可将插件列表与配置导出为可读 JSON、导入至其他机器、通过 WebDAV 每日自动备份或同步至私有 GitHub Gist。恢复操作采用合并而非丢弃方式,写入前校验、失败回滚。WebDAV 仅限 HTTPS、拒绝私网目标且不保留密码。需要重启的变更会显示待处理横幅,端点仅接受同源 POST 请求并要求回环客户端,由 systemd、launchd、pm2 等监管时建议禁用重启操作。


dsh-market 将插件安装视为有后果的配置变更,而非止于绿色勾选的商店交易。它降低了配置摩擦,但不会把第三方代码变成可信代码,便利性受限于宿主版本与来源清单。

#开发者 #工具 #dshmarket #DeepSeekHarness #DSH #插件市场 #pnpm #WebDAV
@DevToolboxHub


RAG 异步管线与 MCP 协议解析

RAG 检索中,混合搜索通常按顺序执行向量检索、文本检索和语义缓存查询。若三者分别耗时 10 秒、5 秒、2 秒,串行需等待 17 秒才能拿到上下文。改用异步管线后,三个线程同时启动,最坏也只需等最慢的 10 秒,显著降低延迟。多线程模式下每个任务分配独立线程,受限于可用 CPU 核心数;上下文切换则让单线程在多个任务间轮转,即并行处理。

MCP(Model Context Protocol)解决的是工具调用标准化问题。LLM 本身无法回答"今天发生了什么",但通过工具调用,把外部功能结果喂给模型即可作答。传统做法是每个开发者各自编写获取天气等功能的代码,结果大同小异却重复造轮子。MCP 由数据提供方定义通用工具与协议,消费方直接调用,无需自研代码。工具可通过 StdIO(同机进程内)或 HTTP(引入额外延迟)两种方式调用。

MCP 与 RAG 的结合方式:将已构建的 RAG 系统封装为 MCP 工具,RAG 负责从文档检索信息,MCP 对外暴露统一接口,LLM 或应用按需调用。这样其他开发者无需直接访问底层数据库或编写检索代码,即可复用 RAG 能力。MCP 成为 RAG 系统与各应用之间的标准中间层,职责分离清晰。

#开发者 #工具 #RAG #MCP #异步管线 #多线程 #混合搜索 #LLM #模型上下文协议
@DevToolboxHub




用 Notion 记录 30 天焦虑数据

一位开发者用认知行为疗法(CBT)的思维记录表,在 Notion 里持续 30 天追踪自己的焦虑情绪,共记录 47 条。结果显示 81% 的焦虑念头只落在三类重复模式上,且焦虑高峰集中在周一和周三。记录本身就能让情绪强度平均下降 39.4%。

实验方法:每次感到焦虑、 overwhelmed 或卡住时,打开 Notion 页面填写 CBT 思维记录表,包含情境、自动思维、情绪强度(0-100)、支持证据、反对证据、平衡思维和记录后情绪七个字段。

关键发现一:47 条记录中 38 条(81%)只属于三种重复念头——「我不够格做这个任务」(32%)、「他们会发现我不懂装懂」(28%)、「今天做不完就全完了」(21%)。识别出这三类后,可以提前准备应对方案,不必每次从零推理。

关键发现二:焦虑分布有明确规律,周一 9 条、周三 10 条为高峰,周日晚间有次级高峰。作者在周一早上增加 10 分钟「过渡仪式」,后两周周一焦虑记录从 9 条降到 4 条。

关键发现三:89% 的记录中,反对焦虑念头的证据强度(平均 7.8/10)高于支持证据(平均 4.2/10),但当下每个念头都感觉 100% 真实。关键发现四:情绪强度在记录后从平均 71/100 降至 43/100,降幅 39.4%,且与念头类型和时间无关——结构化自我审视的过程本身就是有效成分。


作者使用的 Notion 模板包含 7 个 CBT 字段的表单、自动时间戳、按日期/情绪类型/强度排序的仪表盘、相似念头分组视图和每周回顾模板,单次填写约 2 分钟,30 天总耗时约 4 小时。模板在 Gumroad 上售价 7 美元。

作者复盘建议:先做 7 天而非 30 天;手机端也要记录,桌面端会漏掉睡前和通勤时的高峰;不要跳过「平衡思维」字段,跳过两次时情绪强度都保持在 80 以上;每周回顾是最有价值的 15 分钟。作者强调这不是专业医疗替代品,但思维记录表本质上就是大脑的日志文件。

#开发者 #工具 #Notion #CBT #心理健康 #效率 #自我调试
@DevToolboxHub


AI Security Studio:全离线自动化安全扫描

AI Security Studio 推出一套完全本地化的安全扫描方案,核心卖点是代码不出机器。多数 AI 安全工具依赖云端推理,代码需上传至外部服务器,这在 NDA 客户项目、受监管代码库或不愿源码进入他人日志的场景下难以接受。该工具所有流程本地运行,支持 Ollama、llama.cpp、LM Studio 等本地 LLM,无外部 API 调用,无遥测。

扫描流程采用「确定性优先、LLM 其次」的设计:静态解析(Roslyn / Tree-sitter)与规则引擎先行,完成密钥检测、头部分析、JWT 校验、SQLi/XSS 模式匹配等实际发现工作。LLM 只接触规则引擎产出的结构化摘要,不读取原始源码,负责解释漏洞成因、关联发现、撰写报告。证据不足时系统明确标注「需人工验证」,而非强行下结论。

自动化引擎 ASS Script 采用 iMacro 风格的录制/回放/编辑机制,基于应用内节点图设计器构建。脚本为纯 YAML 格式,可读可 diff,每个节点对应真实 GUI 操作或真实扫描调用,无模拟步骤。录制一次工作流后,可从 GUI 或 CLI 重复执行。

配套的离线演示视频生成管线同样贯彻本地优先:以 Markdown 表格编写分镜脚本,Python 脚本解析时间轴,调用 macOS 内置 say 合成旁白,ffprobe 测量片段时长,ffmpeg 拼接音轨,并生成与真实音频同步的 SRT 字幕。全程无需 API 密钥或云端依赖。


该模式可推广至更广场景:将 LLM 视为可选可替换组件,确定性、本地优先的部分前置。安全管线如此,周边工具链亦然——当架构中「AI」实际意味着「网络调用」时,值得重新审视。

#开发者 #工具 #AI安全 #安全扫描 #本地LLM #Ollama #自动化 #离线TTS
@DevToolboxHub




用 30 条安全通告实测模型判级准确率

一位开发者因模型把 critical 误判为 low,决定搭建一套可复现的准确率测试。他基于 30 条人工核对过的通告记录,让模型提取包名、严重级别和处置动作,并分别统计误报与漏报。测试脚本很短,读取 JSONL 文件,调用仅返回 JSON 的接口,再与期望值比对。

一次本地运行示例显示:critical 召回率 0.90,moderate 召回率 0.62。模型能抓住多数高危通告,但常把 moderate 降级为 low。作者指出,漏报比误报更危险——跳过关键升级的代价远高于一次多余审查。

测试暴露三类反复出现的失败模式:厂商用词不一致("important" 被映射为 moderate)、包名冲突(libxml2 被识别为 libxml)、长通告截断导致修复版本信息丢失。

作者明确不建议让该输出自动开合并请求,只用于人工复核前的分诊。需要审计级报告、升级工具无人复核或涉及合规系统时,不应采用此方案。建议从十条记录起步,人工标注期望值,先观察错误模式是否稳定再扩大规模。


这套方法的价值在于可复现:用固定测试集而非实时通告,避免厂商页面和模型行为变化影响结果。先度量,再信任。

#开发者 #工具 #安全通告 #AI评测 #Python #DevOps #依赖管理
@DevToolboxHub


生成式 SQL 提速可能悄悄丢行

生成式 AI 改写的 SQL 跑得更快,不代表结果正确。提速可能来自 join 类型变化——比如 inner join 悄悄丢掉了 left join 保留的行。因为显示出来的每行都有客户名,快速冒烟测试很难发现缺失。在差分检查对比新旧结果集之前,应把生成式查询改动当作补丁,而非证明。

join 变化里藏着的失败

用一个小数据夹具演示:orders 表里有一条订单,对应 customers 表中不存在的客户。这种悬空引用在遗留系统里很常见,正是 join 转换改变查询语义的地方。原查询用 LEFT JOIN 保留全部 5 行订单,其中一行 name 为 NULL;生成式改写只把 join 类型换成 INNER JOIN,因为它在 schema 保证 customer_id 都存在时读起来更好、通常也更快——但本例中该保证不成立,结果只剩 4 行。性能提升同时改变结果集,就不是优化。

合并前先做黄金结果校验

不要靠肉眼对比前几行。正确做法是建立已知正确的基线、规范化结果集,任何不匹配的候选都直接判失败。用 SQLite 脚本即可实现:构造含悬空引用的 fixture,分别执行基线与候选查询,打印候选缺失的行,结果集不一致就抛出异常。脚本直接输出消失的行,而不是让开发者盯着两张表找差异——这个差异才是调试信号。

让 fixture 贴近生产数据

只含 happy path 的测试通过意义有限。夹具应包含多种边界情况:父记录缺失的子行、无子行的父记录、重复子行、与空字符串不同的 NULL、零值/负数/最大长度等边界值、与索引顺序不同的插入顺序。即便基线与候选在这种"丑陋"夹具上返回相同结果,也只证明消除了一类静默结果集变化,并未证明正确性。

生成多个候选,统一过校验

模型返回更快查询时,最糟的下一步是因其解释听起来自信就合并。更安全的循环是要求多个改写版本,让每个候选都过同一套黄金结果检查。MonkeyCode 的免费模型访问降低了生成第二、第三个候选的成本,不必在第一个看似合理的版本就停下。这不是更信任模型,而是让模型输出足够便宜,可以当作必须通过自动化检查的假设。

替换慢查询的工作流

保存当前 fixture 的结果集,记录基线行的规范化签名;让模型生成三个候选改写而非一个;每个候选跑同一 fixture 和签名;只保留匹配基线的候选;用 EXPLAIN 或 EXPLAIN QUERY PLAN 检查匹配候选是否真的改进了执行计划。若没有候选既匹配又更快,正确输出不是合并补丁,而是列出模型下次应遵守的约束清单。

免费服务端方案的适用场景

笔记本能跑小 fixture,但某些查询 bug 只在大快照下出现,而大快照无法复制到每台开发机。此时可把黄金结果集放到小型对比端点后,让每个候选提交输出换取通过/失败响应。端点做两件事:报告候选行集是否等于基线,返回缺失或多余行的 diff——这个 diff 比模型的解释更有用,因为它来自数据。不要把真实客户数据发给模型或公共服务器,应生成保留相同 join、null、基数陷阱的 fixture,在可控环境里跑完整隐私敏感对比。


方法的局限

差分测试能捕获语义回归,但不能证明查询正确,只证明候选匹配所选基线。SQLite 适合本地 fixture,但 SQL 语义和优化器行为与 PostgreSQL、MySQL、SQL Server、Oracle 不同。黄金基线本身可能错误或过期;查询可能匹配 fixture 却在未包含的数据形态上失败;更快的计划仍可能内存占用过高、锁时间过长或忽略生产环境有用索引。该方法增加步骤,对无静默丢失风险的只读仪表盘属于过度设计。若没有已知正确的结果集、无法安全构造代表性 fixture,就不要把本地通过当作数据库保证。对任何生成代码都应如此:在信任解释之前,先验证真正重要的行为。

#开发者 #工具 #SQL #SQLite #差分测试 #生成式AI #MonkeyCode #查询优化
@DevToolboxHub


Spring AI 实战:用 OpenAI 构建首个应用

本教程带你从零搭建一个基于 Spring Boot 与 OpenAI 的 AI 应用,通过一个简单的 REST 接口,完整走通从项目初始化、配置 API Key、创建 Controller 到发送 Prompt 的全流程。

教程核心步骤:

• 通过 Spring Initializr 创建 Maven 项目并引入 Spring AI OpenAI starter;使用环境变量配置 API Key,避免硬编码进源码;通过 ChatClient.Builder 注入并构建 ChatClient;创建 ChatController 暴露 GET /api/chat 接口;引入 Service 层分离 HTTP 与 AI 交互逻辑;使用 system 消息约束模型行为。教程还梳理了 ChatClient 的 prompt()
• call()
• content() 三个核心操作,并对比了 System Message 与 User Message 的职责差异

常见错误提醒:不要把 API Key 提交到 Git;避免在每个 Controller 中直接调用 AI 模型,应统一经过 Service 层;ChatClient 是面向应用的抽象,底层模型集成由 ChatModel 处理;生产环境应通过 system 指令控制模型行为;初期不要直接引入 RAG、向量数据库、Agent 等复杂架构,按需演进。

教程最后展示了完整的 ChatService、ChatController 与配置示例,并预告下一部分将使用 Ollama 在本地运行 LLM,同一套 ChatClient 代码可无缝切换 OpenAI、Ollama 等不同模型提供商。


#开发者 #工具 #SpringAI #SpringBoot #OpenAI #Java #AI #LLM
@DevToolboxHub


功能开关实战:五种安全上线姿势

功能开关不只是简单的开关,它把部署和发布解耦,让团队在代码上线后仍能控制功能暴露范围。工程团队常用它做金丝雀发布、A/B 测试、熔断开关、内测和暗发布,核心都是降低生产事故风险。

金丝雀发布:先让 1% 用户尝鲜,出问题立刻关掉开关排查,没问题再逐步放量。对高流量系统尤其有用,小 bug 也可能影响成千上万用户,慢速放量能拿到真实生产信号。

A/B 测试:用开关把流量分到不同版本,让数据决定哪个方案胜出。实验结束删掉失败分支即可。理论简单,但实验跑几个月后容易忘了当初在测什么。

熔断开关:第三方 API 返回垃圾数据、数据库查询锁死、新功能内存泄漏时,值班工程师几秒就能关掉问题功能,不用回滚部署或半夜叫醒发布经理。

内测与抢先体验:给核心用户、内部测试者、Beta 客户提前开放新功能,收集真实反馈。反馈差就只对测试组关闭,反馈好就全量发布。用 Web UI 管理测试组比改配置文件方便得多。

暗发布:新代码在生产环境运行但不展示给用户,结果写入日志或监控系统。适合验证新数据库查询、算法替换、基础设施迁移等高风险后端变更,在提交全量前拿到生产级验证。


功能开关的价值在于把发布风险拆小,让团队在真实流量下逐步验证。想省去自建管理后台的功夫,可以试试 FeatureFlags.app 这类现成工具。
@DevToolboxHub






纯浏览器 SVG 文字特效生成器 GummyType

作者分享了一款完全在浏览器本地运行的文字图形生成器 GummyType,支持气泡、Y2K、镀铬等风格,无需账号、上传或服务端渲染。核心管线为 React 控件 → SVG 字符串 → SVG Blob → HTML Image → Canvas 栅格化 → 裁剪 PNG,SVG 生成逻辑封装为纯 TypeScript 函数,便于无浏览器环境测试。

字体一致性通过打包 TTF 文件并以内嵌 @font-face 方式写入 SVG 解决,避免不同设备回退字体导致的渲染差异。画布尺寸基于 CanvasRenderingContext2D.measureText 实测文本宽度计算,而非字符数,防止长句被裁剪或短句导出为巨大固定画布。预览与导出使用两套 SVG 渲染:预览框按最大字号固定尺寸保持稳定,导出则紧贴当前字号裁剪。PNG 导出通过读取 alpha 通道自动裁剪透明边距,并保留安全边距避免阴影被切,纯色或渐变背景时跳过此步骤。

细节处理:

• 用户输入空格替换为不换行空格防止 SVG 栅格化时被折叠;异步渲染通过 effect cleanup 标记失效结果防止旧渲染覆盖新预览;每次生成的 object URL 在替换或组件卸载时及时 revoke;输入长度设限避免极端画布尺寸。作者计划后续增加更多字体形状
• SVG 导出
• 预设样式
• 键盘控制与更多导出背景

#开发者 #工具 #GummyType #SVG #Canvas #Nextjs #TypeScript #前端
@DevToolboxHub


浏览器硬件诊断:能读到什么,读不到什么

作者花时间构建了一套基于浏览器的硬件诊断工具,并总结出 Web 平台在硬件检测上的真实边界。核心结论:出于反指纹追踪的考虑,几乎所有硬件相关 API 都被刻意削弱,浏览器能给出的只是相对测量值,而非真实硬件规格。

刷新率:没有 screen.refreshRate 这类 API,唯一办法是用 requestAnimationFrame 回调计时,取帧间隔的中位数推算。注意必须用中位数而非平均值,一次掉帧就会毁掉平均值;且后台标签页会节流 rAF,测量前需检查 document.visibilityState。

屏幕尺寸:screen.width、window.innerWidth、devicePixelRatio、screen.availWidth 测量的是不同东西。通常想要的原生面板分辨率是 screen.width * devicePixelRatio,但这也是基于 CSS 像素推导的,缩放显示下可能与物理面板不一致。浏览器根本不暴露真实硬件分辨率。

键盘:event.key 依赖布局,event.code 是物理位置,硬件测试应使用后者。PrintScreen 常不触发 keydown,Meta 组合键被系统吞掉,Fn 在多数笔记本上不可见。N-key rollover 测试效果不错,跟踪当前按住的 Set 大小即可,廉价键盘在 3-4 键同按时丢输入会很明显。

指针事件:pointerdown/pointerup 统一了鼠标、触摸和笔,pointerId 可正确追踪多点触控。检测磨损开关的双击故障,只需测量同一按钮连续 pointerdown 的间隔,低于约 80ms 且无移动,基本可判定为硬件故障。注意 preventDefault() 会杀掉后续的兼容鼠标事件。

Gamepad:轴移动没有事件,只能在 rAF 循环里轮询 navigator.getGamepads()。控制器在用户按键前不会出现,数组里全是 null。摇杆漂移表现为静止时轴值不为 0,超过约 0.08 即为电位器磨损。

媒体设备:enumerateDevices() 在授权前能列出设备但标签全为空字符串,只有 getUserMedia() 成功后才有可读名称。麦克风电平用 AnalyserNode 的 getByteTimeDomainData 计算 RMS 比频域数据更稳定。

坏点检测:没有 API,唯一可行方案是用 Fullscreen API 填充纯色让肉眼观察。不是所有问题都需要程序化答案,全屏渲染 #ff0000 本身就是工具。


所有十个诊断 demo 均在客户端运行、不上传任何数据。作者认为,诚实的工具应测量行为而非声称读取规格,并欢迎对刷新率测量方案的改进建议。

#开发者 #工具 #JavaScript #硬件诊断 #浏览器API #WebAPI #性能测试
@DevToolboxHub


React Native 八种项目结构拆解

一篇来自团队 lead 的实战梳理,对比 8 种 React Native 项目目录结构各自解决什么问题,以及 "Domain-Driven" 和 "Micro-Frontend" 两个标签常被误用的地方。选错结构,代码库要么能吸收更多功能和工程师,要么在自身重量下崩塌、最后专门招人来重写。

八种结构速览:
• Flat Structure:所有文件平铺在 src/,适合原型、hackathon、单屏 demo;超过 10-15 个文件后难以定位。
• Feature-Based:按产品功能划分,auth、feed 各自拥有 components、screens、services,是生产环境最常见结构;但功能文件夹本身不强制隔离,跨功能 import 一多就退回扁平结构,需用 lint 规则约束。
• Layered:按技术角色分组(components、screens、services),适合小团队;缺点是 components 和 screens 会变成大杂烩,看不出文件归属哪个功能。
• Domain-Based:按业务能力分组,常被误称 DDD——真正的 DDD 是建模纪律,涉及限界上下文、聚合等,这里只是按业务域映射团队边界,适合大规模多团队产品。
• Atomic Design:UI 组件架构而非应用架构,按 atoms、molecules、organisms、templates、pages 分层,适合做跨应用共享的组件库。
• Duck:把 reducer 的 actions、types、逻辑放同一文件夹,Redux Toolkit 的 createSlice 已吸收此思路,多见于老代码库。
• Monorepo:apps/mobile 与 apps/web 共享 packages/ 下的业务逻辑、组件和工具,避免双端逻辑漂移;可用 Yarn Workspaces 或 Lerna 起步,规模大了配 Nx 或 Turborepo。
• Modular:常被叫 "Micro-Frontend",但 RN 没有 Web 那种运行时组合能力,只有一个 JS bundle;真正接近的是 Re.Pack 或原生 super-app 插件架构,多数团队实际只是更严格的 feature/domain 组织。


选型框架看三点:项目规模与复杂度、团队人数与分工、增长预期。示例路径:小团队从 Feature-Based 起步,到约 100 人引入 Monorepo,再往后按业务域迁移到 Domain-Based。早期不做这些思考不算错,但营收和用户增长出现后,公司通常会招资深工程师来给从未为扩展设计的代码补架构。

#开发者 #工具 #ReactNative #移动开发 #项目架构 #Monorepo #DDD #Redux #前端架构
@DevToolboxHub

20 last posts shown.