推荐26个GitHub上好玩又有挑战的前端项目(涵盖初中高阶)-阿里云开发者社区

开发者社区> 淘系技术> 正文

推荐26个GitHub上好玩又有挑战的前端项目(涵盖初中高阶)

简介: 瓶颈了怎么办?来尝试挑战这些项目吧!
+关注继续查看

有前端同学问我们,最近感觉学习遇到了瓶颈,听说尝试操作一些开源项目可以有效提升,想知道有没有什么好玩又有挑战的项目推荐。

我们邀请了3位淘系技术前端工程师,精心筛选出 26 个难度层层递进,好玩且实用的前端项目,比如动画制作、文字识别、可视化图表、H5制作等等,甚至还能把云音乐灰色歌曲解锁播放(嘘!)

本篇内容按难度分为【初级篇:8个】【中级篇:9个】【高级篇:9个】项目,不同水平不同学习瓶颈的同学可按需选择~


初级篇


这里一般适用于刚入门前端的同学,一般入门前端都是从html和css开始的,应该让这些同学提起对前端的兴趣,因此初级篇选用几个比较有趣的css库来让同学入门前端。


animate


animate是一个css动画库,动画内容一般也是我们所熟悉的,例如渐入、渐出、弹跳、旋转、抖动等特效。ppt里面的许多特效在animate都能找到。而且使用简单,只需引入库并添加相关css即可。


image.png


CSS-Inspiration


CSS-Inspiration涵盖了css的许多常见的特效,例如布局方式、border、伪元素、滤镜、背景3d等。这些都是css里面十分重要的知识点,当我们学习完css基础之后,可以利用此项目来制作一些常用的特效,也可以巩固基础知识。


image.png


Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap是可以直接应用到我们平常的项目里的,而且非常方便、功能特别多,也是我们常用的前端UI框架。


image.png



tesseract.js

一个js ocr识别库,支持包括中英文等许多语言的图片和视频文字识别,底层封装了Tesseract OCR引擎来实现。

image.png

视频实时ocr:

image.png


vanillawebprojects


这里一共包含20+个项目,包括表单验证、音视频播放器、打字等小应用,有趣且方便学习。

image.png


Ant Design


基于 Ant Design 设计体系的 React UI 组件库, 提供了丰富的组件,基本满足各种开发使用需求。大部分前端项目都会涉及到React / Vue的组件开发,如何开发封装一个组件是成为一个合格前端的第一步,可以通过模仿Ant Design的写法去学习如何开发一个组件,同时学到框架(React / Vue) + HTML + CSS。


image.png



Echarts


基于 JavaScript 的开源可视化图表库。Echarts使用数据配置的方式轻松的实现可视化,如果想学习数据可视化,不如从学习Echarts的实现开始。


image.png



JavaScript的学习


ECMAScript是JavaScript的语言标准,描述了JS的能力,API,基本实现步骤。目前比较通用的标准是ES6,从最初的版本:June 1997,最新的标准已经到了Edition 12 (June 2021)。每个版本都添加 / 修改了新的语法和API, 作为一个前端开发者,应该关注JS的变化,可以查看最新的ECMAScript提案,即将发生的变化。


中级篇


当有一定css基础之后,前端工程师肯定需要接触一些js。使用js我们可以根据自己的逻辑,让动画产生不同的效果。在逐渐接触到一些大型的项目时,就可以开始学习前端工程化。


particles.js


当我们浏览网页的时候,会看见一些网站的背景有粒子效果,看完是不是也很好奇它是怎么实现的呢?在particles.js这个库里面,我们可以制造许多粒子效果,用在网页的背景可是相当好看的。

image.png


reveal.js


reveal.js是一款网页ppt,界面优美,又支持许多ppt功能,同时也有许多插件满足前端的需求,例如markdown、code等代码高亮插件。


image.png


swiper.js


swiper是目前应用广泛的轮播图插件,拥有许多配置,也有许多切换效果,基本可以满足前端开发中轮播图的需求。


image.png


构建(Build)工具


大型项目需要构建工具进行打包,使用插件,转义等,所以学习如何配置构建工具,如何基于构建工具的能力自定义实现某些功能是很重要的。Webpack和Gulp是两种常见的打包工具。


image.png


TypeScript


现在的前端开发中,对于TypeScript的使用越来越多,尤其是大型迭代项目中,JavaScript不能满足需要,学习TypeScript会是一个必备的技能。


Yeoman


Yeoman是一个能快速生成一个Web APP的脚手架工具,可以通过Yeoman定义常用的模板APP。


rrweb


一个可以录制并回放任意 web 界面中的用户操作的纯前端的库,完全借助浏览器api来实现录制回放,实现的想法很有趣,对需要录制回放用户行为的需求很有帮助。


vite


是一个新型前端构建工具,能够显著提升前端开发体验,和webpack等老牌打包工具不同,vite另辟蹊径,开发环境下使用原生esm,让本地开发更快速。代码相较webpack更轻量,且实现逻辑巧妙,比较适合阅读学习。


UnblockNeteaseMusic


还在因为云音乐因为版权下架了一批你自己喜欢的歌曲,但是又不想单独为了几首歌换平台而烦恼吗,那你可以试试这个库,可以使用 QQ / 虾米 / 百度 / 酷狗 / 酷我 / 咪咕 / JOOX 等音源把云音乐灰色歌曲解锁播放。


image.png

高级篇


学完基本的js基础后,我们需要学习一些前端常用框架,例如vue、react,这两个框架是我们工作中经常都要用到的,作为一名前端工程师不得不熟悉其中一个框架。掌握了前端工程化之后,就可以做一些有趣的方向,比如前端智能化,Low Code / no Code, serverless 等。


vue-admin-template

这是一个vue后台管理系统框架,可以让我们轻松地实现一个后台管理系统,界面也比较美观。


image.png


h5-dooring


h5-dooring是一款可视化编辑器,底层是用react写的,使用此工具可以让我们快速生成h5页面。同时通过这个平台也能了解到低代码的相关知识。


image.png



canvas-special


如果大家对图形学感兴趣,可以学一下canvas,canvas-special提供了许多canvas精美的案例供我们学习。


image.png


 node-question-answering


基于Node.js的用深度学习模型去回答问题

相关学习资源imgCook


通过设计稿生成组件代码的low code工具

image.png


Midway

Midway 是一个适用于构建 Serverless 服务,传统应用、微服务,小程序后端的 Node.js 框架


image.png


Luckysheet


一款纯js实现的在线表格库,功能强大,excel的常见能力都支持,对有表格库集成需求或者要实现类似功能的很有帮助。

image.png


flowchart-fun

是一个高效的绘制流程图和思维导图的工具库,输入文字,就能自动生成一个框图,很有意思。不过是基于既定的英文单词串生成框图,可能上手使用会有一定难度。


image.png

我看见你又在点“收藏”了。


记得别吃灰,赶紧学起来吧~有问题欢迎与我们交流~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10050 0
「免费开源」基于Vue和Quasar的前端SPA项目crudapi零代码开发平台后台管理系统实战之元数据导出导入(十五)
本文主要介绍了元数据表单的导出导入功能,可以用于日常元数据表单备份,也可以分享给其他系统进行导入,以达到复用的目标。后续可以利用元数据导出导入功能配置一些常见的业务表单,比如电商、CRM、教育等领域,然后将这些业务表单导出供用户下载和使用。
39 0
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之二 || 后端项目搭建
WHY     至于为什么要搭建.Net Core 平台,这个网上的解释以及铺天盖地,想了想,还是感觉重要的一点,跨平台,嗯!没错,而且比.Net 更容易搭建,速度也更快,所有的包均有Nuget提供,不再像以前的单纯引入组件,比如是这样的:   已经没有了之前的Assemblies和COM的引入,初次使用感觉会很别扭,不过使用多了,发现还是很方便的,所以你一定要会使用Nuget,真的很强大,这点儿设计思路感觉更像Linux了。
1460 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向(十二)
数据库逆向就是通过读取数据库物理表schema信息,然后生成表单元数据,可以看成“dbfirst”模式,即先有数据库表,然后根据表生成元数据,逆向表单后续操作和普通动态表单类似。本文主要介绍了数据库逆向功能,在数据库表单已经存在的基础上,通过数据库逆向功能,快速生成元数据,不需要一行代码,我们就可以得到已有数据库的基本crud功能,包括API和UI。类似于phpmyadmin等数据库UI管理系统,但是比数据库UI管理系统更灵活,更友好。
54 0
最近移动前端项目中遇到的两个坑
尽管要多加避免,但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——其实不一致性的问题还是挺大的。 两个坑都是涉及 iframe 的——iframe 真是不好搞! 事情是这样的,一个内嵌于 iframe 的页面,因为需要从认证接口中返回 token 作为登录凭证,读取接口信息是没问题的,然后需要用 session 把登录信息保存起来。
678 0
从零开始使用nginx系列(1)部署前端项目
安装nginx 在nginx官网下载nginx,下载完毕后将压缩包放入云服务器中。 使用的云服务器环境为CentOS。 安装nginx相关依赖:gcc-c++、pcre-devel、zlib-devel、openssl、openssl-devel。
1166 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13865 0
Rainbond 持续部署Vue、React前端项目
本文主要介绍在云原生应用管理平台Rainbond中部署Vue、React等前端项目的方式。
929 0
+关注
淘系技术
欢迎关注淘系技术!这里将为你第一时间分享淘系最核心和最NB的技术热点~
243
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载