🚀10 Trending projects on GitHub for web developers - 25th September 2020 GitHub CLI node-http-proxy Front End Interview Handbook umi Framer Motion Set up subscriptions with Stripe Billing faker.js - generate massive amounts of fake data in the browser and node.js What the f*ck JavaScript? Node Packaged Manuscript Translations AWS Security LIVE!

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 9 月 25 日

GitHub 命令行

节点 http 代理构建状态 代码验证

前端面试手册

帧运动

使用 Stripe Billing 设置订阅

faker.js - 在浏览器和 node.js 中生成大量虚假数据

JavaScript 到底是什么鬼?

Node打包稿

翻译

AWS 安全上线!

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

1. GitHub 命令行

gh 是命令行版的 GitHub。它将拉取请求、问题和其他 GitHub 概念带到你正在使用 git 和代码的终端旁边。

GitHub 徽标 命令

GitHub 官方命令行工具

GitHub 命令行

ghgit是命令行上的 GitHub。它将拉取请求、问题和其他 GitHub 概念带到你当前工作区域和代码旁边的终端上。

gh pr 状态截图

GitHub CLI 适用于托管在 GitHub.com 和 GitHub Enterprise Server 2.20+ 上的存储库,并可安装在 macOS、Windows 和 Linux 上。

文档

请参阅手册以了解设置和使用说明。

贡献

如果您觉得有任何不妥,或者觉得缺少某些功能,请查看贡献页面。在那里,您可以找到关于如何分享反馈、在本地构建工具以及向项目提交拉取请求的说明。

安装

macOS

gh可通过HomebrewMacPortsConda获得,也可以从发布页面下载二进制文件。

自制

安装: 升级:
brew install gh brew upgrade gh

MacPorts

安装: 升级:
sudo port install gh sudo port selfupdate && sudo port upgrade

2. node-http-proxy

node-http-proxy 是一个支持 websockets 的 HTTP 可编程代理库。它适合实现反向代理和负载均衡器等组件。

GitHub 徽标 http-party / node-http-proxy

适用于 node.js 的全功能 http 代理

节点 http 代理构建状态 代码验证

node-http-proxy是一个支持 WebSocket 的 HTTP 可编程代理库。它适用于实现反向代理和负载均衡器等组件。

目录

安装

npm install http-proxy --save

返回顶部

从 0.8.x 升级?

点击这里

返回顶部

核心理念

createProxyServer通过调用并传递一个options对象作为参数来创建一个新的代理(此处提供有效属性

var  httpProxy  =  require ( 'http- proxy ' ) ; 
var  proxy  =  httpProxy.createProxyServer (
Enter fullscreen mode Exit fullscreen mode

3. 前端面试手册

虽然有一些资源可以帮助前端开发人员准备面试,但它们不如软件工程师面试的资料丰富。在现有资源中,最有帮助的题库可能是“前端开发人员面试题”。遗憾的是,我在网上找不到很多完整且令人满意的答案,因此我尝试在这里回答这些问题。

GitHub 徽标 yangshun /前端面试手册

🕸 著名 h5bp“前端工作面试问题”的简洁答案

前端面试手册


这是什么?

与典型的软件工程师工作面试不同,前端工作面试不太强调算法,而是更多地询问有关该领域的复杂知识和专业知识——HTML、CSS、JavaScript,仅举几个领域。

虽然有一些资源可以帮助前端开发人员准备面试,但它们不如软件工程师面试的资料丰富。在现有资源中,最有帮助的题库可能是“前端开发人员面试问题”。遗憾的是,我在网上找不到很多完整且令人满意的答案,因此我尝试在这里提供一些答案。作为一个开源库,随着 Web 的发展,该项目可以在社区的支持下继续生存。

我为什么想要这个?

从零到英雄

从零开始……


4. μPlot

小型(< 30 KB 分钟)、快速的时间序列、线条、区域、ohlc 和条形图

GitHub 徽标 leeoniya / uPlot

📈 一个小型、快速的时间序列、线条、区域、ohlc 和条形图图表

📈 μPlot

小型(~40 KB 分钟)、快速的时间序列、线条、区域、ohlc 和条形图图表(MIT 许可)


介绍

μPlot 是一款快速、内存高效的基于 Canvas 2D的图表,用于绘制时间序列、线条、面积、ohllc 和条形图;从冷启动开始,它可以在 135 毫秒内创建包含 150,000 个数据点的交互式图表,并以~25,000 pts/ms 的速度线性缩放。除了快速的初始渲染之外,其缩放和光标性能也是迄今为止所有类似图表库中最好的;它的大小约为 40 KB,可能是最小、最快的时间序列绘图仪,并且不使用上下文受限的WebGL 着色器或 WASM,这两者都具有更高的启动成本和代码大小。

166,650 点基准:https://leeoniya.github.io/uPlot/bench/uPlot.html

但是,如果您需要 60fps 的性能和海量流数据集,uPlot只能为您提供有限的支持, WebGL 仍然应该是以下应用程序的首选工具……


5. umi

可扩展的企业级前端应用框架。Umi 内置路由、构建、部署、测试等功能,只需一个依赖即可上手。Umi 还集成了 React 预设,提供丰富的功能。

GitHub 徽标 umijs / umi

🌋 可插入的企业级 React 应用程序框架。

英语 |简体中文

代码验证 NPM 版本 CircleCI GitHub Actions 状态 NPM 下载 安装尺寸 布罗特利

🍙 可扩展的企业级前端应用框架。

请考虑关注该项目的作者Sorrycc,并考虑为该项目加注星标,以表明您的 ❤️ 和支持。


特征

  • 🎉 可扩展性,Umi 实现了完整的生命周期并使其可扩展,并且 Umi 内部的功能都是插件形式。Umi 也支持插件和预设。
  • 📦 Umi开箱即用,内置路由、构建、部署、测试等功能,仅需一个依赖即可使用。Umi 还提供了集成的 React 预设,功能丰富。
  • 🐠 企业级,经过蚂蚁金服3000+项目及阿里、优酷、网易、飞猪、口碑等公司项目验证。
  • 🚀 自主开发,包括微前端库、组件封装、文档工具、请求库、钩子库、数据流等。
  • 🌴 完善的路由,支持配置路由和约定路由,同时功能齐全,例如……

6. 运动

一个用于 Web 上的 React 的开源且可用于生产的运动库。

GitHub 徽标 成帧器/运动

适用于 React 的开源、生产级动画和手势库

帧运动

帧运动

一个开源且可用于生产环境的
React Web 运动库

在 Discord 上聊天

Framer Motion 是一个开源的、可用于生产的库,专为所有创意开发人员设计。

它看起来像这样:

< motion.div animate = { { x : 0 } } / >    
Enter fullscreen mode Exit fullscreen mode

它能做到以下这些:

  • 弹簧动画
  • 简单关键帧语法
  • 手势(拖动/点击/悬停)
  • 布局和共享布局动画
  • SVG 路径
  • 退出动画
  • 服务器端渲染
  • 跨组件编排动画的变体
  • CSS 变量

...以及更多。

开始

快速启动

npm install framer-motion
 “framer-motion”导入{  motion  }  

导出 const  MyComponent  =  { isVisible }  =>  
    < motion . div  animate = { {  opacity : isVisible ? 1 : 0  } }  / > 
Enter fullscreen mode Exit fullscreen mode

文档

查看我们的文档以获取指南和完整的 API 参考。

或者查看我们的示例以获取灵感。

贡献

想要为 Framer 做出贡献……


7. Stripe 订阅用例

此示例演示了如何使用 Stripe Billing 创建客户并为其订阅套餐。您可以在账单概览文档页面中找到分步说明。

GitHub 徽标 条纹样本/订阅用例

创建具有固定价格或基于使用情况计费的订阅。

使用 Stripe Billing 设置订阅

此示例演示如何创建客户并为其订阅Stripe Billing计划。有关 Stripe Billing 的官方文档,请参阅概述

查看 Elements 的固定价格订阅 基于使用情况的订阅 使用 Elements 的按座位订阅
演示 结账.stripe.dev
在以下位置定义价格:CLI、仪表板或 API使用 Stripe 创建价格:CLI、仪表板或 API。
定期向用户收取固定价格创建每月/每年/等固定价格的订阅。
按用户座位数定期收费。创建按座位使用量收费的订阅服务。
根据客户使用情况收费。创建计量订阅,以便根据客户使用情况收费。
Apple Pay 和 Google Pay 支持 内置,无需额外代码
订阅优惠券支持

8. Laravel Fortify

Laravel Fortify 是 Laravel 的一个与前端无关的身份验证后端。Fortify 为 Laravel Jetstream 的注册、身份验证和双因素身份验证功能提供支持。

GitHub 徽标 Laravel / Fortify

Laravel 身份验证的后端控制器和脚手架。

Laravel Fortify 徽标

构建状态 总下载量 最新稳定版本 执照

介绍

Laravel Fortify 是 Laravel 的一个与前端无关的身份验证后端。Fortify 为Laravel Jetstream的注册、身份验证和双因素身份验证功能提供支持

官方文档

您可以在Laravel 网站上找到 Fortify 的文档

贡献

感谢您考虑为 Fortify 做出贡献!您可以点击此处阅读贡献指南。

行为守则

为了确保 Laravel 社区欢迎所有人,请查看并遵守行为准则

安全漏洞

请查看我们的安全政策,了解如何报告安全漏洞。

执照

Laravel Fortify 是根据MIT 许可证授权的开源软件







9.Faker

在浏览器和node.js中生成大量虚假数据

GitHub 徽标 Marak / faker.js

在 Node.js 和浏览器中生成大量逼真的虚假数据

faker.js - 在浏览器和 node.js 中生成大量虚假数据

Faker.js

构建状态 覆盖状态

npm 版本

开放集体 开放集体 Gitter 聊天

演示

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html

Faker Cloud

尚未准备好本地开发设置?

请访问https://fakercloud.com/api尝试我们的托管版本 Faker

https://github.com/faker/faker-cloud

用法

浏览器

    < script  src = " faker.js " type = " text/javascript " > </ script > 
    < script > 
      var  randomName  =  faker . name . findName ( ) ;  // Caitlyn Kerluke 
      var  randomEmail  =  faker . internet . email ( ) ;  // Rusty @arne . info 
      var  randomCard  =  faker . helpers . createCard ( ) ;  // 包含许多属性的随机联系人卡片
    </ script >
Enter fullscreen mode Exit fullscreen mode

Node.js

    var  faker  =  require ( 'faker' ) ; 
    var  randomName  =  faker .姓名查找名称( ) ;  // 罗文·尼古拉斯
    var  randomEmail  =  faker .互联网电子邮件;  // Kassandra.Haley @ erich.biz 
    var  randomCard  =  faker .帮手创建卡片
Enter fullscreen mode Exit fullscreen mode

10. JavaScript 到底是什么鬼?

一系列有趣又棘手的 JavaScript 示例。JavaScript 是一门很棒的语言。它语法简洁,生态系统庞大,最重要的是,它拥有一个优秀的社区。同时,我们都知道 JavaScript 是一门相当有趣且充满技巧的语言。有些技巧会迅速把我们的日常工作变成地狱,而有些技巧则会让我们捧腹大笑。

GitHub 徽标 deniesdovhan / wtfjs

🤪 有趣又棘手的 JavaScript 示例列表

JavaScript 到底是什么鬼?

WTFPL 2.0 NPM 版本 Patreon 给我买杯咖啡

有趣且棘手的 JavaScript 示例列表

JavaScript 是一门很棒的语言。它语法简单,生态系统庞大,最重要的是,它有一个很棒的社区。

同时,我们都知道 JavaScript 是一门非常有趣的语言,其中不乏一些棘手之处。有些棘手之处会迅速把我们的日常工作变成地狱,而有些则能让我们捧腹大笑。

WTFJS 的最初想法属于Brian Leroux。这份列表深受他在 dotJS 2012 上的演讲“WTFJS”的启发:

dotJS 2012 - Brian Leroux - WTFJS

Node打包稿

你可以使用 安装本手册npm。只需运行:

$ npm install -g wtfjs

您现在应该可以wtfjs在命令行中运行了。这将打开您所选目录中的手册$PAGER。否则,您可以继续阅读。

源代码可以在这里找到:https://github.com/denysdovhan/wtfjs

翻译

目前,有…


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

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

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-25th-september-2020-nd0
PREV
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 11 月 27 日 Ramda CesiumJS G2Plot SpinKit
NEXT
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 12 月 24 日 Prisma Stimulus Docker 入门教程欢迎来到 MDN Web 文档计算机科学 Flash Cards Notion 博客