---
toAstro: true
astroType: post
published: true
toWexin: null
toJuejin: null
toZhihu: null
title: 2024-W03
slug: 2024-W03
category: 周报
description: >-
  本内容涵盖了多个应用推荐和开发相关资源，包括 cmd-wrapped、Input Source Pro、outline
  知识库应用等，以及开发工具如头像生成网站和 Moodboard Creator。此外，还介绍了多个技术博客和教程，如 REST API vs GraphQL
  的比较、Astro 自动生成 Open Graph 图片的方法，以及 Docker
  入门实践等。这些资源和教程旨在帮助开发者提高效率，优化工作流程，并探索新技术。
date: '2024-07-11T02:17:53.451Z'
finished: true
tags:
  - chase-trend
  - css
  - devv.ai
  - ffmpeg
  - flutter
  - fuxiang
  - github
  - hackernews
  - html
  - java
  - javascript
  - linktree
  - n8n
  - node.js
  - open-source
  - react
  - react-native
  - twitter
  - typescript
date_created: 20250104
date_modified: 20250304
---

# 2024-W03  

## 应用推荐

### [cmd-wrapped](<https://github.com/YiNNx/cmd-wrapped>)

[推特地址](<https://twitter.com/hitw93/status/1745801804204666924?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)  
![img_77.png](<https://pictures.kazoottt.top/2024/07/20240720-img_77.png>)

### [Input Source Pro](<https://inputsource.pro/zh-CN>)

自动切换输入法加上适时的提示，让每一次输入都游刃有余。

![img_51.png](<https://pictures.kazoottt.top/2024/07/20240720-img_51.png>)

### [outline 一个知识库应用](<https://github.com/outline/outline>)

为成长型团队提供最快的知识库。美观、实时协作、功能丰富且兼容 Markdown。

![img_28.png](<https://pictures.kazoottt.top/2024/07/20240720-img_28.png>)

[官网地址](<https://www.getoutline.com/>)

特点：

- 一个极快的编辑器，具有 Markdown 支持、斜杠命令、交互式嵌入等。.....
- 与团队成员实时协作处理文档。评论和话题使对话井井有条。
- 将文档嵌套在层次结构中，自动构建反向链接网络，并在几毫秒内搜索所有内容。
- 在不离开聊天的情况下搜索、共享和提问您的文档。文档更新时，将通知发布到频道。
- 通过链接公开共享文档，或与团队私下共享文档。使用您自己的品牌颜色、徽标和域名。

### [一个帮你一次提交 100 多个目录站的目录站](<https://twitter.com/readyfor2025/status/1747297388476395636?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

[应用地址](<https://www.affordhunt.com/>)

![img_29.png](<https://pictures.kazoottt.top/2024/07/20240720-img_29.png>)

### [画图工具 - whimsical](<https://whimsical.com/>)

[推特地址](<https://twitter.com/blackanger/status/1747582658052522089?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_36.png](<https://pictures.kazoottt.top/2024/07/20240720-img_36.png>)

## 开发相关

### [头像生成网站](<https://vue-color-avatar.leoku.dev/>)

[github 地址](<https://github.com/Codennnn/vue-color-avatar>)

![img_79.png](<https://pictures.kazoottt.top/2024/07/20240720-img_79.png>)

### [一个用于生成 rabbit it 图片的应用](<https://rabbit-it.zeabur.app/>)

[github 地址](<https://github.com/michaelyuhe/rabbit-it>)

![img_78.png](<https://pictures.kazoottt.top/2024/07/20240720-img_78.png>)

### [Moodboard Creator —— AI 生成情绪板](<https://www.moodboardcreator.dev/>)

![img_60.png](<https://pictures.kazoottt.top/2024/07/20240720-img_60.png>)

[推特地址](<https://twitter.com/ftium4/status/1746419029961814098?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

### [适用于任何项目的开源用户界面元素](<https://uiverse.io/>)

![img_59.png](<https://pictures.kazoottt.top/2024/07/20240720-img_59.png>)

### [1000 个令人激动的网站](<https://supercreative.design/1000-inspiring-websites>)

[推特地址](<https://twitter.com/hitw93/status/1746684118350635286?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)  
![img_57.png](<https://pictures.kazoottt.top/2024/07/20240720-img_57.png>)

### [shadcn 脚手架](<https://tx.shadcn.com/>)

官网界面：

![img_54.png](<https://pictures.kazoottt.top/2024/07/20240720-img_54.png>)

包含内容：

![img_56.png](<https://pictures.kazoottt.top/2024/07/20240720-img_56.png>)

[推特链接](<https://twitter.com/vikingmute/status/1746705772493656097?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_55.png](<https://pictures.kazoottt.top/2024/07/20240720-img_55.png>)

### [stefanjudis - 推荐博客](<https://www.stefanjudis.com/>)

界面美观，内容有价值，可以关注一下。也可以订阅他的 newsletter。

![img_46.png](<https://pictures.kazoottt.top/2024/07/20240720-img_46.png>)

![img_45.png](<https://pictures.kazoottt.top/2024/07/20240720-img_45.png>)

这是这个作者开发维护的一个 [前端工具网站](<https://tiny-helpers.dev/>)

![img_47.png](<https://pictures.kazoottt.top/2024/07/20240720-img_47.png>)

### [REST API vs GraphQL](<https://twitter.com/dotey/status/1747310563531604043?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

[原文](<https://twitter.com/alexxubyte/status/1746932652178055607>)

![img_42.png](<https://pictures.kazoottt.top/2024/07/20240720-img_42.png>)

### [Astro 自动生成 Open Graph & Twitter card 图片😄](<https://liruifengv.com/posts/astro-auto-gen-og-image/>)

![img_37.png](<https://pictures.kazoottt.top/2024/07/20240720-img_37.png>)

该作者在这篇文章中分享了如何在 astro 中自动生成 og 图片。

在这个过程中使用了

- [satori](<https://github.com/vercel/satori>) 来将 HTML 和 CSS 转换为 SVG
- [resvg](<https://github.com/RazrFalcon/resvg>) 来将 SVG 转换为 PNG

有兴趣的可以也可以把这两个库单独看一下

### [remotion 通过写代码的方式来做视频](<https://www.remotion.dev/>)

![img_31.png](<https://pictures.kazoottt.top/2024/07/20240720-img_31.png>)

[demo 地址](<https://www.youtube.com/watch?v=deg8bOoziaE&ab_channel=Fireship>)

![img_32.png](<https://pictures.kazoottt.top/2024/07/20240720-img_32.png>)

[github 地址](<https://github.com/remotion-dev/remotion>)

### [microsoft TypeScript-Node-Starter](<https://github.com/microsoft/TypeScript-Node-Starter>)

TypeScript 和 Node 的参考示例，其中包含详细的 README，描述了如何将两者一起使用。

![img.png](<https://pictures.kazoottt.top/2024/07/20240720-img.png>)

### [henryheffernan 一个非常炫酷的个人主页](<https://henryheffernan.com/>)

![img_9.png](<https://pictures.kazoottt.top/2024/07/20240720-img_9.png>)

![img_10.png](<https://pictures.kazoottt.top/2024/07/20240720-img_10.png>)

![img_11.png](<https://pictures.kazoottt.top/2024/07/20240720-img_11.png>)

### [konva 一个 Canvas 框架](<https://github.com/konvajs/konva>)

[文档](<https://konvajs.org/>)  
Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互性来扩展 2d 上下文。

![img_13.png](<https://pictures.kazoottt.top/2024/07/20240720-img_13.png>)

### [astrofy - astro 模板](<https://github.com/manuelernestog/astrofy>)

![img_24.png](<https://pictures.kazoottt.top/2024/07/20240720-img_24.png>)

[demo 演示地址](<https://astrofy-template.netlify.app/>)

### [低调但有设计感的个人主页](<https://kbrdn.dev/en>)

![img_30.png](<https://pictures.kazoottt.top/2024/07/20240720-img_30.png>)

[github 地址](<https://github.com/kbrdn1/kbrdn.dev>)

（post 页面还在开发中）

### [快速上手的 node 框架](<https://twitter.com/vikingmute/status/1747795830923477431>)

![img_22.png](<https://pictures.kazoottt.top/2024/07/20240720-img_22.png>)

### [An overview of Cloudflare's logging pipeline](<https://blog.cloudflare.com/an-overview-of-cloudflares-logging-pipeline>)

![img_26.png](<https://pictures.kazoottt.top/2024/07/20240720-img_26.png>)

### Ant Game Engine 开源

[推特地址](<https://twitter.com/cloudwu/status/1747509339752116544?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

[github 地址 ejoy/ant](<https://github.com/ejoy/ant>)

![img_27.png](<https://pictures.kazoottt.top/2024/07/20240720-img_27.png>)

### [docker 教程 《Docker — 从入门到实践》](<https://yeasy.gitbook.io/docker_practice>)

[GitHub 地址](<https://github.com/yeasy/docker_practice?tab=readme-ov-file>)

[推特原文](<https://twitter.com/hepython/status/1747598895704625311?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_35.png](<https://pictures.kazoottt.top/2024/07/20240720-img_35.png>)

### GameBoy Style Portfolio

[介绍](<https://dev.to/matteosant_dev/my-new-portfolio-1acn>)  
[Game Boy style portfolio](<https://matteosantoro.dev/>)

### [IPX 高性能、安全且易于使用的图像优化器。](<https://github.com/unjs/ipx>)

### Bento 专题

#### Bento 风格的起始页

<https://github.com/migueravila/Bento>  
![img_70.png](<https://pictures.kazoottt.top/2024/07/20240720-img_70.png>)

#### packery: 无缝、可拖动的网格布局

<https://github.com/metafizzy/packery>

![img_72.png](<https://pictures.kazoottt.top/2024/07/20240720-img_72.png>)

### [使用 HTML、CSS 和 JavaScript 👨🏻‍💻 创建 3D 产品卡片](<https://twitter.com/flexipletech/status/1745455790667030581?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

## 阅读

### [r/SideProject](<https://www.reddit.com/r/SideProject/>)

![img_4.png](<https://pictures.kazoottt.top/2024/07/20240720-img_4.png>)

### [推荐一本行动之书，醍醐灌顶](<https://twitter.com/hiyuekun/status/1747085105037021670?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_3.png](<https://pictures.kazoottt.top/2024/07/20240720-img_3.png>)

### [玩转苹果流量生态：解锁 App 流量新密码](<https://x.com/liuyi0922/status/1747792720750682143?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_23.png](<https://pictures.kazoottt.top/2024/07/20240720-img_23.png>)

### [科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案](<https://www.ruanyifeng.com/blog/2024/01/weekly-issue-286.html?continueFlag=61db114b5bb3eda119c3b0a42a3f0791>)

作者：阮一峰  
![img_34.png](<https://pictures.kazoottt.top/2024/07/20240720-img_34.png>)

![img_33.png](<https://pictures.kazoottt.top/2024/07/20240720-img_33.png>)

### [fuxiang 对于【devv.ai 团队分享的 RAG 原理】的再整理](<https://twitter.com/fuxiangPro/status/1747242297975062666>)

![img_38.png](<https://pictures.kazoottt.top/2024/07/20240720-img_38.png>)

[devv.ai 团队分享的 RAG 原理原文](<https://twitter.com/Tisoga/status/1731478506465636749>)

### [HackerNews 趋势，Github 趋势，Google 趋势](<https://chasetrend.news/zh>)

![img_48.png](<https://pictures.kazoottt.top/2024/07/20240720-img_48.png>)

### [使用自动化工作流聚合信息摄入和输出](<https://reorx.com/blog/sharing-my-footprints-automation/#new-tweet-to-telegram>)

![img_49.png](<https://pictures.kazoottt.top/2024/07/20240720-img_49.png>)

作者使用 n8n 来进行信息聚合，并在文中做了详细的介绍，以及 n8n 工作流开源。

### [Airing -姗姗来迟的 2023 年终总结](<https://blog.ursb.me/posts/summary-2023/>)

![img_58.png](<https://pictures.kazoottt.top/2024/07/20240720-img_58.png>)

### [对 React 团队工作经历的思考](<https://gist.github.com/mondaychen/3c530604e44b9cd15e4f69735d99fef4>)

![img_61.png](<https://pictures.kazoottt.top/2024/07/20240720-img_61.png>)

[推特地址](<https://twitter.com/monday_chen/status/1740612924740137285?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

### [CSS 小教程：在网格型选择工具上添加渐变背景](<https://blog.meathill.com/tech/fe/css/css-tutorial-a-grid-select-component-with-multiple-linear-gradient.html>)

![img_65.png](<https://pictures.kazoottt.top/2024/07/20240720-img_65.png>)

### [Flutter 完整开发实战详解](<https://guoshuyu.cn/home/wx/?continueFlag=61db114b5bb3eda119c3b0a42a3f0791>)

![img_67.png](<https://pictures.kazoottt.top/2024/07/20240720-img_67.png>)

### [《Tw93-我的开源成长之旅》](<https://tw93.fun/2024-01-12/open.html>)

![img_73.png](<https://pictures.kazoottt.top/2024/07/20240720-img_73.png>)

### [𝗛𝗼𝘄 𝗗𝗡𝗦 𝗪𝗼𝗿𝗸𝘀?-DNS 是如何工作的？](<https://twitter.com/milan_milanovic/status/1745796543322435885?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

![img_74.png](<https://pictures.kazoottt.top/2024/07/20240720-img_74.png>)

### [从第一天起就在全球范围内稳步发展：Linktree 的故事](<https://startupnation.com/start-your-business/bootstrapped-global-linktree/>)

![img_76.png](<https://pictures.kazoottt.top/2024/07/20240720-img_76.png>)

### [API Vs SDK.](<https://twitter.com/alexxubyte/status/1745847854961492384?s=12&t=UKmYswdLBh4dGuqwtKAXUA>)

### [FFmpeg 教程](<https://wklchris.github.io/blog/FFmpeg/>)