🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 10 月 2 日
技术面试手册
Apollo 客户端
GG编辑器
免费 React / Next.js 登陆页面模板
翻新
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com 上注册, 以确保您不会错过任何一期。
1. visx
visx 是可重复使用的低级可视化组件的集合。visx 结合了 d3 的强大功能来生成可视化效果,并利用 react 的优势来更新 DOM。
维斯克斯
visx 是可重复使用的低级可视化组件的集合。visx 结合了 d3 的强大功能来生成可视化效果,并利用 react 的优势来更新 DOM。
文档 • 图库 • 博客 • 讨论 • 更新日志 • 入门教程
用法
让我们制作一个简单的条形图。
首先我们安装相关的软件包:
npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale
Enter fullscreen mode
Exit fullscreen mode
import React from 'react' ;
import { letterFrequency } from '@visx/mock-data' ;
import { Group } from '@visx/group' ;
import { Bar } from '@visx/shape' ;
import { scaleLinear , scaleBand } from '@visx/scale' ;
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency ;
// Define the graph dimensions and margins
const width = 500 ;
const height = 500 ;
const margin = { top : 20 , bottom : 20 , left : 20 , right : 20 } ; …
Enter fullscreen mode
Exit fullscreen mode
2. graphQL 代码生成器
GraphQL 代码生成器是一款基于 GraphQL 模式生成代码的工具。无论您是开发前端还是后端,都可以使用 GraphQL 代码生成器从 GraphQL 模式和 GraphQL 文档生成输出。
基于 GraphQL 模式和 GraphQL 操作(查询/变异/订阅)生成代码的工具,灵活支持自定义插件。
https://the-guild.dev/graphql/codegen
GraphQL 代码生成器是一款基于 GraphQL 架构生成代码的工具。无论您开发的是前端还是后端,都可以使用 GraphQL 代码生成器从 GraphQL 架构和 GraphQL 文档(查询/修改/订阅/片段)生成输出。
通过分析并解析架构和文档,GraphQL 代码生成器可以基于预定义模板或用户自定义模板输出各种格式的代码。无论您使用哪种语言,GraphQL 代码生成器都能满足您的需求。
GraphQL 代码生成器允许您根据插件 选择所需的输出, 这些插件非常灵活且可自定义。您还可以编写 插件 来生成符合您需求的自定义输出。
您可以在浏览器上实时试用此工具,并查看一些实用的示例。查看 GraphQL 代码生成器实时示例 。
我们目前支持并维护 这些插件 (TypeScript、Flow……
3. Tesseract.js
Tesseract.js 是一个 javascript 光学字符识别 (OCR) 库,可以从图像中获取几乎所有语言的单词。
适用于 100 多种语言的纯 Javascript OCR 📖🎉🖥
4. 技术面试手册
精心策划的内容,助您在下一次技术面试中脱颖而出,重点关注算法。系统设计问题正在开发中。除了常见的算法问题外
技术面试手册
这是什么?
并非每个人都有时间做几百道 LeetCode 题目。这里有 专为忙碌的工程师精心挑选的免费技术面试备考资料,由 《Blind 75》 的作者——我为您带来 。超过 1,000,000 人已从这本手册中受益!
除了常见的算法问题外,其他 精彩 内容包括:
非常感谢您提供内容帮助!
你为什么要读 …
5. reveal.js
reveal.js 是一个开源 HTML 演示框架。它使任何拥有 Web 浏览器的人都可以免费创建功能齐全且精美的演示文稿。
6. GitHub Actions 入门工作流程
这些是帮助人们开始使用 GitHub Actions 的工作流程文件。每当您开始创建新的 GitHub Actions 工作流程时,它们都会显示出来。
入门工作流程
这些是帮助人们开始使用 GitHub Actions 的工作流程文件。每当您开始创建新的 GitHub Actions 工作流程时,它们都会显示出来。
如果您想开始使用 GitHub Actions,您可以通过单击要创建工作流程的存储库中的“操作”选项卡来使用这些启动工作流程。
目录结构
每个工作流程都必须用 YAML 编写并带有 .yml扩展名。它们还需要一个相应的 .properties.json文件,其中包含有关工作流程的额外元数据(显示在 GitHub.com UI 中)。
例如: ci/django.yml和 ci/properties/django.properties.json。
有效属性
name:用户注册时显示的名称。此属性是唯一的……
7. Apollo 客户端
Apollo Client 是一个功能齐全的缓存 GraphQL 客户端,集成了 React、Angular 等框架。它允许您轻松构建通过 GraphQL 获取数据的 UI 组件。
🚀 适用于每个 UI 框架和 GraphQL 服务器的功能齐全、可用于生产的缓存 GraphQL 客户端。
8.GG编辑器
基于 G6 和 React 的可视化图形编辑器
英语 | 简体中文
GG编辑器
安装
npm
npm install gg-editor --save
Enter fullscreen mode
Exit fullscreen mode
马里兰大学
< script src ="https://unpkg.com/gg-editor@${version}/dist/index.js "> </ script >
Enter fullscreen mode
Exit fullscreen mode
使用
流程图
import GGEditor , { Flow } from 'gg-editor' ;
const data = {
nodes : [
{
id : '0' ,
label : 'Node' ,
x : 55 ,
y : 55 ,
} ,
{
id : '1' ,
label : 'Node' ,
x : 55 ,
y : 255 ,
} ,
] ,
edges : [
{
label : 'Label' ,
source : '0' ,
target : '1' ,
} ,
] ,
} ;
< GGEditor >
< Flow style = { { width : 500 , height : 500 } } data = { data } / >
< / GGEditor > ;
Enter fullscreen mode
Exit fullscreen mode
脑图
import GGEditor , { Mind } from 'gg-editor' ;
const data = { …
Enter fullscreen mode
Exit fullscreen mode
9. 打开
Open 是一个免费的 React 登陆页面模板,专为希望为其开源项目、SaaS 产品、在线服务等创建快速专业的登陆页面的开发人员/制造商而设计。
一个免费的 React / Next.js 落地页模板,旨在展示开源项目、SaaS 产品、在线服务等。由……制作
10. 翻新
自动依赖项更新。多平台、多语言。
Renovate CLI 之家:Mend.io 的跨平台依赖自动化
翻新
自动依赖更新多平台和多语言。
为什么要使用 Renovate?
获取自动拉取请求以更新您的依赖项
通过按计划运行 Renovate 来减少噪音,例如:
自动发现相关的包文件
支持 Monorepo 架构,无需额外配置即可使用工作区
机器人行为可通过配置文件定制(配置为代码)
使用类似 ESLint 的共享配置预设,以方便使用和简化配置(仅限 JSON 格式)
锁定文件在同一提交中受支持和更新,包括在合并 PR 时立即解决冲突
获取替代 PR,以从弃用的依赖项迁移到社区建议的替代方案,适用于 大多数 管理人员, 有关例外情况,请参阅 问题 14149
开源(可通过 npm/Yarn 或 Docker Hub 安装),因此可以自行托管或通过 Mend Renovate App 使用
支持的平台
Renovate 可在以下平台上运行:
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com 上注册, 以确保您不会错过任何一期。
如果您喜欢这篇文章,您可以在 Twitter 上 关注我 ,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。
鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-2nd-october-2020-3jm3