今天老K要分享几个Github上star过万、形式多样、非常有意思的前端项目。

如果你正在学习前端技术，或者遇到了瓶颈，不妨读完这篇文章，试试下面这些有趣的项目，也许就能找到感觉和动力。

内容较多，建议收藏。

1. 30-seconds-of-code

• url: https://github.com/30-seconds/30-seconds-of-code
• star: 10.4w
• fork: 1.1w
• watch: 2.6k

这个项目汇集了可以在短时间(30秒以内)理解的实用JavaScript技巧或代码片段，每一示例都是用markdown编写，方便大家查阅。

值得一提的是，这个项目还有展示网站，不仅有javascript的项目分享，还有其它语言的示例，很适合学习分享。

2. reveal.js

• url: https://github.com/hakimel/reveal.js
• star: 6.2w
• fork: 1.6w
• watch: 1.7k

这是一个基于前端的演示框架，利用HTML和JavaScript实现类PPT展示，让你告别传统而死板的PPT制作方法，更便捷地使用HTML、Markdown语言制作PPT演示文档。

3. marktext

• url: https://github.com/marktext/marktext
• star: 3.6w
• fork: 2.7k
• watch: 384

这是一个Markdown语法编辑器，操作简单而优雅，支持在Linux、macOS和 Windows不同操作环境下使用。官网地址->
https://github.com/marktext/marktext#download-and-installation

功能包括但不限于：

• 实时预览和简洁明了的界面（所见即所得）；
• 支持Markdown扩展语法，如数学表达式、Latex和emoji表情等；
• 可以输出HTML以及PDF文件；
• 支持各种编辑模式：源代码模式、打字机模式、专注模式。

4. edex-ui

• url: https://github.com/GitSquared/edex-ui
• star: 3.6w
• fork: 2.1k
• watch: 1.5k

这是基于Electron的炫酷终端工具。UI设计直逼好莱坞级别，使用体验也非常流畅，启动动画非常炫酷、音效也很棒，还有直观的文件展示目录、系统资源、网络信息等。

效果请看下图：

5. Leaflet

• url: https://github.com/Leaflet/Leaflet
• star: 3.6w
• fork: 5.5k
• watch: 902

这是一个久负盛名的移动端交互地图JavaScript库。它简单易用，容量小巧，但包含了地图绝大多数常用功能。

Leaflet设计很友好，可以快速上手，几行简单的代码就能实现地图功能，支持多种类的地图数据源。很多大公司都是它的用户，在生产环境中可以放心使用。

官网地址->
https://leafletjs.com/reference.html

以下是示例代码：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '?OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

6. drawio

• url: https://github.com/jgraph/drawio
• star: 3.2w
• fork: 6.3k
• watch: 577

这是一款功能强大的绘图工具。免费开源可以自行部署，也可以在线上使用。功能上对标Microsoft Visio。

支持的图形包括：流程图、序列图、网络拓扑图、甘特图、思维导图、模型图等，支持多种文件格式：png、svg、PDF、HTML和VSDX格式（Microsoft Visio 图形格式）。

7. carbon

• url: https://github.com/carbon-app/carbon
• star: 3.1w
• fork: 1.8k
• watch: 250

一个代码片段图片化工具，项目以美观整洁的方式展示代码片段。支持SVG、PNG等多种输出方式。

?

8. 30-Days-Of-JavaScript

• url: https://github.com/Asabeneh/30-Days-Of-JavaScript
• star: 2.8w
• fork: 6.5k
• watch: 749

最符合题主的一个Github项目，30天JavaScript编程挑战。

该教程是英文教程，但图文并茂通俗易通，英文学渣也很好上手。练习题内容循序渐进，适合零基础自学JavaScript的同学。

9. wenyan

• url: https://github.com/wenyan-lang/wenyan
• star: 1.9w
• fork: 1.1k
• watch: 253

想不想体验一下文言文编程？

本项目支持文言文语法编程，很有意思，运行结果可以编译成JavaScript、Python或者Ruby。

想写出自己的文言文程序的同学快来这里试试吧！官网地址->https://wy-lang.org/

10. rough

• url: https://github.com/rough-stuff/rough
• star: 1.8w
• fork: 572
• watch: 161

一个手绘风格的图形库。可以用素描、手绘的风格来制作图形。

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

?

11. p5.js

• url: https://github.com/processing/p5.js
• star: 1.8w
• fork: 2.7k
• watch: 493

这是一个JavaScript创意编程库，主要可以用来实现绘图、艺术创意等任务。

该库只需要会基础的JavaScript代码就可以使用了，可以用它画出许多有趣的东西。文档齐全，方便快速上手，还可以在线编辑。

官网地址->https://p5js.org/

示例代码：

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

以上就是本期想要和大家分享的项目。如果你对项目或者代码有任何疑问，可以在评论区留言或者私信我，有问必答。

码字不易，不要光收藏，不点赞不准走啊！

我之前还分享过一些Github上热门项目，有需要的同学可以直接点击下方链接获取：

推荐阅读

如何学习python？Github上这10个教程和项目帮你轻松入门

github上star过万的Java新手入门教程 热门学习材料

「2022」github上star过万的热门项目：JavaScript篇(二)

「2022版」github上star过万的热门项目：JavaScript篇

结束语

我是@老K玩代码 ，专注于编程开发的经验总结和项目分享，对编程有兴趣、正在学习编程的同学可以关注我。

#头条创作挑战赛#