There are many visual online tools on the front end of the web. Today, I will introduce 10 tools worth collecting and using. Collect them quickly.
Online regular expression visualization
Regulex is an open source tool for visualizing regular expressions, which can be displayed visually by directly inputting regular expressions. And it can export pictures in svg format and get fixed links, such as the picture below. This is very convenient whether you use it yourself or explain it to others.
jex.im/regulex
Online Postman
requires registration to use, but if you have installed a similar application, you don't need it.
Postman is a super powerful Chrome extension for sending HTTP requests. Everyone who does web page development and testing should be well-known and unused!
It is very useful when testing the back-end API interface. GET, POST, DELETE, OPTIONS, PUT are all supported.
web.postman.co/
CSS3 clipping path (Clip-path) online generator tool
This is a tool that can adjust and generate CSS3 clipping path online. It is a must-have if you want to play with some fancy styles. This tool is available for free.
tools.jb51.net/code/css3path
CSS UI animation library
CSS UI Lib was established by the Tencent AlloyTeam front-end development team, mainly collecting friendly experience and creative interface component demos at home and abroad. In addition to using CSS3 technology, it also uses HTML5, JS, JX, jQuery and other technologies to achieve perfect appearance and interactive experience. Select a Demo, click "Visualization Tools" to enter the WYSIWYG mode
css3lib.alloyteam.com/
Canvas background animation online editing
JSRUN.NET is a very dynamic online code running platform, you can paste the code and put it into your project to achieve many cool background effects! The disadvantage is that if this is added, the operating load will be very large. It is generally recommended that it is worth having if you only need to be cool.
jsrun.net/square
The online code theme color matching tool
codemirror color color matching tool is the same website as above. If you think the color theme color of your editor’s code is not good, you can use it to adjust it slowly.
jsrun.net/app/49pKp
Colorsinspo online color matching
Colorsinspo is an online color palette for color inspiration. It collects more than a thousand excellent color matching schemes. You only need to click the desired color to copy the color code to use. It is an online color matching tool worth having for designers and front-end engineers. It is more powerful than previous coloring tools shared by Boss Design, and it is the best design coloring tool.
colorsinspo.com/
Compatibility query Can I Use
Caniuse is used to check the compatibility of browsers with various new features. You can query the compatibility of a js api or css property under each version of each browser.
caniuse.com/
EventLoop visualization
JavaScript Visualizer 9000 is very useful for front-end beginners to understand EventLoop.
www.jsv9000.app/
CSS code generation
Sometimes there will be some gradient effects in the UI, and the CSS cannot be copied. At this time, an online tool-cssmatic can be used to generate gradient CSS, which can generate four types of CSS codes, gradients, shadows, etc.
www.cssmatic.com/gradient-ge
