🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 1 日 IconPark Fre TypeScript Deep Dive Vendure Turbo react-worker-components Smoldash - 微型 2kb Lodash 替代品 Bulma

2025-06-08

🚀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 图标。

GitHub 徽标 字节跳动/ IconPark

🍎将一个 SVG 图标转换为多种主题,并生成 React 图标,Vue 图标,svg 图标

英语 |简体中文

介绍

IconPark 提供超过 2000 个高质量图标,并引入了自定义图标的界面。我们不再使用多个 SVG 源文件来实现不同的主题,而是实现了一项技术,将单个 SVG 源文件的属性转换为多个主题。此外,我们还提供跨平台组件,包括react-iconsvue-iconssvg-icons。无论您是设计师还是开发者,都可以免费将它们用于您的设计或项目中。

套餐

生成跨平台组件

在文件夹中查找包packages。NPM 包让您可以轻松地将图标组件导入到项目中。

多个主题

可以通过在节点上设置两个属性来完成基本着色:填充和描边……


2. 免费

Coroutine 和 Fiber 用 Ja​​vaScript 实现了协程调度器,并且渲染是异步的,支持时间分片和悬念组件。

GitHub 徽标 弗雷斯/弗雷

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

免费徽标

弗雷

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

构建状态 代码覆盖率 npm-v npm-d 布罗特利

  • 并发模式——这是一个很棒的想法,它在 JavaScript 中实现了协程调度程序,也称为时间分片

  • 键控协调算法——Fre 有一个最小最长公共子序列算法,它支持键控预处理。

  • 事半功倍——经过 tree shake 后,hello world项目只有1KB,但却拥有大部分功能,虚拟DOM,hooks API,Fragments,Fre.memo等等。

贡献者



用法

yarn add fre
Enter fullscreen mode Exit fullscreen mode
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)
Enter fullscreen mode Exit fullscreen mode

3. TypeScript 深度探索

TypeScript 的权威指南,或许也是最好的 TypeScript 书籍。免费开源

GitHub 徽标 basarat /打字稿

📚 TypeScript 权威指南,或许也是最好的 TypeScript 书籍 📖。免费开源 🌹

YouTube 频道订阅者

深入探究 TypeScript

学习专业的 TypeScript。我一直在研究人们开始使用 TypeScript 时经常遇到的问题。这些经验基于Stack Overflow / DefinitelyTyped 的经验教训以及TypeScript 社区的普遍参与。您可以关注更新,也别忘了在 GitHub 上点赞🌹

评论

  • 谢谢你这本精彩的书。我从中学到了很多。(链接)
  • 这可能是目前最好的 TypeScript 书籍了。干得好(链接
  • 我很喜欢这些例子和解释,它们如此精确和清晰!(链接
  • 只需低廉的免费价格,即可获得大量精彩内容。TypeScript Deep Dive 包含丰富的源代码示例和清晰简洁的讲解,助您学习 TypeScript 开发。(链接)
  • 非常感谢!TypeScript 2 详解最佳!链接
  • 这本 gitbook 让我的项目快速启动。流畅易用……

4. 供应商

使用 Nest 和 TypeScript 在 Node.js 上构建的无头 GraphQL 电子商务框架,专注于提高开发人员的工作效率和易于定制。

GitHub 徽标 vendure-电子商务/ vendure

具有定制化基因的商业平台。

供应商

一个基于Node.js 、 GraphQLNestTypeScript构建的开源无头商务平台,专注于提高开发人员的工作效率和易于定制。

构建状态 发布并安装 勒拿

供应商-github-社交横幅

  • 入门:只需一个命令即可在几分钟内启动并运行 Vendure
  • 现场演示
  • Vendure Discord:加入我们的 Discord 以获得支持并解答您的问题

分支

  • 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 数量

GitHub 徽标 热线/涡轮

无需编写任何 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年成为人工智能专家的路线图

GitHub 徽标 AMAI-GmbH / AI专家路线图

2022 年成为人工智能专家的路线图

开发者路线图

i.am.ai
AI专家路线图

2022 年成为人工智能专家的路线图

AMAI有限公司 MIT 许可证


下面有一组图表,展示了成为数据科学家、机器学习专家或人工智能专家的途径和所需掌握的技术。我们为新员工制作了这些图表,旨在帮助他们成为人工智能专家,但我们希望在这里分享它们,以帮助社区。

如果您有兴趣成为德国AMAI的 AI 专家,或者您想聘请 AI 专家,请发送邮件至 hi@am.ai

笔记

👉 可以在i.am.ai/roadmap 👈找到一个交互式版本,其中包含有关列表每个项目的链接。

要接收更新,请为⭐ 加星标并关注 👀 GitHub Repo,当我们添加新内容时,您会收到通知,从而掌握最新的研究成果。

跟随…


7. GraphQL 工具

使用模式语言构建、模拟和拼接 GraphQL 模式

GitHub 徽标 ardatan / graphql-tools

🔧 GraphQL 实用程序库,用于以 SDL 优先方法构建、拼接和模拟 GraphQL 模式

GraphQLConf 2024 横幅:9 月 10 日至 12 日,旧金山。由 GraphQL 基金会主办

工具包

npm 版本 CI Discord聊天 代码风格:Prettier 翻新应用程序徽章

此包提供了一些创建 GraphQL 模式的有用方法:

  1. 使用 GraphQL Schema 语言生成完全支持解析器、接口、联合和自定义标量的 Schema。生成的 Schema 与GraphQL.js完全兼容。
  2. 使用细粒度的每种类型模拟来模拟您的 GraphQL API
  3. 自动将多个模式拼接成一个更大的 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
Enter fullscreen mode Exit fullscreen mode

8. React-worker 组件

React Worker 组件简化了 Web Worker 的使用

GitHub 徽标 dai-shi / react-worker-components

React Worker 组件简化了 Web Worker 的使用

React-worker-组件

CI npm 尺寸 不和谐

React Worker 组件简化了 Web Worker 的使用

介绍

这是一个受React Server Component启发的实验项目。

我一直在开发几个库来与 Web Workers 进行交互。

虽然它们提供了具有良好抽象的各种接口,但 RSC 风格是另一种对 Web Worker 有用的方法。

RWC 是一个为 Web Workers 提供类似 RSC 接口的库。它序列化 React 元素时尽可能保留其引用标识。如果一个 React 组件被“注册”,它将通过字符串名称引用,并且可以在两端使用。

项目状态:实验性但基本示例正在运行。欢迎尝试实际示例。

安装

npm install react-worker-components
Enter fullscreen mode Exit fullscreen mode

用法

TextBox.js

这是一个可以在 RWC 树中使用的组件。register对于启用序列化很重要。

import React, { useState } from 'react';
import { register } from 'react-worker-components'
Enter fullscreen mode Exit fullscreen mode

9. 斯莫尔达什

Smoldash,为现代网络构建的小型 lodash 替代品

GitHub 徽标 marvinhagemeister / smoldash

Smoldash,为现代网络构建的小型 lodash 替代品

Smoldash 徽标

Smoldash 捆绑包大小

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
Enter fullscreen mode Exit fullscreen mode

执照

MIT,请参阅LICENSE 文件





10.布尔玛

基于 Flexbox 的现代 CSS 框架

GitHub 徽标 jgthms /布尔玛

基于 Flexbox 的现代 CSS 框架

Bulma 是一个基于Flexbox 的现代 CSS 框架

Github npm npm 惊人的 加入聊天 https://gitter.im/jgthms/bulma 构建状态

Bulma:一个 Flexbox CSS 框架

快速安装

Bulma 正在持续开发中!立即试用:

新公共管理

npm install bulma
Enter fullscreen mode Exit fullscreen mode

或者

yarn add bulma
Enter fullscreen mode Exit fullscreen mode

鲍尔

bower install bulma
Enter fullscreen mode Exit fullscreen mode

进口

安装后,您可以使用以下代码片段将 CSS 文件导入到您的项目中:

@import 'bulma/css/bulma.css'
Enter fullscreen mode Exit fullscreen mode

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
PREV
🚀GitHub 上 10 个面向 Web 开发者的热门项目 - 2021 年 10 月 1 日 🧠 ct.css – 来看看你的 <head> Partytown 🎉 已弃用 ⚠️ 已存档。Prestige React 电子表格 espub React JS 登陆页面模板 🛎️🛎️ 好消息!全新改进的 V2 版现已发布
NEXT
🚀 GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 3 月 19 日 超棒的设计工具 github-elements Ionicons Bulletproof Node.js 架构 🛡️ 开源指南 nodejsscan