---
title: 2024-W03-编程篇
category: 周报
slug: 2024-W03-programming
description: >-
  本篇内容涵盖了多个编程相关的资源和工具，包括头像生成网站、rabbit
  it图片生成应用、AI生成情绪板、开源用户界面元素、1000个令人激动的网站等。此外，还介绍了如remotion视频制作工具、TypeScript-Node-Starter示例、Konva
  Canvas框架等技术资源。同时，提供了多个个人主页和博客推荐，以及关于REST
  API与GraphQL的讨论。这些资源和工具覆盖了前端开发、UI设计、视频制作等多个领域，适合编程爱好者和技术开发者参考和学习。
date: 2024-07-11T02:17:53.450Z
tags:
  - css
  - html
  - javascript
  - docker
  - cloudflare
  - ant game engine
  - ipx
  - packery
  - bento
  - node
  - gameboy style portfolio
toAstro: true
astroType: post
date_created: 2025-01-04T03:34:08.000Z
date_modified: 2025-02-19T03:44:23.000Z
---

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