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

🚀GitHub 上 10 个热门 Web 开发者项目 - 2020 年 7 月 17 日 超级流畅快速的 Phaser - HTML5 游戏框架 Tabler Icons Quasar 框架 MDX:组件时代的 Markdown 🚀Video.js - HTML5 视频播放器 安装 Vite ⚡Github 个人资料自述文件生成器

🚀2020年7月17日,GitHub上面向Web开发者的十大热门项目

超级表现力

快速地

Phaser - HTML5 游戏框架

表格图标

类星体框架

MDX:组件时代的 Markdown 🚀

Video.js - HTML5 视频播放器

安装

维特

GitHub个人资料自述文件生成器

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

1. 超级表现力

Super Expressive 是一个 JavaScript 库,它允许您使用几乎自然的语言构建正则表达式——无需额外的依赖项,并且代码占用空间很小(压缩 + gzip 后小于 3kb!)。

GitHub 标志 francisrstokes /超级表现力

🦜 Super Expressive 是一个零依赖的 JavaScript 库,用于构建(几乎)自然语言的正则表达式。

超级表现力

超强表现力的标志

Super Expressive是一个 JavaScript 库,它允许您使用几乎自然的语言构建正则表达式——无需额外的依赖项,并且代码占用空间很小(压缩 + gzip 后小于 4kb!)。


为什么?

正则表达式功能强大,但其简洁晦涩的词汇使得编写和与他人交流正则表达式成为一项挑战。即使是精通正则表达式的开发者,几个月后也可能难以理解自己编写的正则表达式!此外,它们也无法……


2. React Hook 表单

高性能、灵活且可扩展的表单,并带有易于使用的验证功能。

GitHub 标志 react-hook-form / react-hook-form

📋 React Hooks 用于表单验证(Web + React Native)

npm 下载 npm npm Discord

版本 7 |版本 6

特征

安装

npm install react-hook-form

链接

快速入门

import  React  from  ' react' ; 
import  {  useForm  }  from  'react-hook-form' ; 
function  App ( )  { 
  const  { 
    register , 
    handleSubmit , 
    formState : { errors } , 
  }  =  useForm ( ) ; 
  const  onSubmit  =  ( data )  = >  console.log ( data ) ;

  return  ( 
    < form  onSubmit = { handleSubmit ( onSubmit ) } > 
      < input  { ... register ( 'firstName' ) }  / >  { /* 注册一个输入框 */ } 
      < input
Enter fullscreen mode Exit fullscreen mode

3. 微软快速

这是 FAST 的单体仓库,其中包含 Web 组件包、工具、示例和文档。FAST 技术既可以单独使用,也可以作为一套完整的解决方案来构建企业级网站、应用程序、组件、设计系统等等。

GitHub 标志 微软/快速

面向现代网络体验的自适应界面系统。

fast_banner_github_914.png

快速地

许可证:MIT 勒纳 TypeScript 代码风格:更美观

可维护性 测试覆盖率 工作流程

Discord 叽叽喳喳

这是 FAST 的单体仓库,其中包含 Web 组件包、工具、示例和文档。FAST 技术既可以单独使用,也可以作为一套完整的解决方案来构建企业级网站、应用程序、组件、设计系统等等。

感谢您的好评,这对我们很有帮助!

介绍

FAST 是一套基于 Web 组件和现代 Web 标准的技术集合,旨在帮助您高效地应对网站和应用程序设计与开发中一些最常见的挑战。

太长不看

  • 基于Web组件标准创建可重用的UI组件。
  • 在您的应用程序中使用我们标准的预构建 Web 组件库。
  • 在两种自适应设计系统之间进行选择:Fluent Design 和 FAST Frame。
  • 无需重新实现组件逻辑,即可构建您自己的设计系统。
  • 可与任何前端框架或构建系统集成。

有关 FAST 的深入解释,请参阅我们的文档介绍

包裹

@microsoft/fast-element

许可证:MIT npm 版本

@microsoft/fast-element库是一种轻量级工具,可以轻松构建高性能应用程序……


4.相位器

Phaser 是一款快速、免费且有趣的开源 HTML5 游戏框架,支持在桌面和移动浏览器上进行 WebGL 和 Canvas 渲染。游戏可以通过第三方工具编译成 iOS、Android 和原生应用。您可以使用 JavaScript 或 TypeScript 进行开发。

GitHub 标志 光子风暴/相位器

Phaser 是一个有趣、免费且快速的 2D 游戏框架,用于制作适用于桌面和移动网络浏览器的 HTML5 游戏,支持 Canvas 和 WebGL 渲染。

Phaser - HTML5 游戏框架

相位器接头

Discord聊天 Twitter关注 npm GitHub

Phaser 是一款快速、免费且有趣的开源 HTML5 游戏框架,支持在桌面和移动浏览器上进行 WebGL 和 Canvas 渲染。游戏可以通过第三方工具编译成 iOS、Android 和原生应用。您可以使用 JavaScript 或 TypeScript 进行开发。

Phaser 框架由Photon Storm积极开发和维护,并拥有强大的开源社区支持。凭借快速的支持和对开发者友好的 API,Phaser 目前是GitHub 上最受欢迎的游戏框架之一。

来自世界各地独立游戏公司、跨国数字机构和大学的数千名开发者都在使用 Phaser。快来看看他们令人惊叹的游戏作品吧!

访问: Phaser网站并关注Phaser 推特账号
体验:一些精彩的#madewithphaser游戏
学习: API 文档支持论坛StackOverflow
代码: 1770 多个示例源代码可在本仓库中找到)
阅读: Phaser


5. Tabler 图标

这是一套包含超过 550 个免费 MIT 许可的高质量 SVG 图标的合集,供您在网页项目中使用。每个图标均采用 24x24 网格设计,并带有 2 像素的描边。

Devicon 拥有 78 个图标和 200 多个版本,而且还在不断增加!

GitHub 标志 表格/表格图标

一套包含超过 1250 个免费 MIT 许可的高质量 SVG 图标,供您在 Web 项目中使用。

表格图标

一套包含超过 1250 个免费 MIT 许可的高质量 SVG 图标,供您在网页项目中使用。每个图标都采用 24x24 网格设计,并带有2px描边。

如果你想支持我的项目并帮助我发展它,你可以在GitHub上成为赞助者,或者直接通过PayPal捐款:)

图标搜索:https://tabler-icons.io/

赞助商

预览

赞助商展台

赞助商展台

安装

npm install @tabler/icons --save

或者直接从Github下载

用法

所有图标均采用 SVG 格式构建,因此您可以将它们作为 <img> 标签放置<img>background-imageHTML 代码中,也可以内联放置。

HTML图像

如果将图标加载为图像,则可以使用 CSS 修改其大小。

< img  src =" path/to/icon.svg " alt ="图标标题" />
Enter fullscreen mode Exit fullscreen mode

内联 HTML

您可以将图标文件的内容粘贴到您的 HTML 代码中,以便在页面上显示它。

< a  href =""
Enter fullscreen mode Exit fullscreen mode

6. 类星体

以创纪录的速度构建高性能的 VueJS 用户界面:响应式单页应用、SSR 应用、PWA、浏览器扩展、混合移动应用和 Electron 应用。如果您愿意,所有这些都可以使用同一套代码库!

GitHub 标志 类星体框架/类星体

Quasar框架 - 在创纪录的时间内构建高性能的VueJS用户界面

Quasar Framework 标志

类星体框架

以创纪录的速度构建高性能的 VueJS 用户界面:响应式单页应用、SSR 应用、PWA、浏览器扩展、混合移动应用和 Electron 应用。如果您愿意,所有这些都可以使用同一套代码库!

加入聊天:https://chat.quasar.dev https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg

请将您的网站/应用/Quasar教程/视频等内容提交到https://github.com/quasarframework/quasar-awesome并提交 PR。谢谢!

支持类星体

Quasar Framework 是一个采用 MIT 许可证的开源项目。它的持续开发离不开这些杰出支持者的慷慨支持。

请阅读我们的声明《为什么捐赠很重要》。如果您想成为捐赠者,请查看Quasar Framework 的捐赠者活动

由以下机构荣誉赞助:

文档

请访问 Quasar Framework 官方网站:https://quasar.dev

保持联系

如需了解最新版本和公告,请关注 Twitter:@quasarframework

在线客服

如有疑问,请在官方社区 Discord 服务器提问:https://chat.quasar.dev

社区论坛

请在官方社区论坛提问:https://forum.quasar.dev

贡献

请务必阅读投稿指南……


7. MDX:组件时代的 Markdown

MDX 是一种可编辑的 Markdown 格式,它允许您在 Markdown 文档中无缝使用 JSX。您可以导入组件(例如交互式图表或通知),并导出元数据。这使得使用组件编写长篇内容变得轻松愉快。

GitHub 标志 mdx-js / mdx

Markdown 中的 JSX,助力雄心勃勃的项目

MDX 标志

MDX:组件时代的 Markdown 🚀

构建状态 聊天

MDX是一种可编辑的格式,可让您在 Markdown 文档中无缝使用 JSX。您可以导入组件(例如交互式图表或通知),并导出元数据。这使得使用组件编写长篇内容变得非常有趣。

例子

观看 MDX 的实际应用:

import  {  Chart  }  from  '../components/chart'

#这里有 一张 图表

图表 呈现我们MDX 文档     

<图表 / >
Enter fullscreen mode Exit fullscreen mode

引言

MDX 是面向组件时代的 Markdown。它允许你在 Markdown 中嵌入 JSX 代码。这是一个绝佳的组合,因为它既能让你使用 Markdown 通常简洁的语法(例如 `<div> # heading`)来处理简单的功能,又能让你使用 JSX 来构建更高级的组件。

❤️ 功能强大:MDX 融合了 Markdown 和 JSX 语法,完美适用于基于 React/JSX 的项目。

💻 一切皆组件:在 MDX 中使用现有组件,并将其他 MDX 文件作为普通文件导入……


8. Video.js

Video.js 是一款专为 HTML5 环境从零开始构建的网页视频播放器。它支持 HTML5 和 Flash 视频,以及 YouTube 和 Vimeo(通过插件)。它支持在桌面和移动设备上播放视频。

GitHub 标志 videojs / video.js

Video.js - 开源 HTML5 和 Flash 视频播放器

Video.js 标志

Video.js - HTML5 视频播放器

构建状态 覆盖范围状态 草坪管理员徽章 Slack状态

NPM

Video.js 是一款专为 HTML5 环境从零开始构建的 Web 视频播放器。它支持 HTML5 视频和媒体源扩展 (MSE),以及其他播放技术,例如 YouTube 和 Vimeo(通过插件)。它支持在桌面和移动设备上播放视频。该项目始于 2010 年中期,如今该播放器已被应用于超过 100 款设备。 50,000 100,000 20万 40万60万个网站

目录

快速入门

感谢Fastly的各位,他们提供了一个免费的、托管在 CDN 上的 Video.js 版本,任何人都可以使用。请将以下标签添加到您的文档中<head>

< link  href =" // vjs.zencdn.net/7.10.2/video-js.min.css " rel =" stylesheet " > 
< script  src =" // vjs.zencdn.net/7.10.2/video.min.js " > </script>
Enter fullscreen mode Exit fullscreen mode

要获取最新版本的 video.js 和要使用的 URL,请查看“入门指南”页面……


9. 概要

一个使用 React 和 Node.js 构建的、开放的、可扩展的团队 wiki。

GitHub 标志 轮廓/大纲

适用于成长型团队的最快维基和知识库。界面美观、功能丰富,并兼容 Markdown 格式。

一个使用 React 和 Node.js 构建的开放、可扩展的团队 wiki。
访问www.getoutline.com ,体验我们托管的 Outline 版本。

截屏

这是运行Outline及其所有相关服务的源代码。如果您想使用 Outline,则无需运行此代码,我们在getoutline.com上提供该应用的托管版本。

如果你想运行自己的 Outline 版本或参与开发,那么这里就是你的理想之地。

安装

Outline 需要以下依赖项:

自托管制作

Docker

对于手动自托管的生产环境安装,建议采取以下步骤:

  1. 首先需要搭建 Redis 和 Postgres 服务器,这超出了本指南的范围。

  2. 下载最新的官方 Docker 镜像,新版本已发布……


10. 维特

Vite 是一款具有鲜明风格的 Web 开发构建工具,它在开发过程中通过原生 ES 模块导入来提供代码,并在生产环境中将其与 Rollup 打包。

GitHub 标志 vitejs / vite

新一代前端工具。速度超快!

Vite 标志


npm 包 节点兼容性 构建状态 Discord聊天


维特

下一代前端工具

  • 💡 立即启动服务器
  • ⚡️ 闪电般快速的HMR
  • 🛠️ 丰富的功能
  • 📦 优化构建
  • 🔩 通用插件接口
  • 🔑 完全类型化的 API

Vite(法语意为“快速”,发音为[ˈvɪt] /vit/)是一款新型前端构建工具,可显著提升前端开发体验。它由两大部分组成:

此外,Vite 通过其插件 APIJavaScript API具有高度可扩展性,并完全支持类型输入。

阅读文档了解更多信息

从 1.x 版本迁移

如果您是从 1.x 版本升级,请查看迁移指南。

包裹






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

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

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-17th-july-2020-17ka