Eyoz

Weekly #026


文章推荐

Astro 自动生成 Open Graph & Twitter card 图片

https://liruifengv.com/posts/astro-auto-gen-og-image

本文介绍了如何使用 Open Graph 和 Twitter card 协议在社交媒体上分享链接时自动生成预览图。通过 Endpoint 在构建 SSG 时调用生成图片函数,使用 Satori 按照固定模板生成图片,并配置了中文字体和支持 emoji 的功能。最后,通过 layout 和 markdown 文章 frontmatter 配置生成了 OG 所需的 HTML meta 标签,实现了自动生成图片的功能。

The Complex But Awesome CSS border-image Property

https://www.smashingmagazine.com/2024/01/css-border-image-property

这篇文章介绍了 CSS 的 border-image 属性的用法和技巧。作者通过多个例子演示了如何利用 border-image 属性创建各种装饰效果,包括渐变叠加、全宽背景、标题装饰、图像装饰等。文章强调了 border-image 属性的复杂语法和灵活性,同时提醒读者需要花时间理解和掌握这一属性。

How to center an element in CSS without adding a wrapper in HTML

https://bejamas.io/blog/centering-elements-without-wrapper-in-css

这篇文章介绍了在 CSS 中居中元素的两种方法:使用 display:table 属性和 max-content 关键字。作者解释了这两种方法的原理和用途,并提供了使用示例和建议。同时,作者还介绍了一个新的 CSS 特性,可以在不需要额外包裹元素的情况下实现垂直居中。最后,作者总结了使用这些技巧的好处和适用场景。

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view

这篇文章介绍了如何使用 CSS 创建滚动动画,无需使用框架或 JavaScript。作者展示了如何利用 scroll()view() 函数将动画与滚动交互相连接,以实现颜色、位置、可见性等的过渡效果。文章涵盖了从基本的无限旋转动画到更复杂的滚动驱动动画的实现方法,并提供了示例和代码。

工具介绍

Privy

https://github.com/srikanth235/privy

Privy 是一个隐私优先的编码助手,支持通过本地平台运行 LLM,并提供了 AI 聊天、代码解释、单元测试生成、bug 查找和错误诊断等功能。用户需要在 Privy 扩展的设置中配置平台类型、平台 URL 以及所选的 LLM 模型,还可以使用自定义模型。

Marvin

https://github.com/prefecthq/marvin

Marvin 是一个轻量级的 AI 工具包,用于构建可靠、可扩展且易于信任的自然语言接口。它提供了各种工具,涵盖文本、图像、音频等多种领域,能够解决实体提取、分类、生成合成数据等复杂问题。Marvin 旨在为开发人员提供出色的开发体验,使他们能够轻松地将 AI 魔法整合到传统软件项目中。

Curlwind

https://curlwind.com

Curlwind 是一个可以根据需求生成定制 Tailwind CSS 样式表的工具,能够减少不必要的 CSS 实用类,提高网站加载速度。用户可以通过在 URL 中添加参数来获取特定的样式表,也可以生成不带 Tailwind 的初始样式表,还可以生成带有前缀的实用类,以及未压缩的样式表。生成的样式表将会被永久缓存,以确保网站保持快速加载。

RunComfy

https://www.runcomfy.com

RunComfy 是一个能够自动设置 ComfyUI 工作流程的云端环境,确保无红色错误,释放创造力。RunComfy 提供多种准备好的 ComfyUI 工作流程,包括视频到视频动画、图像到视频动画和文本到视频动画,满足用户的不同需求。RunComfy 还提供自动化的 ComfyUI 设置和配置,用户只需上传他们的工作流程,RunComfy 就会自动处理技术细节,为其准备个性化的工作流程,同时提供技术支持和开发者 API。

Carvimage

https://www.carvimage.com

Carvimage 是一个可以将图片编码成 Base64 格式的在线工具,旨在优化网页图片,提高加载速度。对于中大尺寸的图片,Carvimage 会将图像大小调整为最大宽度或高度为 1080px,以减小文件大小。用户最多可以选择 10 张图片,并通过点击复制按钮,将编码后的图片地址粘贴到 <img>src 属性中。支持 JPEG、PNG、WEBP 和 SVG 等图片格式,并且所有处理均在客户端完成,不会将数据发送至服务器。

coverart.lol

https://coverart.lol

coverart.lol 是一个能够在几秒钟内为你的 Spotify 播放列表生成精美封面艺术的工具。这个工具可以帮助用户快速制作专属的音乐播放列表封面,让用户的播放列表更加个性化。

CryptoFrame

https://github.com/x011/CryptoFrame

CryptoFrame 是一个旨在实现高度安全的视频隐写术的命令行程序。它使用多层加密技术将隐藏的文本消息嵌入视频文件中,采用七层 AES-256 加密和 RSA 加密,确保隐藏数据的保密性和完整性。支持的输入视频格式包括 AVI、MKV、MOV、MP4、OGG、WMV 和 WEBM,输出限定为 AVI、MOV 和 MKV 等无损格式。工具提供 FFV1 和 HFYU 两种无损编解码器,并结合 LSB 隐写术和强大加密技术,为安全隐秘通信提供了强大工具。

资源汇总

Minimal

https://github.com/ekmas/minimal

Minimal 是一个基于 Astro 开发的极简博客主题。它具有 Astro v4、Tailwind 样式、响应式和 SEO 友好、支持深色/浅色模式、MD 和 MDX 文章、Shiki 代码语法样式等特性。用户可以通过配置文件自定义网站元数据、颜色主题和代码块样式,同时支持 MD 和 MDX 格式的文章发布。

LoaderShip

https://www.loadership.com

LoaderShip 是一个旨在帮助开发者定制和生成网站加载动画的配置工具。LoaderShip 提供丰富的加载器样式选择,无需登录即可免费使用,而且生成的加载器不需要额外的依赖。用户可以实时预览并自定义加载器样式,最终将生成的 HTML 和 CSS 代码复制粘贴到自己的项目中使用。

HackerNoon Pixel Icon Library

https://www.figma.com/community/file/1278952394341234192/pixel-icon-library-1440-pixelated-icons-by-hackernoon

HackerNoon Pixel Icon Library 是一个收藏了 1440+ 个像素化图标的开源项目,这些图标在 24 像素的网格上精心设计,确保完美对齐和一致性。这些图标受 HackerNoon 复古设计风格的启发,捕捉了互联网早期的精髓。图标库包含 360+ 个独特的像素化矢量图标,具有清晰的组件结构,可以通过 GitHub 仓库直接使用或通过 NPM 包安装,同时具有轻量级的 SVG 文件。

随便看看

怪物:一百三情飞龙侍极

https://www.netflix.com/title/81733654

怪物:一百三情飞龙侍极