🚀 GitHub 上针对 Web 开发人员的 10 个热门项目 - 2020 年 6 月 19 日 🎭 Playwright JSON 服务器镜头开源项目 (OpenLens) code-server 演示 - Figma - Twitter 2.0 中的新功能目录 Coursera:面向 Web 开发人员的 HTML、CSS 和 Javascript rrweb 快速构建可访问的 React 应用程序⚡️ face-api.js 功能运行 ahooks

2025-06-08

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

🎭 剧作家

JSON 服务器Node.js 持续集成

镜头开源项目(OpenLens)

代码服务器

演示- Figma - Twitter

2.0 新功能

目录

Coursera:面向 Web 开发人员的 HTML、CSS 和 Javascript

rrweb

快速构建可访问的 React 应用程序 ⚡️

face-api.js

特征

运行

钩子

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

1. 🎭 剧作家

Playwright 是一个 Node 库,使用单一 API 来自动化 Chromium、Firefox 和 WebKit。

GitHub 徽标 微软/剧作家

Node.js 库使用单一 API 实现 Chromium、Firefox 和 WebKit 自动化

🎭 剧作家

npm 版本 加入 Slack Chromium 版本 Firefox 版本 WebKit 版本

文档| API 参考

Playwright 是一个 Node.js 库,可通过单一 API 自动化ChromiumFirefoxWebKit。Playwright旨在实现跨浏览器的 Web 自动化,它持久耐用功能强大可靠快速

Linux macOS 视窗
铬 94.0.4595.0
WebKit 15.0
Firefox 91.0

所有平台的所有浏览器均支持无头执行。请查看系统要求了解详情。

用法

npm i -D playwright

这将安装 Playwright 以及适用于 Chromium、Firefox 和 WebKit 的浏览器二进制文件。安装完成后,您可以require在 Node.js 脚本中运行 Playwright,并自动执行 Web 浏览器交互。

功能

Playwright 旨在自动化单页应用程序和渐进式 Web 应用程序所使用的广泛且不断增长的 Web 浏览器功能。

  • 跨多个页面、域和 iframe 的场景
  • 自动等待元素准备就绪...

2. JSON服务器

在不到 30 秒的时间内获得一个完整的、零编码的仿制 REST API(真的)

GitHub 徽标 typicode / json 服务器

在不到 30 秒的时间内获得一个完整的、零编码的仿制 REST API(真的)

JSON 服务器Node.js 持续集成

在不到 30 秒的时间内获得一个完整的、零编码的仿制 REST API (真的)

使用 <3 创建,适合需要快速后端进行原型设计和模拟的前端开发人员。

参见:

 

黄金赞助商 🥇

 

 

 

 

 

 


从生成 API 到将 CSV 文件导入 Postgres,Retool 提供 20 多个开发者实用程序,是构建应用程序的必备资源。立即查看


 

 

成为赞助商并在此展示您的公司徽标

赞助

请帮助我构建 OSS 👉 GitHub 赞助商 ❤️

目录


3. Lens | Kubernetes IDE

Lens 是您掌控 Kubernetes 集群所需的唯一 IDE。它是一个适用于 MacOS、Windows 和 Linux 操作系统的独立应用程序。它是开源且免费的。

GitHub 徽标 lensapp /镜头

Lens - Kubernetes IDE

镜头开源项目(OpenLens)

构建状态 在 Slack 上聊天

存储库

此代码库 (简称“OpenLens”) 是 Lens 团队与社区共同开发Lens IDE产品的地方。它由多位 Kubernetes 和云原生生态系统先驱提供支持。此源代码遵循MIT 许可证,可供所有人使用。

Lens - Kubernetes IDE

Lens - Kubernetes IDE(“Lens IDE”)是 OpenLens 存储库的一个发行版,具有根据传统EULA发布的 Team Lens 特定定制功能。

Lens IDE 为 Kubernetes 中运行的所有应用提供全面的态势感知。它降低了新手的入门门槛,并显著提高了经验丰富的用户的生产力。

Lens IDE 是适用于 MacOS、Windows 和 Linux 操作系统的独立应用程序。您可以从Lens IDE 网站免费下载适用于 Windows、MacOS 和 Linux 的版本

截屏

安装

参阅入门页面。

发展

参见开发页面。

贡献


4.代码服务器

在任何地方的任何机器上运行 VS Code 并在浏览器中访问它。

GitHub 徽标 cdr /代码服务器

浏览器中的 VS Code

代码服务器

“GitHub 讨论” “加入我们的 Slack” Twitter 关注 代码验证 参见 v3.11.1 文档

在任何地方的任何机器上运行VS Code并在浏览器中访问它。

截屏

亮点

  • 在任何设备上使用一致的开发环境进行编码
  • 使用云服务器加速测试、编译、下载等
  • 外出时节省电池寿命;所有密集型任务都在您的服务器上运行

要求

查看最低规格要求,以及如何设置可安装代码服务器的 Google VM 的说明。

TL;DR:启用 WebSockets 的 Linux 机器,1 GB RAM 和 2 个 CPU

入门

有三种方法可以开始:

  1. 使用安装脚本,它可以自动完成大部分过程。如果可能,该脚本会使用系统包管理器。
  2. 手动安装代码服务器
  3. 使用我们的一键按钮和指南将代码服务器部署到云提供商

如果您使用安装脚本,您可以预览安装过程中发生的情况:

curl -fsSL https://code-server.dev/install.sh
Enter fullscreen mode Exit fullscreen mode

5. CSS GG

开源 CSS、SVG 和 Figma UI 图标

GitHub 徽标 astrit / css.gg

700 多个纯 CSS、SVG 和 Figma UI 图标,可在 SVG Sprite、styled-components、NPM 和 API 中使用


6.Coursera:面向 Web 开发人员的 HTML、CSS 和 Javascript

该存储库包含 Coursera.org 课程“面向 Web 开发人员的 HTML、CSS 和 Javascript”中使用的所有示例源代码。

GitHub 徽标 jhu-ep-coursera / fullstack-course4

Coursera 课程:面向 Web 开发人员的 HTML、CSS 和 Javascript 示例代码

Coursera:面向 Web 开发人员的 HTML、CSS 和 Javascript

示例源代码

该存储库包含 Coursera.org 课程“面向 Web 开发人员的 HTML、CSS 和 Javascript”中使用的所有示例源代码

立即报名!免费!

常见问题

请查看我们的常见问题解答,看看您想在论坛上提出的问题是否已有答案。常见问题解答链接如下:

常见问题

客户网站上线

作为本课程的一部分,我们为一位真实客户开发了一个真实的网站。以下是最终产品的链接。(请注意,该网站未进行速度优化,以保持课程中的完整内容。网站优化不在本课程的范围内。)

马里兰州巴尔的摩的 David Chu's China Bistro 餐厅


7. 录制并回放网页

rrweb 指的是“记录和重放网络”,它是一个用于记录和重放用户在网络上的交互的工具。

GitHub 徽标 rrweb-io / rrweb

录制并重放网络

尝试 rrweb

rrweb

rrweb 社区的新冒险

加入 Slack 聊天 总 gzip 大小 录音机 gzip 大小

中文文档

我已经加入了 Github Sponsors,非常感谢您的赞助。

rrweb 指的是“记录和重放网络”,它是一个用于记录和重放用户在网络上的交互的工具。

指导

📚 在此处阅读 rrweb 指南。 📚

🍳 食谱 🍳

项目结构

rrweb 主要由 3 部分组成:

  • rrweb-snapshot,包含快照和重建功能。快照用于将 DOM 及其状态转换为具有唯一标识符的可序列化数据结构;重建功能用于将快照重建为相应的 DOM。
  • rrweb,包含 record 和 replay 两个函数。record 函数用于记录 DOM 中所有的变更;replay 函数则是将记录下来的变更,按照对应的时间戳逐一重放。
  • rrweb-player是 rrweb 的播放器 UI,提供基于 GUI 的功能,例如……

8. 脉轮

快速构建可访问的 React 应用程序

GitHub 徽标 脉轮ui /脉轮ui

⚡️ 适用于您的 React 应用程序的简单、模块化且可访问的 UI 组件

脉轮标志

快速构建可访问的 React 应用程序 ⚡️


捆绑包大小 语言等级:JavaScript MIT 许可证 NPM 下载 Github 星标 不和谐


Chakra UI 提供了一组可访问、可重复使用和可组合的 React 组件,使创建网站和应用程序变得非常容易。

正在寻找文档? 📝

对于旧版本,请访问此处 => https://v0.chakra-ui.com

最新版本 (v1) => https://chakra-ui.com

特征 🚀

  • 易于样式化:Chakra UI 包含一组布局组件,例如BoxStack,可以通过传递 props 轻松设置组件样式。了解更多
  • 灵活且可组合:Chakra UI 组件建立在 React UI Primitive 之上,具有无限的可组合性。
  • 可访问。Chakra UI 组件遵循 WAI-ARIA 指南规范并具有正确的aria-*属性。
  • 黑暗模式 😍 :Chakra UI 中的大多数组件都兼容暗模式。

支持Chakra UI 💖

捐赠 5 美元或以上即可支持此项目的持续开发。我们将不胜感激。感谢所有……


9. face-api.js

在 tensorflow.js 核心之上实现的用于浏览器和 nodejs 的 JavaScript 人脸识别 API


10. 阿里巴巴 - Hooks

React Hooks 库。

GitHub 徽标 阿里巴巴/钩子

React Hooks 库

英语 |简体中文

钩子

React Hooks 库。

NPM 版本 NPM 下载

📚 文档

特征

  • 易于学习和使用。
  • 包含丰富的从app中提炼出来的高级Hooks。
  • 包含丰富的基础Hooks。
  • 使用可预测的静态类型以 TypeScript 编写。

📦 安装

npm i ahooks --save

🔨 用法

 ‘ahooks’导入{  useRequest  }   
Enter fullscreen mode Exit fullscreen mode

核心团队

🤝 贡献

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ npm run init
$ npm start

打开浏览器访问http://127.0.0.1:8001,更多信息请参阅开发部分。

我们欢迎大家的贡献,请先阅读我们的CONTRIBUTING.MD,让我们一起构建一个更好的 hooks 库。

👥 讨论

执照

麻省理工学院





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

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

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-19th-june-2020-381d
PREV
🚀 GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 3 月 19 日 超棒的设计工具 github-elements Ionicons Bulletproof Node.js 架构 🛡️ 开源指南 nodejsscan
NEXT
🚀10 Trending projects on GitHub for web developers - 16th October 2020 Module Federation Examples React-Grid-Layout qiankun(乾坤) Pre-trained TensorFlow.js models Fluid Locomotive Scroll Docusaurus