Popular front-end tools are simply not too easy to use!

★★★★★ Web front-end development artifact: click to view   →→ WebStorm installation and use

Send the book today! Free shipping! 10 books! (First come here, please show me a lot)

"Bootstrap Actual Combat"

"Illustrated CSS3 Core Technology and Case Actual Combat"

"Web Design: HTML5 and CSS3 in Action"

"HTML5+CSS3 from entry to master"

"HTML5 Actual Combat"

"TypeScript Getting Started Guide"

  ...

Scan the public number below and send the   three words 777 to get the download.

Today I recommend to you the top 50 front-end tools that are currently popular and fresh. I can’t remember the original source of an article I saw on the Internet. Thank you for sharing. (I don’t remember the original address, it can’t be marked as reprinted, it’s published as original first, and the original address is found later, it will be replaced, hope to understand)

One, build tools

1、 Parcel

https://parceljs.org/

Parcel is an extremely fast and zero configuration WEB application packaging tool. Fast and almost zero configuration is its biggest feature, and it can be used out of the box. Compared to webpack, Parcel may not be a good choice for novices.

2、 Critters

github.com

A webpack plug-in, it can easily configure inline critical CSS (critical CSS), the rest of the css part will be loaded asynchronously, because it does not use a headless browser (headless browser) to present content, so it is fast and lightweight.

3、sucrase

sucrase.io/ 

If you use typscript to build a React project, sucrase will be a good choice, and its compilation speed will be 20 times that of Babel. sucrase-an ES6+ compiler that focuses on non-standard languages ​​such as Typescript, JSX and Flow.

4、Webpack Config Tool

webpack.jakoblind.no/

A visual online tool website, you only need to select the front-end project to apply the technology and related configuration, you can generate webpack.config.js with one click, saving you a lot of trouble.

5 、 JSUI

github.com/kitze/JSUI

JSUI is a tool to visually classify, build and manage JavaScript projects. Regardless of whether it is a front-end application or a back-end application, and no matter which framework is used, as long as the project has a package.json, it can be managed.

6 、 PWA Universal Builder

pwa.cafe/

A scaffolding tool for creating projects based on Preact, React, Vue and Svelte, out of the box and supports Babel, Bublé, Browserlist, TypeScript, PostCSS, ESLint, Prettier and Service Workers!

7 、 VuePress

vuepress.vuejs.org/

VuePress is composed of two parts: the first part is a minimalist static website generator, which contains a theme system and plug-in API driven by Vue, and the other part is a default theme optimized for writing technical documents. It was originally born to support Documentation requirements for Vue and its subprojects.

Every page generated by VuePress comes with pre-rendered HTML, so it has very good loading performance and search engine optimization (SEO). At the same time, once the page is loaded, Vue will take over the static content and convert it into a complete single page application (SPA), and other pages will be loaded on demand only when the user browses to it.

Two, framework and library

8 、 PWA Starter Kit

pwa-starter-kit.polymer-project.org/

Quickly help you build a fully functional PWA website project through feature-rich WEB components, with almost zero configuration, completing the construction, testing and rapid deployment.

9、PaperCSS

www.getpapercss.com/

An unconventional CSS framework, if you want your website to have a hand-painted feel, choose it.

10、boardgame.io

boardgame.io/

BOARDGAME.IO is a game framework open sourced by Google. It aims to allow game authors to essentially transform the rules of the game into a series of simple functions. These functions are used to describe the state changes of the game when a specified action occurs. The framework is responsible for processing the expression Sexual state transfer. No need to write any network or back-end code manually. Features:

• State management: automatically and seamlessly manage the game state across browsers, servers and storage;

• Rapid prototyping: Debug the interface to simulate changes before rendering the game.

• Multiplayer games: All browsers connected to the same game are synchronized in real time without refreshing.

• Private status: private information can be hidden from the client.

• Log: The game log can be viewed at any time.

• UI kit: React components often used in games.

11、Stimulus

stimulusjs.org

Stimulus is a moderate front-end framework, it does not try to take over all aspects of the entire front-end, and does not care about how to render HTML, on the contrary it is used to enhance HTML related behaviors. If your team is small, but you want to compete with larger teams that use more strenuous mainstream solutions, then this is a more suitable front-end framework solution.

12、sapper

sapper.svelte.technology/

Sapper is a framework similar to Next.js, with extremely high performance and memory efficiency, with modern framework functions such as code segmentation and server-side rendering. It is a military-level framework.

13、Reakit

reakit.io/

Using this framework allows you to quickly build beautiful React UI interactive sites.

14、Evergreen

evergreen.segment.com/

A more powerful React UI framework, there is a very standard UI design language to help you build enterprise-level WEB applications with international design style, this framework is similar to our domestic ant.design (https://ant.design/docs /spec/colors-cn)

Three, HTML and CSS tools

15、 keyframes.app

keyframes.app

A website based on time key frames to make web animations online, you don't need to switch between the editor and the browser directly, and what you see is what you get. keyframes.app provides two forms: online production and Google Chrome extension. After the production is completed, you can easily copy the automatically generated CSS code to your project.

16、 Emotion

emotion.sh/

Emotion is a library for writing CSS in JavaScript. It supports string and object declaration of CSS variables. If you are using React, trying this library will allow you to write CSS in JavaScript in a more elegant way.

17、modern-normalize

github.com

normalize.css allows the browser to render all elements consistently in a near-standard way, and unlike cssrest, it only targets the elements that need to be normalized. modern-normalize only targets modern browsers and is modern enough that even IE and Edge have been abandoned.

18、layerJS

layerjs.org/

A framework that allows you to easily implement many effects such as menus, frames, pop-up layers, scrolling inspections, zooming, touch gestures, etc., by writing HTML. The compressed version of the framework code is only 30KB, which is easy to integrate with various front-end frameworks ( Angular, VueJS, React), support responsive and touch, and can be implemented without relying on any library.

19、css-blocks

css-blocks.com/

One is inspired by CSS Modules, BEM and Atomic CSS framework to provide the perfect CSS module solution for your web application components.

20 、 usebasin

usebasin.com/

You only need to design the form, without writing back-end code, you can easily integrate the form application into your project.

21、mustard

mustard-ui.com/

A CSS framework suitable for beginners, but it looks pretty good, modular, open source, compressed version only 6KB, supports FLEX, Grid layout and comes with some beautiful UI, such as progress bars, forms, buttons, etc., although small, But it is fully functional.

Four, JavaScript tools

22、ScrollHint

appleple.github.io

A JS library, used to indicate that the element can be scrolled horizontally, and with a pointer icon. If you are doing a novice guide, this tool will be a good choice.

23 、 ToastUI editor

github.com

The powerful Markdown editor tui.editor is easy to integrate into your project. This powerful rich media editor has the following features:

• Support CommonMark and GFM (GitHub Flavored Markdown) two standards

• Support rich extension plug-ins, such as color selector, chart, UML, table merge

• Two modes of WYSIWYG and Markdown are provided, which can be switched at any time during the editing process, which is very convenient. In WYSIWYG mode, you can copy text directly from browser, Excel, PPT, etc., and retain the original format

24、FilePond

github.com

Filepond is a JavaScript library for file uploads, can upload any content, optimize images for faster upload speed, and provide an excellent, accessible, and smooth user experience.

Filepond provides multiple upload methods: drag and drop, copy and paste files, browse the file system or just use the library's API. Only 21KB after gzip compression, and built-in image optimization and image automatic adjustment functions.

Filepond is suitable for React, Vue, Angular and jQuery.

25 、 Money.js

sarahdayan.github.io/dinero.js/

An immutable framework for creating, calculating and formatting monetary value.

Whether in banking applications, e-commerce websites or stock exchange platforms, we interact with money every day. We are also increasingly relying on technology to deal with problems.

However, there is no consensus on how to program currency values. Although money is a universal concept in modern society, it is not a first-class data type in any mainstream language compared to things like date and time. As a result, every kind of software has its own way of processing and is accompanied by traps.

Dinero.js follows Fowler's pattern a bit more. It allows you to create, calculate and format currency values ​​in JavaScript. You can perform mathematical operations, parse and format objects to make your development process easier.

The library is designed to be immutable and linkable. It supports global settings, has extended format options, and provides native internationalization support.

26 、 Swup

github.com/gmrchk/swup

A framework suitable for beginners, convenient, flexible and easy to use, allowing you to quickly create professional-level page transition animation effects.

27、Selection.js

simonwep.github.io/selection/

Simple and easy-to-use visualization, support mouse drag and drop, use Cmd/Ctrl+click to select page elements library (support group selection), which greatly saves your development time. It is only 3KB in size and does not rely on jQuery.

28、Glider.js

nickpiscitelli.github.io/Glider.js/

A super fast (25 millisecond loading), lightweight (less than 3KB), no dependency (no need for jQuery) front-end library for making slideshow effects, support responsive, easy to extend, convenient for custom events, etc..., more Many features are waiting for your discovery!

29、ScrollOut

scroll-out.github.io/

A framework to help you make professional scrolling effects (scrolling parallax), the frame size is less than 1KB, using callback methods to assign the attributes of related animation elements in real time, so that you can make personalized dynamic effects.

Five, icons, chart tools

30、Orion Icon Library

orioniconlibrary.com/

Up to 6000 professional free SVG vector icons, and also support in-depth customization, such as changing colors, changing line thickness, changing icon styles (thin lines, thick lines, flat), and generating related codes with one click.

31 、 Frappe Charts

frappe.io/charts

A simple, professional, open source, and modern style SVG report tool, without any dependency library, simple code style, easy to use. Support one-click export of svg code.

32 、 SVGator

www.svgator.com/

If you want to take web graphics to the next level, then animated SVG is your choice, and SVGator is one of the simplest tools you can use to create them.

A professional online production tool for SVG animation. SVGator also has a code manager panel, so you can see exactly the code generated by the application. SVGator exports clean, well-formed code.

33、ApexCharts

apexcharts.com/

ApexCharts.JS is a modern JavaScript chart library, used to build interactive charts and visualizations using simple APIs, with very powerful functions. It is convenient for you to embed the chart into your Vue, React project.

34、MapKit JS

developer.apple.com

A map tool provided by Apple. If you want to create the same map style as Apple's official website, this tool will be a good choice, allowing you to add interactive events to the map to enrich your map application.

35、Img2

github.com

An image automatic preloading and caching tool to prevent image flickering, and use blur filters to display images in advance to delay image loading, improve web page loading speed, it is very simple to use, you only need to use <img-2> instead of <img/> Just label it, it's that simple to use!

36 、 Lozad

github.com

Lozad.js is a lightweight, high-performance, configurable pure JavaScript and dependency-free lazy loader based on the IntersectionObserver API. It can be used for various forms of elements such as pictures and iframes.

After compressed by gzip, it is only 1kb in size. Compared with the commonly used jquery.lazyload.js, lozad.js is crushed, although jquery.lazyload.js is only a few kb in size. On github, 4800+ stars have been harvested.

Six, React tools

37、RSUITE

rsuitejs.com/

React Suite is a set of React component libraries, born for backend products. Created by the HYPERS front-end team and UX team, it mainly serves the company's big data product line.

After three major version updates, a large number of components and rich functions have been accumulated. And support online customization of personalized themes, and more importantly, there is a Chinese version, which is convenient for us to learn and use.

38, Pagedraw

pagedraw.io/

A magical online UI design and production tool, you only need to drag and lay out the page, this tool will automatically generate high-quality React component code for you, and more functions are waiting for you to discover.

39、react-smooth-dnd

github.com/kutlugsahin…

A React tool for dragging page elements, the dragging effect is smooth, allowing you to easily drag and drop cards, lists, and form components.

40、Unstated

unstated.io/

A new state management library unstated.js: easy to use/reasonable. It is completely different from the previous state management library. This unstated focuses on the local state (not the global store, a small change leads to the renderer of the entire tree), and multiple local states can also be shared, which combines the ease of use of redux and flux. The reasonableness of is refreshing; unstated is completely designed for React, "react enough", so that you don't feel that you are using third-party components.

41、Reach Router

reach.tech/router

Reach-Router is a set of react-based routing controls developed by former ReactRouter member Ryan Florence. So there is already a more mature ReactRouter, why do you want to "re" build a set of Router? Those who are interested can go and find out, editor I think there are mainly the following characteristics worthy of your attention:

• Small, it is only 4kb, which is about 40kb smaller than react-router after compression.

• Less configuration

• Better to use

• Basically the same api, the learning cost is very low

• The source code is very concise, with a total of 3 files and 900 lines. If you want to understand how the routing of a single page application is implemented, reach-router is definitely an excellent starting material.

42 、 SVGR

www.smooth-code.com/

svgr is a tool for converting SVG into React components, and svgr is implemented by JavaScript. The entire document is also very small and has been open sourced on github.

43、React Spreadsheet Grid

github.com/

A grid component similar to Excel for React, with a custom cell editor, high-performance scrolling and resizable columns.

Seven, testing and data tools

44 、 webhint

webhint.io/

The Webhint project provides an open source inspection (Linting) tool for checking the accessibility, performance, and security of the code. In creating Web sites and applications, there are more and more detailed issues that need to be improved. To this end, Webhint strives to help developers mark these details.

Webhint is provided in two forms: a command line interface (CLI) tool and an online scanner. Using an online scanner is the fastest way to get started. To use an online scanner, you need to provide it with a public URL for running reports and gaining insight into the operation of the application.

When testing applications, Webhint provides three operating environments: jsdom, Chrome and Edge. The latter two operating environments use the Chrome DevTools protocol. The first operating environment uses the Node.js environment to quickly perform a limited number of checks without browser support.

There are more powerful functions waiting for you to try and tap.

45、Airtap

github.com/airtap/airt…

Airtap is a simple way to test JavaScript in the browser. It claims to cover more than 800 browsers. It can start testing your code locally in a few seconds and seamlessly transfer to the cloud-based browser provided by Sauce Labs To get better coverage testing.

Airtap differs from other cross-browser test runners in its simplicity and the ability to easily run test suites in many browsers without having to install them locally. It allows you to iterate quickly during the development process and provide good browser coverage before release without worrying about lack of browser support.

Don't just claim that your JavaScript supports "all browsers", test it to prove it!

46 、 mkcert

github.com/FiloSottile…

HTTPS is the trend of Web development and is used to improve the security of websites. To use HTTPS, you need to configure a TLS certificate. Thanks to the ACME protocol and Let's Encrypt certificate, remote environments can be easily deployed. But for the local environment, there is no universally valid certificate.

mkcert is designed to be simple enough to hide almost all the knowledge necessary to generate a TLS certificate. It applies to any hostname or IP, including localhost, because it is only used in your local environment.

The certificate is issued by your private CA. When you run mkcert-install, these trusts will be automatically configured. Therefore, when the browser accesses, the security logo will be displayed. Currently supports MacOS, Linux and Windows, as well as Firefox, Chrome and Java. It even supports some mobile devices.

47、Puppeteer Recorder

checklyhq.com/docs/puppet…

Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium on the DevTools protocol. It is often used for crawling, automated testing, etc. You can use it to complete most of the things you manually complete in the browser.

48 、 jsonstore.io

www.jsonstore.io/

jsonstore.io provides free, secure and JSON-based cloud data storage for small projects. Just enter https://www.jsonstore.io/, copy the URL and start sending HTTP data requests. POST request will save data, PUT request to modify data, DELETE request to delete data and GET request to retrieve data. It greatly facilitates the integration of test interfaces for front-end developers. After the front-end page is produced, the interface can be tested. It is so simple to use.

49 、 Heat

initab.com/

A customized workbench for developers, which can be used after installation through the Google Chrome plug-in. Through this workbench, you can easily subscribe to git projects you are interested in, follow up related issues, pull related operations, view version history, and subscribe Stack Overflow related content, management and viewing of Gists related content, can be said to be a mainstream technology platform aggregation workbench.

50 、 lambdatest

www.lambdatest.com/

An online automated testing cloud platform that claims to be tested on more than 2000 real browsers and devices. It can be deeply customized according to your testing needs and form related records to facilitate team collaboration and help you discover different browser versions across platforms Various problems.

At last

Hope these tools are helpful and enlightening to everyone.

supplement:

Scan the QR code and reply [ 777 ] to get the books you want

Scan the QR code and reply [ Special Effects ] to get the coolest special effects in 2020

Scan the QR code and reply [ Hongmeng ] official development document and open source project address

Scan the QR code and reply [ quick checklist ] in the background , more exciting waiting for you to discover

Reply 【VUE】, get the latest vue learning materials

Search for [ Programmer Zero Distance ] on WeChat , reply to the above keywords, and obtain precious materials collected by Yuanyuan’s front-end learning road. Follow-up will continue to update practical articles and tutorials, and work together with everyone to improve basic computer knowledge and front-end technology. There is zero distance between us!

Click to view: A must-read book for getting started with web front-end

Tips:

As someone who came here, Zeng Jiang also hesitated to learn front-end or other new things, so I missed a lot of opportunities. In fact, when you can't decide what you should do in the future, you can't be sure whether your current career can be better. If you want to develop, don’t hesitate anymore, just keep learning, don’t ask why? When you master a major, you will understand why Yuanyuan said so.

Only when you have enough abilities can you have more choices about your future!