Every front-end developer will encounter these 3 common problems and tools

Recently, I conducted research on the daily development work of He3 front-end engineers and they identified three common problems they often encounter during the development process:

  1. Issues with formatting and validating JSON
  2. Problems with writing and validating regular expressions
  3. Difficulty in accessing the clipboard history These three problems are very representative, and I believe that most people’s solution is to search for temporary tools through Baidu or Google, but the quality of these tools varies and their long-term availability is also poor. Next, we will delve into these three common problems and their corresponding tools. At the end of the article, we will also invite you to provide suggestions for the clipboard tool that He3 plans to develop.

JSON formatting

In front-end development, dealing with unstructured JSON strings when processing, storing, and transmitting data can often cause significant issues for developers and debugging. To solve this problem, developers can use JSON formatting tools to quickly convert unstructured JSON strings into readable formats, making it easier to understand and process the data.

JSON is a commonly used data format for front-end and back-end data exchange. The JSON format tool can help developers better view and understand JSON data, improving development efficiency and data transmission accuracy. The JSON format tool can achieve the following goals:

JSON is a commonly used data format for front-end and back-end data exchange. The JSON format tool can help developers better view and understand JSON data, improving development efficiency and data transmission accuracy. The JSON format tool can achieve the following goals:

  1. Format JSON data: Sometimes, the JSON data transmitted between front-end and back-end may be a whole string without key-value pairs, making it difficult to intuitively understand the data structure. JSON Format can format JSON data into an easy-to-read format, with each key-value pair arranged on one line and the indentation displayed according to the hierarchy, making it easy for developers to quickly locate the data structure.

  2. Verify JSON data: JSON Format can also help developers verify whether JSON data is legal. When the JSON data format is incorrect, JSON Format will prompt an error message, making it easy for developers to identify and correct the issue in a timely manner.

  3. Convert JSON data: Sometimes it is necessary to convert JSON data into other formats such as CSV or XML, and JSON Format can also help developers accomplish this task.

Therefore, JSON Format is an essential tool in front-end development that can improve development efficiency, reduce error rates, and contribute to front-end and back-end collaboration and data transmission accuracy.

Common JSON formatting tools include JSON FormatterJSONLintJSON Viewer, etc. Common JSON formatting plugins in IDEs include Prettier and ESLint in VS Code. The free versions of these tools typically support no more than 50 records, 200 nodes, and 1,000 characters, with other features requiring payment to unlock and some not supporting custom parameters. 1_1

The above image shows JSON Formatter, a popular tool among front-end developers that can only fix formatting issues in JSON data and not its underlying errors. As shown in the image, JSON Formatter does not perform well for code with missing quotes or non-standard code.

In addition to providing JSON error prompts, He3 JSON Format tool can even handle situations where the JSON format is incorrect.

1_2

In addition, He3 offers nearly 40 tools related to JSON, covering structures and interfaces for converting JSON to mainstream programming languages, such as:

  1. JSON to Go Struct (https://t.he3app.com?qdiv)
  2. JSON to Kotlin Class (https://t.he3app.com?mt6g)
  3. JSON to JAVA Bean (https://t.he3app.com?d5ik)
  4. JSON to Python Class (https://t.he3app.com?cezo)
  5. JSON Merge (https://t.he3app.com?mbvq) 1_3

1_4

Regular Expression

Assuming that John is a front-end engineer at an e-commerce website, the website’s users need to enter keywords in the search box to search for products. However, if users enter invalid or illegal characters, it can cause the search function to not work properly. To solve this problem, John needs to use regular expressions to validate user input and ensure that the input content conforms to the specified format. For example, regular expressions can be used to restrict users to only input characters and numbers, and can not contain special characters and spaces, etc.

Specifically, the applications of regular expressions include:

  1. Form validation: In front-end development, it is often necessary to validate the form data entered by users, such as email addresses, phone numbers, passwords, etc. Regular expressions can be used to verify whether the format of these data is correct.
  2. Text search: In text editors or code editors, regular expressions can be used for text search. For example, searching for all code blocks that contain a specific string in the code or searching for log records for a specific time period in log files.
  3. URL routing: In web applications, URL routing is an important concept. Regular expressions can be used to define URL routing rules to implement URL routing functionality.
  4. String processing in programming languages: String processing is a common task in programming languages. Regular expressions can be used to process strings, such as searching, replacing, matching, etc.

RegExr is a great tool for regular expressions. It supports real-time matching and visualization of match results, as well as practical reference materials for regular expressions, which is favored by front-end developers.

However, the syntax of regular expressions is very complex, with many different rules and syntax structures. Since RegExr does not support all regular expression syntax, in some cases, test results may be inaccurate.

For example, if a complex regular expression containing capture groups is tested using RegExr, certain specific syntax structures may cause the test results to be inaccurate. This may lead developers to believe that their regular expression is correct, but errors may occur in actual use.

2_1

Compared to RegExr, He3 currently provides two regex-related tools:

  1. Regex Reference
  2. Regex Tester Among them, the Regex Reference tool provides dozens of commonly used regex patterns for reference: https://t.he3app.com?8fs9 2_2

The He3 Regex Tester tool not only allows you to match strings based on regular expressions, but also supports string replacement patterns. You can access the tool at https://t.he3app.com?lqes. 2_3

In addition, He3 Regex Tester also provides visual explanations of the regular expressions, allowing you to easily understand how the current regular expression works: https://t.he3app.com?lqes 2_4

Clipboard management

Developers often encounter the need to frequently copy, cut, and paste text while working on frontend development using Mac or Windows. However, the default clipboard functionality on Mac systems can only store one text clipboard, and when multiple copy and cut operations are performed, the previous text content is overwritten and cannot be accessed again. Windows has its own clipboard history feature, but it is not suitable for images. Therefore, this problem is extremely inconvenient for developers who need to frequently copy and cut text because they need to access the previously copied or cut text content for subsequent operations.

To solve this problem, some third-party clipboard management tools have emerged, such as widely used Alfred, ClipMenu, CopyClip, etc. These tools can record multiple clipboard contents and allow users to easily access previously saved text content when needed. However, the limitation of the Mac system means that these tools also have some issues. For example, these tools usually require users to manually switch between different clipboards, and their clipboard history may be cleared after the Mac system is restarted. In addition, these tools may consume system resources, causing the system to slow down or become unstable.

Paste software (https://pasteapp.io/) stands out among them. It supports multiple clipboard types, such as text, images, files, code, etc., and can easily manage and access these clipboards. Meanwhile, Paste has a powerful search function that allows developers to easily search their clipboard history and find the content they need. Additionally, Paste offers various customization options, allowing users to adjust the behavior and appearance of the clipboard manager according to their preferences and needs. The only drawback is that Paste is a paid software and requires a purchase to use, which may be a disadvantage compared to other free clipboard management tools.

3_1

He3 is currently planning to develop a small tool for clipboard management, as an important member of the He3 global development toolbox. This tool will have the following features:

  • File preview
  • Clipboard content recognition and semantic analysis
  • He3 tool recommendations and linkage
  • Cloud storage
  • Clipboard history
  • Image preview Most importantly, it will be free! If you have more demands for clipboard tools, please join our discussion: https://github.com/he3-app/he3-feedback/discussions/128oolbox