---
title: 2024-W03-编程篇
category: 周报
slug: 2024-W03-programming
published: true
description: >-
  本篇内容涵盖了多个编程相关的资源和工具，包括头像生成网站、rabbit
  it图片生成应用、AI生成情绪板、开源用户界面元素、1000个令人激动的网站等。此外，还介绍了如remotion视频制作工具、TypeScript-Node-Starter示例、Konva
  Canvas框架等技术资源。同时，提供了多个个人主页和博客推荐，以及关于REST
  API与GraphQL的讨论。这些资源和工具覆盖了前端开发、UI设计、视频制作等多个领域，适合编程爱好者和技术开发者参考和学习。
date: '2024-01-15T00:00:00.000Z'
finished: true
---

# 2024-W03 编程篇

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

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

![img_79.png](https://pictures.kazoottt.top/2024/01/20240118-c235207fbe0176e383b8fba4f663623b.webp)

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

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

![img_78.png](https://pictures.kazoottt.top/2024/01/20240118-b1bb8fd7a34e3ef9b7fe3e83ee0f5586.webp)

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

![img_60.png](https://pictures.kazoottt.top/2024/01/20240118-24f846ee004afa05b0117c185d358ff9.webp)

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

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

![img_59.png](https://pictures.kazoottt.top/2024/01/20240118-c305ab2ba09eea43d7ab6a1433554400.webp)

## [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/01/20240118-9f1238e07f891e159a6f27556a256bca.webp)

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

官网界面：  
![img_54.png](https://pictures.kazoottt.top/2024/01/20240118-31b16f746ed4599e9e1f2d3ad08843f1.webp)

包含内容：  
![img_56.png](https://pictures.kazoottt.top/2024/01/20240118-fd28684084b0bced7533ba78213d94e6.webp)

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

![img_55.png](https://pictures.kazoottt.top/2024/01/20240118-47327483ddeb79a039b13552c371b024.webp)

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

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

![img_46.png](https://pictures.kazoottt.top/2024/01/20240118-3211d35cae80c81444575ac75f106d37.webp)

![img_45.png](https://pictures.kazoottt.top/2024/01/20240118-353d1302536d23d40bb34aa162d14d6d.webp)

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

![img_47.png](https://pictures.kazoottt.top/2024/01/20240118-f04ed05e46aaa94b7b3eac0c45d9fb7b.webp)

## [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/01/20240118-682d05781766550c93e92c5cf6f1dbb5.webp)

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

![img_37.png](https://pictures.kazoottt.top/2024/01/20240118-d914c8e2bd5b084b639cb99e50bd5d80.webp)

该作者在这篇文章中分享了如何在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/01/20240118-338db012193f106f7acb2df8cdb5b8e1.webp)

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

[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/01/20240118-38f3415f6b6fea7eac4038912134130d.webp)

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

![img_9.png](https://pictures.kazoottt.top/2024/01/20240118-e1772cdb34e0f36a49c8dfbd137af858.webp)

![img_10.png](https://pictures.kazoottt.top/2024/01/20240118-7eb6f9b3832528a37758c44c6c7e3229.webp)

![img_11.png](https://pictures.kazoottt.top/2024/01/20240118-dd8bf949663b29291658da496e89d86d.webp)

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

[文档](https://konvajs.org/)

Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互性来扩展 2d 上下文。

![img_13.png](https://pictures.kazoottt.top/2024/01/20240118-ea7293199ad4e5dc6b0776a01d9b47f3.webp)

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

![img_24.png](https://pictures.kazoottt.top/2024/01/20240118-d7c2e8b662abe6f5b82ab37a46722f30.webp)

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

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

![img_30.png](https://pictures.kazoottt.top/2024/01/20240118-23a7c071e9b3580249b17e39316671b0.webp)

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

（post页面还在开发中）

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

![img_22.png](https://pictures.kazoottt.top/2024/01/20240118-d0962920721334806c9c2b266acd7064.webp)

## [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/01/20240118-1ca3c7e114bc89026b9c2811c81eedf9.webp)

## 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/01/20240118-c67503d1a7b898c5798487dda3517bba.webp)

## [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/01/20240118-be9f33aa60c0c1a68129043293ec2c3a.webp)

## 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/01/20240118-3c71ad3036529d2603159ea0ca5364a5.webp)

### [packery:无缝、可拖动的网格布局](https://github.com/metafizzy/packery)

![img_72.png](https://pictures.kazoottt.top/2024/01/20240118-38f3415f6b6fea7eac4038912134130d.webp)

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