🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 11 月 27 日
拉姆达
CesiumJS
G2Plot
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。
1. JSX Lite
组件编写一次,随处运行。可编译为 Vue、React、Solid、Angular、Svelte 和 Liquid。可从 Figma 和 Builder.io 导入代码
组件一次编写,随处运行。可编译为 React、Vue、Qwik、Solid、Angular、Svelte 等。
编写一次组件,即可编译到每个框架

概述
Mitosis在所有框架中提供了统一的开发体验,使您能够在单个代码库中构建组件并将其编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等。
使用有丝分裂,您可以:
附言:我们正在积极寻找有兴趣成为 Mitosis 贡献者的人。如果您感兴趣,请查看我们的优秀首发问题列表,或通过Discord联系我们。

快速入门
要从头开始创建一个新的 Mitosis 项目,请运行以下create命令:
npm create @builder.io/mitosis@latest
完成后,请务必阅读README.md新项目中生成的文件。它将解释项目的结构,并提供……
2. Ramda
为 JavaScript 程序员提供的实用函数库,专为函数式编程风格而设计,可以轻松创建函数式管道,并且永远不会改变用户数据。
拉姆达
面向 JavaScript 程序员的实用函数库。

为什么选择 Ramda?

目前已经有几个优秀的函数式库。通常,它们旨在成为通用工具包,适用于多种范式。而 Ramda 的目标则更加明确。我们想要一个专为函数式编程风格设计的库,一个可以轻松创建函数式管道,并且永远不会改变用户数据的库。
有何不同?
Ramda 的主要特色是:
-
Ramda 强调更纯粹的函数式风格。不变性和无副作用的函数是其设计理念的核心。这可以帮助你用简洁优雅的代码完成工作。
-
Ramda 函数会自动柯里化。这样,你可以轻松地从旧函数创建新函数,只需不提供最终参数即可。
-
Ramda 函数的参数经过精心设计,方便进行柯里化。需要操作的数据是……
3. CesiumJS
CesiumJS 是一个 JavaScript 库,用于在 Web 浏览器中无需插件创建 3D 地球和 2D 地图。它使用 WebGL 进行硬件加速图形处理,并且跨平台、跨浏览器,并针对动态数据可视化进行了优化。
一个用于世界级 3D 地球仪和地图的开源 JavaScript 库 🌎
CesiumJS


CesiumJS 是一个 JavaScript 库,用于在 Web 浏览器中无需插件创建 3D 地球和 2D 地图。它使用 WebGL 进行硬件加速图形处理,并且跨平台、跨浏览器,并针对动态数据可视化进行了优化。
CesiumJS 基于开放格式构建,旨在实现强大的互操作性和对海量数据集的扩展。
示例🌏文档🌎网站🌍论坛🌏用户故事
🚀 开始
访问下载页面下载预先构建的 CesiumJS 副本。
npm 和 yarn
如果您使用模块捆绑器(例如 Webpack、Parcel 或 Rollup)构建应用程序,则可以通过cesiumnpm 包安装 CesiumJS :
npm install cesium --save
然后,在你的应用代码中导入 CesiumJS。导入单个模块,即可通过大多数构建工具受益于摇树优化:
import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
const viewer = new Viewer("cesiumContainer");
除了cesium……
4. G2Plot
G2Plot 是一个交互式、响应式的图表库。它基于图形语法,只需几行代码即可轻松制作出优质的统计图表。
英语| 简体中文
G2Plot
一套简单、易用、并具备扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的G2即意指图形语法(图形语法),同时也致敬了ggplot2。我们尝试的事情有三件:
- 让用户不用成为可视化专家也能够轻松制作出优雅美观的图表。
- 保证图表能够经得起业务的检验,在真实的场景中进行仿真、好用。
- 探索统计图表的更多可能性,使统计图表变得更好玩、更酷。
✨ 特性
📦 开箱即用、体验优雅的高质量统计图表
G2Plot 为用户提供了一套完善的视觉提自企业级产品的语言和设计规范。不仅对图表的整体视觉样式进行了优化,而且针对每个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。
📊响应式:让图表更智能
在图表应用场景中,一个棘手的问题是图表的展示空间往往不足以显示图表的量,造成极值情况下数据的重叠重叠、内容无法自适应、内容真实裁切等问题。G2Plot遵循宽容性设计的思想,在图表的信息密度过高时,对图表辅助信息进行稀化,保证图表主要信息的展示抽取和基本的公正性。
🔳向前一步:会讲故事的图表
在G2Plot体系下,图表伸展只是各不相关的实例,图层概念的引入提供了多图表组合、快速、联动,共同讲述了一个数据故事的可能性。未来,我们将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。
📦安装
$ npm install @antv/g2plot
🔨 使用
<div id="container"></div>
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(…
5.Layr
Layr 是一组 JavaScript/TypeScript 库,可显著简化全栈应用程序的开发。
大大简化全栈开发。
文档
查看文档以获得快速介绍和全面的 API 描述。
路线图
成分
- 基本组件
- 受控属性
- 组件供应
- 跨层继承
- 远程方法调用
- 优化序列化
- 弱身份映射
- 组件订阅(实时更新)
- HTTP 缓存
贮存
- 基本存储(MongoDB)
- 索引
- 标识符属性
- 常规属性
- 复合属性
- 引用的组件
- 嵌入式组件
- 自动迁移
- 自定义迁移
- 多态性
- 交易
- 查询反向关系的糖
- 查询订阅(实时更新)
- 支持更多数据库(PostgreSQL、MySQL、DynamoDB……)
路由
授权
集成
贡献
欢迎投稿。
在做出贡献之前,请阅读行为准则并搜索问题跟踪器以了解您的问题是否已经被讨论过。
要做出贡献,请分叉此存储库,提交您的更改,然后发送拉取请求。
执照
麻省理工学院
6. 类型挑战
这个项目旨在帮助你更好地理解类型系统的工作原理,编写你自己的实用程序,或者只是享受挑战的乐趣。我们也在努力建立一个社区,让你可以提出问题并获得你在现实世界中遇到的答案——它们可能会成为挑战的一部分!
7. DevOps 资源
此存储库用于收集有关 DevOps 的任何有用资源和信息
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 动画(变换和不透明度)来创建流畅且易于自定义的动画。
使用 CSS 制作的简单加载旋转动画。参见演示。SpinKit 仅使用 (transform和opacity) CSS 动画来创建流畅且易于自定义的动画。
用法
- 将
spinkit.css或添加spinkit.min.css到您的项目中(或复制粘贴您的微调器所需的 CSS — 微调器之间没有依赖关系,没有共享类,也没有共享动画等,因此提取所需的代码应该相当简单)
- 通过复制粘贴 HTML
spinkit.css或将微调器添加到您的项目中examples.html
- 将实用程序类添加
sk-center到微调器以使其居中(设置margin为auto)
- 默认情况下,所有微调器的
width和height都设置为40px。background-color设置为#333。
- 通过覆盖 CSS 变量(主要是
--sk-size(旋转器宽度和高度)以及--sk-color(旋转器颜色))来配置旋转器。如果您需要更广泛的浏览器支持,请删除 CSS 变量。
…
9. 漂亮的 React Hooks
一组漂亮的(希望有用)React 钩子,用于加速您的组件和钩子开发。
🔥 一系列漂亮且(希望)有用的 React hooks,可加速您的组件和 hooks 开发 🔥


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

🇬🇧 英语 | 🇨🇳 简体中文| 🇮🇹 意大利语| 🇪🇸 西班牙语| 🇺🇦 乌克兰语| 🇧🇷 巴西葡萄牙语| 🇵🇱 波兰| 🇯🇵 日本语| 🇹🇷 土耳其
💡为什么?
自定义 React Hooks 允许开发人员将组件的业务逻辑抽象为单个可重用的函数。
我注意到,我创建并在项目之间共享的许多 Hooks 都涉及回调、引用、事件以及处理组件生命周期。
因此,我创建了一个实用的React Hooksbeautiful-react-hooks集合,可以帮助其他开发人员加快开发进程。 此外,我致力于创建一个简洁实用的 API,强调代码可读性,同时尽可能降低学习曲线,使其适合大型团队使用和共享——在使用前,请……
10. 类型盛宴
基本 TypeScript 类型的集合
基本 TypeScript 类型的集合

这里的许多类型都应该是内置的。你可以向TypeScript 项目提出一些建议,以提供帮助。
可以将此包添加为依赖项,也可以复制粘贴所需的类型。无需积分。👌
欢迎提交 PR,以改进更多常用类型和文档。请先阅读贡献指南。
需要帮助审查提案和请求。
安装
npm install type-fest
需要 TypeScript >=5.1
最适合{strict: true}于您的 tsconfig。
用法
import type {Except} from 'type-fest';
type Foo = {…
《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