Weekly #039
文章推荐
Beyond CSS Media Queries
https://www.smashingmagazine.com/2024/05/beyond-css-media-queries
本文讨论了响应式布局中除了 CSS 媒体查询之外的现代技术。虽然媒体查询仍然在响应式设计中发挥重要作用，但现代技术提供了更多选择，如 Flexbox、Grid、响应式单位、数学函数以及容器查询。作者指出，媒体查询存在一些局限性，包括焦点在视口、管理困难以及不够灵活。因此，建议开发人员结合现代技术替代媒体查询，如利用 Flexbox 和 Grid 实现布局、使用数学函数和响应单位控制元素大小，以及展示容器查询的潜力。
Using the Popover API for HTML Tooltips
https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips
本文介绍了如何使用 Popover API 在 HTML 中实现工具提示的方法。通过 HTML 和 CSS 的结合，可以创建灵活且包含任何 HTML 内容的工具提示。文章详细介绍了在 HTML 中使用 <button> 元素作为触发器，并结合 JavaScript 进行鼠标悬停延迟和定位的实现。通过这种方法，可以为用户提供更加交互式和可访问的工具提示体验。
Anchor Positioning and the Popover API for a JS-Free Site Menu
https://css-irl.info/anchor-positioning-and-the-popover-api
这篇博客介绍了在 CSS 中如何利用锚定定位和弹出框 API 来创建无需 JavaScript 的网站菜单。通过锚定定位，我们可以相对于页面上的任何锚定元素来定位一个元素，而不仅仅是相对于其最近的定位祖先。结合弹出框 API，我们可以创建更具可访问性的网站，而无需额外的 JavaScript。文章还讨论了如何利用过渡效果和新特性来实现弹出框的动画效果。
The Times You Need A Custom @property Instead Of A CSS Variable
https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable
本文介绍了在设计复杂、精细动画时，为什么需要使用自定义属性 @property 而不是 CSS 变量。作者通过示例演示了自定义属性相较于变量更适用的情况，并展示了自定义属性提供的更大自由度和灵活性。文章中讨论了如何利用 @property 实现更复杂的动画效果，例如颜色渐变和文本滑动动画。
工具介绍
Sixelf
Sixelf 是一个设计活动追踪平台，类似于 Github 对于设计师的贡献。用户可以连接多个 Figma 账户和文件，在其个人主页展示设计项目和贡献，并分享给他人。这个平台旨在帮助设计师记录和展示他们的设计活动，让用户能够更好地展示自己的设计能力。
Codemap
Codemap 是一款代码可视化工具，能将任何代码库呈现为直观的图形，帮助软件工程师快速了解代码架构，并且支持 Typescript、Python、Ruby、Go 和 Terraform 等多种语言。
demo.fun
demo.fun 是一款交互式 SAAS 产品演示工具，无需安装软件，直接在浏览器中录制和分享演示视频。拥有强大的云端剪辑功能，可实现非线性编辑、动画弹窗和合成语音，以及动态平移缩放动画和速度控制等特性。
viewpoint
Viewpoint 是专为 LLMs 提供全面分析的服务平台，包括使用情况、成本分析、延迟和流量监控等功能。用户可以跟踪不同数据类型，了解模型的功能情况，并识别改进的机会。此外，Viewpoint 还提供便捷的 LLM 切换功能，帮助用户选择最适合其应用程序的 LLM 提供商。
Still Manim
Still Manim 是一个用于创建数学动画的工具，提供了丰富的绘图函数和动画效果。用户可以通过简单的代码创建复杂的图形和动画，展示数学概念和公式。
God Mode AI
God Mode AI 是一款自动创建游戏动画的工具，为游戏开发者提供了优化的游戏动画解决方案。它支持各种功能，并且深度优化以适应游戏开发需求，可直接在 Unity 等引擎中使用。通过 God Mode AI，用户可以轻松实现角色动作的一致性，自动去除背景。
Promptchains
Promptchains.ai 是一款革命性的 AI 工作流可视化构建工具，旨在通过提示链条的方式释放 AI 的潜力。用户可以将复杂任务转化为智能解决方案，实现 AI 的应用承诺。该工具支持串联多个提示以塑造可预测的输出，同时集成搜索引擎、文档上传、变量设置等功能，使得创建复杂的 AI 工作流变得简单易行。
AI CSS Animations
https://www.aicssanimations.com
AI CSS Animations 是一个利用 AI 帮助用户创建 CSS 动画的工具。通过输入文本或语音描述所需动画效果，即可生成对应的 CSS 代码，并可通过实时预览调整动画效果。
Stargazers Analysis
https://github.com/latitude-dev/stargazers-analysis
Stargazers Analysis 是一个通过 Github API 和 Python 脚本来获取 Github 仓库关注者信息的项目。通过设置必要的环境和运行脚本，您可以收集并分析存储库的关注者数据，以便更好地了解您的受众群体。
Pinterest Hashtag Generator
https://www.blogtopin.com/free-tools/pinterest-hashtag-generator
Pinterest Hashtag Generator 是一个旨在帮助用户找到适合 Pinterest 帖子最佳标签的工具。通过输入关键词或主题，生成器会建议相关和热门的标签，以增加 Pinterest 帖子的可见性和影响力。
资源汇总
Repo Fast
Repo Fast 是一个集合了现代编码样板的平台，提供了各种准备好的样板供您的下一个项目使用，涵盖了前端、后端、移动端开发的各种需求。所有的样板都经过社区审核和验证，确保质量可靠。
Photobox
https://github.com/cloudinary-community/photobox
Photobox 是一个基于 Next.js 和 Cloudinary 构建的照片库和交互式编辑器项目。该项目提供类似 Google Photos 的功能，包括图库展示、AI 编辑、滤镜效果、拼贴、动画等特性。通过配置环境变量，可以定制化项目，包括标题、标签和文件夹等组织方式。
LLM Prompts
https://git.sr.ht/~jamesponddotco/llm-prompts
这个仓库收集了一系列与 LLMs 结合使用的提示，以提高生产力和简化各种任务。涵盖编码、写作评论、语法检查等多个领域。虽然最初是使用 Anthropic 的 Claude 3 Opus 模型编写和测试的，但应与任何 LLM 兼容。