发布于 2026-01-05 2 阅读
0

🚀2020年6月12日 GitHub 上十大热门 Web 开发项目 - SpaceX REST API 20 多个使用原生 JavaScript 的 Web 项目 React+TypeScript 速查表 AdminLTE - Bootstrap 4 管理后台 The Algorithms - JavaScript GrapesJS CloudMapper 命令 单个 Div 开发者全球展示挑战赛(由 Mux 呈现):展示你的项目!

🚀2020年6月12日,GitHub上面向Web开发者的十大热门项目

SpaceX REST API

20 多个使用原生 JavaScript 的 Web 项目

React+TypeScript 速查表

AdminLTE - Bootstrap 4 管理后台

算法 - JavaScript

GrapesJS

CloudMapper

命令

单一部门

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

1. SpaceX-API

用于火箭、芯级、返回舱、发射台和发射数据的开源 REST API

GitHub 标志 r-spacex / SpaceX-API

🚀 用于 SpaceX 发射、火箭、核心级、太空舱、星链、发射台和着陆台数据的开源 REST API。

SpaceX REST API

用于发射、火箭、核心级、太空舱、星链、发射台和着陆台数据的开源 REST API

我们与太空探索技术公司(SpaceX)及其任何子公司或关联公司没有任何关联、合作、授权、认可或任何其他官方联系。SpaceX 名称以及相关名称、标志、徽标和图像均为其各自所有者的注册商标。

文档- API 客户端-应用-状态-数据库转储

用法

GET https://api.spacexdata.com/v4/launches/latest
Enter fullscreen mode Exit fullscreen mode
{
   "整流罩" : null 
  "链接" : {
     "补丁" : {
       "" : " https://images2.imgbox.com/eb/0f/Vev7xkUX_o.png " ,
       "" : " https://images2.imgbox.com/ab/79/Wyc9K7fv_o.png "
    },
    " reddit " : {
       " campaign " : " https://www.reddit.com/r/spacex/comments/fjf6rr/dm2_launch_campaign_thread/ " ,
       " launch " : " https://www.reddit.com/r/spacex/comments/glwz6n/rspacex_cctcap_demonstration_mission_2_general " ,
       " media " : " https://www.reddit.com/r/spacex/comments/gp1gf5/rspacex_dm2_media_thread_photographer_contest/ " ,
       " recovery " : " https://www.reddit.com/r/spacex/comments/gu5gkd/cctcap_demonstration_mission_2_stage_1_recovery/ "
Enter fullscreen mode Exit fullscreen mode

2. 普通 Web 项目

使用 HTML5、CSS 和 JavaScript 构建的小型项目。未使用任何框架或库。


3. React+TypeScript 速查表

面向经验丰富的 React 开发人员的 TypeScript 入门速查表

GitHub 标志 typescript-cheatsheets / react

面向经验丰富的 React 开发人员的 TypeScript 入门速查表

React+TypeScript 速查表

react + ts 标志

面向经验丰富的 React 开发人员的 TypeScript 入门速查表

网络文档|中文翻译|西班牙语|葡萄牙语|贡献! |问!


👋 这个仓库由@swyx@ferdaber@eps1lon@jsjoeio@arvind-one维护,我们很高兴你们想尝试将 TypeScript 与 React 结合使用!如果发现任何错误或遗漏,请提交 issue 👍


所有贡献者| Discord|鸣叫

所有 React + TypeScript 速查表

  • 基础速查表/README.md)旨在帮助 React 开发者快速上手在 React应用中使用 TypeScript。
    • 重点在于提供有见地的最佳实践和可复制粘贴的示例。
    • 过程中会解释一些基本的 TS 类型用法和设置。
    • 解答最常见的问题。
    • 不详细讲解泛型类型逻辑。我们更倾向于教授新手简单的故障排除技巧。
    • 目标是在不学习过多TS知识的情况下,有效地使用TS。
  • 高级速查表/ADVANCED.md)…

4. 超级微型编译器

这是一个用易于阅读的 JavaScript 编写的现代编译器所有主要部分的超简化示例。

GitHub 标志 jamiebuilds /超级小编译器

⛄ 可能是史上最小的编译器

超级微型编译器

欢迎使用超小型编译器!

这是一个用易于阅读的 JavaScript 编写的现代编译器所有主要部分的超简化示例。

阅读这些引导性代码将帮助你了解大多数编译器从头到尾的工作原理。

想直接查看代码吗?点击这里

你也可以在 Glitch 上查看。


我为什么要关心?

这很合理,大多数人在日常工作中确实不需要考虑编译器。然而,编译器无处不在,你使用的很多工具都基于从编译器中借鉴的概念。

但是编译器很可怕!

是的,的确如此。但这都是我们(编写编译器的人)的错,我们把原本相当简单的东西搞得如此可怕,以至于大多数人认为它完全无法接近,只有最书呆子中的书呆子才能理解。

好的,那么在哪里?


5. AdminLTE

AdminLTE - 基于 Bootstrap 4 的免费后台管理面板模板

GitHub 标志 ColorlibHQ / AdminLTE

AdminLTE - 基于 Bootstrap 4 的免费后台管理面板模板

AdminLTE - Bootstrap 4 管理后台

npm 版本 包装工 CDN版本 Gitpod Ready-to-Code Discord邀请

AdminLTE是一款完全响应式的后台管理模板。它基于Bootstrap 4.6框架,并兼容 JS/jQuery 插件,高度可定制且易于使用。该模板能够完美适配从小型移动设备到大型台式机的多种屏幕分辨率。

在AdminLTE.io上预览

正在寻找高级模板?

AdminLTE.io 刚刚上线了全新的高级模板页面。我们精心挑选模板,确保最佳品质和最实惠的价格。访问https://adminlte.io/premium了解更多信息。

“AdminLTE演示”

AdminLTE的所有 JS、SCSS 和 HTML 文件都经过精心编写,并附有清晰的注释。SCSS 用于提高代码的可定制性。

快速入门

安装 AdminLTE 的方法有很多种。

下载及更新日志:

始终建议从 GitHub 下载最新版本的AdminLTE 3,以确保无 bug 并包含最新功能。
访问发布页面查看更新日志。
旧版本为AdminLTE 2 / AdminLTE 1

稳定版

从jsdelivr CDN获取:

重要提示……


6. 算法 - JavaScript

一个包含所有用 Javascript 实现的算法的存储库(仅用于教育目的)

GitHub 标志 算法/ Javascript

一个包含所有用 Javascript 实现的算法的存储库(仅用于教育目的)

算法 - JavaScript

欢迎投稿  语言等级:JavaScript Node CI 更新目录_md Discord聊天  

所有算法均使用 JavaScript 实现(仅用于教育目的)

在 Gitpod 中打开 

这些仅用于演示目的。JavaScript 标准库中有很多类似的实现,在性能方面要好得多。

投稿指南

捐款前请阅读我们的捐款指南。

算法列表

请查看我们的目录

算法解释

请参阅我们的维基百科





7. GrapeJS

免费开源的网站构建框架。无需编码即可构建模板的新一代工具。

GitHub 标志 artf / grapesjs

免费开源的网站构建框架。无需编码即可构建模板的新一代工具。

GrapesJS

构建状态 聊天 CDNJS npm

GrapesJS

GrapesJS 是一个免费开源的 Web 构建框架,它可以帮助您更快、更轻松地构建 HTML 模板,并将其应用于网站、新闻简报或移动应用。GrapesJS 的主要设计用途是在内容管理系统 (CMS)中使用,以加速动态模板的创建。为了更好地理解这个概念,请查看下图。


GrapesJS - 样式管理器


通常,任何“模板系统”(例如 CMS 等各种应用程序中的模板系统)都由结构(HTML)、样式(CSS)和变量组成,然后在服务器端替换为其他模板和内容,并在客户端呈现。

以下演示展示了可以实现的功能示例:
网页演示 - http://grapesjs.com/demo.html
电子报演示 - http://grapesjs.com/demo-newsletter-editor.html

目录

特征

积木 风格管理器 图层管理器
GrapesJS - 区块管理器 GrapesJS - 样式管理器 GrapesJS - 图层管理器
代码查看器 资产管理公司
GrapesJS - 代码查看器 GrapesJS - 资产管理器
  • 本地和远程存储

  • 默认内置命令(主要用于创建和管理不同的组件)


8. Cloudmapper

CloudMapper 可帮助您分析 Amazon Web Services (AWS) 环境。

GitHub 标志 duo-labs / cloudmapper

CloudMapper 可帮助您分析 Amazon Web Services (AWS) 环境。

CloudMapper

CloudMapper 可帮助您分析 Amazon Web Services (AWS) 环境。最初,它的功能是生成网络拓扑图并在浏览器中显示。现在,它包含更多功能,包括安全问题审计。

命令

  • audit检查是否存在潜在的配置错误。
  • collect收集账户元数据。更多详情请点击此处
  • find_admins查看 IAM 策略以识别管理员用户和角色,或具有特定权限的主体。更多详情请点击此处
  • find_unused查找帐户中未使用的资源。查找未使用的安全组、弹性 IP、网络接口、卷和弹性负载均衡器。
  • prepare/ webserver:参见网络可视化
  • public查找公共主机和端口范围。更多详情请点击此处
  • sg_ips获取安全组中受信任的 CIDR 的地理位置信息。更多详情请点击此处

9. 忒伊亚的日蚀

Eclipse Theia 是一个用 TypeScript 实现的云端和桌面 IDE 框架。

GitHub 标志 日食-忒亚/忒亚

Eclipse Theia 是一个用 TypeScript 实现的云端和桌面 IDE 框架。


Gitpod Ready-to-Code 欢迎公关稿 话语状态 构建状态 发布 VS Code 内置扩展 未解决的问题 未解决的漏洞

Eclipse Theia 是一个可扩展的框架,用于开发功能齐全的多语言云端和桌面 IDE 类产品,并采用最先进的 Web 技术。

Theia 1.0 已发布。请阅读公告

忒亚

网站

请访问 Theia 网站获取更多文档

范围

  • 支持构建基于浏览器和桌面的集成开发环境
  • 为采用者提供高度灵活的架构
  • 支持 VS Code 扩展协议
  • 在厂商中立的开源治理框架下进行开发

路线图

请查看我们的路线图,了解当前项目目标和即将发布的版本概览。

入门

这里提供常见场景的指南和示例:


10. 单个部门

仅使用一个 HTML 元素的 CSS 图形。

GitHub 标志 lynnandtonic / a-single-div

🎨 仅使用一个 HTML 元素的 CSS 绘图。

单一部门

建造

npm i
npm start

这是一个有趣的小项目,旨在展示 CSS 能实现多少功能。每个图形都由一个 HTML 元素(在本例中是常用的 div 元素)组成。

但是,但是!

是的,这不太实用。

是的,SVG 是一种更简单、更好的插图格式。

是的,浏览器支持范围不广。

是的,这样做真的超级好玩。 ;)

项目详情

本项目结合使用了 Pug 进行模板开发,以及 Stylus 进行 CSS 预处理。

分享

您可以随意复制粘贴、编辑和尝试。如果您重复使用大量 CSS 代码或完整的绘图,请注明出处!谢谢!

贡献

我目前不接受任何外部投稿。欢迎大家将你们的单个div代码分享到codepen.io或你们自己的网站上!如果分享了,请在推特上告诉我!





《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

如果你喜欢这篇文章,可以关注我的推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-12th-june-2020-kkl