Update docs and sort content

This commit is contained in:
github-actions[bot]
2025-02-05 07:32:40 +00:00
parent fea129eb98
commit 4f55d62fb6
151 changed files with 12263 additions and 429 deletions

View File

@ -0,0 +1,191 @@
---
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-07-11T02:17:53.450Z'
rinId: 92
finished: true
tags:
- css
- html
- javascript
- docker
- cloudflare
- ant game engine
- ipx
- packery
- bento
- node
- gameboy style portfolio
toAstro: true
date_created: 2025-01-04T11:34:08+08:00
date_modified: 2025-01-22T13:39:23+08:00
---
# 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)