---
title: 2024-W03.md
slug: 2024-W03
category: 周报
published: true
description: >-
  本内容涵盖了多个应用推荐和开发相关资源，包括cmd-wrapped、Input Source
  Pro、outline知识库应用等，以及开发工具如头像生成网站和Moodboard Creator。此外，还介绍了多个技术博客和教程，如REST API
  vs GraphQL的比较、Astro自动生成Open
  Graph图片的方法，以及Docker入门实践等。这些资源和教程旨在帮助开发者提高效率，优化工作流程，并探索新技术。
date: '2024-01-15T00:00:00.000Z'
finished: true
---

# 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/)
