GitHub quick start tutorial for designers

Source: Kevin Li

I have heard of GitHub more or less about my work in the Internet industry. In addition to being the largest open-source project hosting platform, many enterprises also use GitHub for collaborative development, of course, we are also one of them. The author initially decided to learn git because some details need to be adjusted after the internal design scheme of the team was initially developed. In order to adjust the number of pixels, the front-end engineers should be asked to leave, in fact, it affects the overall efficiency, so I hope to learn about GitHub and participate in development directly when necessary, so that I can use my own CSS technology to solve the problem more directly and quickly.

However, during this period, I found that there was no git tutorial prepared for the designer on the Internet. Typically, there was almost no tutorial about GitHub's official application, but it was all about command operators, it is a command interface like DOS, which is difficult for designers, product managers, and other non-technical practitioners to get started. Therefore, I intend to combine my personal experience, I am writing a GitHub tutorial focusing on web pages and clients (for the time being, I only use the Mac client as an example). I hope it will help you get familiar with GitHub as quickly as possible and gradually start using GitHub.

Why do you need to know about GitHub?

Before getting started, let's talk about why GitHub is worth learning from designers. In addition to the examples mentioned in the beginning, you can use a little bit of CSS or development skills you know to reduce the communication cost in teamwork. This is essentially a question of whether the designer should learn how much development or learning. However, I always think that there is nothing to explore, but everyone has different choices and pursuits. Just like some people who want to become a furniture designer, some people who really want to polish their ideal chair, and some want to become a architect, some people just want to build a perfect hut for their family at the foot of the hill. Similarly, if you really love this ever-changing industry and want to create something on your own one day, I think you will never hesitate to start learning.

What is GitHub?

By convention, let's first explain what git is. (You can skip it if you have basic knowledge ). Let's discard those professional terms and use the situations that designers often encounter during their work to introduce what is GIT:

• You have come up with solution a of version 1. After discussion, you can change it to solution B and discuss the result again. We think it is better to use solution a. Then we find that solution A has no other storage and we have to change it back! Don't worry about it in GitHub. It will record every version you submit and put it in a repository, and every commit change is a commit, you can roll back to any version at any time.
• In addition, you may also encounter situations derived from the solution. On the basis of Solution A, you can change solution B and solution C, b1, B2, C1, and C2 may also be derived separately. Branches in GitHub can record the differentiation process of this scheme.
• Later, you thought that B1 and C2 both have advantages. After you integrate them, you can output the final draft. Git also supports this branch Merge (merged ).

 

When you use git, the basic concepts involved are just a few, which is not very simple. Let's take a look at the multi-person collaboration, that is, the real strength of git, which is of course not complicated.

• In a slightly larger team, several designers may need to work together to complete a solution. How can we unify the progress? One is that you copy the files together every day, which often wastes time Synchronizing files, obviously, this is inconvenient. The other is that every user has a copy in the computer and synchronizes it with the cloud server when needed. Git adopts such a so-called distributed system. The advantage is that it is safer and more convenient.
• Then the problem arises. If everyone changes the same thing, what if there is a conflict? Don't worry, git will help you compare and tell you where there is a conflict. You can make a choice on the conflicting places one by one. In addition, I didn't talk about how branches can be derived. When we put the content in different branches, we won't interfere with each other.
• Open-source projects are visible to anyone. You can fork a project. This is equivalent to creating a branch from the original project under your account. You can modify the branch on this basis, if you wish to submit the results to the original author, you can send a merge request to the original database (pull request). The original author can see the notification and decide whether to merge the results. In this way, you can work together to make an open-source project better.

 

Finally, we have to clarify the concept. What is the difference between git and GitHub? reference fluyy's explanation: "Git is a version control tool, gitHub is a project hosting platform that uses Git for version control." This is a bit similar to the relationship between WordPress and wordpress.com. The former is a free blog system that can be used by any user, and the latter is a platform, on this platform, you can register to directly use Wordpress to write a blog.

Speaking of this, I think you have a basic understanding of how GitHub works. Let's pull up our sleeves and use a simple case to see how GitHub works.

 

Case study-make it clear again!

Let's take a fork project, make our own changes, and submit the tasks to the original author as the basic case. Let's take a step-by-step look at the steps below, so you can do it in just a few minutes.

Step 1: register a GitHub account and log on

You can download the GitHub official app and log on to it.

Step 2: fork warehouse

Click here to open a library named "Designers-Learn-Git" created in my vest tutorial. You can see the Creator name (my vest) Written in front of/: tower-kevinli. Click the fork button in the upper-right corner.

 

After that, you will find that you have jumped to a new page, with tower-kevinli changed to your GitHub account name (cnkevinlee is my other vest ...), This indicates that you have copied a copy of designer-Learn-Git under your account, and then you can modify it.

 

Step 3: Modify the file

We can see that the warehouse designers-learn-githas only two files named readme.md.pdf (project description and example). Here we only need to modify the latter (the truth is the same as the warehouse with many files modified ). It can be directly modified online, or cloned to the local machine before modification. The latter must be adopted for complicated projects, but here we can first look at how to directly modify the webpage.

Online Modification: Click the name of the album .txt on the page to go to the following details page and click "edit".

 

The task content designed here is to write your ID and tiitle on the roster. The original intention is to interact with the students who are studying this tutorial to see which ones you can rank.

After editing the page, scroll to the bottom of the page and click the green "Commit Changes" button to confirm submission.

 

Local Modification: Another method is to clone the project to the local computer and then modify it. Open the client (the latest Mac version is used as an example), click the "+" sign in the upper right corner, and switch to "clone ", find "Designers-Learn-Git" and click "clone repository" in the lower right corner.

 

Then, find the cloned folder from the folder, open the album .txt, and edit and save the file. Switch to the GitHub application window and you will find that it has detected and listed your changes on the "changes" Page. Then click the commit & Sync button, submit and synchronize the changes to GitHub. Note: Submission and synchronization are two actions. You need to activate the green button before the two actions can be executed simultaneously, otherwise, you need to click sync in the upper-right corner of the interface after submission (applicable to the case where multiple modifications are submitted in a unified manner ).

 

Step 4: Apply for merger

After you confirm that you have successfully modified the warehouse fork, you can submit a merge application, apply to merge your version into the initial project, that is, the designers-Learn-git I created. The steps are as follows:

Open the fork designers-Learn-Git page on the webpage and click this striking green button

 

Click the "Create pull request" button to submit the application. After the application is completed, I will receive a notification and merge the content you added into the original database.

 

Note that the red circle shows the two branches to be merged. Because no new branch is created, the only master branch of both databases is displayed by default. You can try to create a new branch, select another branch to apply for merging and experience the GitHub branch function. This article will not go into details here as an introductory tutorial. If you have any questions, contact me.

 

Picture comparison function, designer's true love!

After completing the previous case, you will find that GitHub can directly compare the changes between files, but it is only valid for programs and text files, but our designers rely on pictures to eat! Well, don't worry. GitHub has been trying to improve the experience of designers and has achieved good image comparison functions. Of course, it is unrealistic to directly upload huge PSD source files, but we can compare the exported version. Click here to see the demo.

 

GitHub's image comparison tool provides three comparison methods to help you find different ones. Let's take a look:

2-up: Is directly placed together with the comparison, will display the size:

 

Swipe: Two graphs are stacked together. By dragging, you can change the display size of the above graph. You can quickly find the difference by staring at the changes near the drag line ,, when dragged to the vicinity of the Cat's Eye, it is easy to see a pair of glasses.

 

Onion Skin: It is also to stack two images in one, there is a drag bar below the figure, control the transparency of the above picture, so that when the drag changes the transparency, you can feel the difference.

 

GitHub usage expansion-more than that can be done!

Version Management, collaborative development, and design are only the most basic functions of GitHub. In fact, using the Git system can implement many other things.

Collaborative translation with GitHub

Apple released the swift language, which is known to be easier to use and has made many designers eager to try. At the same time, the official manual (translated into Chinese) is released for more than 300 pages, and a self-organized team in China, it takes more than 30 people nine days to complete the translation and proofreading work. Each of them has his/her own business, including going to work, going online, and starting a business, however, with GitHub, they completed this feat in their spare time. Their slogan is "this time, let China synchronize with the world"

 

Click here to see their projects and Translation results.

Write a book on GitHub

Speaking of the previous example, you have to mention gitbook, a tool that combines GitHub and markdown to create exquisite online books. You can work with yourself or anyone to compile an online book and sell it as a writer.

 

Use GitHub for project management

GitHub was originally developed for development management, and of course it has the potential of project management, especially in projects closely related to development. These articles describe how to use GitHub to manage projects with other tools: Using GitHub for project management and using GitHub for team collaboration. Of course, GitHub focuses on development management, and general project management is suitable for using products such as tower in our house :)

Use GitHub to build blogs and personal websites

An online personal page and independent blog are essential to almost every designer. In the past, it was time and money-consuming to rent a space, install website programs, and build a personal website. GitHub itself provides free hosting services and intimate pages functions, allowing you to bind your own domain name to make it all happen. Free, efficient, and unlimited traffic. There are more than enough individual pages, such as the example that we saw two days ago: jianglai. Me. But in fact, many engineers have already built their own blogs on GitHub, and designers will follow up quickly.

Some related tutorials are recommended:

• Create a personal site through GitHub pages (detailed steps)
• How to build an independent blog-simple GitHub pages and hexo tutorial
• Building a free and unlimited blog-getting started with GitHub pages and Jekyll

More advanced tutorial recommendations

As this article is just an introductory tutorial, we will not detail more details. If you are interested in git, you can refer to the following, they can help you become an expert, at least a git expert among the designers :)

• Git-Concise Guide
• Pro git
• Git magic
• An online interaction tutorial to learn about git
• Zhihu's question about GitHub learning materials

Of course, this may not be the best GitHub getting started tutorial, but it must be the most suitable for designers. I hope it will help you get started quickly to understand the things that the programmers talk about all day. If there are any inconveniences in this article, please point out that you are welcome to contact me @ Cai Cheng-Kevin for further discussion.

Of course, GitHub is only a small branch of the technology world. The root cause of the problem is that designers learn technology. If you are a designer who is not satisfied with drawing tools and wants to be a geek designer, welcome to join group 302258924 for discussion.