foreword
The following are some front-end related projects on GitHub that I have sorted out. I hope it will be helpful to you. It is not easy to organize. If you can, don’t be stingy with your likes and favorites ~
Let’s stop talking nonsense, let’s go directly to the topic -->
utility to
1.Charts
Stars: 55.6k
Echarts provides a large number of exquisite charts, only you can't think of them, and you can't find them on it. At the same time, after clicking the corresponding icon, you can modify its JS or TS source code online, and modify it under its graphic template. The desired data is displayed, and after the production is completed, you can download the modified icon to your computer or copy the modified JS code to other software that supports this type of data visualization (such as Axure) to display
Online URL: https://echarts.apache.org/zh/index.html
Warehouse address: https://github.com/apache/echarts
2.FHelper
Star：4.7k
As a browser plug-in, you can also use it as a toolbox in the browser, which includes JSON automatic/manual formatting, JSON content comparison, code beautification and compression, information codec conversion, QR code generation And decoding, picture Base64 codec conversion, Markdown, web page oil monkey, web page color picker, mind map (Xmind), etc., if you don't like to download special software to realize these functions, then FHelper is undoubtedly a good choice
Online address: https://www.baidufe.com/fehelper/index/index.html
Warehouse address: https://github.com/zxlie/FeHelper
3.qwerty-learner
Star：9.9k
Provide keyboard workers with projects to exercise typing ability and English memory ability. Of course, if you are preparing for CET-4 or CET-6, this can also help you. Pronunciation and re-spelling words can deepen your impression~
Online website: https://qwerty.kaiyi.cool/
Warehouse address: https://github.com/Kaiyiwing/qwerty-learner
Okay, after the serious introduction, let's have something interesting~~~
game entertainment
1. Pac-Man (pacman)
Star：1.1k
A classic game development case, including map drawing, player control, NPC real-time automatic path finding according to player coordinates, Pacman points system, energy bean function, multiple levels (12 levels in total), and the realization of special item scoring function, based on Javascript A small game developed.
Online experience: https://passer-by.com/pacman/
Warehouse address: https://github.com/mumuy/pacman
2. Tetris (react-tetris)
Stars: 7.6k
In this classic game project, experience the feeling of playing Tetris on the game console when you were young. It is adaptive to the PC and mobile terminal, and adapts to the operation of the keyboard and touch screen. In addition, whether you refresh the page or If you close it inadvertently, the current progress will be saved, and you can continue to play by reopening the link.
Online experience: https://chvin.github.io/react-tetris/?lan=zh
Warehouse address: https://github.com/chvin/react-tetris
3. Alien Factory
Star：5.8k
A puzzle game that lets you give full play to your creativity and enjoy the fun of thinking. The goal of the game is to produce graphics that meet the requirements by building factories. It is easy to operate and only need to set up the facilities to automatically create various graphics. However, as the level goes deeper, the difficulty will gradually increase, and it will become more and more brain-consuming.
Online experience: https://shapez.io/
Warehouse address: https://github.com/tobspr/shapez.io
4.2048
Star：11.7k
2048 is a very classic number puzzle game. It was produced by gabrielecirulli and uploaded to the warehouse. The gameplay is simple and easy to understand. The ultimate goal is to piece together the number 2048 to be successful.
Online experience: https://play2048.co/
Warehouse address: https://github.com/gabrielecirulli/2048
5. ChineseBQB (Chinese expression pack)
Star：11.2k
This project is different from the above. This may be more commonly used in our daily chats. If you are a poor user of emoji packs, then this will be a reliable way for you to get emoji packs. Just enter keywords to match a large number of cute sand sculptures. Emoticon packs, really solve the problem of "the less you hate when you use the pictures"
Online experience: https://www.v2fy.com/asset/0i/ChineseBQB/
Warehouse address: https://github.com/zhaoolee/ChineseBQB
6. Relationship Generator (mumuy)
Star：2.5k
It is a Chinese tradition to visit relatives during the holidays. At this time, it is inevitable to encounter an embarrassing situation. I don’t know how to call the relatives in front of me. With this open-source relative relationship calculator, I refuse to call out the stupid standing embarrassing scene.
Online experience: https://passer-by.com/relationship/
Warehouse address: https://github.com/mumuy/relationship
7.Thief
Star：5k
An artifact of fishing, including novels, videos, games and other high-tech fishing methods (, it really does both work and fishing.
Official website download: https://thief.im
Warehouse address: https://github.com/cteamx/Thief
8. BullshitGenerator
Star：15.7k
Nonsense literature, formalism, how to write, this project gives a "benchmark", sometimes, essays are 4,000 words, exclusive for lazy people (funny)
Online experience: https://suulnnka.github.io/BullshitGenerator/index.html
Warehouse address: https://github.com/menzi11/BullshitGenerator
9. Nokia SMS Generator (zzkia)
Star：1.4k
"There is an insider, stop the transaction." This century-old picture is impressive. At present, this project allows you to freely edit information on your mobile phone, supports multiple models, and experiences the feeling of DNA being awakened.
Online experience: https://zzkia.noddl.me
Warehouse address: https://github.com/dcalsky/zzkia
Other high-star front-end projects
1、frontend-dev-bookmarks
Star: 38k
A collection of bookmarks commonly used by front-end developers. This project collects bookmarking links for various front-end technical aspects, including programming languages, frameworks, tools, designs, and more. These bookmark links can help developers quickly find materials and solve problems. This project is not only a resource that has accumulated a large number of high-quality links, but also an open community where developers can freely share links and contribute their own knowledge.
Warehouse address: https://github.com/dypsilon/frontend-dev-bookmarks
2、awesome-javascript
Star: 30.5k
"awesome-javascript" is a collection of JavaScript-related resources, including libraries, frameworks, tools, and more. It is a list contributed by the open source community and is constantly updated and improved. The word "awesome" means "amazing, awesome", so the name of this project implies that it is a collection of amazing JavaScript resources. In addition, there are many other projects like "awesome-javascript", such as "awesome-python", "awesome-go", etc. They all aim to collect open source resources in specific fields for everyone to learn and use.
Warehouse address: https://github.com/sorrycc/awesome-javascript
3、 mocha
Star: 22k
Mocha is a popular JavaScript testing framework for writing and running tests. It can run in the browser and Node.js environment, and has a concise syntax, asynchronous testing support, coverage reporting and other functions. Mocha is also extensible and can be easily integrated with other libraries and tools, such as the Chai assertion library and the Sinon mocking library. Additionally, Mocha supports multiple test types such as unit, integration, and end-to-end tests .
Online URL: https://mochajs.org/
Warehouse address: https://github.com/mochajs/mocha
4、d3
Star: 105k
d3 is a JavaScript data visualization library , called Data-Driven Documents. It transforms data into various charts and visualizations, and enables users to interact with charts. d3 runs on any modern browser by using web standards such as HTML, SVG, and CSS. The main advantage of d3 is that it fully integrates data and charts, allowing users to dynamically create visualizations through programs, rather than relying on predefined chart templates. Its powerful API and flexibility make d3 one of the important tools in the field of data visualization.
Online URL: https://d3js.org/
Warehouse address: https://github.com/d3/d3
5、 Chart.js
Star: 60.3k
Chart.js is an open-source charting library written in JavaScript for creating various types of interactive charts in web pages. Chart.js can be used to develop data visualization applications, provides rich functions and flexible options, can be customized for different data and needs, and is easy to use and configure. Chart.js supports a variety of chart types, including line charts, histograms, pie charts, radar charts, etc., and can also perform advanced functions such as animation effects, various interactive events, and responsive design. With Chart.js, developers can quickly create beautiful and powerful charts to present data and information.
Online URL: https://www.chartjs.org/
Warehouse address: https://github.com/chartjs/Chart.js
6、animate.css
Star: 77.5k
animate.css is an open source library using CSS3 animation effects, which contains a variety of animation effects. Developers can use these preset animation effects in websites to make them more lively and interesting. The Animate.css library provides a set of easy-to-use APIs, which can add and delete animation effects on any HTML element, and even customize the effects. These animation effects can be used in HTML, SVG, and mobile terminals to achieve various enhanced user experiences, and the animation control is very convenient.
Online URL: https://animate.style/
Warehouse address: https://github.com/animate-css/animate.css
7、parallax
Star: 16.1k
Parallax is a visual effect that refers to the displacement of objects in different viewing angles. This effect is usually used in 3D graphics, computer games and animation production, which can make the picture look more three-dimensional and real. In web design, parallax can also be used to make panel scrolling effects, making users feel the depth and vitality of web pages.
Online: http://matthew.wagerfield.com/parallax/
Warehouse address: https://github.com/wagerfield/parallax
8、 video.js
Star: 35.3k
video.js is an open source JavaScript and CSS library for customizing video players. It provides a cross-platform, browser-compatible video playback experience, and supports custom skins, plug-ins, interactive functions, etc. It uses the HTML5 video tag as the underlying video player, and implements a series of functions on this basis, such as full screen, double-speed playback, volume control, subtitle display, etc. video.js has been widely used in Internet video sites, online education, advertising marketing and other fields.
Online URL: https://videojs.com/
Warehouse address: https://github.com/videojs/video.js
9、polymer
Star: 21.9k
Polymer is an open source JavaScript library developed by Google for building web components. It allows developers to use modern web technologies to create components, such as custom elements, templates, data binding, etc. Polymer also provides some built-in, reusable components, such as buttons, text boxes, icons, etc. Polymer's goal is to make it easier for developers to create powerful, easy-to-maintain web applications.
Online URL: https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview
Warehouse address: https://github.com/Polymer/polymer
10、reveal.js
Star: 63.5k
reveal.js is an open source HTML and CSS based slideshow library for creating beautiful presentations and educational courseware. It was created by Hakim El Hattab and is capable of many advanced animation effects by utilizing CSS3 and 3D transforms. It can achieve rich layout and style design, but also has the characteristics of ease of use and flexibility, and has become the choice of many technical blogs, live demonstrations and classroom presentations.
Online URL: https://revealjs.com/
Warehouse address: https://github.com/hakimel/reveal.js
11、three.js
Stars: 90.6k
three.js is a JavaScript library for creating and rendering three-dimensional graphics scenes. It is developed on the basis of WebGL technology and provides many easy-to-use interfaces, methods and functions, which can help developers quickly create high-quality interactive 3D scenes, animations and games in web pages. three.js supports a variety of commonly used 3D file formats, including OBJ, FBX, STL, etc. It also supports VR and AR, and can be used in modeling, visualization, games, smart display and other fields.
Online URL: https://threejs.org/
Warehouse address: https://github.com/mrdoob/three.js
12、foundation
Stars: 29.4k
Foundation is a responsive front-end framework that uses HTML, CSS and JavaScript to build modern responsive websites and applications. Foundation provides grid systems, basic styles, form elements, buttons, icons, navigation, tooltips, alert boxes, and more, the basic components and components required by modern websites and programs. It is a free and open-source project with a large developer community and its code base is accessible on GitHub. Foundation also has a powerful documentation library and a variety of tutorials that can help developers get started and master the use of Foundation.
Online URL: https://get.foundation/
Warehouse address: https://github.com/foundation/foundation-sites
13、fastclick
Star: 18.8k
FastClick is a JavaScript library that removes the 300ms delay between a physical click and the firing of the click event on mobile browsers. This library is useful for building mobile web applications with many clickable elements such as buttons and links as it provides a faster and more responsive user experience.
Warehouse address: https://github.com/ftlabs/fastclick
14、hammer.js
Star: 23.5k
hammer.js is a JavaScript library designed for mobile development. It provides touch gesture recognition and processing functions, including dragging, zooming, rotating, pressing and other gestures. Using the API it provides, developers can easily achieve advanced interactive effects. hammer.js supports a variety of finger touch operations, including single-finger, two-finger, and three-finger operations, and can also simulate touch operations on the desktop. The code of hammer.js is concise and lightweight, easy to learn and use, and is widely used in the development of mobile web applications and hybrid applications.
Online URL: http://hammerjs.github.io/
Warehouse address: https://github.com/hammerjs/hammer.js
15、Swiper
Star: 34.8k
Swiper is a JavaScript-based modern mobile web page sliding framework, which provides rich special effects and screen sliding management functions. Swiper has been widely used in the field of mobile web development, such as full-screen sliding, focus map switching, image display, Banner advertising rotation effects, etc.
Online URL: https://swiperjs.com/
Warehouse address: https://github.com/nolimits4web/swiper
16、 awesome-nodejs
Stars: 50.6k
awesome-nodejs is a collection of various excellent resources, tools, frameworks and libraries related to Node.js. It includes a large number of materials, documents, tutorials and examples, etc., aiming to provide reliable reference and help for Node.js developers. Users can quickly learn about the most valuable resources in the Node.js ecosystem by browsing the list, so as to effectively improve their skill level and development efficiency.
Warehouse address: https://github.com/sindresorhus/awesome-nodejs
17、hex
Star: 36.5k
Hexo is a fast, clean and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles, and within seconds, it can generate static web pages with beautiful themes.
Online URL: https://hexo.io/zh-cn/
Warehouse address: https://github.com/hexojs/hexo
18、electron
Star: 107k
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into the Electron binary allows maintaining a JavaScript code base and creating cross-platform applications that run on Windows macOS and Linux - no local development experience required
Online URL: https://www.electronjs.org/
Warehouse address: https://github.com/electron/electron