呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#碎碎念 #项目更新
于是把 tg channel 部署了个网页先🥰 确实简洁好用
（其实一开始不部署是因为我觉得我搜索 bot 够用了，完全没考虑这茬）
（这个 tag 打的其实不太符合但是就这样吧）
https://tg.cosine.ren
感谢 BroadcastChannel
于是把 tg channel 部署了个网页先
（其实一开始不部署是因为我觉得我搜索 bot 够用了，完全没考虑这茬）
（这个 tag 打的其实不太符合但是就这样吧）
https://tg.cosine.ren
感谢 BroadcastChannel
#资源推荐 #动画 #前端 #tools
Source Twitter @tuturetom
刚刚发现知名博主 3Blue1Brown 平时制作视频使用的动画库 Manim 竟然开源并且 59K Star ⭐️，有点酷炫！
结合之前使用 Manim 制作的 ChatGPT 图解原理实现教程搭配使用，感觉极佳啊 https://youtube.com/watch?v=wjZofJX0v4M
https://github.com/3b1b/manim
Source Twitter @tuturetom
#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #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 相关工具推荐还挺多的】
科技爱好者周刊（第 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 相关工具推荐还挺多的】
#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #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 周报】
科技爱好者周刊（第 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
【评：
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. 一个不知名的开源项目可以带来多少收入？（中文） 📓 三年前，作者决定做一个开源的开发工具。三年过去了，这个项目怎么样了，赚了多少钱。 #开源
【唔姆，最近让我感兴趣的东西蛮少的】
科技爱好者周刊（第 300 期）：三十年，解决人生三大问题
1. 字幕工具箱 🧰 这个网站收集了一些字幕相关的工具，纯前端处理，无需安装任何插件或软件。 #在线工具
2. Segmentify 🧰 一个 Figma 插件，使用浏览器 GPU 能力运行 AI SAM 模型，快速分割图片，从图片中提取元素至 Figma 文件。 #AI
3. QR code designer 🧰 一个 Web 工具，用来设计二维码，可以嵌入各种文字和图形，另有一个类似工具。
4. 一个不知名的开源项目可以带来多少收入？（中文） 📓 三年前，作者决定做一个开源的开发工具。三年过去了，这个项目怎么样了，赚了多少钱。 #开源
【唔姆，最近让我感兴趣的东西蛮少的】
#优质博文 #阮一峰的科技周刊 #资源推荐 #AI
【咕咕咕咕咕咕咕咕咕咕咕不会有人知道我咕咕咕了几期】
科技爱好者周刊（第 299 期）：AI 的关键是语料
1. 空的 S3 存储桶也能产生费用（英文） 📓 亚马逊 S3 是最流行的存储云服务，作者建了一个空存储桶，万万没想到，没有写入任何数据，两天居然产生了1300美元的费用。
【 评：比较有意思的是，即使存储桶为空，被大量未授权请求攻击也会导致AWS账单激增至1300美元。 】
2. HackerNews 每日 AI 摘要 🧰 这个项目对 Hacker News 每天的热点文章，生成中文的 AI 摘要，除了官网，还会发到飞书上面。（@rmrf 投稿）
【评：挺好，订阅了 - RSS源 】
3. VideoSubtitleGenerator 🧰 一个命令行工具，通过语音识别，批量为本地的视频文件生成字幕，并支持翻译。（@buxuku 投稿）
【不晓得效果咋样嘞，有无人用下看看】
4. 海棠诗社 🧰 网友开发的诗词网站。（@javayhu 投稿）
【界面挺简洁，设计的可以】
【咕咕咕咕咕咕咕咕咕咕咕不会有人知道我咕咕咕了几期】
科技爱好者周刊（第 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?
写 bot 的时候发现个好东西，之前好像见过英文版忘记发了
https://regexr-cn.com/
AI 摘要：RegExr 是一个在线工具，用于学习、构建和测试正则表达式。它支持JavaScript和PHP/PCRE正则表达式，并提供即时的匹配结果显示。用户可以使用测试功能来验证表达式的正确性，还能保存并分享正则表达式。此外，该工具包括完整的正则表达式文档、示例和帮助，还有社区正则表达式搜索和评分功能。
——————
找到原版了：https://regexr.com/
源码在： https://github.com/gskinner/regexr
#前端 #插件推荐 #vscode #资源推荐 #tools
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
#工具推荐 如果你在使用 #Hexo、#Hugo、#Astro、#Next.js、#VitePress 等静态博客生成器，推荐你安装 VSCode 的 Front Matter 插件，为你的博客带来可视化的 CMS 管理。
写作模式下可以为 Markdown 编辑带来快捷键操作、效率提高很多，而且还可以帮你检查 SEO。
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
frontmatter.codes
Headless CMS right in your code editor | Front Matter
Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.
#优质博文 #资源推荐 #前端 #rss
12 Useful JavaScript Newsletters
已经全部订阅了，rss真是个好东西喵
via jscrambler
12 Useful JavaScript Newsletters
已经全部订阅了，rss真是个好东西喵
AI 摘要：这篇文章列举了12个非常有用的 JavaScript 新闻简报，为软件工程师、安全专家和 JavaScript 应用开发者提供了极佳的资源。其中包括 JavaScript Weekly、Jscrambler Newsletter、JavaScript Kicks、Node.js Weekly 等，每个新闻简报都有其独特的重点，如客户端安全、最新的JS框架更新、React 和 Vue 的使用技巧等。这些新闻简报不仅涵盖教程、新闻、工具和工作机会，还包括代码挑战、实用技巧和行业动态。总的来说，这些简报为保持 JavaScript 知识的最新性提供了宝贵资源。
via jscrambler
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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 投稿）
科技爱好者周刊（第 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 投稿）
科技爱好者周刊（第 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 #资源推荐 #npm
7 Tools to Choose the Right NPM Package
摘要：这篇文章介绍了7个免费工具，帮助开发者比较并选择最适合项目的NPM包。这些工具包括：
1. GitHub/GitHub Insights 提供包的受欢迎程度和维护情况的指标
2. BundlePhobia 估计包的性能影响，提供了有趣的指标，如 Bundle size （缩小和缩小+Gzip）和 Download time （3G和4G）。
3. NPM Trends 展示NPM包的下载趋势和GitHub统计数据，可同时比较很多个包
4. NPM Compare 提供更详细的多个包比较，如 Version Average ， Maintainers 的数量， Open issues 的数量和 Monthly Downloads 的数量，最后给出总分。
5. Moiva 结合多个数据源（NPM，Github，Snyk，BundlePhobia）的比较工具
6. Snyk Advisor 测量包的健康状况，从 Popularity, Maintenance, Security, Community 四个维度
7. Openbase 提供包的综合评价，此外，Openbase 提供了替代建议包和相关的教程视频。(但是这个工具没了，悲，可以用 kandi 替代)
这些工具的数据可以结合使用，以全面评估每个包的健康状况
via Medium Alexis Regnaud
7 Tools to Choose the Right NPM Package
摘要：这篇文章介绍了7个免费工具，帮助开发者比较并选择最适合项目的NPM包。这些工具包括：
1. GitHub/GitHub Insights 提供包的受欢迎程度和维护情况的指标
2. BundlePhobia 估计包的性能影响，提供了有趣的指标，如 Bundle size （缩小和缩小+Gzip）和 Download time （3G和4G）。
3. NPM Trends 展示NPM包的下载趋势和GitHub统计数据，可同时比较很多个包
4. NPM Compare 提供更详细的多个包比较，如 Version Average ， Maintainers 的数量， Open issues 的数量和 Monthly Downloads 的数量，最后给出总分。
5. Moiva 结合多个数据源（NPM，Github，Snyk，BundlePhobia）的比较工具
6. Snyk Advisor 测量包的健康状况，从 Popularity, Maintenance, Security, Community 四个维度
7. Openbase 提供包的综合评价，此外，Openbase 提供了替代建议包和相关的教程视频。(但是这个工具没了，悲，可以用 kandi 替代)
这些工具的数据可以结合使用，以全面评估每个包的健康状况
via Medium Alexis Regnaud
Medium
7 Tools to Choose the Right NPM Package
A list of 7 free tools that will help you compare and choose the best NPM package for your project.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 294 期）：崖门海战的感想
1. Web 组件如何适配 JS 框架（英文） 📓 Web 组件是浏览器原生的组件格式，本文介绍怎么将这种格式用于各种 JS 前端框架。
2. CSS 的悬挂标点属性（英文） 📓 如果标点正好在行首或行尾，是否要跟上下文对齐？这就要用到 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 读者」😀
科技爱好者周刊（第 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.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 293 期）：一周是一年的2%
1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。
科技爱好者周刊（第 293 期）：一周是一年的2%
1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。
Weberdominik
Vertical tabs in Visual Studio Code
With vertical tabs it's possible to have an overview over much more open files. Here's how to get it in VS Code.
Lummi | AI 人工智能生成图库，完全免费可商用！
网站地址 🔗 https://www.lummi.ai/
Lummi是一个AI人工智能生成的图库，所有图片都完全免费且可商用。该图库有着丰富的色彩搭配和精细的构图设计，甚至有摄影大作的感觉。涵盖各行业的如人物、动物、实物、风景、艺术等主题的图片在库中都能找到，并且是通过AI生成的，特别适合需要寻找免费商用图片的朋友们以及博主们。如果你是Figma的设计师，还可以使用专用的Lummi插件进行图片搜索，操作方便，简化了下载和使用流程，整体体验跟 Unsplash 图库很像
via Boss设计
