🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 11 月 27 日 Ramda CesiumJS G2Plot SpinKit

2025-06-08

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

拉姆达

CesiumJS

G2Plot

SpinKit

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

1. JSX Lite

组件编写一次,随处运行。可编译为 Vue、React、Solid、Angular、Svelte 和 Liquid。可从 Figma 和 Builder.io 导入代码

GitHub 徽标 BuilderIO /有丝分裂

组件一次编写,随处运行。可编译为 React、Vue、Qwik、Solid、Angular、Svelte 等。



有丝分裂标志

编写一次组件,即可编译到每个框架

代码风格:Prettier 欢迎 PR 执照 类型

概述

Mitosis在所有框架中提供了统一的开发体验,使您能够在单个代码库中构建组件并将其编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等。

使用有丝分裂,您可以:

附言:我们正在积极寻找有兴趣成为 Mitosis 贡献者的人。如果您感兴趣,请查看我们的优秀首发问题列表,或通过Discord联系我们。

使用 Mitosis 进行开发的 Gif 示例

快速入门

要从头开始创建一个新的 Mitosis 项目,请运行以下create命令:

npm create @builder.io/mitosis@latest
Enter fullscreen mode Exit fullscreen mode

完成后,请务必阅读README.md新项目中生成的文件。它将解释项目的结构,并提供……





2. Ramda

为 JavaScript 程序员提供的实用函数库,专为函数式编程风格而设计,可以轻松创建函数式管道,并且永远不会改变用户数据。

GitHub 徽标 ramda / ramda

🐏 实用的函数式 Javascript

拉姆达

面向 JavaScript 程序员的实用函数库。

构建状态 npm 模块 德诺土地 巢徽章 吉特

为什么选择 Ramda?

目前已经有几个优秀的函数式库。通常,它们旨在成为通用工具包,适用于多种范式。而 Ramda 的目标则更加明确。我们想要一个专为函数式编程风格设计的库,一个可以轻松创建函数式管道,并且永远不会改变用户数据的库。

有何不同?

Ramda 的主要特色是:

  • Ramda 强调更纯粹的函数式风格。不变性和无副作用的函数是其设计理念的核心。这可以帮助你用简洁优雅的代码完成工作。

  • Ramda 函数会自动柯里化。这样,你可以轻松地从旧函数创建新函数,只需不提供最终参数即可。

  • Ramda 函数的参数经过精心设计,方便进行柯里化。需要操作的数据是……


3. CesiumJS

CesiumJS 是一个 JavaScript 库,用于在 Web 浏览器中无需插件创建 3D 地球和 2D 地图。它使用 WebGL 进行硬件加速图形处理,并且跨平台、跨浏览器,并针对动态数据可视化进行了优化。

GitHub 徽标 铯GS /

一个用于世界级 3D 地球仪和地图的开源 JavaScript 库 🌎

CesiumJS

构建状态 npm 文档

铯

CesiumJS 是一个 JavaScript 库,用于在 Web 浏览器中无需插件创建 3D 地球和 2D 地图。它使用 WebGL 进行硬件加速图形处理,并且跨平台、跨浏览器,并针对动态数据可视化进行了优化。

CesiumJS 基于开放格式构建,旨在实现强大的互操作性和对海量数据集的扩展。


示例🌏文档🌎网站🌍论坛🌏用户故事


🚀 开始

访问下载页面下载预先构建的 CesiumJS 副本。

npm 和 yarn

如果您使用模块捆绑器(例如 Webpack、Parcel 或 Rollup)构建应用程序,则可以通过cesiumnpm 包安装 CesiumJS :

npm install cesium --save
Enter fullscreen mode Exit fullscreen mode

然后,在你的应用代码中导入 CesiumJS。导入单个模块,即可通过大多数构建工具受益于摇树优化:

import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

const viewer = new Viewer("cesiumContainer");
Enter fullscreen mode Exit fullscreen mode

除了cesium……


4. G2Plot

G2Plot 是一个交互式、响应式的图表库。它基于图形语法,只需几行代码即可轻松制作出优质的统计图表。

GitHub 徽标 antvis / G2Plot

🍡 基于 G2 的交互式响应式图表库。

英语| 简体中文

G2Plot

基于G2 4.x版本二次封装的图表库。

版本 NPM 下载 最新提交 构建状态 覆盖范围 仍未解决的问题百分比 解决问题的平均时间

📢新版本G2 v5已经发布,未来不会基于G2 v5封装G2Plot v3版本,但可以使用Ant Design Charts代替。

网站快速开始博客AntV主题集

一套简单、易用、并具备扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的G2即意指图形语法(图形语法),同时也致敬了ggplot2。我们尝试的事情有三件:

  1. 让用户不用成为可视化专家也能够轻松制作出优雅美观的图表。
  2. 保证图表能够经得起业务的检验,在真实的场景中进行仿真、好用。
  3. 探索统计图表的更多可能性,使统计图表变得更好玩、更酷。

✨ 特性

📦 开箱即用、体验优雅的高质量统计图表

G2Plot 为用户提供了一套完善的视觉提自企业级产品的语言和设计规范。不仅对图表的整体视觉样式进行了优化,而且针对每个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。

📊响应式:让图表更智能

在图表应用场景中,一个棘手的问题是图表的展示空间往往不足以显示图表的量,造成极值情况下数据的重叠重叠、内容无法自适应、内容真实裁切等问题。G2Plot遵循宽容性设计的思想,在图表的信息密度过高时,对图表辅助信息进行稀化,保证图表主要信息的展示抽取和基本的公正性。

🔳向前一步:会讲故事的图表

在G2Plot体系下,图表伸展只是各不相关的实例,图层概念的引入提供了多图表组合、快速、联动,共同讲述了一个数据故事的可能性。未来,我们将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。

📦安装

$ npm install @antv/g2plot
Enter fullscreen mode Exit fullscreen mode

🔨 使用

<div id="container"></div>
Enter fullscreen mode Exit fullscreen mode
import { Bar } from '@antv/g2plot';
const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const bar = new Bar(
Enter fullscreen mode Exit fullscreen mode

5.Layr

Layr 是一组 JavaScript/TypeScript 库,可显著简化全栈应用程序的开发。

GitHub 徽标 layrjs / layr

显著简化全栈开发

莱尔

大大简化全栈开发。

文档

查看文档以获得快速介绍和全面的 API 描述。

路线图

成分

  • 基本组件
  • 受控属性
  • 组件供应
  • 跨层继承
  • 远程方法调用
  • 优化序列化
  • 弱身份映射
  • 组件订阅(实时更新)
  • HTTP 缓存

贮存

  • 基本存储(MongoDB)
  • 索引
    • 标识符属性
    • 常规属性
    • 复合属性
    • 引用的组件
    • 嵌入式组件
  • 自动迁移
    • 索引
    • 默认值
    • 重命名的组件
    • 重命名的属性
  • 自定义迁移
  • 多态性
  • 交易
  • 查询反向关系的糖
  • 查询订阅(实时更新)
  • 支持更多数据库(PostgreSQL、MySQL、DynamoDB……)

路由

  • 基本路由
  • 嵌套路由

授权

  • 基本授权
  • 基于角色的授权

集成

  • React 集成
  • 基本 AWS 集成

贡献

欢迎投稿。

在做出贡献之前,请阅读行为准则并搜索问题跟踪器以了解您的问题是否已经被讨论过。

要做出贡献,请分叉此存储库,提交您的更改,然后发送拉取请求

执照

麻省理工学院







6. 类型挑战

这个项目旨在帮助你更好地理解类型系统的工作原理,编写你自己的实用程序,或者只是享受挑战的乐趣。我们也在努力建立一个社区,让你可以提出问题并获得你在现实世界中遇到的答案——它们可能会成为挑战的一部分!

GitHub 徽标 类型挑战/类型挑战

TypeScript 类型挑战合集及在线评判

TypeScript 类型挑战集锦

English |简体中文|日本语| 한국어 |葡萄牙语

简介

借助 TypeScript 著名的图灵完备类型系统

高质量的类型可以帮助提高项目的可维护性,同时避免潜在的错误。

有许多很棒的类型实用程序库可以增强您对类型的工作,例如ts-toolbeltutility-typesSimplyTyped等,您已经可以使用它们了。

这个项目旨在帮助你更好地理解类型系统的工作原理,编写你自己的实用程序,或者只是享受挑战的乐趣。我们也在努力建立一个社区,让你可以在这里提出问题并获得你在现实世界中遇到的答案——它们可能会成为挑战的一部分!

挑战

单击以下徽章即可查看挑战的详细信息。

注意:挑战在严格模式下有效。

1
13・你好,世界

十三
4・挑选 7・只读 11·元组到对象 14·阵列首位 18·元组的长度 43・排除 189・等待 268・如果 533・康卡特 898・包含 3057・推 3060・解除移位 3312・参数

98
2・获取返回类型 3・省略 8・只读2 9・深度只读 10·元组转并集 12・可链接选项 15・阵列的最后一个 16・流行音乐 20・Promise.all 62・类型查找 106・左修剪 108・装饰 110・大写 116・替换 119・全部替换 191・附加参数 296・排列 298·字符串的长度 459・扁平化 527・附加到对象 529・绝对 531・字符串转并集 599・合并 612・烤肉串盒 645・差异 949・任意 1042・永不 1097・IsUnion 1130・替换键 1367・删除索引签名 1978・百分比解析器 2070・掉落炭 2257・减一 2595・按类型挑选 2688・开始于 2693・结尾 2757・PartialByKeys 2759・RequiredByKeys 2793・变动 2852・按类型省略 2946・对象条目 3062・Shift 3188・元组到嵌套对象 3192・反转 3196・翻转参数 3243・FlattenDepth 3326・BEM 样式字符串 3376・中序遍历 4179・翻转 4182・斐波那契数列 4260・所有组合 4425・大于 4471・邮编 4484・IsTuple 4499・区块 4518・填充 4803・右修剪 5117・无 5140・特伦克 5153・索引 5310・加入 5317・LastIndexOf 5360・独特 5821・地图类型 7544・构造元组 8640・号码范围 8767・组合 8987・子序列 9142・检查重复字符 9286・第一个唯一字符索引 9616・解析 URL 参数 9896・获取中间元素 9898・仅出现一次 9989・计数元素数量至对象 10969・整数 16259・ToPrimitive 17973・深度可变 18142・全部 18220・过滤器 21104・查找全部 21106・组合键类型 21220·元组的排列 25170・首先替换 25270・转置 26401・JSON Schema 到 TypeScript 27133・广场 27152・三角数 27862・笛卡尔积 27932・全部合并 27958・检查重复元组 28333・公共类型 29650・提取对象 29785・深度省略 30301・IsOdd 30430・河内塔 30958·帕斯卡三角形 30970・IsFixedStringLiteralType 34007・比较数组长度

53
6・简单的 Vue 17・柯里化 1 55・并线至交叉口 57・获取必需 59・获取可选 89・所需钥匙 90・可选键 112·单词大写 114・驼峰式命名法 147・C-printf 解析器 213・Vue 基本属性 223・IsAny 270・打字获取 300・字符串转数字 399・元组过滤器 472・元组到枚举对象 545・printf 553・深层物体到独特 651・字符串的长度 2 730・并集转元组 847・字符串连接 956・DeepPick 1290・松树 1383・骆驼 2059・掉线 2822・斯普利特 2828・ClassPublicKeys 2857・IsRequiredKey 2949・对象来自条目 4037・回文 5181・可变键 5423・交叉路口 6141·二进制转十进制 7258・对象键路径 8804・二和 9155・有效日期 9160・分配 9384・最大 9775・将 Nest 对象键大写 13580・更换联合 14080・菲兹巴兹 14188・游程编码 15260・树路径数组 19458・SnakeCase 25747・为负数 28143・可选未定义 30178・独特物品 30575・按位异或 31797・数独 31824·字符串长度 3 32427・开箱 32532・二进制加法 34286·获取元素

17
5・获取只读密钥 151・查询字符串解析器 216・切片 274・整数比较器 462・柯里化2 476・总计 517・乘法 697・标签 734・包含范围 741・排序 869・DistributeUnions 925・断言数组索引 6228・JSON解析器 7561・减法 31447・计数反向对 31997・参数交叉 33345・动态路线

按标签



















































































































































#JSON
26401・JSON Schema 到 TypeScript
#应用
12・可链接选项 8767・组合 6・简单的 Vue 213・Vue 基本属性 30178・独特物品
#参数
191・附加参数 3196・翻转参数
#大批
14·阵列首位 533・康卡特 898・包含 3057・推 3060・解除移位 15・阵列的最后一个 16・流行音乐 20・Promise.all 459・扁平化 949・任意 3062・Shift 3243・FlattenDepth 4425・大于 5117・无 5153・索引 5310・加入 5317・LastIndexOf 5360・独特 8767・组合 18142・全部 18220・过滤器 25270・转置 27133・广场 27152・三角数 27932・全部合并 30430・河内塔 30958·帕斯卡三角形 34007・比较数组长度 17・柯里化 1 2822・斯普利特 5423・交叉路口 8804・二和 9160・分配 9384・最大 9775・将 Nest 对象键大写 14080・菲兹巴兹 31797・数独 32427・开箱 32532・二进制加法 34286·获取元素 216・切片 734・包含范围 741・排序 925・断言数组索引 31997・参数交叉
#内置
4・挑选 7・只读 43・排除 189・等待 3312・参数 2・获取返回类型 3・省略
#cif
30178・独特物品
#条件类型
21220·元组的排列
#深的
9・深度只读 17973・深度可变 553・深层物体到独特 956・DeepPick
#筛选
18220・过滤器
#功能
32427・开箱
#游戏
31797・数独
#推断
3312・参数 2・获取返回类型 10·元组转并集 2070・掉落炭 4260・所有组合 9616・解析 URL 参数 55・并线至交叉口 57・获取必需 59・获取可选 399・元组过滤器 730・并集转元组 2059・掉线 14080・菲兹巴兹 734・包含范围 741・排序
#路口
31997・参数交叉
#json
6228・JSON解析器
#地图
62・类型查找 5821・地图类型
#数学
529・绝对 2257・减一 25270・转置 27133・广场 27152・三角数 30958·帕斯卡三角形 6141·二进制转十进制 8804・二和 14080・菲兹巴兹 274・整数比较器 476・总计 517・乘法
#数字
25747・为负数
#目的
599・合并 645・差异 2595・按类型挑选 2757・PartialByKeys 2759・RequiredByKeys 2852・按类型省略 2946・对象条目 3188・元组到嵌套对象 3376・中序遍历 4179・翻转 5821・地图类型 27932・全部合并 29650・提取对象 2949・对象来自条目 9160・分配 9775・将 Nest 对象键大写
#对象键
7・只读 11·元组到对象 8・只读2 9・深度只读 527・附加到对象 1130・替换键 1367・删除索引签名 2793・变动 28333・公共类型 7258・对象键路径 5・获取只读密钥
#省略对象键深度
29785・深度省略
#选修的
31997・参数交叉
#参数
31997・参数交叉
#承诺
189・等待 20・Promise.all 32427・开箱
#只读
7・只读 8・只读2 9・深度只读 2793・变动 17973・深度可变
#递归
21220·元组的排列 34007・比较数组长度 1383・骆驼 32532・二进制加法
#休息
31997・参数交叉
#分裂
2822・斯普利特
#细绳
531・字符串转并集 8767・组合 9142・检查重复字符 9286・第一个唯一字符索引 9616・解析 URL 参数 21104・查找全部 30301・IsOdd 2822・斯普利特 4037・回文 19458・SnakeCase
#模板字面量
25747・为负数
#模板文字
106・左修剪 108・装饰 110・大写 116・替换 119・全部替换 298·字符串的长度 529・绝对 612・烤肉串盒 1978・百分比解析器 2070・掉落炭 2688・开始于 2693・结尾 3326・BEM 样式字符串 4260・所有组合 4803・右修剪 5140・特伦克 9616・解析 URL 参数 10969・整数 21104・查找全部 112·单词大写 114・驼峰式命名法 147・C-printf 解析器 270・打字获取 300・字符串转数字 472・元组到枚举对象 545・printf 651・字符串的长度 2 2059・掉线 19458・SnakeCase 151・查询字符串解析器 274・整数比较器 476・总计 517・乘法 6228・JSON解析器
#这
6・简单的 Vue 1290・松树
#元组
18·元组的长度 3312・参数 10·元组转并集 3188・元组到嵌套对象 3192・反转 3326・BEM 样式字符串 4471・邮编 4484・IsTuple 4499・区块 4518・填充 7544・构造元组 21220·元组的排列 27133・广场 27152・三角数 399・元组过滤器 472・元组到枚举对象 730・并集转元组 2822・斯普利特 30178・独特物品 31797・数独 32427・开箱 7561・减法
#联盟
4・挑选 43・排除 3・省略 10·元组转并集 62・类型查找 296・排列 531・字符串转并集 1042・永不 1097・IsUnion 3326・BEM 样式字符串 4260・所有组合 5117・无 8987・子序列 9142・检查重复字符 21220·元组的排列 27862・笛卡尔积 27932・全部合并 730・并集转元组 1383・骆驼 5423・交叉路口 31797・数独
#实用程序
268・如果 1042・永不 5821・地图类型 55・并线至交叉口 57・获取必需 59・获取可选 89・所需钥匙 90・可选键 223・IsAny 270・打字获取 2828・ClassPublicKeys 2857・IsRequiredKey 5181・可变键 32427・开箱 5・获取只读密钥
#可变参数
31997・参数交叉
#vue
6・简单的 Vue 213・Vue 基本属性 1290・松树
          

通过纯文本

热身(1)


7. DevOps 资源

此存储库用于收集有关 DevOps 的任何有用资源和信息

GitHub 徽标 bregman-arie / devops-resources

DevOps 资源 - Linux、Jenkins、AWS、SRE、Prometheus、Docker、Python、Ansible、Git、Kubernetes、Terraform、OpenStack、SQL、NoSQL、Azure、GCP

ℹ️ 这个存储库用于收集有关 DevOps 的任何有用资源和信息,其次,为那些想要实践 DevOps 的人提供一些路线图。

📝 欢迎通过提交拉取请求来添加更多资源


DevOps

DevOps路线图

  • 以下路径仅供参考。您可以在替代路线图部分找到其他路径。
  • 不要试图学习所有东西,特别是如果你是一个完全的初学者(倦怠会让你后悔曾经听过 DevOps 这个词)
  • 学习足够多的知识,才能说“我知道什么是 DevOps,也知道如何实践它”。其他内容可以根据需求或感觉来学习……

8. SpinKit

使用 CSS 制作的简单加载旋转动画。SpinKit 仅使用 CSS 动画(变换和不透明度)来创建流畅且易于自定义的动画。

GitHub 徽标 托比亚斯阿林/ SpinKit

使用 CSS 动画的加载指示器集合

使用 CSS 制作的简单加载旋转动画。参见演示。SpinKit 仅使用 (transformopacity) CSS 动画来创建流畅且易于自定义的动画。

用法

  • spinkit.css或添加spinkit.min.css到您的项目中(或复制粘贴您的微调器所需的 CSS — 微调器之间没有依赖关系,没有共享类,也没有共享动画等,因此提取所需的代码应该相当简单)
  • 通过复制粘贴 HTMLspinkit.css或将微调器添加到您的项目中examples.html
  • 将实用程序类添加sk-center到微调器以使其居中(设置marginauto
  • 默认情况下,所有微调器的widthheight都设置为40pxbackground-color设置为#333
  • 通过覆盖 CSS 变量(主要是--sk-size(旋转器宽度和高度)以及--sk-color(旋转器颜色))来配置旋转器。如果您需要更广泛的浏览器支持,请删除 CSS 变量。





9. 漂亮的 React Hooks

一组漂亮的(希望有用)React 钩子,用于加速您的组件和钩子开发。

GitHub 徽标 antonioru / beautiful-react-hooks

🔥 一系列漂亮且(希望)有用的 React hooks,可加速您的组件和 hooks 开发 🔥

持续集成/持续交付 覆盖状态许可证:MIT npm GitHub 星标

漂亮的 React Hooks


一系列量身定制的 React hooks,可增强您的开发过程并使其更快

使用示例

🇬🇧 英语 | 🇨🇳 简体中文| 🇮🇹 意大利语| 🇪🇸 西班牙语| 🇺🇦 乌克兰语| 🇧🇷 巴西葡萄牙语| 🇵🇱 波兰| 🇯🇵 日本语| 🇹🇷 土耳其

💡为什么?

自定义 React Hooks 允许开发人员将组件的业务逻辑抽象为单个可重用的函数。
我注意到,我创建并在项目之间共享的许多 Hooks 都涉及回调、引用、事件以及处理组件生命周期。
因此,我创建了一个实用的React Hooksbeautiful-react-hooks集合,可以帮助其他开发人员加快开发进程。 此外,我致力于创建一个简洁实用的 API,强调代码可读性,同时尽可能降低学习曲线,使其适合大型团队使用和共享——在使用前,请……


10. 类型盛宴

基本 TypeScript 类型的集合

GitHub 徽标 sindresorhus / type-fest

基本 TypeScript 类型的集合



npm 依赖项 npm 下载

这里的许多类型都应该是内置的。你可以向TypeScript 项目提出一些建议,以提供帮助。

可以将此包添加为依赖项,也可以复制粘贴所需的类型。无需积分。👌

欢迎提交 PR,以改进更多常用类型和文档。请先阅读贡献指南

需要帮助审查提案请求

安装

npm install type-fest
Enter fullscreen mode Exit fullscreen mode

需要 TypeScript >=5.1

最适合{strict: true}于您的 tsconfig。

用法

import type {Except} from 'type-fest';
type Foo = {
Enter fullscreen mode Exit fullscreen mode

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

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

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-27th-november-2020-5hcl
PREV
🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 10 月 2 日 技术面试手册 Apollo Client GGEditor 免费 React / Next.js 登陆页面模板 Renovate
NEXT
🚀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!