🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 1 日
弗雷
深入探究 TypeScript
供应商
涡轮
React-worker-组件
Smoldash - 微小的 2kb Lodash 替代品
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。
1. IconPark
IconPark 提供超过 1,400 个优质图标,并新增自定义图标界面。您可以将 SVG 图标转换为多种主题,并生成 React 图标、Vue 图标和 SVG 图标。
🍎将一个 SVG 图标转换为多种主题,并生成 React 图标,Vue 图标,svg 图标
英语 |简体中文
介绍
IconPark 提供超过 2000 个高质量图标,并引入了自定义图标的界面。我们不再使用多个 SVG 源文件来实现不同的主题,而是实现了一项技术,将单个 SVG 源文件的属性转换为多个主题。此外,我们还提供跨平台组件,包括react-icons、vue-icons和svg-icons。无论您是设计师还是开发者,都可以免费将它们用于您的设计或项目中。

套餐
生成跨平台组件
在文件夹中查找包packages。NPM 包让您可以轻松地将图标组件导入到项目中。
多个主题
可以通过在节点上设置两个属性来完成基本着色:填充和描边……
2. 免费
Coroutine 和 Fiber 用 JavaScript 实现了协程调度器,并且渲染是异步的,支持时间分片和悬念组件。

弗雷
👻 带有 Fiber 的微型并发 UI 库。

-
并发模式——这是一个很棒的想法,它在 JavaScript 中实现了协程调度程序,也称为时间分片。
-
键控协调算法——Fre 有一个最小最长公共子序列算法,它支持键控预处理。
-
事半功倍——经过 tree shake 后,hello world项目只有1KB,但却拥有大部分功能,虚拟DOM,hooks API,Fragments,Fre.memo等等。
贡献者

用法
yarn add fre
import { render, useState } from 'fre'
function App() {
const [count, setCount] = useState(0)
return <>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</>
}
render(<App/>, document.body)
…
3. TypeScript 深度探索
TypeScript 的权威指南,或许也是最好的 TypeScript 书籍。免费开源
📚 TypeScript 权威指南,或许也是最好的 TypeScript 书籍 📖。免费开源 🌹
4. 供应商
使用 Nest 和 TypeScript 在 Node.js 上构建的无头 GraphQL 电子商务框架,专注于提高开发人员的工作效率和易于定制。
供应商
一个基于Node.js 、 GraphQL、Nest和TypeScript构建的开源无头商务平台,专注于提高开发人员的工作效率和易于定制。


分支
master- 最新稳定版本,目前为 2.x 系列。
minor- 下一个补丁版本,包括新功能
major- 下一个主要版本(v3.0)
v2.x- 2.x 版本,将在 2024 年 12 月 31 日停止服务前接收关键修复。此分支中的代码遵循 MIT 许可证。
结构
该项目是一个使用Lerna进行管理的 monorepo 。该 repo 发布了几个 npm 包,可以在packages/目录中找到。
vendure/
├── docs/ # Documentation source
├── e2e-common/ # Shared config
…
5.涡轮增压
Turbo 使用互补技术来大幅减少大多数 Web 应用程序需要编写的自定义 JavaScript 数量
无需编写任何 JavaScript,即可达到单页 Web 应用程序的速度
涡轮
Turbo 使用互补技术来大幅减少大多数 Web 应用程序需要编写的自定义 JavaScript 的数量:
- Turbo Drive 无需重新加载整个页面,从而加速链接和表单提交。
- Turbo Frames 将页面分解为独立的上下文,这些上下文可以控制导航范围并可以延迟加载。
- Turbo Streams 通过 WebSocket 传递页面更改,或仅使用 HTML 和一组类似 CRUD 的操作来响应表单提交。
- Turbo Native 让您庞大的整体成为原生 iOS 和 Android 应用程序的中心,并在 Web 和原生部分之间实现无缝过渡。
这一切都是通过网络发送 HTML 来完成的。如果这还不够,你可以借助 Hotwire 的另一端,用Stimulus来完成这项工作。
请参阅turbo.hotwired.dev上的更多信息。
贡献
请阅读CONTRIBUTING.md。
© 2024 37signals LLC。
6. AI专家路线图
2020年成为人工智能专家的路线图
7. GraphQL 工具
使用模式语言构建、模拟和拼接 GraphQL 模式
🔧 GraphQL 实用程序库,用于以 SDL 优先方法构建、拼接和模拟 GraphQL 模式



此包提供了一些创建 GraphQL 模式的有用方法:
- 使用 GraphQL Schema 语言生成完全支持解析器、接口、联合和自定义标量的 Schema。生成的 Schema 与GraphQL.js完全兼容。
- 使用细粒度的每种类型模拟来模拟您的 GraphQL API
- 自动将多个模式拼接成一个更大的 API
文档
阅读文档。
绑定到 HTTP
如果您想将 JavaScript GraphQL 模式绑定到 HTTP 服务器,则可以使用GraphQL Yoga。
graphql-tools您可以使用和一起开发基于 JavaScript 的 GraphQL API,GraphQL Yoga一个用于编写模式和解析器代码,另一个用于将其连接到 Web 服务器。
例子
使用时graphql-tools,您可以将模式描述为 GraphQL 类型语言字符串:
const typeDefs = /* GraphQL */ `
type Author {
id: ID! # the ! means that every author object…
8. React-worker 组件
React Worker 组件简化了 Web Worker 的使用
React Worker 组件简化了 Web Worker 的使用
React-worker-组件

React Worker 组件简化了 Web Worker 的使用
介绍
这是一个受React Server Component启发的实验项目。
我一直在开发几个库来与 Web Workers 进行交互。
虽然它们提供了具有良好抽象的各种接口,但 RSC 风格是另一种对 Web Worker 有用的方法。
RWC 是一个为 Web Workers 提供类似 RSC 接口的库。它序列化 React 元素时尽可能保留其引用标识。如果一个 React 组件被“注册”,它将通过字符串名称引用,并且可以在两端使用。
项目状态:实验性但基本示例正在运行。欢迎尝试实际示例。
安装
npm install react-worker-components
用法
TextBox.js
这是一个可以在 RWC 树中使用的组件。register对于启用序列化很重要。
import React, { useState } from 'react';
import { register } from 'react-worker-components'…
9. 斯莫尔达什
Smoldash,为现代网络构建的小型 lodash 替代品
Smoldash,为现代网络构建的小型 lodash 替代品


Smoldash - 微小的 2kb Lodash 替代品
注意:此库尚未经过实战测试。可能存在一些 bug,但目前尚未收到任何报告。
Lodash 是一个非常棒的 JavaScript 实用库,但随着 ECMAScript 近期新增的功能,其中许多特性可以被原生功能取代。该库旨在成为一款更轻量级的替代方案,并充分考虑现代浏览器的需求。
支持的功能:
_.at
_.clone
_.cloneDeep
_.compact
_.every
_.findIndex
_.find
_.filter
_.flatten
_.flow
_.forEach
_.get
_.groupBy
_.has
_.head
_.indexOf
_.isEmpty
_.isEqual
_.kebabCase
_.keyBy
_.map- 仅映射数组
_.merge
_.once
_.pickBy
_.range
_.sortBy
_.some
_.take
_.uniqBy
_.uniqueId
安装
npm install smoldash
# or via yarn
yarn add smoldash
执照
MIT,请参阅LICENSE 文件
10.布尔玛
基于 Flexbox 的现代 CSS 框架
Bulma 是一个基于Flexbox 的现代 CSS 框架。


快速安装
Bulma 正在持续开发中!立即试用:
新公共管理
npm install bulma
或者
纱
yarn add bulma
鲍尔
bower install bulma
进口
安装后,您可以使用以下代码片段将 CSS 文件导入到您的项目中:
@import 'bulma/css/bulma.css'
CDN
https://www.jsdelivr.com/package/npm/bulma
请随意提出问题或提交拉取请求。
仅限 CSS
Bulma 是一个CSS框架。因此,它唯一的输出是一个 CSS 文件:bulma.css
您可以直接使用该文件,也可以下载 Sass 源文件来自定义变量。
它不包含 JavaScript。人们通常希望使用自己的 JS 实现(通常已经有了)。Bulma 可以被认为是“环境无关”的:它只是逻辑之上的样式层。
浏览器支持
Bulma 使用自动前缀来制作(大多数)Flexbox……
《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。
如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。
鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-1st-january-2021-5g29