Weekly #032
文章推荐
What is safe alignment in CSS?
https://frontendmasters.com/blog/what-is-safe-alignment-in-css
本篇文章介绍了 CSS 中的 safe 关键词在布局中的作用。safe 关键词通常与其他对齐关键词一起使用，用于防止内容被定位到用户无法滚动查看的位置，避免出现数据丢失的情况。文章通过示例和演示展示了在 flex 布局中使用 safe 关键词的效果，说明了其在保证内容可见性的重要性。这种安全对齐的机制可以确保用户始终能够滚动到内容，避免内容超出屏幕而无法查看的问题。
CSS Button Styles You Might Not Know
https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know
本篇博文介绍了一些在样式化按钮时可能不为人所知的 CSS 样式。作者分享了如何使用 touch-action 避免页面缩放、如何使用 user-select 属性禁止文本选择、如何通过 ::file-selector-button 伪元素样式化文件上传按钮、以及如何改进按钮的焦点状态等。此外，作者还强调了使用 inline-size 替代 width，并分享了一些关于 CSS 逻辑属性和值的知识。
You Want border-color: transparent, Not border: none
https://frontendmasters.com/blog/you-want-border-color-transparent-not-border-none
本文介绍了在网页开发中如何处理元素的边框，特别是针对具有边框的交互式表单控件（如输入框、按钮等）。作者建议避免使用 border: 0、border: none 或 outline: none 来移除边框，而是推荐使用 border-color: transparent，以确保在高对比模式下具有良好的可访问性。高对比模式是许多视力受限用户使用的功能，对于他们来说，适当的边框可以带来更好的体验。通过设置边框颜色为透明，可以保证在高对比模式下元素仍然清晰可见，而对于普通用户来说几乎无感知。此外，文章还介绍了如何使用 forced-colors 媒体查询来检测高对比模式并进行相应的样式调整，以及如何在浏览器中模拟高对比模式进行测试。
Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style
https://frontendmasters.com/blog/menus-toasts-and-more
本文介绍了使用 Popover API 构建下拉列表、菜单、工具提示、组合框和 toast 等 UI 组件的方法。Popover 属性可以应用于任何 HTML 元素，并且通过 invoketarget 属性实现打开和关闭弹出框。弹出框具有轻解除功能、焦点管理和浏览器支持等特点。开发人员可以使用自定义操作和 JavaScript 事件对弹出框进行更灵活的控制和操作。此外，文章还介绍了弹出框的默认样式和方法以及事件。整体而言，Popover API 提供了一种便捷且功能丰富的方式来创建各种 UI 组件，为开发者带来了更好的用户体验和操作控制。
工具介绍
VIVY
https://github.com/liriliri/vivy-docs
VIVY 是一款基于 Stable Diffusion API 的重写 Stable Diffusion Web UI 用户界面的桌面应用程序。支持 Windows x64 和 Mac arm64 系统。用户需要自行下载模型文件并放置于相应文件夹以正常使用。VIVY 具有许多功能，包括与 Stable Diffusion WebUI 集成、提示编辑的高亮显示和 Danbooru 标签自动补全等。同时还提供了便捷的图像生成任务队列、图像库浏览、可调整的用户界面、CPU 和内存使用监控以及模型文件管理等功能。
Y-TOC
https://github.com/struy-cn/Y-TOC
Y-TOC 是一个内容目录海报美化生成工具，用户可访问 https://toc.struy.cn 使用。该工具支持填写目录内容后生成分享图保存，可用于付费内容或课程的总览展示。最新特性包括支持 5 种颜色主题切换、本地缓存功能以及新增批量输入目录内容功能。用户只需一次粘贴整理好的目录内容，工具会自动排序，提高效率。
YT Pics
YT Pics 是一款快速、可靠、用户友好的工具，旨在轻松提取和下载任何 YouTube 视频中的高质量图片。这款工具支持下载图片、缩略图和字幕，让用户可以轻松地保存他们喜爱的 YouTube 视频中的精彩画面。
automd
https://github.com/unjs/automd
automd 是一个自动化的 Markdown 维护工具，它主要使用 TypeScript 和 JavaScript 开发，旨在简化 Markdown 文件的管理和维护流程，提高文档编写效率。
Penrose
Penrose 是一个让用户通过简单的数学符号文本输入来创建美观图表的平台。其目标是让非专家也能轻松制作高质量图表，并深入理解复杂的技术概念。
PicHome
https://github.com/zyx0814/Pichome
PicHome 是一款可以快速创建在线图库、音视频库和文库的程序。它可以帮助你将文件快速生成展示网站，实现在任何地点、任何设备上的浏览和多人的共享。PicHome 的特点是你可以指定一个文件目录，它会自动根据目录结构生成展示网站，并支持添加颜色、标签、描述和评分等信息。同时，它还支持 Eagle 库和 Billfish 库，可以将它们自动生成展示网站，并保留原有的信息。
Dropflow
https://github.com/chearon/dropflow
Dropflow 是一款 CSS 布局引擎，用于探索基本 CSS 标准（包括内联元素、块级元素、浮动、定位以及表格等）的潜力。它具有高质量的文本布局实现，能够显示世界上的多种语言。你可以使用它在后端通过 Node 和 node-canvas 生成 PDF 或图像，或者在浏览器中向画布渲染丰富的换行文本。
LLMdantic
https://github.com/firattamur/llmdantic
LLMdantic 是一个强大高效的 Python 库，旨在简化将大型语言模型（LLMs）集成到项目中的过程。它基于 Langchain 包构建，利用 Pydantic 模型的强大功能，为与 LLMs 合作提供了无缝且结构化的方法。主要特点包括：支持广泛的 LLM 通过 Langchain 集成、使用 Pydantic 模型确保数据完整性、模块化可扩展的设计、OpenAI 模型的成本跟踪和优化、高效的批处理处理多个数据点、稳健的重试机制。
Avatartion
Avatartion 是一个免费工具，可以帮助用户创建定制化的 Notion 风格头像，包括发型、眼睛、嘴巴、服装、配饰等各种元素。用户可以把这些作为自己在社交媒体上的头像。
Knowledge
https://github.com/raphaelsty/knowledge
Knowledge 一个开源的个人书签搜索引擎项目。它能够自动从各种社交媒体平台提取内容，包括 GitHub、HackerNews、Zotero 和 Twitter，并创建一个搜索引擎，结合知识图谱，使用户能够浏览文档并自动提取标签。该项目每天通过 GitHub 操作工作流程调用 Twitter、GitHub、HackerNews 和 Zotero 的 API 来提取用户标记的存储库、点赞帖子、上传文档和喜欢的推文。
Wiggle Tools
Wiggle Tools 是一个旨在提供简单可视化工具的免费开源平台，它提供了一系列简化版的视觉资源制作工具，如矢量动画软件 Wiggle Animate。其使命是创建易于访问、互动愉快且永久免费使用的强大创意工具。这些工具旨在实现特定任务，与市场上的其他大型工具箱相比，它们具有较小的学习曲线、快速启动时间以及更少的干扰，让使用者专注于创作简单视觉作品。
Emojisplosion
Emojisplosion 是一个可以在网页上像烟花一样爆炸出各种表情符号的包。用户可以通过简单模式或高级模式来使用，简单模式只需在网页的末尾添加一个 script 标签即可实现表情符号的爆炸效果，而高级模式则需要使用现代 JavaScript 打包工具来导入并调用相应的函数。每次爆炸都会在页面的随机位置产生大约十几个随机表情符号，并且这些符号会以动画的方式移动和消失。
Claude Export
https://github.com/ryanschiang/claude-export
Claude Export 是一个用于将 Claude 对话转换为 Markdown、JSON 和 PNG 格式的浏览器脚本，以便分享和导出聊天记录。用户只需在浏览器控制台中粘贴相应的代码，即可实现对话的导出和分享，所有行为都在本地进行，不会将数据发送到任何服务器。
Upscale Media
Upscale Media 是一款高性能 AI 图像增强工具，可以提高图片质量，增加图像分辨率，增强图像呈现效果。它由 PixelBin.io 推出，具有成熟且强大的图像处理能力。该工具支持多种格式，如 PNG、JPEG、JPG、WEBP 和 HEIC 等。此外，它还提供了网页版和移动 APP 客户端，方便用户在不同场合使用。
Prompt Injection Testing Tool
https://github.com/AnthenaMatrix/Prompt-Injection-Testing-Tool
Prompt Injection Testing Tool 是一个旨在评估 AI 系统对常用于注入攻击的用户提示的处理安全性的 Python 脚本。该工具利用 OpenAI GPT-3.5 模型生成系统对用户提示对的响应，并将结果输出到 CSV 文件以进行分析。用户需要配置 API 密钥、系统提示内容、用户提示文件路径等参数后，运行脚本即可完成测试。通过检查生成的 CSV 文件，可以分析响应并识别 AI 系统的潜在漏洞。
资源汇总
css2wind
css2wind 是一个学习 Tailwind CSS 的迷你游戏，通过猜测如何使用 Tailwind CSS 编写 CSS 属性来提高技能。游戏中有八个 CSS 属性需要完成，通过简单的输入和回车操作，您可以快速学习如何用 Tailwind CSS 编写常见的 CSS 属性。
magick.css
https://github.com/wintermute-cell/magick.css
magick.css 是一个极简的 CSS 框架，设计简洁易懂，单文件内包含所有样式，并附有注释。它旨在实现优雅而具有魔幻玩味的外观，同时最大化可读性和信息传达能力。框架在所有设备和屏幕尺寸上保持美观且功能完善，无需 JavaScript 支持。受到 LaTeX、老式 TTRPG 规则书、CSS 框架（如 concrete.css 和 Tufte CSS）以及“可用性即设计”的布鲁塔利主义道德的启发。可通过 CDN 或本地文件添加到项目中使用。