TDS has an Objective in their quarterly OKR to improve development efficiency. Now that the company has provided top-end Macs, Aeron seats, and 4K professional monitors, what can be done to make development more efficient?
In recent years, studies on human-computer interaction [1] have shown that color combination has statistical significance for the difference caused by code input efficiency, accuracy, readability and subjective aesthetic feeling. Among them, a number of experiments show that the input efficiency can be increased by more than 10% when the color combination with similar wavelength is used. That is, if you are already an enviable 10x Programmer, you can become an 11x Programmer with an optimized color scheme. However, the data also suggest that aesthetic perception and efficiency are not strongly correlated, so striking a balance between the two is a challenge.
TDS’s engineers and designers decided to cut other jobs and prioritize efficiency. After a quarter of research and experimentation, we launched the TapTap Code Editor theme.
How to use
If you are a VSCode user, click the link in the bottom to install the TapTap Theme for VSCode and open up the 11x Programmer exclusive development experience.
https://marketplace.visualstu…
Emacs, JetBrains, TextMate, Vim, Xcode users, we also did not forget you: https://github.com/TapTap/bas…
Students using other tools can use their own needs, from the currently available 9 color levels to DIY our brand skin Oh ~
Basic color disk:
Structured color data can be found in this file: https://github.com/TapTap/bas…
The design process
In order to ensure the readability and accessibility of the color scheme, we have done sufficient verification in the research process. Now let’s have a look at how the TapTap Theme is created:
Diablo mode
Dark mode is a hot topic in recent years, and more and more enterprises are starting to pay attention to it. Both Apple and Google provide users with this feature.
Why do you want dark mode?
Focus on the content
We found that most developers use the color-coded syntax under the black screen to reduce visual fatigue. As Toptal developer Kevin Bloch [2] says, “The black background reduces eye strain, makes color coding easier to read, and speeds up code comprehension.” In experiments [3], researchers found that compared with light mode, dark mode enabled users to stay awake for a longer period of time and focus more on their operations and tasks. Because the color has a hierarchical relationship, the dark part will automatically recede in the visual sense, and the light part will extend forward, so that the hierarchical relationship with strong contrast can make users pay more attention to the highlighted content information.
The eyes comfortable
An article [4] mentioned that the user interface in dark mode can reduce the user’s visual fatigue, especially in low light conditions. In addition, the dark mode produces much less blue light than the light mode; If the monitor is used at night, less blue light may mean less interference with the body’s sleep cycle [5].
Energy conservation and emissions reduction
On some displays (such as OLED, AMOLED), dark mode can prolong battery life [6]. Google confirms that using Diablo mode on an OLED screen is a great help to battery life. At 50 percent brightness, for example, the dark background in the YouTube app uses about 15 percent less screen power than the white one. At 100% screen brightness, the dark background saves up to 60% of the screen’s energy.
9 big swatches
The TapTap Theme palette starts with TapTap blue as the main color and orange as the secondary color. According to different code types and usage scenarios, purple and pink are added from the 7 color combinations in the TapTap design system, and eventually 9 color combinations are expanded.
As we all know, the biggest difference between dark mode and light mode is the color handling. In dark mode, we don’t want to break the basic color palette and color values in light mode. When the dark and light modes of a design system coexist, the color matching should have a certain continuity and correlation, rather than two sets of unrelated color plates. In this way, one is to avoid development and subsequent maintenance costs, and the other is to ensure consistency when actually switching and using, which means that certain rules need to be used.
For example, the darker the color in the light color mode, the greater the contrast with the background color of the interface, the easier it is to attract the user’s attention, and the higher the visual level. In dark mode we need to follow the same rule, so the lighter the color is.
There are three visual channels of color, which are Hue (H), Saturation (S) and Lightness (B). Our general design idea is to keep the Hue (H) unchanged based on the basic color palette of light color, and to obtain a set of colors in dark mode by adjusting the Saturation (S) and Lightness (B). The advantage of this is that the color source in the dark and light mode is the same, and the result after adjustment will be relatively harmonious.
In addition, by observing mature color matching themes on the market, such as GitHub, we found that the high contrast of the color swatches made it easier for users to read information. Therefore, by adding the gradient of transparency, we expanded the original 8 levels to 10, which provided more options for later code and color sash calls.
Color accessibility verification
In order to ensure the universality of color matching theme, we did some research on color Accessibility. Studies have shown that the incidence rate of male color blindness is very high (about 8% in males and 1% in females), among which the most typical is red-green color blindness [7].
The TapTap Theme has been repeatedly validated by the Colorblindly plugin to maximize the color differences between the nine visual impairments.
conclusion
You are welcome to install and use this theme to make your development more comfortable and efficient. While TapTap themes can be used by anyone, there are other benefits of working in TapTap that are not available to every company. In addition to offering top-of-the-line hardware, the company also offers three free meals, unlimited paid vacation, and supplemental business insurance. More importantly, TapTap is committed to providing an open and transparent work environment, no non-compete agreements, and fair treatment of every employee. For the colleagues who have passed the probation period and choose to leave the company voluntarily because they are not satisfied with their working status or for other reasons, we will also award a tribute payment equivalent to 6 months ‘salary to encourage everyone to find the most suitable position for them, which will also help those who choose to work in TapTap to have no worries. If you are interested in working in TapTap, please visit https://career.taptap.dev/ for current open positions and submit your resume. Hope to see you at Taptap soon.
The resources
- Kirlidog, Melih. (2014). Effect of Colours in Manual Data Typing. Computer Science & Information Technology. 4. 65-76.
- Miklos phillips, [Dark UIs. The Good and The Bad. The Dos and Don ‘ts.] (https://www.toptal.com/design…
- Luka Koning, Marianne Junger, Dark user interface, dark behavior? The Effect of ‘Dark Mode’ on Honesty in Human Behavior Reports, Volume 4, 2021
- Reeno Koemets, The Benefits of Dark Mode: Why should you turn off the lights?
- Silas S. Brown, Advantages of dark backgrounds on computer displays.
- Brooke Crothers, The Facts About Dark Mode And Battery Life: LCD Vs OLED, iOS 13 On iPhone, Android Q, Forbes, 2019
- Gretchyn Bailey, Color Blindness: Types, Causes, Symptoms, Treatment