🚀2021年8月13日,GitHub上面向Web开发者的十大热门项目
📠 小状态机
xicons
偷色贼
对你有利的三件事
网站
介绍
如何使用此库。
AriaNg
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
1. 有丝分裂
一次编写组件,到处运行。可编译为 Vue、React、Solid、Angular、Svelte 等多种框架。
一次编写组件,到处运行。可编译为 React、Vue、Qwik、Solid、Angular、Svelte 等多种框架。
编写一次组件,即可编译成所有框架
概述
Mitosis 提供跨所有框架的统一开发体验,使您能够在单个代码库中构建组件并将其编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等。
利用有丝分裂,你可以:
在多个框架中保持一致的设计系统( 例如 )
将 Figma 中的设计系统同步 到代码 ,并将其发布到 npm,以便在不同框架中使用。
通过编译为原生框架代码 来避免 Web 组件的陷阱
PS:我们正在积极寻找有兴趣成为 Mitosis 项目贡献者的朋友。如果您有兴趣,请查看我们推荐的 入门级问题列表,或通过 Discord 联系我们。
快速入门
要从头开始创建一个新的有丝分裂项目,请运行以下 create命令:
npm create @builder .io/mitosis@latest
Enter fullscreen mode
Exit fullscreen mode
项目完成后,请务必阅读 README.md新项目中生成的文档。文档将解释项目的结构,并提供……
2. React 套件
React Suite 是一套面向企业系统产品的 React 组件库。它是一个设计精良且对开发者友好的 UI 框架。
English | 中文版
React Suite 是一套 React 组件。它致力于提供高质量、全面的 React 组件,帮助开发者快速构建 Web 应用程序。
支持的平台
浏览器
React Suite 支持所有主流浏览器和平台的最新稳定版本。自 React Suite 5.0 起,不再支持 IE10 及更早版本。React Suite 的设计和实现主要面向现代桌面浏览器,而非移动浏览器。
IE
边缘
火狐浏览器
铬合金
狩猎之旅
≥11
≥14
≥ 45
≥ 49
≥ 10
服务器
React Suite 支持服务器端渲染,并支持使用 Next.js 构建应用程序。
安装
React Suite 是一个 npm 包 。
# with npm
npm install rsuite
# with Yarn
yarn add rsuite
# with pnpm
pnpm add rsuite
# with Bun
bun add rsuite
Enter fullscreen mode
Exit fullscreen mode
用法
import { Button } from 'rsuite' ;
import 'rsuite/styles/index.less' ; // or 'rsuite/dist/rsuite.min.css'
function App ( ) {
return < Button …
Enter fullscreen mode
Exit fullscreen mode
3. 小状态机
React 自定义钩子,用于持久化状态管理
✨ 特点
体积小巧,无任何依赖项,而且很简单( gzip 压缩 后 715B )
默认情况下持久化状态( sessionStorage或 localStorage)
使用 React Hooks 构建
📦 安装
$ npm install little-state-machine
🕹 API
🔗 StateMachineProvider
这是一个提供程序组件,用于包装您的整个应用程序以创建上下文。
< StateMachineProvider >
< App / >
< / StateMachineProvider >
Enter fullscreen mode
Exit fullscreen mode
🔗 createStore
用于初始化全局存储的函数,在应用程序根目录(应用程序所在的位置 <StateMachineProvider />)调用。
function log ( store ) {
console . log ( store ) ;
return store ;
}
createStore (
{
yourDetail : { firstName : '' , lastName : '' } // it's an object of your state
} ,
{
name ?: string; // rename the store
middleWares ?: [ log ] ; // function to invoke each action
storageType ?: …
Enter fullscreen mode
Exit fullscreen mode
4. 图标
SVG Vue/React 组件集成了 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons 和 carbon icons。
集成了来自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons 和 carbon icons 的 SVG Vue/React 组件。(Vue3、Vue2、React、SVG)
xicons
英语· 中文
包含 vicons(vue3)、 ricons(react)、 sicons(svg) 和 v2icons(vue2)。
fluentui-system-icons集成了来自、 ionicons、 ant-design-icons、 和 material-design-icons的 SVG Vue/React 组件 。 Font-Awesometabler-iconscarbon
此外,还提供了用于自定义颜色和大小的实用图标组件。
图标预览和搜索
https://www.xicons.org
安装
图标安装
# Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# For vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# For vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm…
Enter fullscreen mode
Exit fullscreen mode
5. 偷色贼
仅使用 JavaScript 从图像中提取调色板。支持浏览器和 Node.js 环境。
仅使用 JavaScript 从图像中提取调色板。支持浏览器和 Node.js 环境。
偷色贼
仅使用 Javascript 从图像中提取调色板。可在浏览器和 Node 环境中运行。
贡献
项目结构
build/- 一个简单的脚本,可以将文件复制并重命名到 /dist 文件夹中。
cypress/- 浏览器测试。
dist/- 由microbundle 包生成的发行文件 ,以及通过构建脚本复制的一些文件。
examples/- index.html 示例页面的 CSS、JS 和图像。
src/color-thief-node.js- 适用于 Node (commonjs) 的脚本版本的源代码。
src/color-thief.js- 适用于浏览器(ES6、AMD、全局变量)的脚本版本源代码。
src/core.js- 脚本的节点版本和浏览器版本之间共享的功能。
test/- Node 集成测试。使用 Chai。
index.html- 示例页面。
运行测试
共有两组测试:
使用Cypress 运行浏览器测试
使用Karma 和 Mocha 运行 Node 测试
到…
6. 集成测试最佳实践
掌握 Node.js 最强大的测试技术:组件测试。包含极其全面的最佳实践列表和示例应用程序。
✅ 超越 Node.js 测试的基础知识。包含一份非常全面的最佳实践列表和一个示例应用程序(2024 年 3 月)
掌握最强大的后端测试技术
对你有利的三件事
组件/集成测试是端到端测试和单元测试的混合体。它正变得越来越流行,并且根据测试钻石模型,它被认为是现代后端开发的默认技术。其核心思想是通过 API 对整个组件(例如微服务)进行原样测试,测试内容包括数据库在内的所有层,但模拟任何无关内容。这既能带来 高度 的可靠性 ,又能 带来良好的开发体验。然而,要正确、快速、全面地进行测试并最大化其价值,需要一定的学习和技能。这正是本仓库的使命宣言。警告:你可能会爱上测试💚
此仓库包含:
1. ✅ 40+ 条最佳实践列表 - 详细说明如何正确编写组件测试,包括代码示例和示例应用程序参考
2. 📊 应用示例 - …
7. jsEncrypt
一个用于执行 OpenSSL RSA 加密、解密和密钥生成的 Javascript 库。
一个零依赖的 Javascript 库,用于执行 OpenSSL RSA 加密、解密和密钥生成。
8. 吉斯库斯
一个由 GitHub Discussions 提供支持的评论系统。让访客通过 GitHub 在您的网站上发表评论和反馈!
一个由 GitHub Discussions 提供支持的评论系统。 :octocat: 💬 💎
一个由GitHub Discussions 提供支持的评论系统 。让访客通过 GitHub 在您的网站上发表评论和反馈!其设计灵感主要来源于 utterances 。
开源 。🌏
无追踪,无广告,永远免费。📡 🚫
无需数据库。所有数据都存储在GitHub Discussions中。
支持 自定义主题 !🌗
支持 多种语言 。🌐
可高度配置 。🔧
自动从 GitHub 获取新的评论和编辑。🔃
可以自行托管 !🤳
请注意, Giscus 仍在积极开发中。GitHub 也仍在积极开发讨论区及其 API。因此,Giscus 的某些功能可能会随着时间的推移而失效或发生变化。
工作原理
当 giscus 加载时,它会使用 GitHub Discussions 搜索 API ,根据选定的映射(URL、标签等)查找与该页面关联的讨论 pathname。 <title>如果找不到匹配的讨论,giscus 机器人会自动创建一个新的讨论……
9. 成长手册
开源A/B测试平台
开源功能标记和 A/B 测试
只需 1 分钟即可快速上手:
git clone https://github.com/growthbook/growthbook.git
cd growthbook
docker-compose up -d
Enter fullscreen mode
Exit fullscreen mode
然后访问 http://localhost:3000
我们的理念
排名前 1% 的公司花费数千小时在内部构建自己的功能标记和 A/B 测试平台,而其他 99% 的公司则只能付费购买昂贵的第三方 SaaS 工具,或者拼凑无人维护的开源库。
我们希望让所有公司都能拥有功能齐全的内部平台的灵活性和强大功能,而无需自行构建。
主要特点
10. AriaNg
AriaNg,一个现代化的 Web 前端,让 aria2 更易于使用。
AriaNg,一个现代化的 Web 前端,让 aria2 更易于使用。
AriaNg
介绍
AriaNg 是一个现代化的 Web 前端,旨在简化 aria2 的使用。AriaNg 使用纯 HTML 和 JavaScript 编写,因此无需任何编译器或运行时环境。您只需将 AriaNg 部署到 Web 服务器,即可在浏览器中打开它。AriaNg 采用响应式布局,支持所有桌面和移动设备。
特征
纯HTML和JavaScript,无需运行时环境
响应式设计,支持桌面和移动设备
用户友好界面
对任务(按名称、大小、进度、剩余时间、下载速度等)、文件、BT下载节点进行排序
搜索任务
重试任务
拖动即可调整任务顺序
更多任务信息(健康百分比、BT 同伴客户信息等)
按指定的文件类型(视频、音频、图片、文档、应用程序、压缩文件等)或文件扩展名筛选文件
多目录任务的树状视图
aria2 或单任务的下载/上传速度图表
完全支持 aria2 设置
深色主题
URL命令行…
观星📈
公共 API +1,467 星
JavaScript 算法 +842 星
机器学习入门 +633 星
打造你自己的 X +540 颗星
开发者路线图 +537 星
html转图像 +17%
有丝分裂 +16%
VSCode 数据库客户端 +13%
车 +11%
Vuestic UI +7%
公共 API +8,558 星
机器学习入门 +5,734 星
编程面试大学 +5,387 星
面向初学者的 Web 开发 +2,912 星
NocoDB +2,899 星
使用颜色 +111%
html转图像 +88%
黛西UI +73%
Astro +58%
机器学习入门 +53%
想要查看最新排名,请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
如果你喜欢这篇文章,可以 关注我的 推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-13th-august-2021-4bf2