🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 3 月 19 日
很棒的设计工具
github元素
离子图标
坚不可摧的 Node.js 架构🛡️
开源指南

nodejs扫描
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。
1. 超棒的设计工具
适用于一切的最佳设计工具和插件
很棒的设计工具

作为 Flawless App 家族的一部分,Awesome Design Tools 加入了 Abstract!
今天,我们很高兴地宣布 Flawless App 已加入Abstract,这是一个为设计带来可见性、可问责性、可测量性和可预测性的设计交付平台。
Flawless App 是我们的第一家公司,我们为 5 人团队所取得的一切成就感到自豪。
自 2015 年以来,我们为设计师和开发者推出了一系列强大的工具,其中包括Flawless App、Reduce和Flawless Feedback。我们也对社区驱动的项目投入了大量的热情和关怀。Awesome Design Tools 就是其中之一。
那么下一步是什么?
我们的团队已加入 Abstract,并致力于构建Abstract SDK,提升开发者体验。一段不可思议的旅程已经结束,新的旅程才刚刚开始。如果您想了解更多……
2. github元素
GitHub 的 Web 组件集合。16 个开源自定义元素。
github元素
GitHub 的 Web 组件集合。
我们有 17 个开源自定义元素:
使用服务器端点验证其值的输入元素。
存储库|示例
从服务器搜索结果自动完成输入值。
存储库|示例
将元素文本内容或输入值复制到剪贴板。
存储库|示例
使用 <details> 打开的模式对话框。
存储库|示例
打开的菜单包含 <details>。
存储库|示例
通过拖放或文件输入附加文件。
存储库|示例
显示与过滤输入文本匹配的子树中的元素。
存储库|示例
通过用后备图像替换字符,将原生表情符号反向移植到不支持它们的浏览器。
存储库|示例
用于裁剪方形图像的自定义元素。返回 x、y、宽度和高度。
存储库|示例
客户端包含标签。
存储库|示例
Markdown 格式化按钮...
3. Ionicons
Ionicons 是一个完全开源的图标集,包含 1,300 个为 Web、iOS、Android 和桌面应用精心制作的图标。Ionicons 基于 Ionic 框架构建,因此图标同时提供 Material Design 和 iOS 版本。
由 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 的实验性即时编译器,可在您创作模板时按需生成样式,而不是在初始构建时提前生成所有内容。
这有很多优点:
- 闪电般的构建速度。使用我们的 CLI,Tailwind 的初始编译可能需要 3-8 秒,而在 Webpack 项目中则需要 30-45 秒以上,因为 Webpack 难以处理大型 CSS 文件。无论您使用哪种构建工具,这个库都能在大约 800 毫秒内编译最大的项目(增量重建最快仅需 3 毫秒) 。
- 所有变体均开箱即用。由于文件大小限制,诸如 、 、 等变体通常默认不启用。由于此库按需生成样式,因此
focus-visible您active……disabled
5. 防弹 Node.js
实现防弹的 node.js API
坚不可摧的 Node.js 架构🛡️
这是博客文章“防弹 node.js 项目架构”中的示例存储库
请阅读博客文章以便更好地理解服务器架构。
此外,我还在代码中添加了许多博客文章中没有的注释,因为它们解释了实现方式以及选择库的原因以及一些个人观点和一些糟糕的笑话。
API 本身并没有做任何花哨的事情,它只是一个具有身份验证功能的用户 CRUD,也许我们可以将其转变为一些有用的东西,一个更高级的例子,只需打开一个问题,让我们讨论一下 repo 的未来。
发展
我们使用node版本14.9.0
第一次,你需要运行
然后启动服务器
它使用 nodemon 进行实时重新加载:peace-fingers:
在线一键设置
…
6. 变更集
一种管理版本和变更日志的方法,重点关注 monorepos
🦋 一种管理版本和变更日志的方法,重点关注 monorepos

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

该changesets工作流程旨在帮助人们从修改到发布的整个过程。它允许贡献者声明他们的更改应如何发布,然后我们会根据提供的信息自动更新软件包版本和变更日志,并发布新版本的软件包。
Changesets 专注于解决多包存储库的这些问题,并使多包存储库中相互依赖的包保持最新,同时轻松更改包组。
我们该怎么做呢?
目的changeset是发布一组特定semver 更新类型的软件包,并附上所做更改的摘要。
@changesets/cli包允许您changeset在进行更改时写入文件,然后将任意数量的变更集组合成一个版本,从而使...
7. 开源指南
开源指南是针对想要学习如何运行和贡献开源项目的个人、社区和公司的资源集合。
开源指南

开源指南(https://opensource.guide/)是针对想要学习如何运行和贡献开源项目的个人、社区和公司的资源集合。
背景
开源指南由 GitHub 创建并整理,并参考了外部社区审阅者的意见,但并非 GitHub 产品独有。我们启动这个项目的原因之一是,我们觉得开源项目创建者缺乏足够的资源。
我们的目标是汇总社区最佳实践,而非GitHub(或任何其他个人或实体)认为的最佳做法。因此,我们引用了他人的例子和引言来阐明我们的观点。
贡献
本网站由Jekyll提供支持。请查看我们的贡献指南,了解如何提供反馈并做出贡献。
许可证
内容遵循CC-BY-4.0 协议发布。请参阅声明了解完整详情,包括署名指南、贡献条款以及软件和……
8. vscode 图标
Visual Studio Code 的图标

安装
要安装扩展,只需在 Visual Studio Code 的命令面板中执行以下命令:
ext install vscode-icons
有些人报告说,他们在插入安装命令时找不到扩展。
如果您发现自己处于同样的情况,请尝试:
ext install icons
# or
ext install "vscode-icons"
用法
一旦安装并重新加载后vscode,您将看到Activate图标上的一条消息。
如果没有发生这种情况,请导航至:
Linux&Windows => 文件 > 首选项 > 主题 > 文件图标主题 > VSCode 图标。
MacOS => 代码 > 首选项 > 文件图标主题 > VSCode 图标。
特征
vscode-icons附带许多功能,例如:
图标定制
为任何特定文件扩展名选择您喜欢的图标。
了解更多...
…
9. esbuild-loader
使用 esbuild 加速 Webpack 构建
💠 使用 esbuild 加速你的 Webpack ⚡️
使用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
🚦快速设置
要esbuild-loader在 Webpack 配置中利用这一点,请添加一条新规则来esbuild-loader匹配要转换的文件,例如.js、.jsx、.ts或.tsx。请确保删除您正在使用的所有其他加载器……
10. nodejs扫描
nodejsscan 是用于 Node.js 应用程序的静态安全代码扫描器。
nodejsscan 是用于 Node.js 应用程序的静态安全代码扫描器。
nodejs扫描
由libsast和semgrep提供支持的 Node.js 应用程序的静态安全代码扫描器 (SAST) 。
印度制造

支持nodejs扫描
- 通过 Paypal 捐款:

- 赞助项目:

电子学习课程和认证
OpSecX Node.js 安全:渗透测试与漏洞利用 - NJS
运行 nodejsscan
docker pull opensecurity/nodejsscan:latest
docker run -it -p 9090:9090 opensecurity/nodejsscan:latest
在本地设置 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
运行 nodejsscan
./run.sh
这将运行 nodejsscan Web 用户界面http://127.0.0.1:9090
命令行界面(CLI)和 Python API

演示文稿

集成
Slack 警报
创建您的 slack 应用程序Slack App并将其设置SLACK_WEBHOOK_URL为nodejsscan/settings.py环境变量。

电子邮件提醒
在环境变量中或作为环境变量配置 SMTP 设置nodejsscan/settings.py。
…
观星📈
过去 7 天内涨幅最大的股票
- 克隆人战争+3,980 颗星
- 超棒的备忘单+971 星
- 免费编程书籍+745 颗星
- Discord.js +674 颗星
- 公共 API +626 颗星
过去 30 天内涨幅最大的股票
- Vite +4070 星
- 克隆人战争+3,980 颗星
- Ant Design +3810 星
- 免费编程书籍+2864 颗星
- 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