How HBuilderX Protect the Programmer’s Physical and Mental Health

Keyboards and chair have ergonomics solution. But why should the IDE have this concept?

The answer is Yes. A good development tool is important to your eyes and hands.

Dcloud spent a lot of time and cost to design an excellent IDE about the physical and mental health of developers.

Easy on the Eyes: Soft-green Theme

Many people mistakenly think that black themes are the most eye-protective. But we did an in-depth research after realizing this was a mistake.

No reader likes to watch the black screen for a long time. You will find that the background color of a good e-book product is not “black”, usually it’s yellowish colour.

Why yellowish color is popular in the e-book industry? Does it give the reader the wrong impression of reading a real book? There must be scientific truth here。

There is a misunderstanding: the black background, less light under the LCD, can protect the eyes. Because the pure black background is feeling bad, in fact, the background color of each development tool is not pure black, and the particles on the LCD panel are still glowing. Although the amount of light in the dark area of the LCD panel is low, in terms of the tension of the human eye muscles, the damage of high contrast is greater than the amount of light. On the sunny grassland, although the amount of light is great, human eyes are very comfortable. But in the dark room, the brightness of the mobile phone screen is adjusted to the lowest, the amount of light is much lower than the former, but it is still dazzling. This is caused by the effect of contrast.

In HBuilderX, the default theme is soft-green. It is characterized by softness, low contrast, clearness under strong light, and a strong sense of green. Under this theme, developers will not be very tired even if they write code for a day.

Through many rigorous medical tests in Beijing Guo’ao Psychological Hospital, plus a lot of research of color psychology and color physiology. We got the best color “soft-green”. We arranged for engineers to write codes under different color themes and tested their brain fatigue, and then adjusted the green and soft color contrast. The experiment process is as follows:

After a full rest, the two programmers participating in the experiment used programming tools with green and black themes to code for half an hour. And monitored brain wave data changes. Through the analysis of 170,000 pieces of data generated by the experimenter’s brain waves, using the fatigue value, tension and concentration of attention values printed by the hospital equipment, the conclusion of the experiment is as follows: The fatigue level of the two programmers is both increase after half an hour of coding. However, programmer working under the soft-green theme have a relatively slow rise in fatigue value, lower tension, and more concentration. The increase in fatigue value of programmer who use the black theme after coding is up to 700% of the increase in the use of soft-green theme. This kind of experiment has been carried out many times with changing the scenarios, and the conclusion is always the same.

The images above: programmers in hospital experiment

In terms of color, there are color physiology and color psychology. Let’s look at the issue for black theme from the perspective of color physiology:

1. Vertigo When a person’s eyes look at dark things for a long time, the brain will secrete hormones to force the eyes to enhance vision. For example, we can see clearly when we stay in a dark room for a while, but we get dizzy when we return to a sunny area. This is called scotopia. Similarly, if you look at the black background code area for a long time, you will be dizzy when you switch to other screen interfaces or look out of the window.

2. Night blindness The eyeball secretes rhodopsin in a long-term dark environment and consumes vitamin A, which can cause night blindness. Although it is not myopia, the night vision is lower than that of ordinary people. Refer toBaidu rhodopsin

3. High contrast Black backgrounds often correspond to high-contrast foreground content. However, the high-contrast environment is not suitable for long-term viewing. Just like you can’t eat more sugar or spicy food, but you can drink more water. A mild image may not be able to maintain sufficient clarity under strong light or poor eyesight. We repeatedly adjust the parameters to get the current result – soft-green.

After many researches, the yellow and green is the favorited colours for human eyes. The wavelengths of yellow and green are most comfortable which human eyes like. The base color of soft green is warm yellow, and some green is added for the best color balance.

In addition, from the perspective of color psychology, warm colors are more comfortable than dark colors. Color affects mood. The green of grasslands and forests is more comfortable than looking at dark or irritating colors for a long time. Programmers should pay more attention to this problem. Looking at the screen for 8 hours a day is not a trivial matter.

We put the health of developers first. After a long period of research, we finally figured out the soft-green theme.

Some IDEs give high priority to UI design, but HX put health first. Maybe HX is not the most beautiful IDE, but it must be the healthiest IDE.

Drag-free Selection

Repetitive Strain Injuries (RSI) is very common for a programmer. Do you know what is the most severe strain during mouse operation? The answer is drag.

The drag selection is like this: the index finger presses the left mouse button. The nerves remain tense. Then you move the wrist to drive the mouse to move. After select the content you want, and you can release the index finger. During this process, the index finger keeps pressing down. The muscles and nerves in your hands are always in a tight state.

It’s more painful if you use the touchpad.

Occasionally drag is not a big deal. However, after eight hours of programming day after day, the Repetitive Strain Injuries is caused by the drag selection.

In order to avoid drag selection, HX provides shortcuts setup, smart double-click, hotkeys without selection etc.

• shortcuts Ctrl+=is from the cursor point to expand the selection. Ctrl+Eis select the current word or select the same words. Please refer to manual – [Select] for more shortcuts.

• Smart auto selection on double-click Use double-click to quickly select the corresponding content in a variety of scenarios. For example: at the beginning of the line, end of line, function block, equal sign, comma, hyphen, brackets, quotation mark, first character at the beginning of the line and so on. Understanding this set of intelligent double-click technology can greatly improve operation efficiency and reduce hand fatigue. See menu -> [select].

• hotkeys without selection Ctrl+C: Copy whole line Ctrl+X: Cut whole line. Ctrl+Insert: paste the selection. Ctrl+Shift+X: Switchover selections. Ctrl+D: Delete the whole line. Ctrl+up/down: Move the line. Shift+Del: Delete string from the cursor to the end of the line. Note: No any code is selected for all the above operations.

Please refer to manual - Edit for more details.

As a company that provides services to developers, especially when we are also developers, what we value most is efficiency and health.

We hope that through our efforts, the development efficiency of millions of developers will be more efficient and healthy.