The purpose of this article is to consider what we can do to optimize the development process for a better experience while maintaining the quality of the code 🍿

Avoid unnecessary selection, such as when implementing a click or DBLClick event. The selection should not occur. This is not expected behavior, but the default behavior of the browser.

Use after/before pseudo-elements or padding extensions to make it easier for users to interact with each other. For the sake of people’s blood pressure, don’t turn clicking into a game.

Long text, or omitted information should provide tip tips

If a page goes wrong or crashes, it’s better to put a slightly apologetic FIG leaf on the wrong interface, rather than simply showing it to the user that it doesn’t know what’s going on. It’s better to give the user a solution or a useful error message

Remember when you first started working on your computer, you had a blue screen and you looked at all the code? Yes, anxiety, rather than showing me a bunch of useless messages (at least I didn’t know to see the error code at the time) and not telling me to press the reset button, same scenario, you report a backend error, do you want the user to fix it for you or what? You just have to tell the user what to do, and just to be clear, no one cares if you have another null pointer or if your database is down.

When the state is switched or data is loaded, a prompt for loading can help users clearly know their current state and avoid anxiety.

When large areas of the interface change, if a buffer animation is provided, the user will feel less abrupt and the visual focus changes quickly.

1. The use of CPU resources, remember the single-thread characteristics of JS, avoid the occurrence of code snippets that take too long to execute, otherwise, the full speed execution of the code will cause frame loss and lag.

2. Be careful with re and be careful with backtracking. Re is powerful, but if used improperly, it is a hidden eater of resources. If you are interested, you can take a look and be careful not to fall into the trap of re backtracking

3. Throttling and shock elimination are good helpers. For frequently executed scenarios, it is best to use throttle or debounce according to the scenario to save a lot of unnecessary calculations and make the operation more smooth