今天老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玩代码 ，专注于编程开发的经验总结和项目分享，对编程有兴趣、正在学习编程的同学可以关注我。
#创作挑战赛#
,
