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

幻灯片

闹鬼🦇🎃

Windmill React UI

迷你打字稿

松属

咕咕！

隐私

发展

贡献

JavaScript 地图

CSSgram

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

1.幻灯片

基于终端的演示工具

maaslalani /幻灯片

基于终端的演示工具

幻灯片

滑入您的终端。

安装

指示

MacOS

brew install slides

拱

yay -S slides

Nixpkgs（不稳定）

nix-env -iA nixpkgs.slides

任何运行 Linux 发行版`snapd`

sudo snap install slides

去

go install github.com/maaslalani/slides@latest

来源：

git clone https://github.com/maaslalani/slides.git
cd slides
go install

您还可以从发布页面下载二进制文件。

用法

创建一个包含幻灯片的简单 markdown 文件：

# Welcome to Slides
A terminal based presentation tool
---

## Everything is markdown
In fact, this entire presentation is a markdown file.

---

## Everything happens in your terminal
Create slides and present them without ever leaving your terminal.

---

## Code execution
```go
package main

import "fmt"

func main() {
  fmt.Println("Execute code directly inside the slides")
}
```

You can execute code inside your slides by pressing `<C-e>`,
the output of your command

…

在 GitHub 上查看

200万

<1kb 虚拟 DOM - 速度真快！目前的虚拟 DOM 实现存在诸多不足——从过于复杂到已被废弃，大多数实现如果不牺牲原始性能和大小就无法使用。Million 旨在解决这个问题，提供一个与库无关的虚拟 DOM，作为 JavaScript 库的核心。

艾登尼拜/百万

优化 React 性能，让您的 React 在几分钟内（而不是几个月）加快 70%。

想要自动查找并修复性能问题？不妨看看Million Lint。

什么是Million.js？

Million.js 是一个极其快速且轻量级的优化编译器，可以使组件速度提高70%。

天哪……又要一个/virtual dom|javascript/gi框架？我已经用React很顺手了，为什么还需要这个？

Million.js 与 React 兼容，可加快协调速度。通过使用经过微调和优化的虚拟 DOM，Million.js 降低了 diff 的开销（点击此处试用）

TL;DR：想象一下React组件以原始 JavaScript 的速度运行。

👉 几秒钟内设置 Million.js！→

安装

Million.js CLI 将自动安装包并为您配置项目。

npx million@latest

一旦关闭，只需运行您的项目，信息就会显示在您的命令行中！

安装时遇到问题？→ 查看安装指南

…

在 GitHub 上查看

3.闹鬼

为 Web 组件实现的 React Hooks API

matthewp /闹鬼

为 Web 组件实现的 React Hooks API 👻

闹鬼🦇🎃

React 的 Hooks API，但适用于标准 Web 组件和lit-html或hyperHTML。

📚阅读文档📖

<html lang="en">
  <my-counter></my-counter>

  <script type="module">
    import { html } from 'https://unpkg.com/lit?module';
    import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

    function Counter() {
      const [count, setCount] = useState(0);

      return html`
        <div id="count">${count}</div>
        <button type="button" @click=${() => setCount(count + 1)}>
          Increment
        </button>
      `;
    }

    customElements.define('my-counter', component(Counter));
  </script>
</html>

可以在这个要点中找到更多示例集成。

钩子

闹鬼支持同样的...

在 GitHub 上查看

4. React Cool Virtual

一个微小的 React 钩子，可以轻而易举地渲染大型数据集。

wellyshen / react-cool-virtual

😎 ♻️ 一个小小的 React 钩子，可以轻而易举地渲染大型数据集。

一个微小的 React 钩子，可以轻而易举地渲染大型数据集。

特征

♻️ 使用DOM 回收，以高性能的方式渲染数百万个项目。
🎣 易于使用，基于 React hook。
💅🏼 轻松应用样式，只需进行一些设置。
🧱 支持固定、可变、动态和实时高度/宽度。
🖥 支持响应式网页设计 (RWD)以获得更好的用户体验。
📌 支持粘性标题以构建趋势列表。
🚚 内置加载更多回调，助您应对无限滚动 +骨架屏。
🖱用于偏移、项目和对齐的命令式滚动方法。
🛹 开箱即用的平滑滚动，并且效果可 DIY。
💬 可以实现坚持到底和预先挂起聊天、提要等项目。
⛳isScrolling为您提供 UI 占位符或性能优化的指标。
🗄️ 支持服务器端渲染（SSR），实现快速的FP + FCP和更好的SEO。
📜 支持…

在 GitHub 上查看

5.风车用户界面

用于快速、方便地开发华丽界面的组件库。

estevanmaito / windmill-react-ui

🧩 用于快速、方便地开发华丽界面的组件库。

Windmill React UI

用于快速、方便地开发华丽界面的组件库。

使用它的项目：Windmill Dashboard React

使命

尽可能以最便捷的方式实现开箱即用，并成为最快的生产方式。

前往文档查看完整的实时示例

🚀 使用方法

安装

npm i @windmill/react-ui

里面tailwind.config.js

const windmill = require('@windmill/react-ui/config')
module.exports = windmill({
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
})

然后将其放置Windmill在项目的根目录下（顺序无关紧要，只要您的应用程序在里面即可）。

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Windmill } from '@windmill/react-ui'
ReactDOM.render(
  <Windmill>
    <App />
  </Windmill>

…

在 GitHub 上查看

6. mini-typescript

Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构

sandersn / mini-typescript

Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构

迷你打字稿

Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构

该项目包含两种编译器模型：micro-typescript 和 centi-typescript。

micro-typescript 的诞生源于我最初阅读《机器学习中的现代编译器实现》一书，当时我想了解更多关于编译器后端的知识。当我开始构建示例编译器时，我发现几乎所有前端部分的实现我都不认同。于是我自己写了个，结果发现我写了一个小小的 Typescript。

我意识到，对于想要学习 Typescript 编译器工作原理的人来说，一个小型的 Typescript 会很有用。因此，我用 Typescript 重写了它，并添加了一些练习，方便大家练习。micro-typescript 是我能想到的最小的编译器，它只实现了 Typescript 的一小部分：var声明、赋值和数字字面量。仅有的两种类型是string和number……

在 GitHub 上查看