6 essential front-end development tools to increase your productivity

Network provides us with a variety of front-end tool, I selected six practical front-end tool that can help you improve efficiency.

image

1. EnjoyCSS

To be honest, I did a lot of front-end development, but it has been not good at CSS.

This simple and approachable tool in many cases gave me a great help. It is a code generator is a visual editor.

You can use it to create a variety of page elements, such as buttons, fields, and add custom CSS3 attributes to them.

image

2.Prettier Playground

Prettier is a code formatting tool that supports JavaScript, ES2017, JSX, Angular, Vue, Flow, TypeScript and so on.

It can parse the code, using rules you set out to re-print format specification code.

This tool is very popular, and there is an online version.

image

3.Postman

Postman is one kind of plug-chrome web debug web pages and send http request.

We can get used to easily simulate or request post or other means to debug interface.

I am engaged to develop, Postman has been present in my development tool list.

image

4.StackBlitz

Chidume Nnamdi said, this is every user's favorite online IDE tools.

The main reason is it our favorite and most used IDE introduces the Web - Visual Studio Code.

StackBlitz allows you to set up a key Angular, React, Ionic, TypeScript, RxJS, Svelte and other JavaScript frameworks.

Thanks to this convenient function, you can start coding in less than five seconds.

image

5.Bit.dev

One of the basic principles of software development is code reusability. This allows you to reduce development work, because you do not have to start from scratch building components.

This is Bit.dev did. It allows you to share code snippets and components reusable, so you reduce the cost and accelerate the development process.

It also allows sharing components between teams, which makes your team can collaborate with other teams.

image

6.CanIUse

This online tool is very convenient because it allows you to know whether the implemented features you want to use browser compatible.

To understand this, let us examine what browsers support WebP image format.

image

As you can see, it does not currently support Safari and IE. This means that you should provide a back-up option is not compatible browser. The following code segment is supported by all browsers most commonly achieved WebP image.

image

This translation from: 6 Must-Use Tools for Front-End Development --- by Mahdhi Rezvi


Front-end courses recommended:

"JavaScript Basic Course" (Free)
"HTML Basic Course" (Free)
"CSS basic course" (free)
"HTML5 Basic Course" (Free)

Guess you like

Origin www.cnblogs.com/shiyanlou/p/12427429.html