🚀GitHub 上面向 Web 开发者的十大热门项目 - 2020 年 8 月 14 日 CodeceptJS GPU.js 这是什么魔法?Tailblocks Halfmoon 更新 - 2019 年 6 月:第二版 Tabler React 什么是 Nx?Figma 到代码

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2020 年 8 月 14 日

CodeceptJS

GPU.js

这是什么巫术?

尾块

半月

更新 - 2019 年 6 月:版本 2

Tabler React

Nx 是什么?

Figma 到代码

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

1.罗马

Rome 是一款适用于 JavaScript、TypeScript、JSON、HTML、Markdown 和 CSS 的 linter、编译器、打包器等工具。Rome 整合了之前各自独立的工具的功能。基于共享基础,我们能够提供统一的代码处理、错误显示、并行工作、缓存和配置体验。

GitHub 徽标 罗马/工具

Rome 工具链。适用于 JavaScript、TypeScript、HTML、Markdown 和 CSS 的 linter、编译器、打包器等。

罗马的标志描绘了一座古罗马拱门,侧面写着“罗马”字样

Rome是一个用于 JavaScript、TypeScript、JSON、HTML、Markdown 和 CSS 的linter、编译器、捆绑器等

Rome旨在取代BabelESLintwebpackPrettierJest等。

Rome统一了之前各自独立的工具功能。基于共享基础,我们能够提供统一的代码处理、错误显示、并行工作、缓存和配置体验。

Rome拥有强大的约定,并致力于最小化配置。了解更多关于我们项目理念的信息

Rome使用TypeScript编写,并在Node.js上运行。Rome没有任何依赖项,并且大部分都是从零开始编写的。更多信息请参阅鸣谢。

罗马由一支志愿者团队在既定的治理模式下维护

Rome获得 MIT 许可,并根据贡献者契约行为准则进行管理。

地位

当前的重点是linting。请参阅总体任务#20以了解更多……





2. CodeceptJS

CodeceptJS 是一个用于与 WebDriver(或其他)进行端到端测试的新测试框架。它将浏览器交互抽象为从用户角度编写的简单步骤。

GitHub 徽标 codeceptjs / CodeceptJS

NodeJS 的增压端到端测试框架

NPM 版本

构建状态:

剧作家测试 Puppeteer 测试 WebDriver 测试 Appium 测试 TestCafe 测试

CodeceptJS

参考:Helpers API

增强型 E2E 测试

CodeceptJS 是一个使用 WebDriver(或其他)进行端到端测试的新测试框架,它将浏览器交互抽象为从用户角度编写的简单步骤。一个简单的测试可以验证“欢迎”文本是否存在于网站主页上,如下所示:

功能'CodeceptJS 演示' 

场景( '检查网站上欢迎页面'  { I }  =>  { 
  I.amOnPage '/ ' ; I.see '欢迎' ; } ;
  
Enter fullscreen mode Exit fullscreen mode

CodeceptJS 测试包括:

  • 同步。您不需要关心回调或承诺,测试场景是线性的,您的测试也应该是线性的。
  • 从用户角度编写。每个操作都是一个方法I。这使得即使对于非技术人员来说,测试也易于阅读、编写和维护。
  • 后端API 不可知。我们不知道……

3. GPU.js

GPU.js 是一个 JavaScript 加速库,用于 Web 和 Node 平台上的 GPGPU(通用 GPU 计算)。GPU.js 会自动将简单的 JavaScript 函数转换为着色器语言并进行编译,以便在 GPU 上运行。即使 GPU 不可用,这些函数仍会以常规 JavaScript 运行。

GitHub 徽标 gpujs / gpu.js

GPU加速JavaScript

标识

GPU.js

GPU.js 是一个用于 Web 和 Node 的 JavaScript GPGPU(GPU 上的通用计算)的 JavaScript 加速库。GPU.js 会自动将简单的 JavaScript 函数转换为着色器语言并进行编译,以便它们在您的 GPU 上运行。如果没有 GPU,这些函数仍将在常规 JavaScript 中运行。有关更多快速概念,请参阅wiki 上的快速概念。

加入聊天 https://gitter.im/gpujs/gpu.js 松弛

这是什么巫术?

创建一个 GPU 加速内核,该内核由一个 JavaScript 函数转译而来,用于计算 512 x 512 矩阵(二维数组)中的单个元素。内核函数在 GPU 上串联运行,通常可以实现非常快速的计算!您可以在此处运行基准测试通常情况下,根据硬件配置,运行速度会提高 1-15 倍。矩阵乘法(对两个 512 x 512 矩阵执行矩阵乘法)用 GPU.js 编写:

浏览器

<脚本 src =“ dist / gpu-browser.min.js>
Enter fullscreen mode Exit fullscreen mode

4. 尾块

即用型 Tailwind CSS 块、15 个不同类别(电子商务、博客、定价等...)、响应式、暗/亮模式和颜色变化。

GitHub 徽标 mertJF /尾块

可立即使用的 Tailwind CSS 块。

尾块

即用型 Tailwind CSS 块

特征
  • 60+ 个区块
  • 响应式
  • 暗模式支持
  • 颜色变化

如何使用这个项目

尾块

该项目提供了多个使用Tailwind CSS构建的块,您可以在自己的项目中使用它们。该项目不是您添加到项目中的依赖项,而是为您提供了 HTML,您可以轻松复制并粘贴到自己的项目中。

要使用该项目:

  1. 前往尾部障碍
  2. 选择您想要使用的块。
  3. 从调色板中为您选择的块选择一种颜色。
  4. 使用暗/亮切换按钮选择是否使用亮模式或暗模式。
  5. 单击“查看代码”按钮。
  6. 复制/粘贴到您的项目中。
  7. 🎉

执照

代码版权归 2020 Mert Cukuren 所有。代码采用MIT 许可证发布。





5.半月

内置暗模式的前端框架,旨在快速构建漂亮的仪表板和产品页面。

GitHub 徽标 半月

具有内置暗模式和使用 CSS 变量完全可定制性的前端框架;非常适合构建仪表板和工具。

这是代码库的主分支,包含最新的稳定版本。有关正在进行的开发,请参阅开发分支

半月

具有内置暗模式和使用 CSS 变量完全可定制性的前端框架;非常适合构建仪表板和工具。

  • 内置暗模式——Halfmoon 带有内置、可切换的暗模式,这是其最重要和最具决定性的功能之一。
  • 使用 CSS 变量完全可自定义——该框架完全使用 CSS 变量(也称为 CSS 自定义属性)构建。它拥有近1,500 个 CSS 变量,这意味着几乎所有内容都可以通过覆盖属性进行自定义,从而轻松定制 Halfmoon 主题以适应您的品牌。了解更多关于自定义的信息
  • 非常适合构建仪表板和工具——这些组件具有非常标准的外观和感觉,非常适合用于仪表板和工具。此外,它们非常重视……

6. Tabler React

Tabler Dashboard UI Kit 的 React 实现

GitHub 徽标 tabler / tabler-react

Tabler UI 主题的 React 组件和演示。

更新 - 2019 年 6 月:版本 2

Alpha 版本现已在 NPM 上可用:

npm install tabler-react@alpha yarn add tabler-react@alpha

查看最新进展并参与此分支,或在此问题上添加您的想法和要求

Tabler React

Tabler Dashboard UI Kit的 React 实现

新公共管理 类型定义 绿地管理员徽章 承诺者友好

演示|文档|问题| Slack

安装

确保您已安装Node.js 8+ 和yarn

yarn add tabler-react

例子

 “react”导入React  {  Component  }  导入“tabler-react/dist/Tabler.css”  
 

 “tabler-react”导入{  Card  Button  }   

class  MyCard 扩展 Component  { 
  render ( )  { 
    return  ( 
      <Card> < Card.Header 
        > < Card.Title >卡片标题< /Card.Title > < /Card.Header > < Card.Body > < Button color = " primary " >按钮</Button> < / Card
          
        
        
           
        
Enter fullscreen mode Exit fullscreen mode

7.X州

XState 是一个用于创建、解释和执行有限状态机和状态图的库,它还能管理这些机器作为 Actor 的调用。为了充分利用 XState,以及您当前和未来的所有软件项目,了解以下计算机科学基本概念至关重要。

GitHub 徽标 statelyai / xstate

现代网络的状态机和状态图。


状态
JavaScript 状态机和状态图

npm 版本

适用于现代网络的JavaScript 和 TypeScript有限状态机状态图。

📖 阅读文档

💙 探索我们的示例目录

📑 遵循SCXML 规范

💬 在Stately Discord 社区上聊天

套餐

模板

首先在 CodeSandbox 上 fork 其中一个模板:


8. Nx

适用于 Monorepos 的可扩展开发工具。Nx 可帮助您将开发规模从构建一个应用程序的单团队扩展到在同一个工作区中构建多个前端和后端应用程序的多个团队。

GitHub 徽标 nrwl / nx

智能、可扩展的构建框架

Nx - 智能、可扩展的构建框架

CircleCI 执照 NPM 版本 语义释放 承诺者友好 加入聊天 https://gitter.im/nrwl-nx/community 在 Slack 上加入我们 @nrwl/community


Nx 是什么?

🔎 智能、可扩展的构建框架

Nx 是一个智能且可扩展的构建框架,可帮助您构建、测试和构建任何规模的架构——与现代技术和框架无缝集成,同时提供基于分布式图的任务执行、计算缓存、受影响项目的智能重建、强大的代码生成器、编辑器支持、GitHub 应用程序等。

一流的 Monorepos 支持

Nx提供基于分布式图的任务执行和计算缓存。

Nx非常智能。它会分析你的工作区,并找出每次代码更改可能带来的影响。因此,Nx 不会在每次提交时重建并重新测试所有内容——它只会重建必要的内容

Nx将命令划分为多个较小任务的图表。然后,Nx 并行运行这些任务,甚至可以在无需任何配置的情况下将它们分布到多台机器上

Nx 也使用分布式计算缓存。如果有人已经构建或测试过类似的……


9. 可移动

可移动是指可拖动、可调整大小、可缩放、可旋转、可变形、可捏合、可分组、可捕捉

GitHub 徽标 日刷/可移动

可移动!可拖拽!可调整大小!可缩放!可旋转!可变形!可捏合!可组合!可折断!

活动

npm 版本 特拉维斯(.org) 反应 预行动 角度 Vue Vue 3 苗条 点亮

可移动是指可拖动、可调整大小、可缩放、可旋转、可变形、可捏合、可分组、可捕捉

演示/ Storybook / API /主项目

🔥 特征

  • 可拖动是指可以拖动和移动目标。
  • Resizable表示目标的宽度和高度是否可以增加或减少。
  • Scalable表示目标的 x 和 y 是否可以缩放变换。
  • Rotatable表示目标是否可以旋转。
  • 可扭曲表示目标是否可以扭曲(扭曲、弯曲)。
  • Pinchable表示目标是否可以被拖动、可调整大小、可缩放、可旋转地进行捏合。
  • Groupable表示目标是否可以按组移动,具有可拖动、可调整大小、可缩放、可旋转等功能。
  • Snappable指示是否与指引对齐。
  • OriginDraggable *表示是否拖动原点。
  • Clippable表示是否裁剪目标。
  • Roundable表示是否显示并拖动或双击边框半径。
  • 支持…





10. Figma 到代码

该项目旨在通过在 Tailwind、Flutter 和 SwiftUI 中生成响应式布局来提升标准。我们计划最终添加对 Jetpack Compose 的支持,并可能支持标准 HTML 或其他框架,例如 React Native、Bootstrap 或 Fluent。

GitHub 徽标 贝纳法拉利/ FigmaToCode

在 HTML、Tailwind、Flutter 和 SwiftUI 上生成响应式页面和应用程序。

Figma 到代码

Figma 到代码

叽叽喳喳

大多数设计到代码插件都很糟糕,有些甚至是付费的。本项目旨在通过在TailwindFlutterSwiftUI中生成响应式布局来提升标准。我们计划最终添加对Jetpack Compose 的支持,以及可能的标准 HTML 或其他框架(例如React NativeBootstrapFluent )。欢迎反馈、想法和合作!

展示转换的 Gif

工作原理

这个插件采用了一种非常规的方法来提高代码质量:它在代码转换开始之前就优化了布局。标准的 Figma节点(代表每个层)使用起来很方便,但它无法在不修改用户项目的情况下修改层。因此,我决定将其虚拟化,重新制作官方实现并将其命名为。在将 转换AltNodes的过程中,该插件执行以下操作:NodeAltNode

转换工作流程

该过程也可以是……





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

如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-14th-august-2020-3ol6
PREV
🚀 GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 15 日 📊 指标 React 开发者路线图 JavaScript 问题 Node-RED es6-cheatsheet 简介 Material Dashboard 2
NEXT
🚀 GitHub 上针对 Web 开发者的 10 个热门项目 - 2020 年 9 月 11 日 react-beautiful-dnd (rbd) VvvebJs eleventy 🕚⚡️ better-scroll 安装 CDN Webamp Reactjs-popup Docker 课程