面条实验室

使用 Astro + Telegram Channel + SepiaTemplate 做了一个微博客。
浏览器端做到了 0 JS, 也可以加入 no-JS Club 了。
https://memo.miantiao.me/

#碎碎念 #项目更新
于是把 tg channel 部署了个网页先 🥰 确实简洁好用
（其实一开始不部署是因为我觉得我搜索 bot 够用了，完全没考虑这茬）
（这个 tag 打的其实不太符合但是就这样吧）

https://tg.cosine.ren

感谢 BroadcastChannel

tg.cosine.ren

cosine - 前端人の日常频道

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

#优质博文 #阮一峰的科技周刊 #tools #工具推荐
科技爱好者周刊（第 347 期）：冷启动的破解之道

AI 摘要：本期《科技爱好者周刊》聚焦科技前沿动态与工具资源，涵盖了 AI 应用、硬件创新、月球生态实验等多个领域，同时分享了大量开源工具、开发资源及思想观点。文章从 Meta AI 新应用、月球养鱼计划到 3D 打印建筑等，展现了科技如何改变生活与未来的可能性。此外，还探讨了 AI 隐私问题、Web 开发趋势及创造力与限制的关系。

• 文章精选
• ChatGPT o3 照片定位：o3 模型可通过照片精准猜测拍摄地点，利用街景地图训练数据，甚至能判断具体拍摄位置，提醒用户上传照片需注意隐私泄露风险。
• 命令行设置 MacBook：介绍 macOS 内置命令行工具，适合快速配置新电脑，提高效率。
• Zip 炸弹保护服务器：作者通过体积小但解压后巨大的 Zip 文件对抗网络爬虫，分享独特防御策略。
• 工具推荐：列出 17 款开源工具，包括桌面宠物 BongoCat、条形码生成器 Barcode Maker、输入法切换工具 Input Source Pro、QBin 开源的在线文本编辑与分享服务等。
• BongoCat：开源桌面宠物，支持多平台（macOS、Windows、Linux）。
• Barcode Maker：开源条形码和二维码生成网站。
• Fread：支持 Mastodon、Bluesky、RSS 协议的安卓"微博客"客户端。
• DeckTap：局域网内手机遥控电脑幻灯片演示工具。
• Input Source Pro：Mac 输入法切换工具，支持应用/网站默认输入法设置。
• QBin：在线文本编辑与分享服务，支持代码、图片、视频分享。
• EasyEditor：低代码引擎，用于可视化搭建 Web 应用。
• PakePlus：基于 Tauri2 的工具，将网站打包为桌面/手机应用。
• 柠檬表单：开源表单问卷系统，自带管理后台。
• MotionEaseTune：安卓防晕车应用，通过 100Hz 声音缓解症状。
• OpenApi 接口代码生成器：根据 OpenAPI 文档生成多语言客户端代码。
• MyOCR：基于 Python 的本地 OCR 文字识别框架。
• SimonAKing-HomePage：使用 WebGL 流体动画的个人网站模板。
• 酷监控：开源监控控制台，支持网站/接口/HTTPS 证书监控。
• FindJSONPath：在线 JSON 工具箱，支持 mock 数据生成与路径可视化。
• 拼字幕：在线字幕拼图制作工具。
• YouTube Playlist Processor：用 AI 将 YouTube 播放列表转为电子书。
• 资源分享：推荐免版权素材搜索引擎、FeedMe 提供多个信息源最新内容的 AI 摘要、吉卜力电影高清图等资源，方便开发者与创作者获取灵感与素材。
• 图片与历史：介绍 1982 年柯达盘式胶片相机，探讨其便携设计与画质缺陷导致的停产原因。
• 文摘与言论：分享约翰·巴洛的人生信条，强调对可能性与不确定性的开放态度；回顾 25 年来 Web 开发技术趋势的更迭，讽刺技术炒作；引用多位学者与从业者关于创造力、AI 发展

GitHub

GitHub - runjuu/InputSourcePro: Switch and track your input sources with ease ✨

Switch and track your input sources with ease ✨. Contribute to runjuu/InputSourcePro development by creating an account on GitHub.

#优质博文 #前端
1. 不要用 TypeScript 枚举（英文） TypeScript 官方已经不建议使用 enum（枚举）语法，作者建议改用字符串的联合类型代替。 #typescript
2. olmOCR 一个使用 AI 模型进行文字识别（OCR）的 Python 工具。 #AI #OCR
3. MTranServer 开源的离线翻译服务器，号称资源消耗低，CPU + 1G 内存即可运行，支持调用沉浸式翻译。 #翻译

via #阮一峰的科技周刊 340

Blog | Georges Haidar

An ode to TypeScript enums

Pouring one out for a fallen friend

#优质博文 #前端 #tools
1. CSS 的 backdrop-filter 属性（英文） 本文介绍 backdrop-filter 属性，可以产生毛玻璃的效果。 #css

backdrop-filter 是一个强大的 CSS 属性，它可以对元素后面的内容应用模糊、亮度调整等滤镜效果，从而创造出玻璃拟态（Glassmorphism）等视觉效果。文章介绍了 backdrop-filter 的基本用法，如 blur() 进行模糊处理，以及 brightness() 进行亮度调整。同时，作者强调了 backdrop-filter 仅影响元素背景，不会影响其自身内容。此外，文章探讨了浏览器兼容性问题，指出 Safari 早期支持较好，而部分浏览器（如 Firefox）需要启用实验性功能才能使用。最后，作者提供了示例代码，并建议开发者结合 background 颜色和 backdrop-filter 以获得最佳视觉效果。

2. 基于 signal 的 Web 组件（英文） #html #WebComponents
作者介绍自己写的一个 Web 组件，可以在不加其他 JS 库的情况下，实现 signal 功能。

本文探讨了在 HTML 中直接定义 信号（Signals） 的可能性，提出 <x-signal> 自定义元素，使其能够管理状态并自动更新 UI，而无需依赖 JavaScript 框架。该方法基于 HTML-based state 概念，直接从 HTML 解析初始值，并支持类型转换、动态渲染、自定义格式化及派生状态计算。最终，作者认为 <x-signal> 代表了一种更细粒度的 **Islets 架构**，在静态 HTML 中提供轻量级的响应式交互能力。

3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言，属于 TypeScript 的超集，这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用，可以上传文档，生成本地的知识库问答系统，基于 RAG（检索增强生成）技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架，快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版（英文） #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器，一共十几个库，详细介绍每个库的特点

本文分析了主流的富文本编辑器框架，帮助开发者在 2025 年做出最佳选择。文章涵盖 Lexical、ProseMirror、Slate、Tiptap、Quill 等编辑器，并从 可扩展性、性能、易用性、社区支持 等方面进行了对比。
• Lexical （Meta 开源）：高性能、模块化、适合复杂应用，但生态仍在发展中。
• ProseMirror ：功能强大、灵活，但 API 复杂，入门门槛较高。
• Slate ：React 友好，完全可定制，但文档有限，维护情况不稳定。
• Tiptap （基于 ProseMirror）：提供更简洁的 API 和更好的 TypeScript 支持，适合现代 Web 应用。
• Quill ：易用，适合基本需求，但扩展性受限。
结论: 如果你需要高扩展性和现代化 API，Lexical 或 Tiptap 是更好的选择；如果追求稳定和成熟方案， ProseMirror 仍然值得考虑。

via #阮一峰的科技周刊 337

#优质博文 #tools #工具推荐
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

canva.dev

Image replacement in Canva designs using reverse image search - Canva Engineering Blog

Qualitative comparison of image embedding models to power a scalable similar-image replacement system for Canva designs.

#优质博文 #阮一峰的科技周刊 #前端 #tools #工具推荐

科技爱好者周刊（第 320 期）：乒乓仓

1. photo4you.win 🧰 免费在线证件照制作。另外，有一个类似的开源项目 HivisionIDPhoto。#证件照
2. OneIMG 🧰 一个开源的、纯前端的文字转图片的网页应用。
3. Zeli 🧰 这个网站实时给"黑客新闻"每个链接生成摘要。
【上周在 v2ex 看到了，用过之后感觉还不错，期待出 rss 源，要是有了好心人踹我一脚，要是没有改天在自建 rsshub 上加一下（咕咕咕咕咕咕）】
4. TypeRoom 类型小屋 🧰 TypeScript 题库 Type Challenge 的网页版。 #typescript #ts
【这个好这个好】
5. 开源许可证选择器 🧰 回答几个问题，帮你选择一个开源许可证。 #开源 #license

#优质博文 #阮一峰的科技周刊 #tools #工具
科技爱好者周刊（第 319 期）：如何拍出爆款视频

1. 使用 @layer 自制一个 CSS 框架（英文） 📓 一篇 CSS 高级教程，介绍使用 @layer 指令，自己写一个 CSS 框架。 #css
2. LosslessCut 🧰 一个开源的跨平台视频剪切软件，目标是成为 FFmpeg 的图形前端。 #ffmpeg
3. Compress JPG 🧰 一个基于谷歌的 squoosh 算法、一次性压缩多张图片的网站。
4. git cliff 🧰 一个自动总结提交信息，生成 changelog 文件的命令行工具。（这个 gif 小动画怪有意思的hhhh） #git #cli
5. APPLORE 🧰 这个网站收集了5000多个应用程序的图标，可以分类搜索。

#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #tools
科技爱好者周刊（第 318 期）：创业咖啡馆的记忆

1. 怎么写 CSS 的打印样式（英文） 📓 本文是一篇教程，介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序（英文） 📓 一篇长文，介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构（英文） 📓 有些时候，重构之后的代码比之前还难懂。本文逐一举例，分析怎样的重构是好的，怎样是坏的。
4. 哨兵值是什么（英文）📓 这篇短文通过牙膏的例子，解释什么是编程使用的哨兵值（sentinel value）。
5. common-intellisense 📓 VS Code 插件，为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏，在网页上画线，反弹小球，发出的声音组成旋律。

Betterstack

Deploying Web Apps with Caddy: A Beginner's Guide | Better Stack Community

Explore Caddy's key features: static file serving, reverse proxying, automatic HTTPS, and integrations for log and uptime management

#优质博文 #前端 #工具推荐 #tools #阮一峰的科技周刊
前天黑神话终于通关一周目了（53h），这几天收收心咯~准备写一篇总结博文晒晒截图什么的ww

科技爱好者周刊（第 315 期）：一份谷歌离职报告

1. Coolify 🧰 一个开源的应用运行平台，相当于自己搭建一个 Heroku / Netlify / Vercel 替代品，各种应用可以轻松在上面运行。
2. Ente Auth 🧰 一个开源的双因素认证码管理器。
3. xpano 🧰 一个自动拼接多张照片的工具。
4. 妖怪平生录 📓 这个仓库收录了游戏《黑神话：悟空》内附的203个妖怪的图片、小诗和故事。#黑神话 (这个好啊）

GitHub

GitHub - coollabsio/coolify: An open-source & self-hostable Heroku / Netlify / Vercel alternative.

An open-source & self-hostable Heroku / Netlify / Vercel alternative. - coollabsio/coolify

#优质博文 #前端 #工具推荐 #tools #阮一峰的科技周刊
科技爱好者周刊（第 312 期）：从英特尔看"美国制造"

1. 软考高级架构师备考记录（中文） 📓 作者参加24年上半年高级资格"系统架构设计师"的考试并成功通过。（mark一下，万一以后没事考个减点税好像也不错？）
2. Penpot 🧰 一个基于 Web 的开源设计工具，Figma 的替代品。 #设计 （头一次见，不知道咋样，mark一下）
3. Stirling-PDF 🧰 一个开源工具，用来完成各种 PDF 操作，基于 Web，需要自己架设。 #pdf

nekonull.me

软考高级架构师备考记录 - Nekonull's Garden

运气好的话，60 个小时就够了

#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #tools

科技爱好者周刊（第 311 期）：低利率与长期项目

1. screenshot.rocks 🧰 一个在线工具，可以为网页截图加上浏览器边框。 #图片美化
2. Luvvoice 🧰 免费的在线文本转语音服务，提供各种语言的超过200种语音。 #tts
3. DiscovA 🧰 一个开源的 AI 产品搜索引擎，可以使用自己的数据。 #ai

screenshot.rocks

Screenshot.Rocks | Create beautiful mobile or browser screenshots and mockups

Create mobile or browser mockups from screenshots in seconds. Screenshot.rocks turns ordinary browser screenshots into beautiful mockups

#优质博文 #阮一峰的科技周刊 #前端 #设计资源 #tools

科技爱好者周刊（第 308 期）：工作找不到，博士能读吗？

1. color4bg.js 🧰 生成动态、抽象的背景图的工具。

GitHub

GitHub - winterx/color4bg.js: Cool colorful backgrounds, generated by JS

Cool colorful backgrounds, generated by JS. Contribute to winterx/color4bg.js development by creating an account on GitHub.

#优质博文 #阮一峰的科技周刊 #前端 #css
科技爱好者周刊（第 307 期）：不要看重 Product Hunt

1. CSS 锚点定位（英文） 📓 Chrome 125 引入了 CSS 锚点定位（Anchor Positioning），这种新语法使得元素之间相对定位变得异常容易。
2. 内存的栈和堆的区别（英文） 📓 本文解释了内存的基本知识，不涉及细节，只解说概念，说得挺好的。
3. 英文博客汇聚 🧰 该网站汇总每周的英文技术博客，并提供每篇文章的中文摘要。

【我发现我变挑剔多了，好多工具都不想放进来qwq看看文章吧还是】

Coryrylan

Flow Charts with CSS Anchor Positioning

Learn how to use CSS Anchor Positioning to create flow charts and diagram with just CSS.

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 302 期）：创业虽然好，不敢推荐了

1. <span>元素可以干什么（英文） 📓 <span>是一个表示行内文本的 HTML 网页元素，本文收集了许多案例，你可以用它做各种各样的事情。 #css
2. 如何在 JavaScript 中快速读取文件（英文） 📓 作者列出了 JavaScript 读取文件的5种方法，并且比较了它们的性能差异。 #javascript
3. Sink 🧰 一个基于 Cloudflare 的短链接应用，带有访问统计。（@ccbikai 投稿） #短链接 #自部署
4. PicImpact 🧰 一个 Web 相册程序，基于 Next.js。（@besscroft 投稿） #nextjs
5. Gallery-Portfolio 🧰 一个开源的"瀑布流"照片展示程序，后端可以放在免费的 Cloudflare R2（或其他兼容 AWS S3 的存储），参见 Demo。（@linyuxuanlin 投稿）
6. widget-qrcode 🧰 一个网页二维码的 web component 组件，支持自定义二维码风格模板、前景、背景、logo等。（@mumuy 投稿）
7. cobalt 🧰 一个开源的视频下载网址，支持多个视频网站，包括 B 站、Youtube、instagram 和 Twitter。

【这期的 gallery 相关工具推荐还挺多的】

GitHub

【开源自荐】Sink - 基于 Cloudflare 带访问统计的短链系统 · Issue #4529 · ruanyf/weekly

特性 链接缩短 访问统计 Serverless 部署 自定义 Slug 🪄 AI 生成 Slug 链接有效期 演示 Sink.Cool Site Token: SinkCool 全站分析 链接管理 单个链接分析 开源 https://github.com/ccbikai/sink

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 301 期）：OpenAI 的图书馆工位

1. 谷歌搜索的新模式（英文） 📓 谷歌美国版在搜索页面上，加了一个"人工智能概述"，给出 AI 对搜索结果的总结。
很多人不喜欢这样，因为他们使用谷歌是为了查找网站而不是获取答案。所以，谷歌又添加了一个"传统模式"，让你查看没有 AI 的搜索结果。
2. Windows 画板引入 AI（英文） 📓 11 的新版本，将 AI 引入了传统的画板程序（Paint）。用户只需画出轮廓（图左），AI 会自动生成对应的图片（图右）。#AI 【草，这也行】
3. AI 解读网页报错（英文） 📓 谷歌为 Chrome 浏览器的开发者工具，引入了 AI，现在可以查看网页报错的 AI 解读。
4. krita-ai-diffusion 🧰 图像编辑器软件 Krita 的 AI 插件，类似 PhotoShop 的"图片 AI 扩充"，用 AI 绘制原图没有的部分，不过它是开源的。
5. CSS :has() 选择器教程（英文） 📓 本文介绍如何使用:has()选择器，特点是有大量互动示例。 #css
6. VSpace 🧰 一个浏览器插件，提供侧边栏的垂直书签和标签页管理器。
7. Keyviz 🧰 开源的 Windows 软件，在桌面上显示用户实时的按键。
8. autocomplete 🧰 公司推出的 JS 库，实现搜索关键字的自动补全。
9. JavaScript 语法问题（中文） 📓 这个仓库收集了100多个 JavaScript 的语法选择题，可以试试你是否真的了解这门语言。 #javascript

【评：AI 周报】

Tedium: The Dull Side of the Internet.

How I Made Google’s “Web” View My Default Search

Forget AI. Google just created a version of its search engine free of the extra junk it has added over the past decade-plus. You just need one URL parameter.

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools
科技爱好者周刊（第 300 期）：三十年，解决人生三大问题

1. 字幕工具箱 🧰 这个网站收集了一些字幕相关的工具，纯前端处理，无需安装任何插件或软件。 #在线工具
2. Segmentify 🧰 一个 Figma 插件，使用浏览器 GPU 能力运行 AI SAM 模型，快速分割图片，从图片中提取元素至 Figma 文件。 #AI
3. QR code designer 🧰 一个 Web 工具，用来设计二维码，可以嵌入各种文字和图形，另有一个类似工具。
4. 一个不知名的开源项目可以带来多少收入？（中文） 📓 三年前，作者决定做一个开源的开发工具。三年过去了，这个项目怎么样了，赚了多少钱。 #开源

【唔姆，最近让我感兴趣的东西蛮少的】

zm.i8k.tv

字幕工具箱 - 免费的在线字幕工具集合

即开即用的免费在线字幕工具，包含剪映字幕导出、字幕转文本、双语字幕、字幕连接、简繁互转、微调、变速等功能

#优质博文 #阮一峰的科技周刊 #资源推荐 #AI
【咕咕咕咕咕咕咕咕咕咕咕不会有人知道我咕咕咕了几期】

科技爱好者周刊（第 299 期）：AI 的关键是语料

1. 空的 S3 存储桶也能产生费用（英文） 📓 亚马逊 S3 是最流行的存储云服务，作者建了一个空存储桶，万万没想到，没有写入任何数据，两天居然产生了1300美元的费用。

第 1 课：任何知道您的任何 S3 存储桶名称的人都可以随意增加您的 AWS 账单。
第 2 课：向存储桶名称添加随机后缀可以增强安全性。
第 3 课：当对 S3 执行大量请求时，请确保显式指定 AWS 区域，这样您就可以避免 S3 API 重定向的额外费用。

【 评：比较有意思的是，即使存储桶为空，被大量未授权请求攻击也会导致AWS账单激增至1300美元。 】

2. HackerNews 每日 AI 摘要 🧰 这个项目对 Hacker News 每天的热点文章，生成中文的 AI 摘要，除了官网，还会发到飞书上面。（@rmrf 投稿）

为什么做 HackerNews 的每日摘要
- 我每天希望了解一下过去 24h HackerNews 上有哪些火爆的文章
- 但是又不想花太多时间浪费在浏览上，最好能有一个快速的浏览
- HackerNews 帖子的网友评论通常很有含金量，我也希望可以通过他们了解是否值得去精读

【评：挺好，订阅了 - RSS源 】

3. VideoSubtitleGenerator 🧰 一个命令行工具，通过语音识别，批量为本地的视频文件生成字幕，并支持翻译。（@buxuku 投稿）
【不晓得效果咋样嘞，有无人用下看看】

4. 海棠诗社 🧰 网友开发的诗词网站。（@javayhu 投稿）
【界面挺简洁，设计的可以】

Medium

How an empty S3 bucket can make your AWS bill explode

Imagine you create an empty, private AWS S3 bucket in a region of your preference. What will your AWS bill be the next morning?

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 296 期）：xz 后门的作者 Jia Tan 是谁？

1. 如何将 Caddy 作为反向代理（英文） 📓 一篇初学者教程，介绍如何用 Caddy 架设反向代理服务器，它的设置比 nginx 简单，而且自动生成和更新 HTTPS 证书。 【本篇文章介绍的挺多的，其实直接看 caddy 的官网文档也比 nginx 简单多了】
2. Suno AI 🧰 Suno AI 是一个"文生音乐"的服务。网友的这个工具帮助你生成它的提示词，可以调整各种细节。（@Lcorinst 投稿）#AI
3. 3DP.ing 🧰 一个 3D 打印模型的搜索引擎，特点是使用图片搜索。（@wangasa 投稿）
4. 1000UserGuide 📓 该网站整理了300多个免费推广渠道，包括网站、论坛、网址导航、产品目录等，帮助独立开发者推广产品。（@naxiaoduo 投稿） #独立开发
5. DashPress 🧰 一个开源工具，只需执行一个命令，就会自动分析数据库结构，生成管理后台，号称不用写代码。
6. OneUptime 一个开源的服务可用性检查工具，记录服务的健康状态，如果发现服务下线，立刻发送通知，可以替代 StatusPage.io。
7. 如何生成键盘输入统计看板（英文） 📓 本文介绍使用一个 Python 脚本，统计用户在当前计算机按下了什么键。（@tisonkun 投稿）

Suno

Suno | AI Music

Create stunning original music in seconds using AI. Make your own masterpieces, share with friends, and discover music from artists worldwide.

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 295 期）：巧妙的灯泡钟

1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 294 期）：崖门海战的感想

1. Web 组件如何适配 JS 框架（英文） 📓 Web 组件是浏览器原生的组件格式，本文介绍怎么将这种格式用于各种 JS 前端框架。
2. CSS 的悬挂标点属性（英文） 📓 如果标点正好在行首或行尾，是否要跟上下文对齐？这就要用到 CSS 的 hanging-punctuation 属性。 #css #小知识
3. Frogmouth 🧰 命令行的 Markdown 阅读器。
4. SSH3 🧰 使用 QUIC + TLS 重新实现的 SSH 加密登陆工具，支持 UDP 端口转发。
5. X-Hiring 🧰 每日自动抓取于 V2EX 和电鸭社区的招聘信息，使用 Google AI 提取摘要。（@hehehai 投稿）
6. pear-rec 🧰 一个在线的 GIF 编辑工具，也可以对 MP4 视频进行解析导入。（@027xiguapi 投稿）
7. Vmail.dev 🧰 使用 Cloudflare email worker 实现的临时邮箱服务，可以自己部署。（@yesmore 投稿）
8. VidHub 🧰 苹果设备的视频播放器，可以管理和播放本地、网盘、NAS、Cloud Drive 来源的视频。（@julycamera 投稿）
9. KanjiVG 🧰 这个项目提供汉字的 SVG 文件下载，可以显示笔划动画。
10. DesignSystemHunt.com 🧰 这个网站收集各种设计系统（design system），已经有130多个。

「有一段时间，我使用 Gentoo（一个需要自己从头编译源码的 Linux 发行版）。当我的宿舍在寒冷的冬夜里太冷时，我就会在它上面重新编译 Open Office。

-- Hacker News 读者」 😀

Jakelazaroff

Web Components Eliminate JavaScript Framework Lock-in | jakelazaroff.com

Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we're going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework.