🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 6 月 11 日 幻灯片 闹鬼🦇🎃 Windmill React UI 迷你打字稿 松属 隐私 发展 贡献 JavaScript 地图 CSSgram 《Trending Projects》以每周简讯形式提供，请在www.iainfreestone.com 上注册， 以确保您不会错过任何一期。
1.幻灯片 基于终端的演示工具
幻灯片 滑入您的终端。
安装
指示
MacOS
拱
Nixpkgs（不稳定）
nix-env -iA nixpkgs.slides
任何运行 Linux 发行版 snapd
去
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…
Enter fullscreen mode
Exit fullscreen mode
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 CLI 将自动安装包并为您配置项目。
npx million@latest
Enter fullscreen mode
Exit fullscreen mode
一旦关闭，只需运行您的项目，信息就会显示在您的命令行中！
安装时遇到问题？ → 查看安装指南
…
3.闹鬼 为 Web 组件实现的 React Hooks API
为 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 >
Enter fullscreen mode
Exit fullscreen mode
可以在这个要点 中找到更多示例集成 。
钩子 闹鬼支持同样的...
4. React Cool Virtual 一个微小的 React 钩子，可以轻而易举地渲染大型数据集。
😎 ♻️ 一个小小的 React 钩子，可以轻而易举地渲染大型数据集。
一个微小的 React 钩子，可以轻而易举地渲染大型数据集。
特征
5.风车用户界面 用于快速、方便地开发华丽界面的组件库。
Windmill React UI 用于快速、方便地开发华丽界面的组件库。
使用它的项目： Windmill Dashboard React
使命 尽可能以最便捷的方式实现开箱即用，并成为最快的生产方式。
前往文档查看完整的实时示例
🚀 使用方法 安装
npm i @windmill /react-ui
Enter fullscreen mode
Exit fullscreen mode
里面 tailwind.config.js
const windmill = require ( '@windmill /react-ui/config' )
module . exports = windmill ( {
purge : [ ] ,
theme : {
extend : { } ,
} ,
variants : { } ,
plugins : [ ] ,
} )
Enter fullscreen mode
Exit fullscreen mode
然后将其放置 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 > …
Enter fullscreen mode
Exit fullscreen mode
6. mini-typescript Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构
Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构
迷你打字稿 Typescript 编译器的微型模型，旨在教授真实 Typescript 编译器的结构
该项目包含两种编译器模型：micro-typescript 和 centi-typescript。
micro-typescript 的诞生源于我最初阅读 《机器学习中的现代编译器实现》一书，当时我想了解更多关于编译器后端的知识。当我开始构建示例编译器时，我发现几乎所有 前端 部分的实现我都不认同 。于是我自己写了个，结果发现我写了 一个小小的 Typescript 。
我意识到，对于想要学习 Typescript 编译器工作原理的人来说，一个小型的 Typescript 会很有用。因此，我用 Typescript 重写了它，并添加了一些练习，方便大家练习。micro-typescript 是我能想到的最小的编译器，它只实现了 Typescript 的一小部分： var声明、赋值和数字字面量。仅有的两种类型是 string和 number……
7. 松属 直观、类型安全、轻量且灵活的 Vue Store，使用支持 DevTools 的组合 API
🍍 直观、类型安全、轻便且灵活的 Vue Store，使用 Composition API 并支持 DevTools
松属
直观、类型安全且灵活的 Vue Store
💡 直观 🔑 类型安全 ⚙️ Devtools 支持 🔌 可扩展 🏗 模块化设计 📦 非常轻 ⛰️ Nuxt 模块
Pinia 可与 Vue 2 和 Vue 3 兼容。
Pinia 的英语发音与西班牙语中pineapple 的发音最接近 ： piña 。菠萝实际上是一簇独立的花朵，它们连接在一起形成一个果实。就像商店一样，每朵花都是独立生长的，但最终都连在一起。它也是一种美味的热带水果，原产于南美洲。
帮助我继续进行这个项目💚
银牌赞助商
铜牌赞助商
常问问题 关于该项目的一些说明和可能的问题：
问 ： Pinia 是 Vuex 的继任者吗？
…
8. Squoosh 直接在浏览器中使用一流的编解码器缩小图像。
Squoosh 是一款图像压缩网络应用程序，可以通过多种格式减小图像尺寸。
隐私 Squoosh 不会将您的图片发送到服务器。所有图片压缩都在本地进行。
然而，Squoosh 利用 Google Analytics 收集以下信息：
基本访客数据 。 前后图像尺寸值。 如果是 Squoosh PWA，则为 Squoosh 安装的类型。 如果是 Squoosh PWA，则安装时间和日期。
发展 为 Squoosh 进行开发：
克隆存储库 要安装节点包，请运行：
npm install
Enter fullscreen mode
Exit fullscreen mode
然后通过运行以下命令来构建应用程序：
npm run build
Enter fullscreen mode
Exit fullscreen mode
构建完成后，运行以下命令启动开发服务器：
npm run dev
Enter fullscreen mode
Exit fullscreen mode
贡献 Squoosh 是一个开源项目，我们衷心感谢所有社区成员的参与。如需为该项目做出贡献，请遵循 贡献指南 。
9. JavaScript 地图 一张纸上写着 Javascript。（另一张纸上写着算法）
一张纸上写着 Javascript。（另一张纸上写着算法）
JavaScript 地图
数据结构与算法
HTML、CSS 和 DOM 交互
密码学
响应式
10. CSSgram CSSGram 是一个用 Sass 和 CSS 编写的 Instagram 滤镜库。
CSSgram
CSSGram 是一个用 Sass 和 CSS 编写的 Instagram 滤镜库。
这是什么？ 简而言之，CSSgram 是一个可以直接使用 CSS 编辑图片并添加类似 Instagram 滤镜的库。我们的目标是为图片添加滤镜，并通过各种混合技术应用颜色和/或渐变叠加来模拟滤镜效果。这意味着 更少的手动图像处理 ，以及更多有趣的滤镜效果！
我们使用伪元素（例如 ::before和 ::after）来创建滤镜效果，因此您必须将这些滤镜应用于包含元素（例如 ，而不是 像 这样的 替换元素 <img>）。建议将图片包裹在 <figure>标签中。更多关于标签的信息， 请点击此处 。
浏览器支持 此库使用 CSS 滤镜 和 CSS 混合模式 。以下浏览器支持这些功能：
43岁以上✔ 38岁以上 ✔ 不✘ 13 ✔ 32岁以上 ✔ 8+ ✔
…
观星📈 过去 7 天内涨幅最大的股票
公共 API +3,934 颗星 Slidev +2,106 颗星 电子 +1,706 颗星 编码面试大学 +1,442 颗星 太棒了 +1,148颗星
过去 7 天最高增长 (%)
体外 +20% React-simple-flowchart +19% 滑动 +18% 可观察情节 +13% 使用状态机 +12%
过去 30 天内涨幅最大的股票
编码面试大学 +7,202 颗星 公共 API +6,806 颗星 免费编程书籍 +4,594 颗星 太棒了 +3,148颗星 开发者路线图 +3,120 星
过去 30 天内最高增长 (%)
使用状态机 +380% 无花果 +169% 可观察图 +47% Appwrite +40% 锤子 +39%
《Trending Projects》以每周简讯形式提供，请在www.iainfreestone.com 上注册， 以确保您不会错过任何一期。
如果您喜欢这篇文章，您可以在 Twitter 上 关注我 ，我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。
鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-11th-june-2021-772 
