mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-22 18:21:31 +08:00
191 lines
7.6 KiB
Markdown
191 lines
7.6 KiB
Markdown
---
|
||
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)
|
||
|
||
|
||
|
||
## [一个用于生成rabbit it图片的应用](https://rabbit-it.zeabur.app/)
|
||
|
||
[github地址](https://github.com/michaelyuhe/rabbit-it)
|
||
|
||
|
||
|
||
## [Moodboard Creator —— AI 生成情绪板](https://www.moodboardcreator.dev/)
|
||
|
||
|
||
|
||
[推特地址](https://twitter.com/ftium4/status/1746419029961814098?s=12&t=UKmYswdLBh4dGuqwtKAXUA)
|
||
|
||
## [适用于任何项目的开源用户界面元素](https://uiverse.io/)
|
||
|
||
|
||
|
||
## [1000 个令人激动的网站](https://supercreative.design/1000-inspiring-websites)
|
||
|
||
[推特地址](https://twitter.com/hitw93/status/1746684118350635286?s=12&t=UKmYswdLBh4dGuqwtKAXUA)
|
||
|
||
|
||
## [shadcn 脚手架](https://tx.shadcn.com/)
|
||
|
||
官网界面：
|
||
|
||
|
||
|
||
包含内容：
|
||
|
||
|
||
|
||
[推特链接](https://twitter.com/vikingmute/status/1746705772493656097?s=12&t=UKmYswdLBh4dGuqwtKAXUA)
|
||
|
||
|
||
|
||
## [stefanjudis - 推荐博客](https://www.stefanjudis.com/)
|
||
|
||
界面美观，内容有价值，可以关注一下。也可以订阅他的 newsletter。
|
||
|
||
|
||
|
||
|
||
|
||
这是这个作者开发维护的一个 [前端工具网站](https://tiny-helpers.dev/)
|
||
|
||
|
||
|
||
## [REST API vs GraphQL](https://twitter.com/dotey/status/1747310563531604043?s=12&t=UKmYswdLBh4dGuqwtKAXUA)
|
||
|
||
[原文](https://twitter.com/alexxubyte/status/1746932652178055607)
|
||
|
||
|
||
|
||
## [Astro 自动生成 Open Graph & Twitter card 图片😄](https://liruifengv.com/posts/astro-auto-gen-og-image/)
|
||
|
||
|
||
|
||
该作者在这篇文章中分享了如何在 astro 中自动生成 og 图片。
|
||
|
||
在这个过程中使用了
|
||
|
||
- [satori](https://github.com/vercel/satori) 来将 HTML 和 CSS 转换为 SVG
|
||
- [resvg](https://github.com/RazrFalcon/resvg) 来将 SVG 转换为 PNG
|
||
|
||
有兴趣的可以也可以把这两个库单独看一下
|
||
|
||
## [remotion 通过写代码的方式来做视频](https://www.remotion.dev/)
|
||
|
||
|
||
|
||
[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，描述了如何将两者一起使用。
|
||
|
||
|
||
|
||
## [henryheffernan 一个非常炫酷的个人主页](https://henryheffernan.com/)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## [konva 一个Canvas框架](https://github.com/konvajs/konva)
|
||
|
||
[文档](https://konvajs.org/)
|
||
|
||
Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互性来扩展 2d 上下文。
|
||
|
||
|
||
|
||
## [astrofy - astro 模板](https://github.com/manuelernestog/astrofy)
|
||
|
||
|
||
|
||
[demo演示地址](https://astrofy-template.netlify.app/)
|
||
|
||
## [低调但有设计感的个人主页](https://kbrdn.dev/en)
|
||
|
||
|
||
|
||
[github地址](https://github.com/kbrdn1/kbrdn.dev)
|
||
|
||
（post 页面还在开发中）
|
||
|
||
## [快速上手的 node 框架](https://twitter.com/vikingmute/status/1747795830923477431)
|
||
|
||
|
||
|
||
## [An overview of Cloudflare's logging pipeline](https://blog.cloudflare.com/an-overview-of-cloudflares-logging-pipeline)
|
||
|
||
|
||
|
||
## Ant Game Engine 开源
|
||
|
||
[推特地址](https://twitter.com/cloudwu/status/1747509339752116544?s=12&t=UKmYswdLBh4dGuqwtKAXUA)
|
||
|
||
[github地址 ejoy/ant](https://github.com/ejoy/ant)
|
||
|
||
|
||
|
||
## [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)
|
||
|
||
|
||
|
||
## 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)
|
||
|
||
|
||
|
||
### [packery:无缝、可拖动的网格布局](https://github.com/metafizzy/packery)
|
||
|
||
|
||
|
||
## [使用 HTML、CSS 和 JavaScript 👨🏻💻 创建 3D 产品卡片](https://twitter.com/flexipletech/status/1745455790667030581?s=12&t=UKmYswdLBh4dGuqwtKAXUA) |