From a book

This book is called design Book for Everyone. As a front-end, it’s good to know a little bit about design. This is helpful for our work. If the product gives you a simple prototype without the help of an artist, you can use your design knowledge to write a less ugly interface.

In life, a little design knowledge, but also to enhance our aesthetic. Know what kind of design is good, and even know a little about it.

Known as Ant Design. It pays tribute to the book in its documentation. And the first four principles of its design language, intimacy, alignment, contrast, repetition. It is the design principle that is put forward and introduced emphatically in the design book that everybody looks at.

So I recommend this book for you to read when you’re free. It’s very interesting.

It’s used for writing code

Apply design knowledge to writing code. It works, it makes our code a little bit cleaner. Our code is written in files, and we have to pay attention to layout. Think of code as paragraphs and code files as a special kind of newsletter.

Next, I’ll explain four basic design principles and how they apply to your code.

The four basic principles of design

  1. intimacy
  2. alignment
  3. contrast
  4. repeat

intimacy

The idea of intimacy does not mean that everything should be closer together. What it really means is that if certain elements are connected intelligently, or to each other, then they should also be connected visually.


Looking at the two pictures above, the woman and child in the first picture are not quite sure what their relationship is, and the two in the second picture are more like mother and son, they are more intimate. We can also make our code have this affinity to express the degree to which they are directly related.

As an example, I found a find function in Ramda’s source code:

function find(fn, list) {
  var idx = 0;
  var len = list.length;
  while (idx < len) {
    if (fn(list[idx])) {
      returnlist[idx]; } idx += 1; }}Copy the code

Now we take intimacy, and we transform it:

function find(fn, list) {
  var idx = 0;
  var len = list.length;
  var result;
  
  while (idx < len) {
    if (fn(list[idx])) {
      result = list[idx];
      break;
    }
    idx += 1;
  }
  
  return result;
}
Copy the code

We’re done. Do you see any difference? One method lets us split three areas with two carriage returns. Area for variable declarations, area for intermediate operations, area for return values. The code has their affinity. It’s more visually clear.

Of course, using the method of guard sentence can also do this:

function manToilet(person){
    if(isLady(person)) return;
    
    // dosomething
    
    return lighterPerson;
}
Copy the code

We can use carriage returns to express affinity relationships as long as they are different logical areas.

Not only inside a method, but outside of a method, inside our class, we can also express intimacy through carriage returns.

React page class:

class HomePage extends Component {
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    
    renderNavbar() {... }renderContent() {... }render() {... }}Copy the code

As you can see from the distribution of methods, render methods are closer together, and response methods are closer together.

Personally, I prefer to use code collapse blocks to separate the different members within a category

class HomePage extends Component {
    
    // #region response method
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    // endregion
     
    
    // #region render
    
    renderNavbar() {... }renderContent() {... }render() {... } // endregion }Copy the code

The intimacy at the project level is even more obvious. We like to keep code files of the same type in the same directory, such as page files in the View folder and tools files in the util folder.

alignment

The principle of alignment says: “No element should be placed arbitrarily on the page. Each item should have some visual connection to something on the page.”

Alignment creates visual connections between elements. We’ve been using this principle of indenting code, and indenting allows us to align our code elements at the same level.

So how can we make better use of alignment? I think we can reduce nesting appropriately within the method. Keep the same level of logic as aligned as possible.

Too much nesting makes code alignment less obvious, as in:

if(...). {if(...). {if(...). {if (...) {
            }
            else {
                if(...). {if(...). {}}}}}else {
        if(...). {}}}Copy the code

Obviously, multiple layers of if nesting will make your code illogical, and nesting some of these loops will be even worse. The alignment feature is also missing. It’s hard to find a correlation between the codes.

Methods to reduce nesting.

  1. Use defensive sentences.
  2. Use the switch. (Let’s get our alignment back.)
  3. Break up the code

We can choose different solutions to reduce nesting depending on the situation.

contrast

The basic idea of comparison is to avoid elements on the page being too similar. If the elements (font, color, size, line width, shape, space, etc.) are not the same, make them completely different.

Comparing these two pictures, on the second one we can tell the difference between an old white man and a young black man. If they are different, let them be different.

In code, we can’t have different font sizes in different code. What we can do is make a difference in color and writing.

For colors, all we need is a nice color plugin in the editor that distinguishes the different members of our code.

Here casually cut a page code written by VUE, people are very sensitive to color, through different colors, we can accurately distinguish component name, component attribute, component attribute value, component variable attribute value.

Another way to use contrast is to write variable names.

This is a piece of C# code, which feels typical as an example, describing a method with many variables. I worked out a way to write the various member variables.

  1. Class. An underscore with a hump command.
  2. Class properties. PASCAL nomenclature. noun
  3. Class method. PASCAL nomenclature. Verb/verb + noun.
  4. Local variables. Hump nomenclature.
  5. The name of the class. PASCAL nomenclature. noun

We have rules for various members, so let’s look at our approach. Checkouted and Navigation are Pascan nominations, and they are both verbs and methods. CastPoint is a local variable. _initialPoint is a field for the class. RestPoint is an attribute of the class.

If you are familiar with a certain set of naming conventions, you can compare them and get more information, so that you can quickly get familiar with and understand the code.

repeat

The repetition principle advocates the repetition of visual elements to better organize information and enhance the integrity of the work.

In the first picture above, it is clear that the people in pink and green pants are all the same. This is the power of repetition. Without repetition, the second image is a bit messy.

The application of repetition in code is more, the previous section of C# code, also uses the design principle of repetition, through continuous repetition, to express a certain characteristic is a certain type of member.

Let’s review this code again:

class HomePage extends Component {
    
    onComfirm = () => {}
    
    onCancel = () => {}
    
    
    renderNavbar() {... }renderContent() {... }render() {... }}Copy the code

Render: render: render: render: render: render: render: render: render: render Any way to express the word on by repeating on is a response method. To get a message across.

In projects, I often use words like Page, ViewModel, etc., to end a file name and declare where it is in the frame. It’s also a repetition.

conclusion

That concludes the basic application of the principle of completion to your code. I believe that using design principles can also help us write cleaner code.