Weekly #036
文章推荐
Sliding 3D Image Frames In CSS
https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css
本文介绍了如何使用 CSS 创建具有 3D 效果的图像框架，通过应用巧妙的 CSS 技巧，只使用单个 <img> 标签，实现了图像的展示和滑动效果。作者通过调整 padding、box-shadow、clip-path 等属性，构建出一个覆盖在图像上方的虚拟遮罩，实现了图像的展示和隐藏动画。
Things That Can Break aspect-ratio in CSS
https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css
本文介绍了 CSS 中的 aspect-ratio 属性，该属性自 2021 年以来已得到全面支持。作者讨论了在使用 aspect-ratio 时可能出现的问题和破坏因素，包括设置两个维度、拉伸元素以及内容导致的高度强制。文章重点强调了如何正确应用 aspect-ratio 属性以避免意外结果，并展示了一些实例。
How to think about HTML responsive images
https://danburzo.ro/responsive-images-html
本文介绍了 HTML 中响应式图片的概念和实现方法，主要通过 srcset、sizes、picture、source 等属性和元素来实现不同环境下的自适应图片显示。文章从简单到复杂地介绍了响应式图片的基本原理和实现方式，涵盖了单一分辨率图片、多分辨率图片、动态图片密度以及使用 <picture> 元素的相关内容。
Infinite-Scrolling Logos In Flat HTML And Pure CSS
https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css
本文介绍了如何通过纯 CSS 和少量 HTML 实现无限滚动的 logo 展示效果。作者通过设置容器、定位图像元素、编写 CSS 动画等步骤，展示了如何创建一个循环滚动的 logo 展示效果。文章中强调了避免使用已被弃用的 HTML <marquee> 元素，而是利用 CSS 来实现类似的功能。通过设置容器样式、定义动画效果以及计算滚动间距等方法，实现了一个简洁的、纯 CSS 的无限滚动 logo 展示效果。
工具介绍
Minard
Minard 是一个自然语言数据可视化平台，旨在满足 LLM 时代的需求。用户可以通过 Minard 轻松地将数据进行可视化呈现，例如通过导入 wheat.csv 或 stocks.csv 等文件，来为用户提供更加便捷的操作体验。
Logpipe
https://github.com/EmNudge/logpipe
Logpipe 是一个用于检查开发日志的工具。通过安装 Logpipe，开发人员可以清晰地查看日志，实现对日志的语法高亮、标签化和相关日志分组等功能，从而帮助开发者更有效地分析和理解日志信息。此外，Logpipe 还支持参数设置，如选择特定端口、自定义页面标题等，以及解决标准错误输出导致日志无法捕获的问题。
Revideo
https://github.com/redotvideo/revideo
Revdeo 是一个使用 TypeScript 创建视频的工具，是基于 Motion Canvas 库进行扩展而来。与具有限制性许可的 Remotion 不同，Revdeo 使用 HTML Canvas API 和生成器函数，具有集成和编辑音频的能力，提供渲染参数化视频的 API。另外，Revdeo 通过 Posthog 匿名跟踪视频渲染情况，以便了解工具的使用情况。
Autofillr
Autofillr 是一款基于 AI 的 Chrome 插件，可帮助用户在填写表单时实现快速、准确且无错误的自动填充。用户可在各个网站上体验无缝浏览，节省时间。Autofillr 让用户告别手动输入错误，让表单自动填充变得更加顺畅。
Bange.io
Bange.io 是一款利用 AI 来求职的工具，能够帮助用户快速高效地定制简历和求职信。该平台提供简单易用的工具和实时预览效果，同时提供各行业专业模板选择。通过 Bange.io，用户可以根据具体岗位要求，优化个人简历和求职信，突出关键技能和经验，提高求职成功率。
Difftastic
https://difftastic.wilfred.me.uk
Difftastic 是一个开源的结构化 diff 工具，它基于语法而不是逐行比较文件。通过使用 tree-sitter 解析代码，Difftastic 能够生成准确的 diff，更容易让人理解。它可以理解内部表达式的变化，忽略格式变化，可视化包装变化，并展示实际的行号，并且支持多种编程语言和文件格式。
AgentRun
https://github.com/Jonathan-Adly/AgentRun
AgentRun 是一个基于 Docker Python SDK 和 RestrictedPython 的 Python 库，旨在通过一行代码轻松安全地运行 LLMs 生成的 Python 代码。它提供简单、透明且用户友好的 API 来管理隔离代码执行，自动安装和卸载依赖项，限制资源消耗，检查代码安全性以及设置执行超时，具有 97% 的测试覆盖率和完整静态类型检测。
LLM Audit
https://github.com/promptarmor/llmaudit
LLM Audit 是一个用于扫描 GitHub 仓库或本地目录中 LLMs 使用情况的 CLI 工具。它能生成综合报告，汇总统计信息，识别 LLM 提供商，并支持 Anthropic、OpenAI 和 Mistral 的 SDK 和语言。用户可通过设置环境变量和命令行指令，快速扫描仓库或目录，生成详细报告，生成的报告包括总使用次数、按 LLM 提供商的使用情况、所有者以及仓库的统计数据，而且所有处理均在本地进行，保证安全和隐私。
gitsell.dev
gitsell.dev 是一个类似于 Gumroad 的平台，可以让用户出售他们的 GitHub 存储库的只读访问权限。用户可以通过 GitHub 登录并连接他们的存储库，Gitsell 会同步存储库的详细信息，如描述和提交图。然后，用户可以将他们的存储库列出出售，简单地使用类似 git 命令的方式来操作。这个平台的目标是让用户轻松地在 GitHub 上出售他们的存储库，实现简单而便捷的交易过程。
FlowCatch
https://waveapps.xyz/flowcatch
FlowCatch 是一款高效的数据采集工具，提供直观、强大的可视化配置界面，实现本地化、隐私优先的数据收集。用户无需编码即可轻松配置和抓取网页数据，将采集任务精确定制。所有数据采集均在用户设备上进行，确保数据保密安全。同时，FlowCatch 跨平台兼容，可在各大桌面操作系统上灵活管理数据采集任务。
BlogToDoc
BlogToDoc 是一个可以帮助用户一键将任何在线博客转换为 docx 格式的免费工具。无需插件或集成，只需点击即可从 WordPress、Substack、Blogger、Ghost 等平台下载整个博客。这个工具可以帮助用户将在线博客保存到本地以供离线阅读，并且会包含图片和超链接等元素，让导出的 Word 文档更加完整。与其他工具相比，BlogToDoc 专注于简单易用的设计，无需设置或编码知识，让用户无需花费额外成本来实现网页内容的下载和存储。
LLM Scraper
https://github.com/mishushakov/llm-scraper
LLM Scraper 是一个可以使用 LLMs 将任何网页转换为结构化数据的 TypeScript 库。该库支持本地 (GGUF)、OpenAI 和 Groq 聊天模型，使用 Zod 定义模式，具有完全的 TypeScript 类型安全性。并基于 Playwright 框架，支持多页抓取时的流式传输，并提供 4 种输入模式。用户只需安装必要的依赖项，初始化 LLM，创建浏览器实例并附加 LLMScraper 即可开始使用。
SVG Encoder
SVG Encoder 是一个 SVG 编码/转换工具，可将 SVG 图形转换为不同格式，以便在 CSS 和 HTML 中使用。用户可以输入 SVG 原始代码并查看预览，然后将其转换为 URL 编码、Base64 编码等格式。
FastDownload
FastDownload 是一个快速的免费视频下载工具，可以帮助用户下载 TikTok、YouTube、Instagram 等平台上的无水印视频。该工具没有下载次数限制，支持高质量视频下载。用户可以方便地保存自己喜欢的视频内容，并且 Fast Download 不会存储或保留视频副本，保障用户隐私。
sharepreviews
sharepreviews 是一个无代码的动态 Open Graph 图片生成器，帮助用户提升链接的点击率。用户可以通过类似 Figma 的编辑器轻松设计自定义模板，也可以选择适合自己用途的预设计模板。只需提供模板 ID 和要显示的动态数据，即可生成新的图片，无需安装任何 SDK 或使用 API。
Browser VisitVault
https://github.com/dikshantrajput/Browser-VisitVault
Browser VisitVault 是一个强大的 Chrome 扩展程序，旨在通过全面跟踪和组织已访问的 URL，提升你的浏览体验。它能自动记录指定域名内访问的网址，减少手动操作，同时在网页上明显突出显示已访问链接，方便用户快速识别。此外，它提供详细的 URL 列表，实时更新浏览记录，专注于特定域名内的跟踪，最大程度减少系统资源占用，保护用户隐私。
UnTrap for YouTube
UnTrap for YouTube 是一个为个性化 YouTube 体验提供全面功能的工具，帮助用户消除不必要的干扰，恢复专注力。该工具提供超过 200 个选项，包括密码保护、定时屏蔽、临时屏蔽、自定义屏蔽列表等功能，适用于各种浏览器和设备。通过 UnTrap，用户能够在享受 YouTube 视频的同时，避免被推荐视频等干扰，实现更加专注和高效的 YouTube 体验。
Multi for Tailwind CSS
https://github.com/brandonmcconnell/tailwindcss-multi
tailwindcss-multi 是一个用于 Tailwind CSS 的插件，引入了 multi 指令，这是一个允许将多个实用类组合在一起的实用程序，简化了 HTML 代码并提高了 Tailwind CSS 代码的可读性。通过使用 multi 指令，可以将相关的实用程序类按变体分组，提供对代码功能的更清晰洞察。新的语法格式要求在 multi 指令的括号内添加引号，以确保与 Tailwind CSS 的最新版本兼容。
资源汇总
icons.run
icons.run 是一个拥有 85,000 多个开源图标的平台，用户可以通过 CDN 直接获取图标，无需导入 SVG 或字体文件。此外，该平台还支持灵活调整图标的大小和颜色，方便用户轻松地将其整合到各种项目中。
Dimidium
https://github.com/dofuuz/dimidium
Dimidium 是一个使用科学方法精心制作的终端颜色方案，旨在解决传统颜色方案中存在的可见性问题，同时保留其本质。通过调整传统颜色方案，Dimidium 解决了颜色之间的可见性问题，采用 CAM16 考虑了人类视觉的感知方面（亮度、色调），将感知亮度差异减少到一半，并均衡了色调差异，确保颜色变化更加明显。
EasyFrontend
EasyFrontend 是一个提供 600 多种免费 UI 组件的平台，用户可以通过代码编辑器选择组件来快速搭建网站。支持 Tailwind CSS、Bootstrap 和 React JS，用户可以自定义样式和调整设置，同时还可以对组件进行个性化编辑。完成项目后，可以导出为 ZIP 文件或 JSON 文件。
Interactive Tailwind
https://interactive-tailwind.com
Interactive Tailwind 是一个通过一系列 engaging exercises 来提升你 Tailwind CSS 技能的在线学习平台。通过互动式的学习体验，你可以解锁无限可能性，学习如何利用 Tailwind CSS 创建令人惊叹的布局。这个平台提供了有关字体、排版、大小、布局、Flexbox、Grid 等方面的练习，帮助你提高代码技能。你可以获得全面的练习训练路径，一次付费，永久访问。