cosine - 前端人の日常频道


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


呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat

Related channels  |  Similar channels

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


#优质博文
1. Canva 如何建立图像搜索(英文) #搜索 #图像

本文介绍 Canva 公司如何使用向量嵌入,建立相似图片搜索。

下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》,也是使用向量嵌入。

2. 同一个 GitHub 用户如何用不同身份 SSH 登录(英文) #github #ssh

有时,同一个 GitHub 用户使用不同的 SSH 密钥,去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。

3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器,可以接入 Playwright / Puppeteer,占用资源和执行速度号称是 Chrome 的十分之一。

4. changedetection.io
一个开源的服务,用来检测指定网页的某个部分是否发生变化。比如,网页上面的商品价格发生变化,它就会通知你。 【好多这种服务了 但是mark一下】

5. Voice-Pro #AI #语音
AI 语音工具,具有多种功能(语音识别、翻译、语音克隆、文本转语音),属于 Whisper 模型的 Web UI。

6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名,它会用 DeepSeek 模型总结该用户的特点,描述非常准确而且传神。

7. GenSFX #AI #音效
免费的 AI 音效生成网站。

8. Beej 的 Git 指南(Beej's Guide to Git)
著名教程作者 Beej 的最新 Git 教程,基于他向大学学生的课堂讲义。

via #阮一峰的科技周刊 336


#优质博文 #AI
教育的下一步

AI 摘要:在这篇文章中,作者探讨了传统教育理念与未来教育转型之间的博弈,指出数字化、个性化和终身学习对于现代教育的重要意义,并强调教育生态系统的跨界融合和全球教育资源共享将深刻改变教育模式。文章通过对信息技术和智慧教育平台的深入剖析,展示了如何打破时间和空间的界限,为每一位学习者提供灵活且高效的学习体验,同时呼吁社会各界共同推动教育改革,以应对不断变化的社会和经济需求。

via 螺莉莉的数据中心


#碎碎念 #旅游
商务酒店不得不品的三大操作:

柜子里面放冰箱,柜子里面放保险箱,特别拉的风力不行的破吹风机。

就这破双床房平日价还得1k2,还得是澳门(感觉跟之前去珠海那个两百多的酒店差不多,简直可以说一模一样)

p5:上次买的英标转换器终于派上用场了🌚
p6:图文无关,只是想晒下照片


#出行 又来澳门玩耍了!这次是跟着公司开年会!土余弦进大观园啦(bushi)




#前端 #css #优质博文
CSS 的设计自 1996 年诞生以来便充满了历史遗留问题和诸多妥协,正如 CSS-Tricks 的文章 所指出的那样,许多属性(如 z-index、background-repeat 等)的命名和行为显得反直觉,背后反映了当初为适应 90 年代需求而做出的选择,而 CSSWG Wiki 则详细罗列了这些设计失误,从属性命名到布局规则,都存在诸多可以改进之处,但由于大量网站依赖这些历史遗留的设计,变更它们会带来巨大的技术债务,使得这些“错误”成为了不可逆转的现实。

via Frontend Focus #​678


#碎碎念 #设备
阿里云服务器3月到期没钱续费了,前些天买了个新的野草云 4c8g,趁现在截个全家福(dog)

妲喵:让我看看谁一边嘴上说下云,然后服务器越买越多了
哦,是我啊

放了两台PC凑数(


#碎碎念 我说我 bot 怎么突然挂了😈 R2 还真挂了


#前端 #css #坑

踩了个小坑, 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 在表格中的行为表现太怪了,有些时候,等晚点腾出手了总结一下




#优质博文 #前端 #react
📄 使用React改进异步状态的用户体验 useOptimistic – useOptimistic 是乐观更新UI的hook。Ben Zuke

AI 摘要: React 19 的 useOptimistic Hook 旨在简化乐观更新(Optimistic Updates)的实现,从而提升用户体验(UX)。传统方法需要手动管理多个状态,包括跟踪请求状态、临时 UI 变化及实际服务器响应,导致冗余代码和复杂的状态管理。`useOptimistic` 通过提供一个声明式 API,使开发者能够轻松管理乐观状态,减少状态管理的心智负担。例如,在待办列表中,`useOptimistic` 允许 UI 立即更新,随后再发送请求到服务器,并在失败时回滚更改,从而提供更流畅的交互体验。

Source React Status #416


新开了一个话题频道 @cos_mark 用于放所有我mark的东西,想要调研一下是否要分流一部分文章推荐到这个话题频道 (方便 bot 检索),本频道增加更多日常、更多前端、更多碎碎念相关内容? 本投票仅构成建议,随便投。还有想建议的可以评论
Poll
  •   无所谓,都可以 😉
  •   更多日常和碎碎念 😍
  •   更多前端和技术 🥰
  •   不用分流,欢迎骚扰 ☺️
  •   更多乐子 🥺
  •   有点吵,建议分流 😡
  •   来点图频转发的图片等 😃
1 votes


#优质博文 #前端 #工程化 #esm
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


#优质博文 #前端 #正则
编译原理回忆在攻击我

译文 | 正则表达式的真正实力

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

说太对了,还真是

加钱,世界触手可及

从最开始的 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


#优质博文 #前端 #工程化 #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 相关配置

• "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








#博客更新 #前端 #tailwind #astro #css #升级
Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录

是迁移过程小记和一些主要更新翻译,比较水,后续要是还有问题也丢这篇里边。

🔗 xLog链接
🔗 新版 Astro 博客链接
🔗 Follow - 余弦の博客

20 last posts shown.