🚀 GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 3 月 19 日 超棒的设计工具 github-elements Ionicons Bulletproof Node.js 架构 🛡️ 开源指南 nodejsscan

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 3 月 19 日

很棒的设计工具

github元素

离子图标

坚不可摧的 Node.js 架构🛡️

开源指南

标识

nodejs扫描nodejsscan图标

《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

1. 超棒的设计工具

适用于一切的最佳设计工具和插件

GitHub 徽标 goabstract / Awesome-Design-Tools

适用于一切的最佳设计工具和插件👉

很棒的设计工具

超棒的设计工具

惊人的 欢迎 PR

作为 Flawless App 家族的一部分,Awesome Design Tools 加入了 Abstract!

今天,我们很高兴地宣布 Flawless App 已加入Abstract,这是一个为设计带来可见性、可问责性、可测量性和可预测性的设计交付平台。

Flawless App 是我们的第一家公司,我们为 5 人团队所取得的一切成就感到自豪。

自 2015 年以来,我们为设计师和开发者推出了一系列强大的工具,其中包括Flawless AppReduceFlawless Feedback。我们也对社区驱动的项目投入了大量的热情和关怀。Awesome Design Tools 就是其中之一。

那么下一步是什么?

我们的团队已加入 Abstract,并致力于构建Abstract SDK,提升开发者体验。一段不可思议的旅程已经结束,新的旅程才刚刚开始。如果您想了解更多……






2. github元素

GitHub 的 Web 组件集合。16 个开源自定义元素。

GitHub 徽标 github / github元素

GitHub 的 Web 组件集合。

github元素

GitHub 的 Web 组件集合。

我们有 17 个开源自定义元素:

使用服务器端点验证其值的输入元素。

存储库|示例

从服务器搜索结果自动完成输入值。

存储库|示例

将元素文本内容或输入值复制到剪贴板。

存储库|示例

使用 <details> 打开的模式对话框。

存储库|示例

打开的菜单包含 <details>。

存储库|示例

通过拖放或文件输入附加文件。

存储库|示例

显示与过滤输入文本匹配的子树中的元素。

存储库|示例

通过用后备图像替换字符,将原生表情符号反向移植到不支持它们的浏览器。

存储库|示例

用于裁剪方形图像的自定义元素。返回 x、y、宽度和高度。

存储库|示例

客户端包含标签。

存储库|示例

Markdown 格式化按钮...


3. Ionicons

Ionicons 是一个完全开源的图标集,包含 1,300 个为 Web、iOS、Android 和桌面应用精心制作的图标。Ionicons 基于 Ionic 框架构建,因此图标同时提供 Material Design 和 iOS 版本。

GitHub 徽标 ionic 团队/ ionicons

由 Ionic 构建的高级手工图标,适用于各地的 Ionic 应用和 Web 应用 🌎

离子图标

Ionicons是一款完全开源的图标集,包含 1,300 个专为网页、iOS、Android 和桌面应用打造的图标。Ionicons 基于Ionic 框架构建,因此图标同时拥有 Material Design 和 iOS 版本。

注意:所有品牌图标均为其各自所有者的商标。使用这些商标并不表示 Ionic 认可该商标持有人,反之亦然。

我们计划将此图标包与Ionic一起使用,但绝不限于此。您可以根据需要在任何情况下使用它们,无论是个人用途还是商业用途。它们均可免费使用,并遵循MIT许可。

贡献

感谢您的贡献!请阅读我们的贡献指南,并查看带有“求助”标签的问题。

使用 Web 组件

Ionicons Web 组件是一种简单且高效的 Ionicons 应用使用方法。该组件将……


4. Tailwindcss - 及时

Tailwind CSS 的实验性即时编译器,可在您创作模板时按需生成样式,而不是在初始构建时提前生成所有内容。

Tailwind CSS v2.1开始,该项目已与核心 Tailwind CSS 存储库合并,所有未来的开发都将在那里进行。


Tailwind CSS 即时

最新版本 执照

概述

Tailwind CSS 的实验性即时编译器,可在您创作模板时按需生成样式,而不是在初始构建时提前生成所有内容。

这有很多优点:

  • 闪电般的构建速度。使用我们的 CLI,Tailwind 的初始编译可能需要 3-8 秒,而在 Webpack 项目中则需要 30-45 秒以上,因为 Webpack 难以处理大型 CSS 文件。无论您使用哪种构建工具,这个库都能在大约 800 毫秒内编译最大的项目(增量重建最快仅需 3 毫秒) 。
  • 所有变体均开箱即用由于文件大小限制,诸如 、 、 等变体通常默认不启用。由于此库按需生成样式,因此focus-visibleactive……disabled

5. 防弹 Node.js

实现防弹的 node.js API

GitHub 徽标 santiq / bulletproof-nodejs

实现一个防弹的 node.js API🛡️

坚不可摧的 Node.js 架构🛡️

这是博客文章“防弹 node.js 项目架构”中的示例存储库

请阅读博客文章以便更好地理解服务器架构。

此外,我还在代码中添加了许多博客文章中没有的注释,因为它们解释了实现方式以及选择库的原因以及一些个人观点和一些糟糕的笑话。

API 本身并没有做任何花哨的事情,它只是一个具有身份验证功能的用户 CRUD,也许我们可以将其转变为一些有用的东西,一个更高级的例子,只需打开一个问题,让我们讨论一下 repo 的未来。

发展

我们使用node版本14.9.0

nvm install 14.9.0
nvm use 14.9.0

第一次,你需要运行

npm install

然后启动服务器

npm run start

它使用 nodemon 进行实时重新加载:peace-fingers:

在线一键设置


6. 变更集

一种管理版本和变更日志的方法,重点关注 monorepos

GitHub 徽标 变更集/变更集

🦋 一种管理版本和变更日志的方法,重点关注 monorepos

一个管理版本和变更日志的工具,
重点关注多包存储库


查看变更日志

changesets工作流程旨在帮助人们从修改到发布的整个过程。它允许贡献者声明他们的更改应如何发布,然后我们会根据提供的信息自动更新软件包版本和变更日志,并发布新版本的软件包。

Changesets 专注于解决多包存储库的这些问题,并使多包存储库中相互依赖的包保持最新,同时轻松更改包组。

我们该怎么做呢?

目的changeset是发布一组特定semver 更新类型的软件包,并附上所做更改的摘要。

@changesets/cli允许您changeset在进行更改时写入文件,然后将任意数量的变更集组合成一个版本,从而使...


7. 开源指南

开源指南是针对想要学习如何运行和贡献开源项目的个人、社区和公司的资源集合。

GitHub 徽标 github / opensource.guide

📚 开源创建者的社区指南

开源指南

构建状态

开源指南(https://opensource.guide/)是针对想要学习如何运行和贡献开源项目的个人、社区和公司的资源集合。

背景

开源指南由 GitHub 创建并整理,并参考了外部社区审阅者的意见,但并非 GitHub 产品独有。我们启动这个项目的原因之一是,我们觉得开源项目创建者缺乏足够的资源。

我们的目标是汇总社区最佳实践,而非GitHub(或任何其他个人或实体)认为的最佳做法。因此,我们引用了他人的例子和引言来阐明我们的观点。

贡献

本网站由Jekyll提供支持。请查看我们的贡献指南,了解如何提供反馈并做出贡献。

许可证

内容遵循CC-BY-4.0 协议发布。请参阅声明了解完整详情,包括署名指南、贡献条款以及软件和……


8. vscode 图标

Visual Studio Code 的图标

GitHub 徽标 vscode 图标/ vscode 图标

Visual Studio Code 的图标

标识

vscode 图标

将真实的图标带入您的Visual Studio Code

最低支持版本:1.71.0


版本 安装 下载 评分



可维护性 测试覆盖率



演示


安装

要安装扩展,只需在 Visual Studio Code 的命令面板中执行以下命令:

ext install vscode-icons
Enter fullscreen mode Exit fullscreen mode

有些人报告说,他们在插入安装命令时找不到扩展。

如果您发现自己处于同样的情况,请尝试:

ext install icons
# or
ext install "vscode-icons"
Enter fullscreen mode Exit fullscreen mode

用法

一旦安装并重新加载后vscode,您将看到Activate图标上的一条消息。

如果没有发生这种情况,请导航至:

  • Linux&Windows => 文件 > 首选项 > 主题 > 文件图标主题 > VSCode 图标
  • MacOS => 代码 > 首选项 > 文件图标主题 > VSCode 图标

特征

vscode-icons附带许多功能,例如:

图标定制

为任何特定文件扩展名选择您喜欢的图标。

了解更多...


9. esbuild-loader

使用 esbuild 加速 Webpack 构建

GitHub 徽标 privatenumber / esbuild-loader

💠 使用 esbuild 加速你的 Webpack ⚡️


esbuild-loader

使用esbuild加速你的 Webpack 构建!🔥

esbuild是一个用 Go 编写的 JavaScript 捆绑器,支持超快的 ESNext 和 TypeScript 转译和JS 压缩

esbuild-loader可让您在 Webpack 构建中利用 esbuild 的速度,通过提供更快的转译(例如babel-loader/ts-loader)和压缩(例如 Terser)替代方案!

提示

您是否将 TypeScript 与 Node.js 一起使用?

使用tsx为您的 Node.js 提供 TypeScript 支持

tsx是 ts-node 的一个简单、轻量且速度极快的替代品。

→ 了解有关tsx的更多信息


已经是赞助商了?快来开发仓库加入讨论吧

🚀 安装

npm i -D esbuild-loader
Enter fullscreen mode Exit fullscreen mode

🚦快速设置

esbuild-loader在 Webpack 配置中利用这一点,请添加一条新规则来esbuild-loader匹配要转换的文件,例如.js.jsx.ts.tsx。请确保删除您正在使用的所有其他加载器……





10. nodejs扫描

nodejsscan 是用于 Node.js 应用程序的静态安全代码扫描器。

GitHub 徽标 ajinabraham / nodejsscan

nodejsscan 是用于 Node.js 应用程序的静态安全代码扫描器。

nodejs扫描nodejsscan图标

由libsastsemgrep提供支持的 Node.js 应用程序的静态安全代码扫描器 (SAST)

爱印度制造鸣叫

平台 执照 Python 测试

支持nodejs扫描

  • 通过 Paypal 捐款: 通过 Paypal 捐款
  • 赞助项目: Github赞助商

电子学习课程和认证

OpSecX视频课程 OpSecX Node.js 安全:渗透测试与漏洞利用 - NJS

运行 nodejsscan

docker pull opensecurity/nodejsscan:latest
docker run -it -p 9090:9090 opensecurity/nodejsscan:latest
Enter fullscreen mode Exit fullscreen mode

在本地设置 nodejsscan

安装 Postgres 并SQLALCHEMY_DATABASE_URI在环境变量中nodejsscan/settings.py或作为环境变量进行配置。

从版本 4 开始,不再支持 Windows。

git clone https://github.com/ajinabraham/nodejsscan.git
cd nodejsscan
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python3 manage.py recreate-db # Run once to create database schema
Enter fullscreen mode Exit fullscreen mode

运行 nodejsscan

./run.sh

这将运行 nodejsscan Web 用户界面http://127.0.0.1:9090

命令行界面(CLI)和 Python API

njsscan_cli

演示文稿

观看视频

集成

Slack 警报

创建您的 slack 应用程序Slack App并将其设置SLACK_WEBHOOK_URLnodejsscan/settings.py环境变量。

nodejsscan slack 警报

电子邮件提醒

在环境变量中或作为环境变量配置 SMTP 设置nodejsscan/settings.py


观星📈

过去 7 天内涨幅最大的股票

  1. 克隆人战争+3,980 颗星
  2. 超棒的备忘单+971 星
  3. 免费编程书籍+745 颗星
  4. Discord.js +674 颗星
  5. 公共 API +626 颗星

过去 30 天内涨幅最大的股票

  1. Vite +4070 星
  2. 克隆人战争+3,980 颗星
  3. Ant Design +3810 星
  4. 免费编程书籍+2864 颗星
  5. esbuild +2852 星

《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-19th-march-2021-2o9p
PREV
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 1 日 IconPark Fre TypeScript Deep Dive Vendure Turbo react-worker-components Smoldash - 微型 2kb Lodash 替代品 Bulma
NEXT
🚀 GitHub 上针对 Web 开发人员的 10 个热门项目 - 2020 年 6 月 19 日 🎭 Playwright JSON 服务器镜头开源项目 (OpenLens) code-server 演示 - Figma - Twitter 2.0 中的新功能目录 Coursera:面向 Web 开发人员的 HTML、CSS 和 Javascript rrweb 快速构建可访问的 React 应用程序⚡️ face-api.js 功能运行 ahooks