[Hematemesis Summary] 20+ front-end practical tools, add them to your favorites!

This article will share with you more than 20 front-end practical tools to help you improve development efficiency when developing projects. Come and collect and use them. I hope it will be helpful to everyone!

1. CSS layout generator

Layout: https://layout.bradwoods.io/customize

It is a full-featured CSS and JSX generator that is used to generate different types of layouts using CSS Grid layout syntax, arbitrarily modify the properties of the Grid, display the screen in real time, and generate corresponding code. Of course there is Flex layout (but it is not perfect yet). [Recommended learning: css video tutorial]

2. Riju

Riju: https ://riju.codes/

Riju is an online code running platform that inherits 224 languages. It is very simple and has no ads. It is highly recommended

3. Whirl

Whirl: https://whirl.netlify.app/

Whirl is a CSS animation library, and Other animation libraries are different. It has a collection of 108 loading animations. It is simple and unique and worth learning. All source codes are also available!

4. Pikaday

Pikaday: https://pikaday.com/

Pikaday is a date picker with no dependencies, lightweight (5k), CSS modularity, and a very simple style. I particularly like it. Surprisingly, it has received 7k Stars on Github

5. Tailwind Components

Tailwind Components: https://tailwindcomponents.com/

Tailwind Components is a Tailwind UI kit. This website is a collection of various Tailwind components contributed by the community

6. Tail-Kit

Tail-Kit: https://www.tailwind-kit.com/

Tail-Kit is the first great Tailwind UI component library, it has more than 250 Open source components, compatible with React, Vue and Angular

7. tidy.js

tidy.js: https ://pbeshai.github.io/tidy/

tidy.js is a JavaScript library for processing data. It includes more than 70 functions of different categories (sorting, grouping, mathematics, Sorting, etc.)

8. party.js

party.js: https://party.js .org/

party.js is quite interesting. You should have seen many blog websites. There are many cool animations when you click or drag the mouse. This library does just that. You can easily achieve those effects

##9. AI background removal

baseline: https://baseline. is/tools/background-remover/

baseline is a free tool website that uses AI to remove image backgrounds. It supports JPEG and PNG, and will eventually return a PNG image with a transparent background to you

10. Layout patterns

Layout patterns: https://web.dev/patterns/layout/

Layout patterns is a new section in the developer resources of Google Developers. It lists the use of CSS to build layout UI. Now it lists 11 layouts~ It should continue to be added in the future to explore more possibilities. It is recommended to collect

11. Lowdefy

Lowdefy: https://lowdefy.com/

Lowdefy is an open source low-code framework that uses YAML to easily build web applications, management panels, BI dashboards, workflows and CRUD applications

12. uncut

uncut: https://uncut.wtf/

uncut is a modern font catalog website that focuses on open source and can be used for personal and commercial use for free. After looking at it, it has collected a total of 90 fonts for you to choose from~

Thirteen, fetoolkit

fetoolkit: https://www.fetoolkit.io/

fetoolkit is a front-end development toolbox that contains 20 A variety of coding and image-related tools, including CSS, JSON, icons, SVG, image compression, npm, regex and other tools

## Fourteen, Unicode Arrows

Unicode Arrows: https://unicodearrows.com/

Unicode Arrows is a collection of hexadecimal codes related to various arrows.

15. components AI

components AI: https://components.ai/

components AI is a theme builder, including syntax highlighting generator, gradient, shadow tool, SVG pattern generator, animated background, etc., all of which can be debugged online and are very easy to use

16. Glitter

Glitter：https://wh0.github.io/glitter/

Glitter is a fluorescent font generator. The project is not complicated, but it looks good. We can modify the text at will and finally export SVG

##Seventeen, Iconduck

Iconduck: https://iconduck.com/

Iconduck is an open source icon website with more than 100,000 icons that can be searched by keywords, and all Can be used in commercial projects

##18. pattern-generator

pattern-generator: https:// doodad.dev/pattern-generator/

pattern-generator is a website that helps you generate background images. There are dozens of patterns to choose from, and the elements in each pattern can be interacted with through buttons. Modify at will, and finally you can export JPEG, PNG, SVG, CSS background code, and also support restoring the content of the last operation after exiting

19. buttons-generator

buttons-generator: https://markodenic.com/tools/buttons-generator/

buttons-generator is a tool that contains many interactive forms There are about **120** kinds of websites with button styles. For friends who need custom buttons, you can refer to them

Twenty, Coding Fonts

Coding Fonts: https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark

Coding Fonts is a website that collects 45 code fonts. Most of them are free. Of course, there are also paid ones. You can choose the one you like and put it in your own editor (whisper, I still like

JetBrains Mono the best)

, free and beautiful)

Twenty-one, svgrepo

svgrepo: https://www .svgrepo.com/

svgrepo is an SVG icon library with 300,000 free SVG icons, most of which are also commercially available. The website supports search, and you can collect it without logging in (it may be saved in localstorage)~

Twenty-two, maplibre

maplibre: https://maplibre.org/

maplibre is a JavaScript world map library, available out of the box, and also supports IOS and Android SDK

Twenty-three, Dopefolio

Dopefolio: https://github.com/rammcodes/Dopefolio

Dopefolio is an out-of-the-box official website page generator that does not rely on a bunch of third-party open source libraries. It is all pure HTML and CSS, so the SEO is very good, the Lighthouse score is also very high, and it supports page responsiveness. Mode. Friends who need an official website page can try using

24, animista

animista: https:/ /animista.net/

CSS animation set, you can freely adjust animation parameters and generate code snippets, easy to use

25. CSS Inspiration

CSS Inspiration -- CSS Inspiration

https://csscoco.com/inspiration/

Every time the boss wants to arrange all kinds of fancy styles for you, you can use this as a reference

end

(Learning video sharing: web front-end )

The above is the detailed content of [Hematemesis Summary] 20+ front-end practical tools, add them to your favorites!. For more information, please follow other related articles on the PHP Chinese website!