How to quickly become an Ant Design contributor

Hi, I’m Rustin. Today I would like to introduce to you how to quickly become a contributor to ANTD. I hope it will be helpful to students who want to contribute to the ANTD community!

This blog is publicly posted on GitHub. If you have any questions or questions, please open an issue here.

Introduction to the

In fact, ANTD hardly needs any introduction, everyone knows that it is a hot UI design framework in China and even the world. Their slogan is: enterprise-level product design system to create efficient and pleasant work experience.

I have a deep affection for this framework. It has accompanied me for three years since I came into contact with it in my sophomore year. I have used it to happily complete countless assignments and tasks in school and internship. Last year during the graduation project, I finally made my first contribution to it.

Recently, I continued to contribute to antD, so I got the idea to write an article about how to contribute to ANTD. Without further ado, I will familiarize you with the simple process of contributing to the ANTD community by using an example I helped fix a Bug for ANTD two days ago.

Familiarize yourself with the PR process and read the contribution guide

Before I go through my examples, I thought if you’re just trying to start contributing to the Github community, you’d be advised to read the Github documentation.

The official documentation covers some basic but important PR rules. Once you’re familiar with how to create a PR on Github, you should also find the contribution guide in ANTD’s README, which is an important entry point for every open source project. You’ll basically find all the links related to the library in the README.

For ANTD, they put their contribution guide on their official website, both in Chinese and English. You can read the contribution guide carefully to suit your situation. I think the main message we can take from the contribution guide at this point is:

• Rule of development

  • The main thing I think about development guidelines is to be respectful and courteous, both to contributors and to community collaborators.
  • One key point is to use “please, could, thanks” when communicating with the community. This applies to any community.

• Branch management

  • This is an important point, as each project may have its own development and release process. In ANTD we should note that PR is sent to the Master branch to fix bugs and to the Feature branch to add new features.

• Submitting Bug Reports

  • Submitting Bug reports in the open source community is an important part of open source, so don’t think PR is a contribution, anything that makes the codebase better is a contribution.
  • It should be noted that when we submit an issue report to ANTD, we cannot directly go to the issue location of the warehouse to open a report. We need to submit questions on antD’s Issue assistant. Why do we need to do this? Large open source projects may receive hundreds or thousands of issues, but the styles of these issues can be very confusing to community collaborators, and users and the community can suffer from each other.
  • For tips on How To create a good Bug report, check out these two articles: How-to-ask-questions-the-smart-way and How To report bugs effectively.

Basically, once we have these elements, we can start to try and make some simple contributions to the community. Here’s an example of the next PR merge process.

Pick a problem and start challenging it

Our PR is usually to fix a Bug or add a new feature. When we First start working on an open source project, we can start with Good First Issue. Most open source projects label simple problems with Good First Issue. Antd has such marked problems, but in general active communities such problems are quite popular, and it may be that the problems were picked up by others after they were issued, but in addition to these problems, there are another kind of problems in ANTD that I think are moderate in difficulty and can be used as some introductory problems to try.

In antD issues, there is a kind of problem marked by the Help Wanted tag. Most of these problems are some user requirements or simple bugs. We can start with these problems.

By the time I saw the problem, the reporter had done some research and it seemed to be the referer HTTP header. In the open source community, if you want to fix the problem, you can either comment below that you’ve tried to fix the problem or ask @community collaborators if you can try to fix the problem. Since I didn’t see other people’s messages, I started some attempts to fix the problem.

Try a fix and submit PR

First of all, I haven’t used CodesandBox on my website or my company’s website, so integrating CodesandBox was new to me. However, it seems that the speaker has done research, so can I follow the way of the questioner to solve the problem?

If you look at referer’s criteria, you’ll see that it has a legacy. Referer is actually a misspelling of “referrer”. After reading, I also saw ruan Yifeng teacher’s blog, but in fact there is a little mistake in the article, I have left a message, may ruan Yifeng teacher has not had time to read.

I will not repeat the relevant information about referer. You can check the linked article above.
It means that we do not carry the referrer information for any request. I tested it locally and found it worked.

I submitted the code because I thought that maybe this feature would not make a difference to ANTD in and of itself. To submit PR in ANTD, you also need to follow a PR submission template, which is in the.github directory. This template is also available in Chinese, so I will not describe the content, because I think it is relatively clear. My PR is to fix bugs, so based on what we learned from the contribution guide, we should create a PR to Master branch and fill out the PR information:

At this point, it looks like you’re done, waiting for the PR to be merged (I used Github’s PR and issue function “Fixes #22636” in my PR info to see how it works).

After receiving the suggestion, modify it again

Generally, after submitting PR, we will probably receive code review from community collaborators. In ANTD, 🤖 will help you assign reviewer. My PR was reviewed by AFC163 and received the following comments:

After talking to AFC163, we decided that we needed to do special treatment only for codesandbox, so I started a new attempt.

First of all, from the perspective of ideas, we can only use special labels to deal with this situation if we want to do this special processing at present. Specifically, we can refer to this document for labels that support setting the referer separately. I also checked the official documentation of CodesandBox and found that they provide a definition interface that supports not only POST requests but also GET requests:

I could use the tag to send a GET request. I immediately modified the code to send a GET request and set the referer rule:

<form>
    <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
       {/* FIXME: This temporarily solution to fix issues/22636, we need revert it to use form after the codesandbox api issue fixed. */}
            <a
              aria-label="Create New Sandbox with Prefilled Data"// {/* See this attribute for detailshttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA* /}rel="noopener noreferrer"// {/* Set to noreferrerInformation * /}target="_blank"
              href={`https://codesandbox.io/api/v1/sandboxes/define?parameters=${compress(
              JSON.stringify(codesanboxPrefillConfig} '} {/* Generate parameters */}className="code-box-codesandbox"
              onClick={()= > this.track({ type: 'codesandbox', demo: meta.id })}
             />
    </Tooltip>
</form>
Copy the code

I submitted this code and successfully passed the REVIEW of AFC163. Then the code can be integrated into the master branch smoothly, and Github will be automatically closed for our related problems.

But does that really solve the problem? But I have not been able to find the problem to this stage, why like the problem said in these days suddenly the problem?

Check the problem and keep following it

What I’m curious about is why does this thing suddenly go wrong? Then I went through the submission record of the master branch and found that there was no recent submission modification record related to it, so I went to the official document of codesandbox and looked again and found their official demo. I found that their demo also needed to be redirected, so I don’t think it was the antD modification that caused the problem. Then I found their Open source repository for Codesand Box-Client on the official website.

If we find the warehouse that the three parties depend on, we can submit an issue and ask them to help us check it. In addition, we can also check whether others have this problem. Therefore, I created this issue to continue tracking this problem.

Finally, three days later, I heard back from the community, and we found out that other people had similar problems with ANTD. The community’s collaborators quickly fixed the problem. They explained that this was due to a recent cross-domain change to their backend, but did not elaborate on the details, and quickly resolved the issue.

Roll back the code and fix the problem

When the problem of Codesandbox was fixed, I also initiated a PR again to roll back my code according to the above procedure. As I could see that I added a FIXME to the above code, my modification was only a temporary solution, because my modification would be inconsistent with the link mode of several other three parties. So I rolled back the code in this PR.

So far, we have solved this problem in a real sense, and we have completed a process of contributing to ANTD. I hope this entry will help you try to contribute to the ANTD community!

In addition, I also opened a pit related to skeleton screen in ANTD, welcome everyone to antD to fill the pit together!

Refer to the link

antd contributing guide

rust contributing guide

github docs

The article links

Originally posted on: Rustin’s blog

Synchronous update:

zhihu

Jane’s book

The Denver nuggets