Logo

菜单

发布于 2026-01-05 0 阅读
0

🚀2021年7月16日，GitHub 上十大热门 Web 开发者项目：Budibase、Draw.io、VS Code 集成。喜欢吗？您可能还会喜欢我的开源 Chrome 扩展程序，它增强了 GitHub Markdown 编辑器的功能！Leetcode Patterns、use-color、boxicons、Baileys - Typescript/Javascript、WhatsApp Web API、react-window

🚀2021年7月16日，GitHub上面向Web开发者的十大热门项目

布迪巴斯

Draw.io VS Code 集成

喜欢吗？您可能也会喜欢我的开源 Chrome 扩展程序，它可以增强 Github Markdown 编辑器的功能！

LeetCode 模式

使用颜色

方框图标

Baileys - Typescript/Javascript WhatsApp Web API

react-window

《热门项目》以每周新闻简报的形式提供，请访问www.iainfreestone.com注册，以确保您不会错过任何一期。

1. Budibase

Budibase 是一个开源的低代码平台，可帮助开发人员和 IT 专业人员在几分钟内构建、自动化和发布基于他们自身基础设施的内部工具。

GitHub 标志 Budibase / budibase

Budibase 是一个开源的低代码平台，可以帮助 IT 专业人员在几分钟内构建、自动化和自托管内部工具🚀

布迪巴斯

布迪巴斯

几分钟内即可构建、自动化和自托管内部工具

Budibase 是一个开源的低代码平台，可帮助开发人员和 IT 专业人员在几分钟内构建、自动化和发布基于自身基础设施的内部工具。

🤖 🎨 🚀

Budibase 设计用户界面

GitHub 所有版本 GitHub 版本（按日期排序的最新版本） 关注 @budibase 行为守则

入门指南 · 文档 · 功能请求 · 报告错误 ·支持：讨论区

✨ 特征

  • 构建并发布真正的软件。与其他平台不同，使用 Budibase，您可以构建并发布单页应用程序。Budibase 应用程序性能卓越，并支持响应式设计，从而为您的用户提供绝佳体验。

  • 开源且可扩展。Budibase是开源软件，采用 GPL v3 许可。这足以让您确信 Budibase 将始终存在。您还可以基于 Budibase 进行编码，或者 fork 它并根据需要进行修改，从而获得对开发者友好的体验。

  • 加载数据或从零开始创建。Budibase可从多个数据源导入数据，包括 MongoDB、CouchDB、PostgreSQL、MySQL、Airtable、S3、DynamoDB 等。

在 GitHub 上查看

2. Draw.io 与 VS Code 的集成

这个非官方扩展程序将 Draw.io（也称为 diagrams.net）集成到 VS Code 中。

GitHub 标志 hediet / vscode-drawio

这个非官方扩展程序将 Draw.io（也称为 diagrams.net）集成到 VS Code 中。

Draw.io VS Code 集成

这个非官方扩展程序将Draw.io（也称为diagrams.net）集成到 VS Code 中。

特征

  • 在Draw.io 编辑器中 编辑.drawio、.dio或文件.drawio.svg.drawio.png
    • 要创建新图表，只需创建一个空的*.drawio.dpk*.drawio.svg文件*.drawio.png并打开它即可。
    • .drawio.svg这些文件是有效的.svg，可以直接嵌入到 GitHub 的 README 文件中！无需导出。
    • .drawio.png文件有效.png！无需导出。.svg不过，建议您尽可能使用导出功能——导出后的文件看起来更好！
    • 要在不同格式之间进行转换，请使用该Draw.io: Convert To...命令。
  • 默认使用 Draw.io 的离线版本。
  • Draw.io 提供多种主题。
  • 使用 LiveShare 与他人协作编辑图表。
  • 节点/边可以通过代码跨度连接。

演示

喜欢吗？您可能也会喜欢我的开源 Chrome 扩展程序，它可以增强 Github Markdown 编辑器的功能！

编辑 .drawio.svg/.drawio.png 文件

你…


在 GitHub 上查看


3. LeetCode 题型

这是一份精心挑选的 LeetCode 题目列表，按常见题型分组。该题库旨在帮助任何想要提升软件工程面试解题能力的人。

GitHub 标志 seanprashad / leetcode-patterns

一份精心挑选的 LeetCode 题目列表，按常见模式分组。

LeetCode 模式

目录

背景

本仓库旨在帮助任何想要提高软件工程面试问题解决能力的个人。

问题按各自的子主题分组，以便集中精力反复应用常见模式，而不是随机解决问题。

所有题目都可以在leetcode.com上找到，其中一些需要leetcode premium 会员资格。

前言

强烈建议阅读《Cracking The Coding Interview》的第 1、2、3、4、8 和 10 章，以熟悉以下数据结构及其操作：

  • 数组
  • 地图
  • 链表
  • 队列
  • 堆积
  • 堆栈
  • 树木
  • 图表

此外，您还应该熟练掌握以下常用算法：

  • 广度优先搜索
  • 深度优先搜索
  • 二分查找
  • 递归

笔记

这份PDF文件包含了Java内置数据结构的有用信息。

其他值得了解的实用方法包括substring()……

在 GitHub 上查看

4. 使用颜色

所有设计师都应该拥有的强大色彩钩子。解析和字符串化功能开箱即用，并在编译时进行严格的类型检查。

GitHub 标志 junhoyeo /使用颜色

🛼🛼🛼 所有设计师都值得拥有的强大色彩钩子。✨ 即插即用的解析和字符串化功能 & 🦾 编译时严格的类型检查

轮滑表情符号

使用颜色

NPM 版本 包装尺寸 代码发现 建造

所有设计师都应该拥有的强大色彩灵感。

👉 我计划将核心类分离到@roller-skates/core 中。同一个工作区将包含许多很棒的包，它们将帮助你“使用颜色”，敬请期待！

yarn add use-color

import  {  useColor  }  from  'use-color'
Enter fullscreen mode Exit fullscreen mode

核心功能

所有驱动钩子的功能和类型都已导出。详细文档待定（计划将其分离为一个核心模块）。

import  {  parseColor  }  from  'use-color/parser' 
import  {  ColorInput  }  from  'use-color/types/ColorInput' 
const  givenColor : ColorInput  =  'rgb(34, 114, 235)' 
const  color  =  parseColor ( givenColor )
Enter fullscreen mode Exit fullscreen mode

解析

const  [ color ]  =  useColor ( '#2272eb' ) 
color . rgb  // { r: 34, g: 114, b: 235 } 
color . rgba  // { r: 34, g: 114, b: 235, a: 1 } 
const  [ color ]  =  useColor ( 'rgb(34, 114, 235)' ) 
color .
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

5. Boxicons

Boxicons 是一款精心设计的开源图标集，包含 1000 多个图标。它的设计旨在提升您的网站/应用程序体验。

GitHub 标志 atisawd / boxicons

高质量、适合网页的图标

方框图标

Open Collective 上的财务贡献者 GitHub 问题 叽叽喳喳 捐

高质量、适合网页的图标

Boxicons 是一款精心设计的开源图标集，包含 1500 多个图标。它的设计旨在提升您的网站/应用程序体验。

Boxicons v2.0.9 正式发布！

  • 修复了一些 SVG 文件错误，并添加了视图框。

安装

要通过 npm 安装，只需执行以下操作：

$ npm install boxicons --save
Enter fullscreen mode Exit fullscreen mode

导入模块

import 'boxicons'

用法

通过 CSS 使用

  1. 将样式表包含在文档中。<head>
<head> < link rel = " stylesheet " href = " boxicons.min.css " > </head>​​
Enter fullscreen mode Exit fullscreen mode

您可以使用远程版本，而无需安装。

<head> < link rel =" stylesheet "
   href =" https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css " > < ! -- 或 -- < link rel = " stylesheet "
   href = " https://unpkg.com/boxicons@latest/css/boxicons.min.css " > </head>
Enter fullscreen mode Exit fullscreen mode
  1. 要在页面上使用图标，请添加一个名为“bx”的类，并为图标名称添加一个单独的类，普通图标的名称前面要加上前缀“bx-”。
在 GitHub 上查看

6. 出色的可扩展性

可扩展、可靠且高性能的大规模系统模式。相关概念由知名工程师的文章和权威参考文献进行阐释。案例研究取材于经过实战检验、服务于数百万乃至数十亿用户的系统。

GitHub 标志 binhnguyennus / awesome-scalability

可扩展、可靠且高性能的大规模系统的模式

标识

这是一份更新且整理好的阅读清单，旨在阐释可扩展、可靠且高性能的大规模系统的模式。文中概念均出自知名工程师的文章和权威参考文献。案例研究则取材于经过实战检验、服务于数百万乃至数十亿用户的系统。

如果你的系统运行缓慢

了解您面临的问题：可扩展性问题（单用户速度快，但高负载下速度慢）或性能问题（单用户速度慢）。您可以回顾一些设计原则，并了解科技公司如何解决可扩展性和性能问题。本部分专为从事大数据和深度学习相关工作的人员而设。

如果你的系统宕机了

“即使你一天之内失去一切，只要保持冷静，你就能重新开始！”——优步前首席技术官 Thuan Pham。所以，保持冷静，注意可用性和稳定性！

…
在 GitHub 上查看

7. 精神

现代简约的 React UI 库，源自 Vercel 的设计。

GitHub 标志 geist-org / react

现代简约的 React UI 库。

Codecov CircleCI npm（作用域）

现代简约的 React UI 库，源自 Vercel 的设计。

快速入门

  1. 运行yarn add @geist-ui/react或npm i @geist-ui/react安装它。

  2. 导入到项目中：

import  {  GeistProvider ,  CssBaseline  }  from  '@geist-ui/react'

const  Application  =  ( )  =>  ( 
  < GeistProvider > 
    < CssBaseline  / > // ---> 规范化样式
    < AppComponent  / > // ---> 你的应用组件
  < / GeistProvider > 
)
Enter fullscreen mode Exit fullscreen mode

文档


发展


展示柜


执照

麻省理工学院

在 GitHub 上查看

8. Nuxt.js

使用 Nuxt 自信地构建您的下一个 Vue.js 应用程序：Nuxt 是一个让 Web 开发变得简单而强大的框架。

GitHub 标志 nuxt / nuxt.js

直观的 Vue 框架


测试状态 Windows 状态  覆盖范围状态 下载 版本 执照 Discord

请支持我们

雇佣 Nuxt

使用 Nuxt 自信地构建您的下一个 Vue.js 应用程序：Nuxt 是一个让 Web 开发变得简单而强大的框架。

链接

特征

  • 自动转译和打包（使用 webpack 和 babel）
  • 热代码重载
  • 服务器端渲染、单页应用或静态生成，任您选择。 🔥
  • 静态文件服务./static/映射到/
  • 可通过nuxt.config.js文件进行配置
  • 使用layouts/目录的自定义布局
  • 中间件
  • 代码分割pages/
  • 仅加载关键 CSS（页面级）

了解更多信息，请访问https://nuxtjs.org。

入门

$ npx create-nuxt-app <项目名称>
Enter fullscreen mode Exit fullscreen mode

就这么简单！

了解更多信息，请访问https://nuxtjs.org/guide/installation

示例

请查看https://nuxtjs.org/examples或直接访问https://github.com/nuxt/nuxt.js/tree/dev/examples。

生产部署

要进行部署，与其运行 Nuxt，你可能需要提前构建。因此，构建和……

在 GitHub 上查看

9. 百利甜酒

轻量级、功能齐全的 TypeScript/JavaScript WhatsApp Web API

GitHub 标志 adiwajshing / Baileys

轻量级、功能齐全的 TypeScript/JavaScript WhatsApp Web API

Baileys - Typescript/Javascript WhatsApp Web API

Baileys 不需要 Selenium 或任何其他浏览器即可与 WhatsApp Web 交互，它直接使用WebSocket。不运行 Selenium 或 Chromium 可以节省大约0.5 GB的内存。

感谢@Sigalor撰写了他对 WhatsApp Web 工作原理的观察，也感谢@Rhymen实现了Go语言版本。

Baileys 类型安全、可扩展且易于使用。如果您需要的功能超出其提供的范围，编写扩展程序也非常容易。更多信息请点击此处。

如果您有兴趣构建 WhatsApp 机器人，不妨了解一下WhatsAppInfoBot以及用它构建的实际机器人Messcat。

请点击此处 阅读文档请点击此处加入 Discord

例子

请查看并运行example.ts 文件，了解该库的示例用法。该脚本涵盖了大多数常见用例。要运行示例……

在 GitHub 上查看

10. react-window

React 组件用于高效渲染大型列表和表格数据。React window 组件的工作原理是仅渲染大型数据集的一部分（刚好填满视口），这有助于解决一些常见的性能瓶颈。

GitHub 标志 bvaughn / react-window

用于高效渲染大型列表和表格数据的 React 组件

react-window

用于高效渲染大型列表和表格数据的 React 组件

React window 的工作原理是只渲染大型数据集的一部分（刚好足以填充视口）。这有助于解决一些常见的性能瓶颈：

  1. 它减少了渲染初始视图和处理更新所需的工作量（和时间）。
  2. 它通过避免过度分配 DOM 节点来减少内存占用。

NPM注册表 特拉维斯 NPM 许可证 开放集体 开放集体

赞助商

以下这些优秀的公司赞助了 react-window：

了解更多赞助信息！

安装

#纱线
yarn add react-window
# NPM 
npm install --save react-window
Enter fullscreen mode Exit fullscreen mode

用法

了解更多信息，请访问react-window.now.sh：

相关图书馆

  • react-virtualized-auto-sizer：HOC，它会增长以适应所有可用空间，并将宽度和高度值传递给它的子组件。
  • react-window-infinite-loader：有助于将大型数据集分解成多个数据块，以便在滚动到视图时即时加载。它还可以用于创建无限循环……
在 GitHub 上查看

观星📈

过去7天涨幅最大的股票

  1. 机器学习入门+3,208 星
  2. JavaScript 算法+1,800 星
  3. 30 秒代码+1,643 颗星
  4. 免费编程书籍+1,310 星
  5. Airbnb JavaScript 风格指南+1,073 星

过去 7 天增长幅度最大(%)

  1. 机器学习入门+38%
  2. 正面+35%
  3. 船长斯塔克+34%
  4. petite-vue +22%
  5. Fullstack 样板+18%

过去 30 天涨幅最大的股票

  1. 公共 API +7,012 星
  2. 《秘密知识之书》 +5,193 星
  3. JavaScript 算法+4,348 星
  4. 面向初学者的 Web 开发+3,989 星
  5. 30 秒代码+3,848 颗星

过去 30 天增长幅度最大(%)

  1. React Virtual Cool +177%
  2. 安全评分卡+171%
  3. Fullstack 样板+137%
  4. SigNoz +126%
  5. 幻灯片+78%

《热门项目》以每周新闻简报的形式提供，请访问www.iainfreestone.com注册，以确保您不会错过任何一期。

如果你喜欢这篇文章，可以关注我的推特账号，我会定期发布与HTML、CSS和JavaScript相关的实用技巧。

文章来源：https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-16th-july-2021-37oh
8 款开源工具助你发展应用，拓展新...
Google Gemini CLI...