Forem: tntweb team

20 javascript open source projects worth collecting

tntweb team — Mon, 19 Feb 2024 09:32:22 +0000

The world of open source is becoming more colorful every day. What new challenges will there be in the front-end field in 2022? Below are 20 interesting open source projects we have compiled. We hope there is one among them that you want to collect.

★1. Proton particles

Site: https://github.com/drawcall/Proton

Proton is a lightweight, flexible Javascript particle animation library. You can use it to easily create various cool particle animation effects. This project is referenced by nearly 2k projects on github. Proton also supports the 3d particle version https://github.com/drawcall/three.proton/.

★2. Awesome LowCode Component

Site: https://github.com/aliaszz/awesome-lowcode-component

LowCode - the hottest concept in the front-end field in recent years. The Awesome LowCode Component project collects various LowCode components and cutting-edge technical solutions for you, which can be used to quickly build enterprise-level projects or directly for development, greatly improving business needs and commercial realization. s efficiency.

★3. wp2vite

Site: https://github.com/tnfe/wp2vite

A particularly useful project that allows your webpack project to support vite. Compared with webpack, the construction speed of Vite development environment can be increased by about 80%, and the construction speed of production environment can be increased by about 50%.

★4. Awesome State

Site: https://github.com/tnfe/awesome-state

It covers various front-end state management solutions in the industry, including react, vue, angular, small programs and other state libraries.

★5. Front-end engineering tool Feflow

Site: https://github.com/Tencent/feflow

Feflow is Tencent's open source front-end workflow and specification tool used to improve engineering efficiency. It has been widely used in NOW live broadcast, fancy live broadcast, fancy dating, mobile QQ nearby, group video, group gift giving, echo, App Store, Penguin account and other businesses.

★6. TDesign React Starter

Site: https://github.com/Tencent/tdesign-react-starter

TDesign React Starter is based on tdesign-react, developed using React and Vite2, and can be configured with personalized themes. It aims to provide out-of-the-box, configurable middle and back-end projects.

★7. Web IDE UI

Site: https://github.com/DTStack/molecule

Molecule is a Web IDE UI framework inspired by VS Code and built using React.js. By designing an extension mechanism (Extension) similar to VS Code, a highly abstract Web IDE UI system can be quickly and easily built.

★8. Flutter game library

Site: https://github.com/flutterkit/zerker

Zerker is a flexible, lightweight Flutter animation game framework. Have you tried using Flutter to develop cross-end games? At the same time, it can also create Widget component animation effects, such as fly-out animation, pop-up animation, scene transition, etc.

★9. InkPaint

Site: https://github.com/drawcall/inkpaint

InkPaint is a lightweight Canvas graphics rendering library running on node.js. Use InkPaint to dynamically synthesize various images, PDFs, etc. on the server side. At the same time, InkPaint is a universal library between node.js and browsers, and can still run normally on the browser side.

★10. Golang for Node.js Developers

Site: https://github.com/miguelmota/golang-for-nodejs-developers

This guide contains plenty of examples for people learning Go from Node.js and vice versa. Go is a high-performance, high-concurrency, cross-platform language that is receiving more and more widespread attention and application. As the saying goes, more skills don’t weigh you down, and mastering more languages means you have more choices when it comes to application development.

★11. Cloud development CloudBase CMS

Site: https://github.com/TencentCloudBase/cloudbase-extension-cms

CloudBase CMS is a headless content management platform developed by Tencent Cloud and based on Node.js. It provides rich content management functions, is simple to install, easy for secondary development, and is closely integrated with the cloud development ecosystem to help developers improve their development efficiency.

★12. qiankun micro front-end practice

Site: https://github.com/wl-ui/wl-mfe

qiankun is a complete micro front-end solution. This project will introduce how the Vue project can access qiankun through a microservice Demo. This project is a practical micro-front-end back-end management system project based on vue3+koa2+qiankun2.

★13. Online video editor

Site: https://github.com/kudlav/videoeditor

An online video editor that supports timeline operation, video cropping and other functions. The project uses server-side rendering and supports modern mainstream browsers.

★14. Code clock collection

Site: https://github.com/drawcall/clock-shop

This project collects dozens of various interesting clock codes. Find a good-looking clock and hang it on your blog homepage, which will instantly make it look taller.

★15. Awesome made by chinese

Site: https://github.com/JN-H/awesome-made-by-chinese

An open source project from Chinese developers on Github. This project collects and organizes some of our Chinese developers' own works, and each of them is worthy of praise. Similar projects to Awesome include

★16. Alloy Worker

Site: https://github.com/AlloyTeam/alloy-worker

The transaction-oriented high-availability Web Worker communication framework has withstood the test of large-scale front-end projects such as Tencent Documents.

★17. Mall low-code platform

Site: https://github.com/wangyuan389/mall-cook

Mall-Cook is a visual mall construction platform developed based on vue, including multi-page visual construction, Json Schema generator (visual construction material control panel), and realizing a component pipeline standard access platform. The latest version uses uni-app to reconstruct materials and template projects, and supports the generation of H5 and mini-program multi-terminal malls.

★18. WebGPU Samples

Site: https://github.com/austinEng/webgpu-samples

WebGPU is the latest Web 3D graphics API. Currently, there are very few learning materials about WebGPU on the Internet. This project contains a series of WebGPU examples and code, which can help you get started quickly.

★19. Front-end information TNT Weekly

Site: https://github.com/tnfe/TNT-Weekly

The weekly project maintained by the Tencent News TNTWeb front-end team recommends you the latest excellent articles and industry progress in the front-end field at home and abroad every week. The project has received 3.5k+ stars since it was open sourced and is deeply loved by the majority of front-end developers in the industry.

★20. Programmers cook at home

Site: https://github.com/Anduin2017/HowToCook

There are recipes everywhere. You can find them all over the Internet, and there are even video tutorials, but there will always be elusive "appropriate amounts" and "seasonings" that pop up from time to time. This is a problem for programmers who have always been cautious and clear in their work. It was really a headache, so the "HowToCook" project was born.

Thank you for your patience in reading!

15 open source projects worth collecting

tntweb team — Mon, 19 Feb 2024 08:24:04 +0000

In the new year, the front-end field is once again undergoing dramatic changes. The world of open source is changing rapidly, and new surprises emerge every day. Today, we have carefully compiled 15 eye-catching open source projects, covering all aspects of front-end technology. Whether you're an experienced developer or a beginner, I'm sure one of these projects will tug at your heartstrings.

1. draw-a-ui

Site: https://github.com/SawyerHood/draw-a-ui

draw-a-ui cleverly combines tldraw, an open source digital sketchpad, and the GPT-4-Vision API. Users only need to draw wireframes and add annotations through tldraw, and the application can generate stunning HTML-based UI designs. The technical principle behind it is to convert the SVG graphics of the current canvas into PNG format and generate an HTML file with tailwind through the GPT-4-Vision API. This innovative process demonstrates the powerful capabilities of the AI artificial intelligence tool GPT, providing users with a more free and flexible UI design experience.

2.Orillusion

Site: https://github.com/Orillusion/orillusion

Orillusion is a high-performance Web3D rendering engine based on the WebGPU graphics API and has rendering capabilities comparable to those of the PC graphics API. It makes full use of the open capabilities of the GPU, such as flexible GPU cache operations, powerful shaders (Webgpu Shader/WGSL), and the much-anticipated Compute Shader computing core, thereby fully utilizing the parallel processing capabilities of the GPU in the non-rasterization stage. , bringing excellent rendering effects to users.

3. FFCreator

Site: https://github.com/tnfe/FFCreator

FFCreator is a lightweight and flexible video production tool library based on node.js. It makes making videos easy for everyone. Just a few pictures or video clips and a piece of background music can quickly generate a cool video clip. As short videos become increasingly popular today, FFCreator provides a simple and efficient solution for users to quickly produce short videos or to batch synthesize videos on the platform. It has few dependencies, low configuration, and is easy to get started, making video production simple and fast.

4. shadcn-ui

Site: https://github.com/shadcn-ui/ui

shadcn-ui, a UI component library built based on React, uses TailwindCSS to achieve style customization. It is built on top of Radix and provides headless components that solve accessibility and keyboard interaction issues. Unlike libraries such as MUI and ChakraUI, shadcn-ui is not a traditional NPM package. Through terminal commands, you can easily integrate the shadcn-ui component, install dependencies and directly copy the source code for modification.

Several core functions of shadcn-ui include:
Theme and Theme Editor: Easily create custom themes through the graphical interface, and the generated code snippets can be copied and pasted into the program with one click.
Dark mode: Supports the dark mode of Next.js and Vite applications, bringing a unique visual experience to users.
CLI tool: automatically configures projects to implement functions such as framework integration, configuration file generation, and component addition to improve development efficiency.
Rich component library: Contains 40+ basic components to meet diverse development needs.

5. poster-design

Site: https://github.com/palxiao/poster-design

The open source web poster designer is beautiful and powerful, suitable for a variety of design scenarios. It operates smoothly, supports rich interactive details and complete basic functions. Server-side generation ensures that images are unified on multiple ends and supports CSS features. Simple AI cutout tool to remove background with one click. Using technology stacks such as Vue3, the development experience is smooth. Supports PSD parsing, element manipulation, picture material editing and canvas customization. One-stop solution to design needs and improved efficiency.

6. excalidraw

Site: https://github.com/excalidraw/excalidraw

A free, open source online tool with unlimited canvas as its core feature, allowing users to freely express their creativity in the virtual space. Its hand-painted style function makes every stroke and every stroke full of artistic flavor. The application supports multiple languages including Chinese, meeting the needs of global users. Functionally, it provides a wealth of drawing tools, allowing users to draw freely according to personal preferences and needs. In addition, users can also export their works to PNG format for easy sharing and saving. The real-time collaboration and shared link functions allow multiple people to create together on the same canvas, enhancing the efficiency and convenience of teamwork.

7. zerker

Site: https://github.com/flutterkit/zerker

Zerker is a flexible and lightweight Flutter Canvas graphics animation library. With Zerker, you can create many seemingly cumbersome animation effects, such as like animations, pop-up animations, scene transitions, icon effects, etc.
At the same time, you can also create many simple games using Zerker. Zerker includes elements such as sprites, scrolling backgrounds, and atlases, allowing you to easily create game worlds with them.

8. page-spy-web

Site: https://github.com/HuolalaTech/page-spy-web

PageSpy, open sourced by Lalamove, is a tool designed for remote web project debugging. By encapsulating the native API, it realizes intelligent filtering and conversion of parameters when calling native methods, and then generates messages in a standardized format for use by the debugging end. When the debugging terminal receives these message data, it can intuitively display the data in the form of a console-like interactive functional interface, thus greatly improving the efficiency and convenience of developers in the debugging process of remote Web projects.

9. 50projects50days

Site: https://github.com/bradtraversy/50projects50days

This collection contains 50 exquisite front-end small projects, all written in HTML, CSS and JavaScript. Each project comes with web page source code and effect display, providing valuable practical opportunities for beginners and a source of inspiration for experienced front-end developers. Browsing the effects of these projects, novices can deeply experience the charm of front-end technology, and the concise and clear source code greatly lowers the threshold for writing code. Maybe, one of the web page effects will amaze you, a senior developer.

10.hel

Site: https://github.com/Tencent/hel

Provides the ability to introduce remote modules at runtime. The modules are deployed in CDN. After the remote module is released, it can take effect without rebuilding the release. The remote module introduced by hel can be used as a micro-module (that is, a module-level micro-frontend), which supplements the traditional page-level micro-frontend (such as qiankun, unbounded, etc.). Although page-level micro frontends are powerful, they are sometimes too rough in granularity and cannot meet the fine needs of all application scenarios. In situations where more fine-grained micro-frontends are required, such as component or function-level splitting and combination, hel's remote module functionality can exert its unique advantages. By using HEL tools, developers can build and expand front-end applications more accurately and efficiently, thereby improving overall development efficiency and project quality.

11. micro-app

Site: https://github.com/micro-zoe/micro-app

MicroApp, this micro-front-end framework carefully built by JD.com’s front-end team, is based on component-based thinking and implements micro-front-end rendering based on WebComponent-like technology. Its design concept aims to simplify the getting started process, improve work efficiency, and provide users with a smooth and convenient development experience. MicroApp has the characteristics of technology stack independence and business unbundling, and can be seamlessly integrated into any front-end framework, providing powerful support for users' front-end development.

As a page integration solution, the core of micro front-end is to split a large and complex front-end application into multiple independent, flexible and scalable small applications. Each small application can be developed, run, and deployed independently, and then the applications are neatly integrated into a whole. This architecture not only helps reduce the coupling between projects and improve the scalability of the project, but also makes the front-end warehouse more compact and flexible under the micro-front-end architecture. Compared with the traditional single front-end warehouse model, the micro-front-end architecture brings a new perspective and higher maintainability to front-end development.

12. tiny-vue

Site: https://github.com/opentiny/tiny-vue

The highlight of OpenTiny Vue is its Renderless component design. This architecture allows a set of code to be compatible with Vue2, Vue3 and React, and is suitable for both PC and mobile terminals. It supports function-level logic customization and full template replacement, demonstrating extremely high flexibility and secondary development capabilities. Our component library is rich and diverse, with more than 100 components, including common ones in the industry and our own unique components, such as Split panel splitter, IpAddress IP address input box, Calendar calendar and Crop image cropping, etc., which satisfies all kinds of development need.

13. limu

Site: https://github.com/tnfe/limu

limu, short for love immutable, is designed for efficient creation and manipulation of immutable objects. It achieves excellent performance based on a shallow copy on read and a mark modification mechanism on write.
In various scenarios, limu is usually 2 times or more than 20 times faster than immer, showing amazing performance. You can experience the results for yourself by clicking on the online performance demo.
It's worth mentioning that limu does not freeze state by default, which makes it 10 times or more faster than immer in most scenarios. This feature makes the development process smoother and improves development efficiency.
In addition, limu is also very friendly to debugging. You can view your draft directly at any time without worrying about the current status. This makes the debugging process easier and more intuitive.

14. code-run

Site: https://github.com/wanglin2/code-run

A powerful online code editing and preview tool. Its design concept is similar to well-known platforms such as codepen, jsbin, and jsfiddle, but it pays more attention to user experience and rich functions. This tool allows users to write, run and preview code directly on the web page without installing any software or configuring the local environment.
Whether you are a front-end developer, designer, or a student learning to code, this tool can meet your needs. It supports multiple programming languages, including HTML, CSS, JavaScript, and more, allowing you to easily build web pages, test code snippets, or learn new technologies. At the same time, it also provides a real-time preview function, allowing you to instantly view the running effect of the code while writing it.

15. koi-ui

Site: https://github.com/yuxintao6/koi-ui

KOI-ADMIN🌻, a cutting-edge template designed for enterprise-level middle and back-end management, brings together cutting-edge front-end technologies such as Vue3, Vite, TypeScript, Pinia (and its persistence plug-in), Unocss and ElementPlus. Compared with popular backend management templates on the market, KOI-ADMIN is more concise, efficient and easy to understand, and is especially suitable for beginners and novice users.

This project not only has a low learning cost, but is also equipped with detailed code comments and rich cases, making it an ideal choice for enterprise-level projects, small and medium-sized projects, personal projects and even graduation projects.

Thank you for your patience in reading!