呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#AI #LLM #bot #tools #开源
AstrBot
✨易上手的多平台 LLM 聊天机器人及开发框架✨。支持 QQ、QQ频道、Telegram、微信平台(Gewechat, 企业微信)、内置 Web Chat，OpenAI GPT、DeepSeek、Ollama、Llama、GLM、Gemini、OneAPI、LLMTuner，支持 LLM Agent 插件开发，可视化面板。一键部署。支持 Dify 工作流、代码执行器、Whisper 语音转文字。
AstrBot
✨易上手的多平台 LLM 聊天机器人及开发框架✨。支持 QQ、QQ频道、Telegram、微信平台(Gewechat, 企业微信)、内置 Web Chat，OpenAI GPT、DeepSeek、Ollama、Llama、GLM、Gemini、OneAPI、LLMTuner，支持 LLM Agent 插件开发，可视化面板。一键部署。支持 Dify 工作流、代码执行器、Whisper 语音转文字。
GitHub
GitHub - AstrBotDevs/AstrBot: ✨ 易上手的多平台 LLM 聊天机器人及开发框架 ✨ 支持 QQ、QQ频道、Telegram、企微、飞书、钉钉 | 知识库、MCP 服务器、OpenAI、DeepSeek、Gemini、硅基流…
✨ 易上手的多平台 LLM 聊天机器人及开发框架 ✨ 支持 QQ、QQ频道、Telegram、企微、飞书、钉钉 | 知识库、MCP 服务器、OpenAI、DeepSeek、Gemini、硅基流动、月之暗面、Ollama、OneAPI、Dify - AstrBotDevs/AstrBot
#前端 #css #优质博文
CSS 的设计自 1996 年诞生以来便充满了历史遗留问题和诸多妥协，正如 CSS-Tricks 的文章 所指出的那样，许多属性（如 z-index、background-repeat 等）的命名和行为显得反直觉，背后反映了当初为适应 90 年代需求而做出的选择，而 CSSWG Wiki 则详细罗列了这些设计失误，从属性命名到布局规则，都存在诸多可以改进之处，但由于大量网站依赖这些历史遗留的设计，变更它们会带来巨大的技术债务，使得这些“错误”成为了不可逆转的现实。
via Frontend Focus #678
CSS 的设计自 1996 年诞生以来便充满了历史遗留问题和诸多妥协，正如 CSS-Tricks 的文章 所指出的那样，许多属性（如 z-index、background-repeat 等）的命名和行为显得反直觉，背后反映了当初为适应 90 年代需求而做出的选择，而 CSSWG Wiki 则详细罗列了这些设计失误，从属性命名到布局规则，都存在诸多可以改进之处，但由于大量网站依赖这些历史遗留的设计，变更它们会带来巨大的技术债务，使得这些“错误”成为了不可逆转的现实。
via Frontend Focus #678
踩了个小坑， th > tr 标签sticky时设置 border 会失效，
border-collapse: separate;border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
https://stackoverflow.com/questions/18679020/border-around-tr-element-doesnt-show
https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
ps: 好像还是不大对，border 在表格中的行为表现太怪了，有些时候，等晚点腾出手了总结一下
pps: tmd，我先伪元素解君愁了。
#优质博文 #前端 #react
📄 使用React改进异步状态的用户体验 useOptimistic – useOptimistic 是乐观更新UI的hook。Ben Zuke
AI 摘要: React 19 的
Source React Status #416
📄 使用React改进异步状态的用户体验 useOptimistic – useOptimistic 是乐观更新UI的hook。Ben Zuke
AI 摘要: React 19 的
useOptimistic Hook 旨在简化乐观更新（Optimistic Updates）的实现，从而提升用户体验（UX）。传统方法需要手动管理多个状态，包括跟踪请求状态、临时 UI 变化及实际服务器响应，导致冗余代码和复杂的状态管理。`useOptimistic` 通过提供一个声明式 API，使开发者能够轻松管理乐观状态，减少状态管理的心智负担。例如，在待办列表中，`useOptimistic` 允许 UI 立即更新，随后再发送请求到服务器，并在失败时回滚更改，从而提供更流畅的交互体验。Source React Status #416
Atomic Spin
Improve Asynchronous State UX in React with useOptimistic
React 19’s useOptimistic hook helps reduces annoyances by providing a built-in hook for Optimistic Updates.
#优质博文 #前端 #工程化 #esm
Move on to ESM-only
AI 摘要：作者倡导全面转向 ESM（ECMAScript Modules），因其更优的性能、静态分析能力和未来兼容性，而 CommonJS（CJS）因同步解析和动态
via antfu
Move on to ESM-only
AI 摘要：作者倡导全面转向 ESM（ECMAScript Modules），因其更优的性能、静态分析能力和未来兼容性，而 CommonJS（CJS）因同步解析和动态
require 等问题已显局限。迁移建议包括启用 "type": "module" 并避免 CJS 专属特性。尽管部分工具仍依赖 CJS，长期来看，ESM 是更现代和可持续的选择。为了提高 ESM 采用的透明度和可见性，我最近构建了一个可视化的工具，称为 Node Module Inspector，以分析包裹的依赖关系。它提供了有关依赖性 ESM 采用状态的见解，并在迁移到 ESM 时有助于识别潜在的问题。
via antfu
Anthony Fu
Move on to ESM-only
Let's move on to ESM-only
#优质博文 #前端 #正则
编译原理回忆在攻击我
译文 | 正则表达式的真正实力
AI 摘要：本文探讨了现代正则表达式（主要指 PCRE 风格）的实际能力，远超其原始定义中的「正则语言」范畴。作者通过形式语言理论，介绍了乔姆斯基层次结构，说明正则表达式不仅可以匹配正则语言，还能处理上下文无关语言（如编程语言语法）甚至部分上下文相关语言（如 {a^n b^n c^n, n>0}）。
核心观点包括：
1. 形式语言基础：正则表达式原本仅适用于正则语言，但现代实现支持递归和子模式引用，使其超越该范畴。
2. 解析上下文无关语言：PCRE 支持递归子模式，使其能匹配几乎所有上下文无关语言，如 HTML 及编程语言语法。
3. 有限支持上下文相关语言：尽管某些上下文相关模式可用断言和子模式引用匹配，但非固定宽度的后行断言限制了其能力。
4. NP 完全性：支持反向引用的正则表达式匹配问题是 NP 完全问题，可解决如 3-CNF SAT 这样的复杂计算问题。
5. 实际应用：「可行」不等于「最佳」，解析 HTML 仍应首选 DOM 解析器，而非正则。
总结而言，现代正则表达式极为强大，但应根据具体需求选择合适工具。
via 少数派 PlatyHsu
编译原理回忆在攻击我
译文 | 正则表达式的真正实力
AI 摘要：本文探讨了现代正则表达式（主要指 PCRE 风格）的实际能力，远超其原始定义中的「正则语言」范畴。作者通过形式语言理论，介绍了乔姆斯基层次结构，说明正则表达式不仅可以匹配正则语言，还能处理上下文无关语言（如编程语言语法）甚至部分上下文相关语言（如 {a^n b^n c^n, n>0}）。
核心观点包括：
1. 形式语言基础：正则表达式原本仅适用于正则语言，但现代实现支持递归和子模式引用，使其超越该范畴。
2. 解析上下文无关语言：PCRE 支持递归子模式，使其能匹配几乎所有上下文无关语言，如 HTML 及编程语言语法。
3. 有限支持上下文相关语言：尽管某些上下文相关模式可用断言和子模式引用匹配，但非固定宽度的后行断言限制了其能力。
4. NP 完全性：支持反向引用的正则表达式匹配问题是 NP 完全问题，可解决如 3-CNF SAT 这样的复杂计算问题。
5. 实际应用：「可行」不等于「最佳」，解析 HTML 仍应首选 DOM 解析器，而非正则。
总结而言，现代正则表达式极为强大，但应根据具体需求选择合适工具。
via 少数派 PlatyHsu
#优质博文 #SQLite #云数据库 #devops
说太对了，还真是
SQLite 云服务调研
AI 摘要：作者在 Eidos 项目中探索了多种 SQLite 云服务，以支持用户发布 space 数据。经过多次尝试，他发现不同服务的定价模式和适用场景各有优劣。
云服务测评
1. Turso & D1
• 提供 serverless SQLite 解决方案，按行读取计费，适合小数据量应用。
• 但百万级数据表容易超额，查询成本高，尤其是 count(*) 操作。
• Turso 体验优于 D1，支持直接上传 SQLite 文件，而 D1 需转换 SQL 语句。
2. SQLiteCloud
• 提供托管 SQLite 服务，限制物理资源，100W 行表性能不佳，仍处于早期阶段。
3. Supabase
• 尝试将 SQLite 转为 PostgreSQL，但兼容性问题导致导入失败。
4. Cloudflare Worker（Python）
• 尝试 Python 版 Worker 运行 SQLite，结果部署受限，最终放弃。
5. DigitalOcean & Bun
• 自建 SQLite API 方案，数据库存 R2，访问时拉取缓存，提高查询效率。
• 采用 Bun 运行 SQLite，性能优异但 bug 较多。
• DigitalOcean App 部署体验良好，但性价比不如 VPS。
价格分析
• Serverless 方案（D1/Turso） 计费精细但成本高，适用于小型数据库。
• PaaS 方案（DigitalOcean App） 开发体验佳，但附加增值服务较多，成本高于自建。
• VPS（DigitalOcean/Netcup） 提供裸机资源，性价比最高，但需自行运维。
结论
Serverless 方案虽便捷，但不适合大规模计算和数据查询，尤其 SQLite 这种按行读取计费的模式成本高昂。对于计算密集型任务，自建服务（如 DigitalOcean + Bun）更具性价比，但需承担运维成本。最终，选择何种方案取决于业务需求和预算权衡。
via Mayne's Blog
说太对了，还真是
加钱，世界触手可及
从最开始的 serverless d1 ，到提供现成 sqlite 服务的 docker 容器，再到自己实现的 docker 镜像部署，再到自己处理 vps 的部署，整个流程下来，你离物理机器越近，性价比越高。但是随之而来的是 devops 投入越来越大。但是你掌握了 docker k8s 这类工具，将部署过程做成自动化，也只是写一次，随后就能复用。
开发者可能会有个幻觉，docker 这样的虚拟化技术让运维对资源分配粒度更加精细了，对资源的利用率更高，所以 serverless 计费很精准，价格会越来越低。实则不然。每一层抽象都会附加增值服务，想要 github 仓库自动部署吗？想要漂亮的监控仪表盘吗？想要和同事协作管理集群吗？想要权限控制吗？想要更好的客服支持吗？全都得加钱。DigitalOcean 甚至还有专门的开发者套餐，然而花钱只是为了获取更好的客服支持。
这有点类似于，下馆子、点外卖和自己做饭的区别。有很多只卖机器的服务商，他们的价格远低于 DigitalOcean。一些 PaaS 提供的机器性价比太低，因为他们附带了一堆增值服务，和只卖裸机器的服务商对比，同配置机器的价格差距可能高达 50 倍，你想想钱都花到哪里去了。
现在很多上层应用的 SaaS 服务都采用订阅制，但不是 pay as you go 的模式，这和你交水电费是完全不一样的体验，而是一种类似于买保险的商业模式，大部分的资源是头部用户消耗的，比如百万粉丝的账号和10粉丝账号，发布一条消息，推送成本是不一样的。但是平台不会要求百万粉丝的账号多交钱。付费用户花的钱，一部分是在为这种头部用户的消耗买单。
SQLite 云服务调研
AI 摘要：作者在 Eidos 项目中探索了多种 SQLite 云服务，以支持用户发布 space 数据。经过多次尝试，他发现不同服务的定价模式和适用场景各有优劣。
云服务测评
1. Turso & D1
• 提供 serverless SQLite 解决方案，按行读取计费，适合小数据量应用。
• 但百万级数据表容易超额，查询成本高，尤其是 count(*) 操作。
• Turso 体验优于 D1，支持直接上传 SQLite 文件，而 D1 需转换 SQL 语句。
2. SQLiteCloud
• 提供托管 SQLite 服务，限制物理资源，100W 行表性能不佳，仍处于早期阶段。
3. Supabase
• 尝试将 SQLite 转为 PostgreSQL，但兼容性问题导致导入失败。
4. Cloudflare Worker（Python）
• 尝试 Python 版 Worker 运行 SQLite，结果部署受限，最终放弃。
5. DigitalOcean & Bun
• 自建 SQLite API 方案，数据库存 R2，访问时拉取缓存，提高查询效率。
• 采用 Bun 运行 SQLite，性能优异但 bug 较多。
• DigitalOcean App 部署体验良好，但性价比不如 VPS。
价格分析
• Serverless 方案（D1/Turso） 计费精细但成本高，适用于小型数据库。
• PaaS 方案（DigitalOcean App） 开发体验佳，但附加增值服务较多，成本高于自建。
• VPS（DigitalOcean/Netcup） 提供裸机资源，性价比最高，但需自行运维。
结论
Serverless 方案虽便捷，但不适合大规模计算和数据查询，尤其 SQLite 这种按行读取计费的模式成本高昂。对于计算密集型任务，自建服务（如 DigitalOcean + Bun）更具性价比，但需承担运维成本。最终，选择何种方案取决于业务需求和预算权衡。
via Mayne's Blog
Mayne's Blog
SQLite 云服务调研 | Mayne's Blog | gine.me
#优质博文 #前端 #工程化 #esm #typescript
Tutorial: publishing ESM-based npm packages with TypeScript
AI 摘要：过去两年，TypeScript、Node.js 和浏览器对 ESM（ECMAScript Modules）的支持取得了显著进展。本教程介绍了一种较为现代、简化的 TypeScript npm 包发布方案，适用于无需考虑向后兼容性的项目。
主要内容：
1. 项目结构：包含 src/ （源码）、test/ （测试）、dist/ （编译输出）、docs/ （文档）等目录。
2. tsconfig.json 配置：
• outDir: "dist" ：编译后的文件存放在 dist/ 目录。
• sourceMap: true、declaration: true、declarationMap: true，确保源码映射和类型定义文件生成。
• verbatimModuleSyntax: true 及 erasableSyntaxOnly: true，提高 TypeScript 代码的可移植性。
3. package.json 相关配置：
•
• "exports"：明确定义包的 ESM 入口，支持子路径导出。
• "files"：严格控制发布到 npm 的文件，避免上传测试代码。
4. 构建与发布：
• 使用 npm run build 清理 dist/ 目录并重新编译。
• prepublishOnly 钩子在 npm publish 之前自动执行 build，确保发布的代码是最新的。
• publishd 命令用于 npm publish --dry-run，可预览上传的文件。
5. 测试与文档：
• 采用 Mocha 进行单元测试，并支持 source-maps 以优化错误追踪。
• 使用 TypeDoc 生成 API 文档，托管于 GitHub Pages。
6. 其他工具：
• publint、arethetypeswrong 等工具检查 npm 包的兼容性和 TypeScript 类型定义的正确性。
• shx 统一跨平台 shell 命令（如 rm -rf、chmod u+x）。
本指南基于 @rauschma/helpers 包的实践经验，提供了一种现代化、易于维护的 ESM npm 包构建方法。
via 2ality – JavaScript and more
Tutorial: publishing ESM-based npm packages with TypeScript
AI 摘要：过去两年，TypeScript、Node.js 和浏览器对 ESM（ECMAScript Modules）的支持取得了显著进展。本教程介绍了一种较为现代、简化的 TypeScript npm 包发布方案，适用于无需考虑向后兼容性的项目。
主要内容：
1. 项目结构：包含 src/ （源码）、test/ （测试）、dist/ （编译输出）、docs/ （文档）等目录。
2. tsconfig.json 配置：
• outDir: "dist" ：编译后的文件存放在 dist/ 目录。
• sourceMap: true、declaration: true、declarationMap: true，确保源码映射和类型定义文件生成。
• verbatimModuleSyntax: true 及 erasableSyntaxOnly: true，提高 TypeScript 代码的可移植性。
3. package.json 相关配置：
•
"type": "module" ：确保 .js 文件按 ESM 解析。• "exports"：明确定义包的 ESM 入口，支持子路径导出。
• "files"：严格控制发布到 npm 的文件，避免上传测试代码。
4. 构建与发布：
• 使用 npm run build 清理 dist/ 目录并重新编译。
• prepublishOnly 钩子在 npm publish 之前自动执行 build，确保发布的代码是最新的。
• publishd 命令用于 npm publish --dry-run，可预览上传的文件。
5. 测试与文档：
• 采用 Mocha 进行单元测试，并支持 source-maps 以优化错误追踪。
• 使用 TypeDoc 生成 API 文档，托管于 GitHub Pages。
6. 其他工具：
• publint、arethetypeswrong 等工具检查 npm 包的兼容性和 TypeScript 类型定义的正确性。
• shx 统一跨平台 shell 命令（如 rm -rf、chmod u+x）。
本指南基于 @rauschma/helpers 包的实践经验，提供了一种现代化、易于维护的 ESM npm 包构建方法。
via 2ality – JavaScript and more
#优质博文 #追番 #科普
记得以前看到过但是没存，今天下摇曳露营的时候又看到了存一下，很棒的科普？教程？总之很棒。
1. 回归本地教程——序
2. 回归本地教程①——下载与Bittorrent
3. 回归本地教程②——重新认识视频
4. 回归本地教程③——蓝光光盘Blu-ray Disc & Private Tracker
5. 回归本地教程④——BDRIP&压制组
6. 回归本地教程⑤——播放
7. 回归本地教程——后记01
记得以前看到过但是没存，今天下摇曳露营的时候又看到了存一下，很棒的科普？教程？总之很棒。
1. 回归本地教程——序
2. 回归本地教程①——下载与Bittorrent
3. 回归本地教程②——重新认识视频
4. 回归本地教程③——蓝光光盘Blu-ray Disc & Private Tracker
5. 回归本地教程④——BDRIP&压制组
6. 回归本地教程⑤——播放
7. 回归本地教程——后记01
如果一个个网页打开麻烦，这里有全篇的 PDF
清新小甜的个人博客
回归本地教程——序
序——看的起源 如果一个个网页打开麻烦，这里有全篇的PDF 旧题： WTF，我**刚买的大会员，你告诉我没有一个新番能看，我去哪儿看啊，本来烦闷的暑假更是火上浇油，怎么过下去啊，干脆回归本地得了。 嗨~嗨~この番组はDewsweetの提供でお送りします …… 自21年动漫先审后播的风波后，国内的大版
很难蚌的住，借用热门评论一句话，一想到我爸妈那一辈的人甚至我弟他们就是这种离谱垃圾内容的受害者我就笑不出来
鉴定热门视频DeepSeek遭网络攻击
@边亮_网络安全:
计算机技术 - 网红嘴里的DeepSeek遭黑客攻击，真实情况到底怎么回事？
鉴定热门视频DeepSeek遭网络攻击
@边亮_网络安全:
计算机技术 - 网红嘴里的DeepSeek遭黑客攻击，真实情况到底怎么回事？
#tools #云数据库 #postgresql #prisma
Prisma Postgres: The Future of Serverless Databases
独立开发者穷鬼N件套又更新了（逃）不知道能免费多久hhh
Prisma推出了 Prisma Postgres，免费计划 10 个免费数据库，1GB 免费存储空间。
https://fixupx.com/javay_hu/status/1886670684853837884
Prisma Postgres: The Future of Serverless Databases
Prisma推出了 Prisma Postgres，免费计划 10 个免费数据库，1GB 免费存储空间。
https://fixupx.com/javay_hu/status/1886670684853837884
FxTwitter / FixupX
Indie Maker Hu (@javay_hu)
🤨 什么？Prisma推出了pg数据库！
免费计划看起来也非常慷慨，10个免费数据库，1GB免费存储空间，爱了 ❤️
Quoting Prisma (@prisma)
🎉 Prisma Postgres is production-ready!
It's the first database built on unikernels and comes with these features:
✅ No cold starts
✅ Global cache
✅ Real-time events…
免费计划看起来也非常慷慨，10个免费数据库，1GB免费存储空间，爱了 ❤️
Quoting Prisma (@prisma)
🎉 Prisma Postgres is production-ready!
It's the first database built on unikernels and comes with these features:
✅ No cold starts
✅ Global cache
✅ Real-time events…
我重写了 Windows 的右键菜单 | 「Breeze」好看丝滑可拓展
@MicroBlock:
软件应用 - 项目首页： https://breeze.microblock.cc/
喜欢的话三连/Star支持一下呀~ヾ(≧▽≦*)o
@MicroBlock:
软件应用 - 项目首页： https://breeze.microblock.cc/
喜欢的话三连/Star支持一下呀~ヾ(≧▽≦*)o
