Skip to content

Commit ffb0441

Browse files
phodalphodal
committed
add introduction
1 parent 03fa60c commit ffb0441

11 files changed

+307
-65
lines changed

‎chapters/00-prelude.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@
66

77
在这里，我会试着将我在Github上学到的东西一一分享出来。
88

9-
#为什么你应该深入Github
9+
##我与Github的故事
1010

1111
在我大四找工作的时候，试图去寻找一份硬件、物联网相关的工作(ps: 专业是电子信息工程)。尽管简历上写得满满的各种经历、经验，然而并没有卵用。跑了几场校园招聘会后，十份简历(ps: 事先已经有心里准备)一个也没有投出去——因为学校直接被拒。我对霸面什么的一点兴趣都没有，千里马需要伯乐。后来，我加入了Martin Flower所在的公司，当然这是后话了。
1212

1313
这是一个残酷的世界，在学生时代，如果你长得不帅不高的话，那么多数的附加技能都是白搭(ps: 通常富的是看不到这篇文章的)。在工作时期，如果你上家没有名气，那么将会影响你下一份工作的待遇。而，很多东西却会改变这些，Github就是其中一个。
1414

15-
##我与Github的故事
16-
1715
注册Github的时候大概是大二的时候，我熟悉的时候已经是大四了，现在已经毕业一年了。在过去的近两年里，我试着以几个维度在Github上创建项目:
1816

1917
1. 快速上手框架来实战，即demo

‎chapters/01-introduction.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ jQuery[^jQuery]在发布版本``2.1.3``，一共有152个commit。我们可以
4646

4747
##用好Github
4848

49+
如何用好Github,并实践一些敏捷软件开发是一个很有意思的事情.我们可以在上面做很多事情,从测试到CI,再到自动部署.
50+
4951
###敏捷软件开发
5052

5153
显然我是在扯淡，这和敏捷软件开发没有什么关系。不过我也不知道瀑布流是怎样的。说说我所知道的一个项目的组成吧:

‎chapters/02-github-fundamentals.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,17 @@ $ git add .
4545

4646
或者只是添加某个文件：
4747

48-
##Github
48+
###Github
49+
50+
接着,我们试试在上面创建一个项目:
4951

5052
![Github Roam](./img/github-roam-create.jpg)
5153

54+
就会有下面的提醒:
55+
5256
![Github Roam](./img/project-init.jpg)
5357

54-
多种方式
58+
它提供多种方式的创建方法:
5559

5660
> …or create a new repository on the command line
5761
@@ -70,4 +74,5 @@ git push -u origin master
7074
git remote add origin git@github.com:phodal/github-roam.git
7175
git push -u origin master
7276
```
73-
77+
78+
如果你完成了上面的步骤之后,那么我想你想知道你需要怎样的项目.

‎chapters/04-create-your-project.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
#创建你的项目
1+
#创建你的项目
2+
3+
问题来了,我们在上面需要怎样的项目?
4+
5+
**只要是代码相关的,那应该就是可以的**

‎chapters/05-create-pull-request.md

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
#创建Pull Request
22

3+
除了创建项目之外，我们也可以创建Pull Request来做贡献。
34

4-
##第一个
5+
##第一个PR
6+
7+
我的第一个PR是给一个小的Node的CoAP相关的库的Pull Request。原因比较简单，是因为它的README.md写错了，导致我无法办法进行下一步。
58

69
const dgram = require('dgram')
710
- , coapPacket = require('coap-packet')
811
+ , package = require('coap-packet')
912

10-
##Google Ngx Pagespeed
11-
12-
CLA: Contributor License Agreement
13-
14-
![Google CLA](./img/google-cla.png)
15-
16-
![Eclipse CLA](./img/eclipse-cla.png)
13+
很简单，却又很有用的步骤，另外一个也是：
1714

1815
```
1916
else
@@ -24,4 +21,18 @@ CLA: Contributor License Agreement
2421
END
2522
exit 1
2623
fi
27-
```
24+
```
25+
26+
##CLA
27+
28+
CLA即Contributor License Agreement，在为一些大的组织、机构提交Pull Request的时候，可能需要签署这个协议。他们会在你的Pull Request里问你，只有你到他们的网站去注册并同意协议才会接受你的PR。
29+
30+
以下是我为Google提交的一个PR
31+
32+
![Google CLA](./img/google-cla.png)
33+
34+
以及Eclipse的一个PR
35+
36+
![Eclipse CLA](./img/eclipse-cla.png)
37+
38+
他们都要求我签署CLA。

‎chapters/07-create-project-documents.md

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,70 @@
1-
#创建项目文档
1+
#创建项目文档
2+
3+
我们需要为我们的项目创建一个文档，通常我们可以将核心代码以外的东西都称为文档：
4+
5+
1. README
6+
2. 文档
7+
3. 示例
8+
4. 测试
9+
10+
通常这个会在项目的最上方会有一个项目的简介，如下图所示：
11+
12+
![Github Project Introduction](./img/github-intro.png)
13+
14+
##README
15+
16+
README通常会显示在Github项目的下面，如下图所示：
17+
18+
![Github README](./img/readme-example.png)
19+
20+
通常一个好的README会让你立马对项目产生兴趣。
21+
22+
如下面的内容是React项目的简介：
23+
24+
![React README](./img/react-intro.png)
25+
26+
下面的内容写清楚了他们的用途：
27+
28+
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
29+
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
30+
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
31+
32+
通常在这个README里，还会有：
33+
34+
* 针对人群
35+
* 安装指南
36+
* 示例
37+
* 运行的平台
38+
* 如何参与贡献
39+
* 协议
40+
41+
##在线文档
42+
43+
很多开源项目都会有自己的网站，并在上面有一个文档，而有的则会放在[https://readthedocs.org/](https://readthedocs.org/)。
44+
45+
> Read the Docs 托管文档，让文档可以被全文搜索和更易查找。您可以导入您使用任何常用的版本控制系统管理的文档，包括 Mercurial、Git、Subversion 和 Bazaar。 我们支持 webhooks，因此可以在您提交代码时自动构建文档。并且同样也支持版本功能，因此您可以构建来自您代码仓库中某个标签或分支的文档。查看完整的功能列表 。
46+
47+
在一个开源项目中，良好和专业的文档是相当重要的，有时他可能会比软件还会重要。因为如果一个开源项目好用的话，多数人可能不会去查看软件的代码。这就意味着，多数时候他在和你的文档打交道。文档一般会有：API 文档、 配置文档、帮助文档、用户手册、教程等等
48+
49+
写文档的软件有很多，如Markdown、Doxygen、Docbook等等。
50+
51+
##可用示例
52+
53+
一个简单上手的示例非常重要，特别是通常我们是在为着某个目的而去使用一个开源项目的是时候，我们希望能马上使用到我们的项目中。
54+
55+
你希望看到的是，你打开浏览器，输入下面的代码，然后**It Works**:
56+
57+
```
58+
var HelloMessage = React.createClass({
59+
render: function() {
60+
return <div>Hello {this.props.name}</div>;
61+
}
62+
});
63+
64+
React.render(
65+
<HelloMessage name="John" />,
66+
document.getElementById('container')
67+
);
68+
```
69+
70+
而不是需要繁琐的步骤才能进行下一步。

‎github-roam.md

Lines changed: 103 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@
77

88
在这里，我会试着将我在Github上学到的东西一一分享出来。
99

10-
#为什么你应该深入Github
10+
##我与Github的故事
1111

1212
在我大四找工作的时候，试图去寻找一份硬件、物联网相关的工作(ps: 专业是电子信息工程)。尽管简历上写得满满的各种经历、经验，然而并没有卵用。跑了几场校园招聘会后，十份简历(ps: 事先已经有心里准备)一个也没有投出去——因为学校直接被拒。我对霸面什么的一点兴趣都没有，千里马需要伯乐。后来，我加入了Martin Flower所在的公司，当然这是后话了。
1313

1414
这是一个残酷的世界，在学生时代，如果你长得不帅不高的话，那么多数的附加技能都是白搭(ps: 通常富的是看不到这篇文章的)。在工作时期，如果你上家没有名气，那么将会影响你下一份工作的待遇。而，很多东西却会改变这些，Github就是其中一个。
1515

16-
##我与Github的故事
17-
1816
注册Github的时候大概是大二的时候，我熟悉的时候已经是大四了，现在已经毕业一年了。在过去的近两年里，我试着以几个维度在Github上创建项目:
1917

2018
1. 快速上手框架来实战，即demo
@@ -79,7 +77,7 @@
7977

8078
#介绍
8179

82-
###什么是Github
80+
##Github
8381

8482
Wiki百科上是这么说的
8583

@@ -125,6 +123,8 @@ jQuery[^jQuery]在发布版本``2.1.3``，一共有152个commit。我们可以
125123

126124
##用好Github
127125

126+
如何用好Github,并实践一些敏捷软件开发是一个很有意思的事情.我们可以在上面做很多事情,从测试到CI,再到自动部署.
127+
128128
###敏捷软件开发
129129

130130
显然我是在扯淡，这和敏捷软件开发没有什么关系。不过我也不知道瀑布流是怎样的。说说我所知道的一个项目的组成吧:
@@ -329,13 +329,17 @@ $ git add .
329329

330330
或者只是添加某个文件：
331331

332-
##Github
332+
###Github
333+
334+
接着,我们试试在上面创建一个项目:
333335

334336
![Github Roam](./img/github-roam-create.jpg)
335337

338+
就会有下面的提醒:
339+
336340
![Github Roam](./img/project-init.jpg)
337341

338-
多种方式
342+
它提供多种方式的创建方法:
339343

340344
> …or create a new repository on the command line
341345
@@ -355,6 +359,7 @@ git remote add origin git@github.com:phodal/github-roam.git
355359
git push -u origin master
356360
```
357361

362+
如果你完成了上面的步骤之后,那么我想你想知道你需要怎样的项目.
358363

359364
#Github流行项目分析
360365

@@ -398,22 +403,23 @@ C | 2
398403

399404
#创建你的项目
400405

406+
问题来了,我们在上面需要怎样的项目?
407+
408+
**只要是代码相关的,那应该就是可以的**
409+
401410
#创建Pull Request
402411

412+
除了创建项目之外，我们也可以创建Pull Request来做贡献。
403413

404-
##第一个
414+
##第一个PR
415+
416+
我的第一个PR是给一个小的Node的CoAP相关的库的Pull Request。原因比较简单，是因为它的README.md写错了，导致我无法办法进行下一步。
405417

406418
const dgram = require('dgram')
407419
- , coapPacket = require('coap-packet')
408420
+ , package = require('coap-packet')
409421

410-
##Google Ngx Pagespeed
411-
412-
CLA: Contributor License Agreement
413-
414-
![Google CLA](./img/google-cla.png)
415-
416-
![Eclipse CLA](./img/eclipse-cla.png)
422+
很简单，却又很有用的步骤，另外一个也是：
417423

418424
```
419425
else
@@ -426,6 +432,20 @@ CLA: Contributor License Agreement
426432
fi
427433
```
428434

435+
##CLA
436+
437+
CLA即Contributor License Agreement，在为一些大的组织、机构提交Pull Request的时候，可能需要签署这个协议。他们会在你的Pull Request里问你，只有你到他们的网站去注册并同意协议才会接受你的PR。
438+
439+
以下是我为Google提交的一个PR
440+
441+
![Google CLA](./img/google-cla.png)
442+
443+
以及Eclipse的一个PR
444+
445+
![Eclipse CLA](./img/eclipse-cla.png)
446+
447+
他们都要求我签署CLA。
448+
429449
#构建Github项目
430450

431451
##从模块分离到测试
@@ -815,6 +835,75 @@ SQLiteHelper.prototype.getData = function (url, callback) {
815835
816836
#创建项目文档
817837
838+
我们需要为我们的项目创建一个文档，通常我们可以将核心代码以外的东西都称为文档：
839+
840+
1. README
841+
2. 文档
842+
3. 示例
843+
4. 测试
844+
845+
通常这个会在项目的最上方会有一个项目的简介，如下图所示：
846+
847+
![Github Project Introduction](./img/github-intro.png)
848+
849+
##README
850+
851+
README通常会显示在Github项目的下面，如下图所示：
852+
853+
![Github README](./img/readme-example.png)
854+
855+
通常一个好的README会让你立马对项目产生兴趣。
856+
857+
如下面的内容是React项目的简介：
858+
859+
![React README](./img/react-intro.png)
860+
861+
下面的内容写清楚了他们的用途：
862+
863+
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
864+
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
865+
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
866+
867+
通常在这个README里，还会有：
868+
869+
* 针对人群
870+
* 安装指南
871+
* 示例
872+
* 运行的平台
873+
* 如何参与贡献
874+
* 协议
875+
876+
##在线文档
877+
878+
很多开源项目都会有自己的网站，并在上面有一个文档，而有的则会放在[https://readthedocs.org/](https://readthedocs.org/)。
879+
880+
> Read the Docs 托管文档，让文档可以被全文搜索和更易查找。您可以导入您使用任何常用的版本控制系统管理的文档，包括 Mercurial、Git、Subversion 和 Bazaar。 我们支持 webhooks，因此可以在您提交代码时自动构建文档。并且同样也支持版本功能，因此您可以构建来自您代码仓库中某个标签或分支的文档。查看完整的功能列表 。
881+
882+
在一个开源项目中，良好和专业的文档是相当重要的，有时他可能会比软件还会重要。因为如果一个开源项目好用的话，多数人可能不会去查看软件的代码。这就意味着，多数时候他在和你的文档打交道。文档一般会有：API 文档、 配置文档、帮助文档、用户手册、教程等等
883+
884+
写文档的软件有很多，如Markdown、Doxygen、Docbook等等。
885+
886+
##可用示例
887+
888+
一个简单上手的示例非常重要，特别是通常我们是在为着某个目的而去使用一个开源项目的是时候，我们希望能马上使用到我们的项目中。
889+
890+
你希望看到的是，你打开浏览器，输入下面的代码，然后**It Works**:
891+
892+
```
893+
var HelloMessage = React.createClass({
894+
render: function() {
895+
return <div>Hello {this.props.name}</div>;
896+
}
897+
});
898+
899+
React.render(
900+
<HelloMessage name="John" />,
901+
document.getElementById('container')
902+
);
903+
```
904+
905+
而不是需要繁琐的步骤才能进行下一步。
906+
818907
#测试
819908
820909
##一次测试驱动开发
@@ -1061,8 +1150,6 @@ req.end();
10611150
10621151
艺，需要有创造性的方法。
10631152
1064-
#[前端技能训练: 重构一](http://www.phodal.com/blog/frontend-improve-refactor-javascript-code/)
1065-
10661153
##为什么重构?
10671154
10681155
> 为了更好的代码。
@@ -1121,8 +1208,6 @@ regexobject: {
11211208

11221209
接着，我们就可以对其进行简单的重构。
11231210

1124-
###重构
1125-
11261211
(ps: 推荐用WebStrom来做重构，自带重构功能)
11271212

11281213
作为一个示例，我们先提出codeHandler方法，即将上面的

‎img/github-intro.png

87.9 KB
Loading

‎img/react-intro.png

206 KB
Loading

‎img/readme-example.png

234 KB
Loading

0 commit comments

Comments
 (0)