最近更新.rss.xml
解决方案很简单，添加连接数限制就可以了 connection_limit=1,示例：
DATABASE_URL="file:/home/admin/app/TsFullStack/prisma/dev.db?connection_limit=1&socket_timeout=10"
最近我在解决我的系统并发问题时(Effect实现接口并发控制)遇到了这个问题
log
API调用失败: Error calling enhanced Prisma method `word.update`:
Socket timeout (the database failed to respond to a query within the configured timeout).
at (/home/admin/node_modules/.pnpm/@zenstackhq+runtime@2.15.1_@prisma+client@6.7.0_prisma@6.7.0_typescript@5.8.3__typescript@5.8.3_/node_modules/@zenstackhq/src/enhancements/edge/proxy.ts:322:33),
at executeCall (/home/admin/app/TsFullStack/src/rpc/index.ts:131:26),
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
最近实践
好文推荐 浏览器插件开发最佳实践 https://wxt.dev/guide/installation.html
好文推荐 前端开发的瓶颈与未来之路
并发控制我使用的是 semaphore
当然我不确定我的实现是否为最佳实践
我目前是使用 queue ，之前也实现过一版 steam 的，具体实现可以查看代码
可以使用 steam 和queue 来实现将异步请求事件发送到 Effect 系统中来处理。
为什么使用 pnpm
pnpm 采用软链接等技巧使得所有的 npm 包都存放到一起，多个项目使用同一个包只会占用一份空间 ( 逃离 node_modules 黑洞
没有找到对应的渲染方法 NodeEmoji 最近更新.rss.xml
)还支持清理总存储中没有被使用的包 : pnpm store prune
pnpm config -g set enable-global-virtual-store true pnpm 开启全局虚拟存储
pnpm config -g set enable-global-virtual-store true pnpm 开启全局虚拟存储
我很不喜欢死记硬背，但我又确实感觉应该要好好的学习英语了，于是我按照自己的习性打造了这个ai英语学习软件。
每当我遇到想要阅读的英文文章时我就不再点击浏览器翻译然后直接看翻译后的中文，而是强迫自己复制进这个网页中进行阅读
当看到文章中的红色下划线越来越少的时候，就非常的心情愉悦。
当看到文章中的红色下划线越来越少的时候，就非常的心情愉悦。
每当我遇到想要阅读的英文文章时我就不再点击浏览器翻译然后直接看翻译后的中文，而是强迫自己复制进这个网页中进行阅读
我很不喜欢死记硬背，但我又确实感觉应该要好好的学习英语了，于是我按照自己的习性打造了这个ai英语学习软件。
界面预览
特性
在阅读中自然而然的标注熟练度（未查看翻译的单词熟练度增长，查看翻译则熟练度降低）
音标和翻译全部由 ai 生成。
利用浏览器自带的 TTS 发音来学习英文听说。
支持在不登录网站的情况下学习（学习数据存储在 indexdb 中）
在阅读中自然而然的标注熟练度（未查看翻译的单词熟练度增长，查看翻译则熟练度降低）
音标和翻译全部由 ai 生成。
利用浏览器自带的 TTS 发音来学习英文听说。
支持在不登录网站的情况下学习（学习数据存储在 indexdb 中）
在阅读中自然而然的标注熟练度（未查看翻译的单词熟练度增长，查看翻译则熟练度降低）
在阅读中自然而然的标注熟练度（未查看翻译的单词熟练度增长，查看翻译则熟练度降低）
音标和翻译全部由 ai 生成。
音标和翻译全部由 ai 生成。
利用浏览器自带的 TTS 发音来学习英文听说。
利用浏览器自带的 TTS 发音来学习英文听说。
支持在不登录网站的情况下学习（学习数据存储在 indexdb 中）
支持在不登录网站的情况下学习（学习数据存储在 indexdb 中）
关于此站点 shenzilong.cn
为我个人的笔记公布站点，不提供互动、评论等功能，纯静态站点。
域名经过了 icp 备案。
为我个人的笔记公布站点，不提供互动、评论等功能，纯静态站点。
域名经过了 icp 备案。
为我个人的笔记公布站点，不提供互动、评论等功能，纯静态站点。
为我个人的笔记公布站点，不提供互动、评论等功能，纯静态站点。
自由比例下的取舍
%20and%209:16%20(portrait)%20with%20visual%20examples?width=600&height=400&nologo=true)
我们思考一下显示比率的问题，当想要在 4：3 的盒子里面放下 4：8 的图片，而图片没有拉伸压缩变形的话，就必然需要裁剪
而当我们的元素宽度跟随浏览器窗口变化时相当于宽度动态变化的盒子，所以还没办法使用 "4:3" 这样的固定比例来解决问题
这时就需要取舍了，究竟是裁剪左右更好还是裁剪上下更好，这取决于你要展示的主体内容。
%20using%20a%20photograph%20as%20example%20with%20clear%20visual%20markers%20for%20safe%20areas?width=600&height=400&nologo=true&enhance=true&seed=41562)
所以我的想法是，当上下不能裁剪时就需要大宽高比（宽幅图片），当左右不能裁剪时就需要小宽高比（竖幅图片）
这样只要不是特别极端的宽高比变化（超出了我们提供的图片的安全范围阈值），都能保证主体内容不被裁剪。
%20and%20portrait%20(9:16)%20image%20displays%20in%20responsive%20containers%20showing%20how%20different%20aspect%20ratios%20affect%20content%20preservation?width=600&height=400&nologo=true&enhance=true&seed=78921)
实现方案
核心法则：图片宽高比决定了关键内容的保留方向
展示上下完整内容 → 需要大宽高比（宽幅图片）
展示左右完整内容 → 需要小宽高比（竖幅图片）
实现要点：
1.
容器宽度自适应，高度由内容决定
2.
图片使用object-fit: contain保证完整显示
3.
object-position控制内容重心
一点小小的思考，欢迎评论指导，如果对您有帮助的话，也请点个小小的赞🎉
一点小小的思考，欢迎评论指导，如果对您有帮助的话，也请点个小小的赞🎉
固定比例优先
当你的设计需要精确控制图片显示比例时（比如轮播图、产品展示图等），固定比例是最可靠的选择。
当你的设计需要精确控制图片显示比例时（比如轮播图、产品展示图等），固定比例是最可靠的选择。
这个一般是用户上传图片然后展示的场景，常见于社交平台、电商商品展示等。以下是关键实现方案：
html
css
.fixed-aspect-box {
aspect-ratio: 16/9; /* 固定宽高比 */
overflow: hidden;
}
.fixed-aspect-box img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键属性：保持比例填充容器 */
object-position: center; /* 控制裁剪重心 */
}
实现要点：
1.
容器使用aspect-ratio锁定比例
2.
图片使用object-fit: cover自适应填充
3.
通过object-position调整视觉焦点
1.
容器使用aspect-ratio锁定比例
容器使用aspect-ratio锁定比例
2.
图片使用object-fit: cover自适应填充
图片使用object-fit: cover自适应填充
3.
通过object-position调整视觉焦点
通过object-position调整视觉焦点
我们思考一下显示比率的问题，当想要在 4：3 的盒子里面放下 4：8 的图片，而图片没有拉伸压缩变形的话，就必然需要裁剪
而当我们的元素宽度跟随浏览器窗口变化时相当于宽度动态变化的盒子，所以还没办法使用 "4:3" 这样的固定比例来解决问题
这时就需要取舍了，究竟是裁剪左右更好还是裁剪上下更好，这取决于你要展示的主体内容。
所以我的想法是，当上下不能裁剪时就需要大宽高比（宽幅图片），当左右不能裁剪时就需要小宽高比（竖幅图片）
这样只要不是特别极端的宽高比变化（超出了我们提供的图片的安全范围阈值），都能保证主体内容不被裁剪。