AppPie

#Developers tailwindcss-motion: 为 Tailwind 项目添加简洁强大的动画效果 🔗GitHub tailwindcss-motion 是一个为 Tailwind CSS 设计的插件，旨在简化前端动画的创建过程。它提供了一套简单的动画工具集和语法，允许开发者通过预设的动画类或自定义动画来增强用户界面的交互性。 特点 • 简洁的语法设计，无需定义复杂的关键帧 • 提供实用类来内联动画化各个维度 • 包含多种预设动画效果 • 完整的 TypeScript 支持 • 文件体积小，性能高效 扩展工具 Rombo 还提供了 Chrome 扩展，可视化创建动画并导出为 Tailwind 类、纯 CSS 或 Framer Motion 代码。 该插件适用于需要在 Tailwind 项目中添加精美动画效果的开发者，无需学习复杂的动画框架，通过简单的类名组合即可实现专业级动效。 #GitHub#OpenSource#TailwindCSS#Animation 📮 频道 @AppPie

#Developers Shadcn/UI Marketing Blocks: 高效构建专业营销网站的 UI 组件库 🔗GitHub 这套工具包含了一系列响应式的、预先构建好的 UI 块，专门为营销网站设计。 这些 UI 块包括了首页、定价页、关于页、联系页、登录页和注册页等常见页面的桌面端设计。用户可以通过这些预设的 UI 块来加速网站开发的速度，确保页面设计的一致性和专业性。 #GitHub#UI 📮 频道 @AppPie

#Developers JSON Crack: 开源的 JSON 编辑器 🔗GitHub JSON Crack 是一款将 JSON 数据可视化为交互式图表的开源工具，使探索、格式化和验证 JSON 变得更加简单。 主要功能 • JSON 可视化：将数据转换为交互式图表或树形结构，支持多种数据格式输入 • 数据转换：在 JSON、CSV、YAML、XML 等格式之间无缝转换，方便数据交换 • 格式化和验证：美化并验证 JSON、YAML 和 CSV 数据，提高可读性并查找错误 • 代码生成：自动生成 TypeScript 接口、Golang 结构体、Rust serde 和 JSON Schema • JSON Schema：验证 Schema、创建模拟数据，从各种格式生成 JSON Schema • 高级工具：解码 JWT、随机化数据，执行 jq 或 JSON 路径查询 • 图像导出：将可视化图表下载为 PNG、JPEG 或 SVG 格式，方便分享 • 安全性：所有数据在本地处理，不存储在服务器上，保障隐私安全 开源许可证 MIT license。 #GitHub#OpenSource#JSON#DataVisualization 📮 频道 @AppPie

#Developers Fumadocs: 构建 Next.js 文档网站的框架 🔗GitHub Fumadocs 是一个基于 Next.js 的文档框架，专为开发者设计，提供灵活性和高性能，完美融合 Next.js 优势。 核心组件 • Fumadocs Core：处理大部分逻辑，包括文档搜索、内容源适配器和 Markdown 扩展 • Fumadocs UI：默认主题，为文档站点提供美观界面和交互组件 • Content Source：内容输入源，可以是 CMS 或本地数据层 • Fumadocs CLI：命令行工具，用于安装 UI 组件和自动化操作 主要特点 • 轻量快速：基于 Next.js App Router 构建的强大文档站点 • 卓越性能：更少的客户端组件，更少的 JavaScript，优化的图像加载 • 注重可访问性：以用户体验和可访问性为核心设计 • 语法高亮：由 Shiki 驱动的精美代码语法高亮 • 自动化工具：实用的 remark/rehype 插件，支持 TypeScript Twoslash、OpenAPI 文档生成等 适用场景：文档网站、博客站点，以及需要集成文档功能的 Web 应用。 开源许可证 采用 MIT license。 #GitHub#OpenSource#Nextjs#Documentation 📮 频道 @AppPie

#Developers React Bits：构建出色用户界面的动画组件库 🔗GitHub React Bits 是一个开源的动画 React 组件集合，提供了丰富的动画、交互和完全可定制的组件，用于构建令人印象深刻且难忘的用户界面。该库包含了动画、组件、背景等独特元素，所有组件都提供了 props 自定义选项,让您能够轻松实现所需的效果。 核心特性 • 共有 60 个组件(包括文字动画、动画效果、通用组件、背景)，并且不断增加中 • 所有组件都很轻量，依赖少，高度可定制 • 专为现代 React 项目设计，可无缝集成 • 每个组件提供 4 种变体版本: - JavaScript + CSS - JavaScript + Tailwind CSS - TypeScript + CSS - TypeScript + Tailwind CSS 安装使用 使用 jsrepo CLI 工具进行组件安装，具体设置步骤请参考 文档 中各组件页面。 许可证 使用 MIT 许可证。 #GitHub#OpenSource#React#AnimatedUI 📮 频道 @AppPie

#Developers Tailwind CSS v4.0 正式版发布 🔗TailwindCSS Blog 这是框架的全新版本，专注于性能和灵活性的优化，重新设计了配置和定制体验，并充分利用了 Web 平台的最新进展。 主要特性 • 全新高性能引擎：完整构建速度提升最多 5 倍，增量构建速度提升超过 100 倍，构建时间以微秒计。 • 为现代 Web 而设计：基于最前沿的 CSS 特性构建，包括 cascade layers、使用 @property 注册的自定义属性、以及 color-mix() 等功能。 • 简化的安装流程：更少的依赖，零配置，在 CSS 文件中只需一行代码。 • 官方 Vite 插件：紧密集成以实现最佳性能和最简配置。 • 自动内容检测：自动发现所有模板文件，无需配置。 • 内置导入支持：无需额外工具即可打包多个 CSS 文件。 • CSS 优先配置：全新的开发体验，直接在 CSS 中而不是 JavaScript 配置文件中自定义和扩展框架。 • CSS 主题变量：所有设计令牌都作为原生 CSS 变量暴露，可在任何地方访问。 • 动态工具类值和变体：不再需要猜测间距比例中存在哪些值，也不需要为基本的数据属性扩展配置。 • 现代化的 P3 调色板：重新设计的更生动的调色板。 • 容器查询：无需插件即可基于容器大小设置元素样式的一级 API。 • 新的 3D 变换工具类：直接在 HTML 中在 3D 空间转换元素。 • 扩展的渐变 API：支持径向和锥形渐变、插值模式等。 • @starting-style 支持：新的变体，可用于创建进入和退出过渡，无需 JavaScript。 • not-* variant：仅当元素不匹配其他变体、自定义选择器或媒体/特性查询时设置样式。 • 更多新工具类和变体：包括对 color-scheme、field-sizing、复杂阴影、inert 等的支持。 现在就可以通过在 新项目中安装 或直接通过浏览器的 Tailwind Play 使用 Tailwind CSS v4.0。 对于现有项目，Tailwind Labs 发布了一份全面的 升级指南 ，并构建了一个 自动升级工具 ，帮助你尽可能快速、无痛地升级到最新版本。 #TailwindCSS 📮 频道 @AppPie

#Developers CodeImage：代码截图美化工具 🔗GitHub CodeImage 是一个帮助开发者创建精美代码截图的新工具，提供多种功能来加速社交媒体分享流程。让你的代码片段即时管理、美观易读且方便分享。 技术架构 基于 PNPM monorepo 设计，分为应用和包两大类 应用部分 - 前端（@codeimage/app） - 使用 SolidJS 构建 - vanilla-extract 处理样式 - CodeMirror6 作为代码编辑器 - StateBuilder 状态管理 - @codeui/kit 无障碍 UI 套件 - 后端（@codeimage/api） - Fastify 构建 REST API - Prisma ORM 数据库操作 - Auth0 认证 开源许可证 MIT license。 #GitHub#CodeSnippet#OpenSource#SolidJS 📮 频道 @AppPie​​​​​​​​​​​​​​​​

#Developers Base UI: 专注可访问性的无样式 React 组件库 🔗GitHub Base UI 是一个开源的 React 组件库，由 Radix、Material UI 和 Floating UI 的创作者联合打造。 核心特点 • 无样式设计：不捆绑 CSS，完全兼容 Tailwind、CSS Modules、原生 CSS 和 CSS-in-JS 等任何样式方案 • 可访问性优先：严格遵循 WAI-ARIA 设计模式，在各类平台、设备和辅助技术中经过全面测试 • 组件可组合：API 完全开放，支持灵活定制和包装，可轻松添加或移除组件部分。 #GitHub#OpenSource#React#UI#Accessibility 📮 频道 @AppPie​​​​​​​​​​​​​​​​

📌AppPie 频道置顶 🌐 网站 apppie.com 欢迎来到 AppPie！我们致力于数字生活方式，关注 Apple 生态更新，分享效率工具和实用方法，探索设计与开发资源。 关联频道 • Apple 软件更新 @AppleSystemUpdates • Apple Newsroom @AppleNewsrooms 🔍内容索引 以下是一些标签，帮助你快速导航频道内容。 #Apple • 软件更新 #AppleSoftwareUpdate • 固件更新 #AppleFirmwareUpdate • 零售 #AppleRetail#AppleStore • 活动 #AppleEvent • 开发者 #AppleDeveloper#WWDC • 新闻 #AppleNewsroom • 健康与健身 #AppleFitness#AppleWatchChallenge • 技术支持 #AppleSupport • 网站 #AppleWebsite • 娱乐 #AppStore#AppStoreAwards#AppleMusic#AppleMusicReplay#AppleArcade • 服务 #iCloud#ApplePay #Apps • 应用更新 #AppUpdates • Notion 更新 #Notion#NotionUpdates • Telegram 更新 #Telegarm #Developers #OpenSource#GitHub #React#Nextjs#TailwindCSS #TypeScript#SaaS#Cloudflare 💬 讨论群 @AppPieGroup 📮 频道 @AppPie

#Developers Shortest: AI 驱动的自然语言测试框架 🔗GitHub Shortest 是一个基于 Playwright 的端到端测试框架，允许你用自然语言编写测试用例，由 AI 处理具体实现。 主要特点 • 自然语言测试：用日常语言描述测试场景 • AI 驱动执行：使用 Claude API 处理测试实现 • Playwright 基础：稳定可靠的测试执行 • GitHub 集成：支持双因素认证 • 邮件验证：集成 Mailosaur 开源许可证 MIT license。 #GitHub#OpenSource#Testing#AutomatedTesting#AI#Playwright 📮 频道 @AppPie​​​​​​​​​​​​​​​​

#Developers Ghostty: 原生 GPU 加速的跨平台终端模拟器 🔗GitHub Ghostty 是一个快速、功能丰富且跨平台的终端模拟器，使用平台原生 UI 和 GPU 加速。它在保持速度、功能和原生 UI 三者平衡的同时，还在推动终端模拟器的边界，为 CLI 工具开发者提供更多可能性。 主要特点 • 跨平台：支持 macOS 和 Linux，计划支持 Windows • 原生 UI：使用各平台的原生 UI 组件 • GPU 加速：macOS 使用 Metal，Linux 使用 OpenGL • 多窗口支持：支持窗口、标签和分屏 • 主题系统：内置数百个主题，支持自动切换暗/亮模式 • 连字支持：正确渲染连字体，可自定义字体特性 • 字形聚类：正确处理多码点表情符号、国旗、肤色等 • Kitty 图形协议：支持终端应用直接渲染图像 macOS 专属功能 • Quick Terminal：菜单栏快速访问 • 原生 UI：使用系统原生组件 • 代理图标：标题栏文件管理 • Quick Look：三指轻点预览 • 安全键盘：密码保护机制 终端兼容性原则 • Xterm 兼容：保持与 xterm 标准一致 • 协议兼容：遵循原始终端行为 • 标准兼容：采用广泛接受的行为标准 开源许可证 MIT license。 关联内容 一个 Ghostty 可视化配置网站 ghostty.zerebos.com #GitHub#Terminal#DeveloperTools#OpenSource 📮 频道 @AppPie

#Developers NumberFlow: 为 React, Vue 和 Svelte 提供的数字动画组件 🔗GitHub 这是一个无依赖、可访问且可定制的数字动画组件。当数值发生变化时，组件会自动执行平滑的过渡动画。 特点 • 支持多框架：React、Vue 和 Svelte • 零依赖：不需要额外安装其他包 • 自动过渡：value 属性变化时自动执行动画 • 可访问性：支持无障碍访问 • 可定制化：支持自定义动画效果 开源许可证 MIT license。 #GitHub#OpenSource#Animation#React#Vue#Svelte 📮 频道 @AppPie​​​​​​​​​​​​​​​​