Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the useful online tools for web front-end development". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the useful online tools for web front-end development.

1. EnjoyCSS

To be honest, although I have done a lot of front-end development, I am not good at CSS. [EnjoyCSS] is my savior when I am in trouble. EnjoyCSS provides a simple interface to help me design elements, and then automatically output the corresponding CSS code.

EnjoyCSS can output CSS, LESS, SCSS code, and supports specifying which browsers need to be supported and their minimum version. It is easy to use when developing simple pages, but it is not suitable for complex front-end projects (which often require the introduction of CSS frameworks).

2. Prettier Playground

[Prettier] is a code formatting tool that supports formatting JavaScript code (including [ES2017], [JSX], [Angular], [Vue], [Flow], [TypeScript], etc.). Prettier removes the original style of the code and replaces it with a standardized, consistent style that follows good practices. IDE mostly supports Prettier tools, but Prettier also has an online version that allows you to format code in a browser.

Prettier Playground is divided into left and right columns, with the original code on the left and the formatted code on the right

If the work computer is not at hand, Prettier Playground is very useful when using a mobile device or temporarily borrowing someone else's computer to check the code. Rather than using Prettier under IDE or editor, individuals prefer to configure Prettier:hook through git pre-commit hook to ensure that the whole team uses a unified configuration, eliminating the hassle of configuring IDE or editor separately. If it is an old project, hook can also set to format only a single file with changes or even code snippets with changes, so as to avoid accidentally formatting a large amount of code when using Prettier under the IDE or editor, drowning out the major changes in commit and making the review code very painful.

3. Postman

[Postman] has always been in my development toolbox, and it works very well when testing back-end API interfaces. GET, POST, DELETE, OPTIONS, PUT are all supported. There is no doubt that you should use this tool.

In addition to Postman, [Insomnia] is also a popular REST API testing tool, with the highlight of supporting [GraphQL]. However, Postman has also supported GraphQL since the release of v7.2 last summer.

4. StackBlitz

[Chidume Nnamdi] praises this as every user's favorite online IDE. [StackBlitz] moved everyone's favorite and most commonly used IDE Visual Studio Code into the browser.

StackBlitz supports one-click configuration of Angular, [React], Ionic, TypeScript, RxJS, [Svelte] and other JavaScript frameworks, that is, you can start writing code in a few seconds.

I find this online IDE very useful, especially if you can try some sample code or libraries online, otherwise just trying some new features will take a lot of time to initialize the configuration of the new project. With StackBlitz, you don't have to build an environment from scratch locally, and you can try out a NPM package in a few minutes. It's great, isn't it?

Microsoft officially also provides an online version of VSCode, which can use VSCode in browsers, and supports the development of Node.js projects (based on Azure). However, StackBlitz is more focused on optimizing the front-end development experience, the interface is more intuitive, and also launched the beta version of Node.js support (based on GCP, you need to fill in the application form).

5. Bit.dev

One of the basic principles of software development is code reuse. Code reuse reduces the amount of development so that you don't have to develop components from scratch.

This is exactly what [Bit.dev] does, sharing reusable components and fragments, reducing development volume, and speeding up the development process.

In addition to public sharing, it also supports sharing in the team, making it easier for team collaboration.

As the slogan of Bit.dev, "component is design system." Collaborate to develop better components. Bit.dev can be used to create a design system, allowing developers and designers within the team to work together to build a design system from scratch.

Bit.dev currently supports [React], Vue, Angular, Node, and other JavaScript frameworks.

On Bit.dev, you can not only search for components, but also directly view component dependencies, browse component code, and even edit code online and view previews! After selecting the components, you can introduce the components in the local project through Bit.dev 's command line tool bit, or through npm and yarn.

6. CanIUse

[CanIUse] is an easy-to-use online tool that makes it easy to see how well browsers support a feature.

I used to encounter situations where some of the features of my own applications are not supported in other browsers. For example, I didn't realize that a feature used by my portfolio project was not supported under Safari until a few months after the project was launched. These lessons made me realize the need to check browser compatibility.

Let's look at an example. Which browsers support the WebP image format?

As you can see, Safari and IE do not currently support WebP. This means that you need to provide fallback options for incompatible browsers, such as:

CanIUse can also be used from the command line, for example, to view browser compatibility in WebP image format: caniuse webp needs to install command-line tools through npm install-g caniuse-cmd before running the command.

At this point, I believe you have a deeper understanding of "what are the useful online tools for web front-end development?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.