🚀 21 款工具助你提升开发技能 🌝

我见过数百种人工智能工具，其中许多正在改变世界。

作为开发人员，总是有很多东西需要学习，因此集中精力节省时间来处理重要的事情非常重要。

我将介绍 21 种可让您的生活更轻松的开发人员工具，尤其是在开发人员体验方面。

相信我，这份名单一定会让你大吃一惊！

我们开始做吧。

1. Taipy——将数据和 AI 算法融入可投入生产的 Web 应用程序中。

Taipy 是一个开源 Python 库，用于轻松进行端到端应用程序开发，具有假设分析、智能管道执行、内置调度和部署工具。

我相信大多数人都不明白 Taipy 是用来为基于 Python 的应用程序创建 GUI 界面并改进数据流管理的。

关键在于性能，而 Taipy 是完美的选择。

Streamlit 虽然是一款热门工具，但在处理大型数据集时性能会显著下降，因此不适用于生产级应用。
而 Taipy 则在兼顾性能的同时，提供了简洁易用的特性。试用 Taipy，您将亲身体验其用户友好的界面和高效的数据处理能力。

Taipy 具有多种集成选项，可轻松与领先的数据平台连接。

使用以下命令开始。

pip install taipy

我们来谈谈最新的Taipy v3.1 版本。

最新版本使得 Taipy 多功能部件对象中任何 HTML 或 Python 对象都能够可视化。
这意味着Folium、Bokeh、Vega-Altair和Matplotlib等库现在都可以用于可视化。

这也带来了对Plotly python的原生支持，使得绘制图表变得更加容易。

他们还使用分布式计算提高了性能，但最好的部分是 Taipy，它的所有依赖项现在都与 Python 3.12 完全兼容，因此您可以在使用 Taipy 进行项目时使用最新的工具和库。

您可以阅读文档。

另外一个很有用的地方是，Taipy 团队提供了一个名为Taipy Studio的 VSCode 扩展来加速 Taipy 应用程序的构建。

您还可以使用 Taipy 云部署您的应用程序。

如果您想通过博客了解代码库结构，可以阅读HuggingFace 撰写的《使用 Taipy 为您的 Python LLM 创建 Web 界面》。

尝试新技术通常很困难，但 Taipy 提供了10 多个带有代码和适当文档的演示教程供您遵循。

例如一些演示示例和项目想法：

实时污染仪表盘

一个使用传感器测量工厂周围空气质量的用例，展示了 Taipy 仪表板流数据的能力。查看GitHub 代码库。

欺诈检测

Taipy 是一款分析信用卡交易以检测欺诈行为的应用程序。请查看GitHub 代码库。

Covid仪表板

本应用使用了 2020 年的 Covid 数据集。页面展示了 Covid 的各种图表和信息。此外，还提供了一个预测页面，用于预测伤亡人数。请查看GitHub 代码库。

创建 LLM 聊天机器人

此演示展示了 Taipy 如何帮助最终用户使用 LLM 进行推理。我们使用 GPT-3 创建了一个聊天机器人，并在交互式聊天界面中显示对话。您可以轻松更改代码以使用任何其他 API 或模型。请查看GitHub 代码库。

实时人脸识别

此演示将人脸识别功能无缝集成到我们的平台，使用您的网络摄像头提供用户友好的实时人脸检测体验。请查看GitHub 代码库。

这些用例非常令人惊奇，所以一定要检查一下。

Taipy 在 GitHub 上拥有 8.2k+ 颗星，并且正在v3.1发布中，因此它们正在不断改进。

星太皮⭐️

2. DevToys——开发人员的瑞士军刀。

DevToys 可帮助完成日常开发任务，例如格式化 JSON、比较文本和测试 RegExp。

有了它，您无需使用不可靠的网站来处理简单的数据任务。借助智能检测功能，DevToys 可以检测出最适合复制到 Windows 剪贴板的数据的工具。

紧凑叠加功能可让您保持应用小巧，并使其位于其他窗口之上。最棒的是，您可以同时使用多个应用实例。

我可以肯定地说，开发人员甚至不知道这个很棒的项目。

终于有一款专为 Windows 生态系统设计的软件了。哈哈！

他们提供的一些工具包括：

转换器

JSON <> YAML
时间戳
数基
Cron解析器

编码器/解码器

HTML
网址
Base64 文本和图像
GZip
JWT解码器

格式化程序

JSON
SQL
XML

生成器

哈希（MD5、SHA1、SHA256、SHA512）

UUID 1 和 4

乱数存根

校验和

文本

逃脱/非逃脱

检查员和案件转换器

正则表达式测试器

文本比较器

XML验证器

Markdown 预览

形象的

色盲模拟器
颜色选择器和对比度
PNG / JPEG 压缩器
图像转换器

我不知道你怎么样，但我不会错过这个！

您可以阅读如何运行 DevToys。

关于许可证的说明。DevToys
使用的许可证允许将应用作为试用软件或共享软件进行重新分发，无需任何修改。但是，作者 Etienne BAUDOUX 和 BenjaminT 不希望您这样做。如果您认为您有充分的理由这样做，请先与我们联系，进行讨论。

他们在 GitHub 上有 23k 个星，并且使用 C#。

星级 DevToys ⭐️

3. Pieces——您的工作流程副驾驶。

Pieces 是一款支持人工智能的生产力工具，旨在通过智能代码片段管理、情境化副驾驶交互和有用材料的主动呈现来帮助开发人员管理其工作流程的混乱。

它最大限度地减少了上下文切换，简化了工作流程，提升了您的整体开发体验，同时通过完全离线的 AI 方法保护了您工作的隐私和安全。太棒了 :D

它与您最喜欢的工具无缝集成，以简化、理解和提升您的编码流程。

它具有比我们看到的更多令人兴奋的功能。

它能以闪电般的搜索速度帮您找到所需的资料，并允许您根据偏好使用自然语言、代码、标签和其他语义进行查询。堪称“您的个人离线谷歌”。
Pieces 使用 OCR 和 edge-ML 升级了屏幕截图功能，以提取代码并修复无效字符。因此，您可以获得极其准确的代码提取和深度元数据丰富。

您可以查看Pieces 提供的完整功能列表。

您可以阅读文档并访问网站。

他们为 Pieces OS 客户端提供了大量 SDK 选项，包括TypeScript、Kotlin、Python和Dart。

他们在开源领域还比较新，但他们的社区是我见过的最好的社区之一。加入他们，成为 Pieces 的一员！

星星碎片⭐️

4.Infisical——秘密管理平台。

Infisical 是一个开源秘密管理平台，团队使用它来集中管理他们的秘密，如 API 密钥、数据库凭证和配置。

他们让秘密管理对每个人来说都更容易访问，而不仅仅是安全团队，这意味着从头开始重新设计整个开发人员体验。

就我个人而言，我不介意使用 .env 文件，因为我不是特别谨慎。不过，你可以阅读Gregory 的《立即停止使用 .env 文件！》来了解详情。

他们提供了四个 SDK，分别适用于Node.js、Python、Java和.Net。你可以自行托管或使用他们的云。

使用以下 npm 命令开始。

npm install @infisical/sdk

这就是您可以开始使用（Node.js SDK）的方法。

import { InfisicalClient, LogLevel } from "@infisical/sdk";

const client = new InfisicalClient({
    clientId: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    logLevel: LogLevel.Error
});

const secrets = await client.listSecrets({
    environment: "dev",
    projectId: "PROJECT_ID",
    path: "/foo/bar/",
    includeImports: false
});

Infisical 还提供了一套工具，可以自动防止机密信息泄露到 git 历史记录中。此功能可以在 Infisical CLI 级别使用预提交钩子进行设置，也可以通过与 GitHub 等平台直接集成来设置。

您可以阅读文档并了解如何安装 CLI，这是使用它的最佳方式。

Infisical 还可用于将密钥注入 Kubernetes 集群并实现自动部署，以便应用程序使用最新的密钥。它提供丰富的集成选项。

在使用整个源代码之前一定要检查他们的许可证，因为他们有一些受 MIT Expat 保护的企业级代码，但不用担心，大多数代码都是免费使用的。

他们在 GitHub 上拥有超过 11000 个 Stars，并发布了超过 125 个版本，因此他们一直在持续改进。此外，Infiscial CLI 的安装量超过 540 万次，因此非常值得信赖。

明星Infisical⭐️

5. Mintlify——构建时出现的文档。

Mintlify 是一款人工智能文档编写器，您只需 1 秒即可编写代码文档 :D

几个月前我发现了 Mintlify，从那时起就成了它的忠实粉丝。我看到很多公司都在用它，我甚至用我的公司邮箱生成了完整的文档，结果发现它非常简单易用。如果你想要详细的文档，Mintlify 就是你的解决方案。

它的主要用例是根据我们即将讨论的代码生成文档。当你编写代码时，它会自动记录代码，以便其他人更容易理解。

您可以安装VSCode 扩展，也可以将其安装在IntelliJ上。

您只需突出显示代码或将光标放在要记录的行上。然后点击“写入文档”按钮（或按 ⌘ + .）。

您可以阅读文档和安全指南。

如果你更喜欢教程，可以看看《Mintlify 的工作原理》。它支持 10 多种编程语言，并支持许多文档字符串格式，例如 JSDoc、reST、NumPy 等。

顺便说一下，他们的网站链接是writer.mintlify.com；repo 中的当前链接似乎是错误的。

Mintlify 是一款便捷的代码文档工具，每个开发者都应该学习使用它。它能让其他人更轻松地理解你的代码。

它在 GitHub 上拥有大约 2.5k 个星，基于 TypeScript 构建，受到许多开发人员的喜爱。

星薄荷化⭐️

6. Replexica - 为 React 提供 AI 驱动的 i18n 工具包。

本地化面临的困难是真实存在的，因此利用人工智能来帮助解决这一问题绝对是一个很酷的概念。

Replexica 是一个用于 React 的国际化工具包，用于快速交付多语言应用。它无需将文本提取到 JSON 文件中，并使用 AI 驱动的 API 进行内容处理。

它包含以下两个部分：

Replexica Compiler - React 的开源编译器插件。
Replexica API - 云端的国际化 API，使用 LLM 执行翻译。（基于使用情况，提供免费套餐）

一些受支持的 i18n 格式包括：

不含 JSON 的 Replexica 编译器格式。
Markdown 内容的 .md 文件。
传统的 JSON 和基于 YAML 的格式。

当他们达到500颗星时，他们还在DEV上发布了官方公告。我是第一批读者之一（回复不到3条）。
他们涵盖的内容很丰富，所以你应该读读Max的《我们得到了500颗星，下一步是什么》。

为了让您大致了解 Replexica，以下是对基本 Next.js 应用程序进行多语言支持所需的唯一更改。

使用以下 npm 命令开始。

// install
pnpm add replexica @replexica/react @replexica/compiler

// login to Replexica API.
pnpm replexica auth --login

这就是您可以使用它的方法。

// next.config.mjs

// Import Replexica Compiler
import replexica from '@replexica/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
  locale: {
    source: 'en',
    targets: ['es'],
  },
};

// Wrap Next.js config with Replexica Compiler
export default replexica.next(
  replexicaConfig,
  nextConfig,
);

您可以阅读如何开始以及有关幕后使用内容的清晰记录。

Replexica 编译器支持 Next.js 应用路由器，Replexica API 支持英语🇺🇸和西班牙语🇪🇸。他们计划接下来发布 Next.js 页面路由器 + 法语🇫🇷 语言支持！

他们在 GitHub 上拥有 740+ 颗星，并且基于 TypeScript 构建。这是一个值得关注的项目，敬请期待它的进一步进展！

星光复写纸⭐️

7. Flowise——拖放 UI 来构建您的自定义 LLM 流程。

Flowise 是一个开源 UI 可视化工具，用于构建您的定制 LLM 编排流程和 AI 代理。

使用以下 npm 命令开始。

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234

这就是您集成 API 的方式。

import requests

url = "/api/v1/prediction/:id"

def query(payload):
  response = requests.post(
    url,
    json = payload
  )
  return response.json()

output = query({
  question: "hello!"
)}

您可以阅读文档。

云主机不可用，因此您必须按照这些说明自行托管。

让我们探讨一些用例：

假设你有一个网站（可能是商店、电商网站或博客），你想删除该网站的所有相关链接，并让 LLM 解答你网站上的所有问题。你可以按照这个分步教程来了解如何实现这一点。

您还可以创建一个自定义工具，该工具将能够调用 Webhook 端点并将必要的参数传递到 Webhook 主体中。请遵循本指南，该指南将使用 Make.com 创建 Webhook 工作流。

还有许多其他用例，例如构建 SQL QnA 或与 API 交互。

FlowiseAI 在 GitHub 上有 27.5k+ 个 Star，并且有超过 10k 个 fork，因此整体比例很好。

星流⭐️

8. Hexo——一个快速、简单且强大的博客框架。

大多数开发者都喜欢自己的博客，如果你也是这样，Hexo 可能就是你不知道的工具。

Hexo 支持许多功能，例如超快生成，支持 GitHub Flavored Markdown 和大多数 Octopress 插件，提供到 GitHub Pages、Heroku 等的单命令部署，同时提供强大的 API 以实现无限的可扩展性和数百个主题和插件。

这意味着您可以用 Markdown（或其他标记语言）撰写帖子，而 Hexo 会在几秒钟内生成具有漂亮主题的静态文件。

使用以下 npm 命令开始。

npm install hexo-cli -g

这就是您可以使用它的方法。

// Setup your blog
hexo init blog

// Start the server
hexo server

// Create a new post
hexo new "Hello Hexo"

您可以阅读文档，了解Hexo 提供的400 多个插件和主题。据我所知，这些插件支持各种各样的用例，例如 Hexo 的 Ansible 部署器插件。

您可以观看有关在 Hexo 上编写和组织内容的 YouTube 教程。

Hexo 在 GitHub 上拥有超过 38000 个 Star，GitHub 上有超过 125000 名开发者在使用。目前发布的 Hexov7解压后大小为629 kB。

星级 Hexo ⭐️

9.屏幕截图到代码- 放入屏幕截图并将其转换为干净的代码。

这个开源项目广受欢迎，但许多开发者仍然不知道它。它可以帮助您以 10 倍的速度构建用户界面。

它是一个简单的工具，可以使用 AI 将屏幕截图、模型和 Figma 设计转换为干净、实用的代码。

该应用前端使用 React/Vite，后端使用 FastAPI。您需要一个可以访问 GPT-4 Vision API 的 OpenAI API 密钥，或者如果您想使用 Claude Sonnet 或实验性视频支持，则需要 Anthropic 密钥。您可以阅读指南开始使用。

您可以在托管版本上实时尝试它，并观看wiki 上提供的一系列演示视频。

他们在 GitHub 上拥有 47k+ 颗星，并支持许多技术栈，例如 React 和 Vue，以及不错的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。

将屏幕截图加星标并添加到代码⭐️

10. Appsmith——构建管理面板、内部工具和仪表板的平台。

管理面板和仪表板是任何软件理念的一些常见部分（在大多数情况下），我尝试从头开始构建它，这会带来很多痛苦和不必要的辛苦工作。

您可能见过一些组织构建内部应用程序，例如仪表板、数据库 GUI、管理面板、审批应用程序、客户支持仪表板等等，以帮助其团队执行日常运营。正如我所说，Appsmith 是一个开源工具，可以快速开发这些内部应用程序。

首先，请观看这个YouTube 视频，它在 100 秒内解释了 Appsmith。

他们提供拖放式小部件来构建 UI。
您可以使用 45 多个可自定义的小部件，在几分钟内创建美观的响应式 UI，无需编写任何 HTML/CSS 代码。查看完整的小部件列表。

Appsmith 支持在 GUI 的几乎所有地方编写 JavaScript 代码，包括小部件属性、事件监听器、查询和其他设置。Appsmith 支持在括号内编写单行代码{{ }}，并将括号内的任何内容解释为 JavaScript 表达式。

/*Filter the data array received from a query*/
{{ QueryName.data.filter((row) => row.id > 5 ) }}

or 

{{
  storeValue("userID", 42);  
  console.log(appsmith.store.userID); 
  showAlert("userID saved");
}}

您需要使用立即调用函数表达式（IIFE）来编写多行。

例如无效代码和有效代码。

// invalid code
/*Call a query to fetch the results and filter the data*/
{{ 
   const array = QueryName.data;
   const filterArray = array.filter((row) => row.id > 5);
   return filterArray;
}}

/* Check the selected option and return the value*/
{{ 
  if (Dropdown.selectedOptionValue === "1") {
      return "Option 1";
  } else {
      return "Option 2";
  }
}}

// valid code
/* Call a query and then manipulate its result */
{{ 
  (function() {
      const array = QueryName.data;
      const filterArray = array.filter((row) => row.id > 5);
      return filterArray;
   })()
}}

/* Verify the selected option and return the value*/

{{ 
  (function() {
      if (Dropdown.selectedOptionValue === "1") {
        return "Option 1";
      } else {
        return "Option 2";
      }
   })()
}}

只需几个简单的步骤，您就可以创建从简单的 CRUD 应用程序到复杂的多步骤工作流程的任何内容：

与数据库或 API 集成。Appsmith 支持最流行的数据库和 REST API。
使用内置小部件来构建您的应用程序布局。
在编辑器中的任何位置使用查询和 JavaScript 表达您的业务逻辑。
Appsmith 支持使用 Git 进行版本控制，以便协作构建应用程序，并使用分支来跟踪和回滚更改。部署应用程序并分享吧 :)

您可以阅读文档和指南，例如如何将其连接到本地数据源或如何与第三方工具集成。

您可以自行托管或使用云。他们还提供20 多个模板，方便您快速上手。以下是一些实用的模板：

Appsmith 在 GitHub 上拥有 31k+ 颗星，发布版本超过 200 个。

明星应用匠⭐️

11. BlockNote——基于块（Notion 风格）且可扩展的富文本编辑器。

人们常说，除非你正在学习新的东西，否则不要重新发明轮子。

Blocknote 是一款基于 Block 的开源 React 富文本编辑器。您可以轻松为您的应用添加现代化的文本编辑体验。

Blocknote 建立在 Prosemirror 和 Tiptap 之上。

它们具有许多如下所示的特点。

您可以轻松自定义内置 UI 组件，或创建自定义区块、内联内容和样式。如果您想更进一步，可以使用其他 Prosemirror 或 TipTap 插件来扩展核心编辑器。

其他库功能强大，但学习难度通常较高，需要你自定义编辑器的每一个细节。这可能需要数月的专业工作。

相反，BlockNote 只需最少的设置即可提供出色的体验，包括现成的动画 UI。

使用以下 npm 命令开始。

npm install @blocknote/core @blocknote/react

你可以这样使用这个钩子。通过这个useCreateBlockNote钩子，我们可以创建一个新的编辑器实例，然后使用theBlockNoteView组件来渲染它。

@blocknote/react/style.css也被导入以添加编辑器的默认样式和 BlockNote 导出的 Inter 字体（可选）。

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

您可以阅读可用的文档和UI 组件。

您应该尝试一下，特别是因为它包含各种功能，如“斜线”菜单、流畅的动画以及创建实时协作应用程序的潜力。

他们还提供了20 多个示例以及可用于快速跟进的预览和代码。

Blocknote 在 GitHub 上拥有 5k+ 颗星，并被 1.5k+ 名开发人员使用。

星号 BlockNote ⭐️

12. CopilotKit – 数小时内为您的产品提供 AI 辅助驾驶。

在 React 中集成 AI 功能并非易事，Copilot 应运而生。Copilot 是一个简单快捷的解决方案，可将生产就绪的 Copilot 集成到任何产品中！

您可以使用两个 React 组件将关键的 AI 功能集成到 React 应用中。它们还提供内置（完全可定制）的 Copilot 原生 UX 组件，例如<CopilotKit />、<CopilotPopup />、<CopilotSidebar />、<CopilotTextarea />。

使用以下 npm 命令开始。

npm i @copilotkit/react-core @copilotkit/react-ui

Copilot Portal 是 CopilotKit 提供的组件之一，CopilotKit 是一个应用内 AI 聊天机器人，可以查看当前应用状态并在应用内执行操作。它可以通过插件与应用前端和后端以及第三方服务进行通信。

这就是您集成聊天机器人的方式。

所有与 CopilotKit 交互的组件都必须CopilotKit封装在内。建议您也从这里开始CopilotSidebar（以后可以切换到其他 UI 提供程序）。

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

您可以使用此快速入门指南设置 Copilot Backend 端点。

之后，您就可以让 Copilot 采取行动了。您可以阅读如何提供外部上下文useMakeCopilotReadable。您可以使用React useMakeCopilotDocumentReadableHooks来实现。

"use client";

import { useMakeCopilotActionable } from '@copilotkit/react-core';

// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
  {
    name: "setEmployeesAsSelected", // no spaces allowed in the function name
    description: "Set the given employees as 'selected'",
    argumentAnnotations: [
      {
        name: "employeeIds",
        type: "array", items: { type: "string" }
        description: "The IDs of employees to set as selected",
        required: true
      }
    ],
    implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
  },
  []
);

您可以阅读文档并查看演示视频。

您可以轻松集成 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 提供程序。您可以按照本指南将聊天机器人集成到您的应用程序中。

其基本思想是在几分钟内构建可用于基于 LLM 的应用程序的 AI 聊天机器人。

用例非常广泛，作为开发人员，我们绝对应该在下一个项目中尝试使用 CopilotKit。

CopilotKit 在 GitHub 上拥有 4.2k+ 颗星，并且发布了 200 多个版本，这意味着它们正在不断改进。

明星 CopilotKit ⭐️

13.自动完成- 为您现有的终端和 shell 提供 IDE 风格的自动完成功能。

Fig使个人使用命令行更加容易，并且使团队协作更加容易。

他们最受欢迎的产品是自动完成功能。当你输入时，Fig 会在你现有的终端中弹出子命令、选项以及上下文相关的参数。

最棒的是，你也可以将 Fig 的自动完成功能用于你自己的工具。创建私有自动完成功能的方法如下：

import { ai } from "@fig/autocomplete-generators"

...

generators: [
  ai({
    // the prompt
    prompt: "Generate a git commit message",

    // Send any relevant local context.
    message: async ({ executeShellCommand }) => {
      return executeShellCommand("git diff")
    },

    //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required)
    splitOn: "\n",
  })
]

您可以阅读fig.io/docs了解如何开始。

他们在 GitHub 上有 24k+ 个 Star，这对于经常使用 shell 或终端的开发人员非常有用。

星号自动完成⭐️

14. Tooljet——用于构建商业应用程序的低代码平台。

我们每个人都会构建前端，但前端通常非常复杂，涉及很多因素。这可以省去很多麻烦。

ToolJet 是一个开源低代码框架，用于以最少的工程工作量构建和部署内部工具。

ToolJet 的拖放式前端构建器允许您在几分钟内创建复杂、响应迅速的前端。

您可以集成各种数据源，包括 PostgreSQL、MongoDB 和 Elasticsearch 等数据库；符合 OpenAPI 规范和 OAuth2 支持的 API 端点；Stripe、Slack、Google Sheets、Airtable 和 Notion 等 SaaS 工具；以及 S3、GCS 和 Minio 等对象存储服务，用于获取和写入数据。一切尽在其中 :)

这就是 Tooljet 的工作原理。

您可以在 ToolJet 中开发多步骤工作流，以实现业务流程自动化。除了构建和自动化工作流之外，ToolJet 还支持将这些工作流轻松集成到您的应用程序中。

您可以阅读这份快速入门指南，了解如何使用 ToolJet 在几分钟内创建员工目录应用程序。这款应用拥有美观的用户界面，可让您跟踪和更新员工信息。

查看可用的功能列表，包括 45 多个内置响应组件、50 多个数据源等等。

您可以阅读文档并查看操作指南。

他们在 GitHub 上拥有超过 26000 个 Star，并且基于 JavaScript 构建。他们还获得了 GitHub 的资助，因此赢得了巨大的信任。

星形工具喷射⭐️

15. Apitable——面向 API 的低代码平台，用于构建协作应用程序。

APITable 是一个面向 API 的低代码平台，用于构建协作应用程序，据称它比所有其他 Airtable 开源替代品都要好。

它有很多很酷的功能，例如：

实时协作。

您可以生成自动表格。

无限的跨表链接。

API 第一个面板。

强大的行/列功能。

您可以阅读完整的功能列表。

您可以尝试apitable并在 apitable 的现场 Gitpod 演示中查看该项目的演示。

您还可以阅读安装指南，在本地或云计算环境中安装 APITable。

星空阿皮塔尔⭐️

16. n8n——工作流自动化工具。

n8n 是一款可扩展的工作流自动化工具。凭借公平代码分发模型，n8n 将始终提供可见的源代码，支持自托管，并允许您添加自定义函数、逻辑和应用程序。

每个开发人员都想用的工具。自动化是提高效率和简化工作的关键。

n8n 基于节点的方法使其具有高度的灵活性，使您能够将任何事物连接到所有事物。

有400 多个集成选项，这简直太疯狂了！

您可以看到所有安装选项，包括 Docker、npm 和 self-host。

使用以下命令开始。

npx n8n

此命令将下载启动 n8n 所需的所有内容。然后，您可以访问 n8n 并通过打开开始构建工作流程http://localhost:5678。

在 YouTube 上观看此快速入门视频！

您可以阅读文档并阅读本指南以根据您的需要快速开始。

他们还提供初级和中级课程，以便轻松跟进。

他们在 GitHub 上有 39k+ 个 Star，并为整体使用提供了两个包。

星 n8n ⭐️

17. DOMPurify – 一个仅适用于 DOM、超快、超强容忍度的 HTML XSS 清理器。

DOMPurify 是一款仅针对 DOM、速度超快、耐受性极强的 XSS 清理工具，适用于 HTML、MathML 和 SVG。作为开发者，我们需要它来保障应用程序的安全性。

DOMPurify 可以净化 HTML 代码并防止 XSS 攻击。
你可以向 DOMPurify 传入一个包含恶意 HTML 代码的字符串，它会返回一个干净的 HTML 代码字符串（除非你另有配置）。

DOMPurify 会去除所有包含危险 HTML 的内容，从而防止 XSS 攻击和其他恶意行为。而且速度超快。

它们利用浏览器提供的技术，并将其转化为 XSS 过滤器。浏览器速度越快，DOMPurify 的速度就越快。

DOMPurify 使用 JavaScript 编写，可在所有现代浏览器（Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome，以及几乎所有其他使用 Blink、Gecko 或 WebKit 的浏览器）上运行。它不会在 MSIE 或其他旧版浏览器上崩溃。它只是不执行任何操作。

使用以下 npm 命令开始。

npm install dompurify
npm install jsdom

// or use the unminified development version
<script type="text/javascript" src="src/purify.js"></script>

这就是您可以使用它的方法。

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);
const clean = DOMPurify.sanitize('<b>hello there</b>');

如果遇到问题，请参阅文档。他们记录了如何使用脚本或在服务器端运行它。

您可以看到一些净化样品并观看现场演示。

它的使用也非常简单。DOMPurify 于 2014 年 2 月启动，目前已达到 v3.1.0 版本。

这其中涉及很多概念，我非常渴望探索。如果你有什么有趣的想法，欢迎告诉我。

我发现的另一个有用的替代方案是validator.js。

他们在 GitHub 上拥有 12k+ 颗星，被 300k+ 开发人员使用，每周下载量达 5,475k+，这使得他们极具可信度。

星级 DOMPurify ⭐️

18. OpenDevin——少写代码，多做事。

这是一个开源项目，旨在复制 Devin。Devin 是一位自主的 AI 软件工程师，能够执行复杂的工程任务，并积极与用户合作进行软件开发项目。该项目希望借助开源社区的力量，复制、增强并创新 Devin。

只是想让你知道，这是在 Devin 被介绍之前。

您可以阅读包含要求的安装说明。

他们使用 LiteLLM，因此您可以使用任何基础模型运行 OpenDevin，包括 OpenAI、Claude 和 Gemini。

如果您想为 OpenDevin 做出贡献，您可以查看演示和贡献指南。

它在 GitHub 上拥有 10.7k+ 个 Star，并且正在快速增长。

OpenDevin 星级⭐️

19.Amplification——后端开发平台。

我想我们都同意，如果我们要达到标准，设置后端并从头开始做这件事是很困难的。

我知道 Appwrite 和 Supabase 在功能方面要好得多，但每个案例都是独一无二的，这个可能比那些更受欢迎。

Amplication 旨在彻底改变可扩展且安全的 Node.js 应用程序的创建方式。
它消除了重复的编码任务，并交付了可立即投入生产的基础架构代码，这些代码根据您的具体要求精心定制，并遵循行业最佳实践。

其用户友好的界面促进了 API、数据模型、数据库、身份验证和授权的无缝集成。

Amplication 建立在灵活的、基于插件的架构上，可以轻松定制代码并提供大量集成选项。

您可以阅读文档并查看可用的社区插件列表。

他们还提供了分步教程，帮助您使用 Angular 或 React 构建应用程序。

Amplification 在 GitHub 上拥有 13k+ 颗星，并且发布了 170 多个版本，因此它们在不断发展。

星形放大⭐️

20. Embla Carousel - 具有极佳流畅运动的简易旋转木马库。

我们都在应用程序中使用轮播，有时会切换到网格布局，因为轮播并不总是好看，但这会改变您对轮播的看法。

我了解 Embla Carousel 是因为 Shadcn/ui 在他们的 UI 系统中使用了它。

Embla Carousel 是一个简洁的轮播库，拥有流畅的动画和出色的滑动精度。它与库无关，无依赖，并且 100% 开源。

如果您不确定，我建议您查看基本的实时示例。

我最喜欢的是视差，它能带来非常酷且平滑的过渡。

它们支持 CDN、react、Vue、Svelte 和 Solid。

使用以下 npm 命令 (react) 开始。

npm install embla-carousel-react --save

你可以这样使用它。Embla
Carousel 提供了便捷的 useEmblaCarousel 钩子，可与 React 无缝集成。最小设置只需要一个溢出包装器和一个滚动容器。

该useEmblaCarousel钩子将 Embla Carousel 选项作为第一个参数。你还需要使用 useEffect 来访问 API。

import React, { useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })

  useEffect(() => {
    if (emblaApi) {
      console.log(emblaApi.slideNodes()) // Access API
    }
  }, [emblaApi])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

他们还提供了一组插件，您可以添加这些插件来实现自动播放等额外功能。

npm install embla-carousel-autoplay --save

import React, { useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import Autoplay from 'embla-carousel-autoplay'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}