Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit db9f0e3

Browse files
sethvincentsethvincent
committed
more chapter refactoring
1 parent fdd4624 commit db9f0e3

File tree

10 files changed

+1056
-1049
lines changed

10 files changed

+1056
-1049
lines changed

‎chapters/14-intro-git-github.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Introduction to git & GitHub
2+
3+
Developing websites and applications without using git is equivalent to writing in Microsoft Word without ever saving your work.
4+
5+
**Use git.**
6+
7+
Git is a version control system, which means it can track every change you make to your code. This allows you to review and edit past versions if you mess something up. And it allows you to figure out when errors were introduced to the code.
8+
9+
There are many other bonuses to using git, which are mostly out of this book's scope.
10+
11+
The best way to start learning git (and GitHub) is to visit [try.github.com](http://try.github.com). You should also try [githug, a game for learning git](https://github.com/Gazler/githug).
12+
13+
## Here are some basics of using git:
14+
15+
Create a git repository:
16+
17+
~~~~~~~~
18+
cd name-of-folder
19+
git init
20+
~~~~~~~~
21+
22+
Add files:
23+
24+
~~~~~~~~
25+
git add name-of-file
26+
27+
// or add all files in directory:
28+
29+
git add .
30+
~~~~~~~~
31+
32+
When you add files to a git repository they are "staged" and ready to be committed.
33+
34+
Remove files:
35+
~~~~~~~~
36+
git rm name-of-file
37+
38+
// force removal of files:
39+
40+
git rm -rf name-of-file-or-directory
41+
~~~~~~~~
42+
43+
Commit files and add a message using the `-m` option:
44+
45+
~~~~~~~~
46+
git commit -m 'a message describing the commit'
47+
~~~~~~~~
48+
49+
Create a branch:
50+
51+
~~~~~~~~
52+
git branch name-of-branch
53+
~~~~~~~~
54+
55+
Checkout a branch:
56+
57+
~~~~~~~~
58+
git checkout name-of-branch
59+
~~~~~~~~
60+
61+
Shortcut for creating a new branch and checking it out:
62+
63+
~~~~~~~~
64+
git checkout -b name-of-branch
65+
~~~~~~~~
66+
67+
Merge a branch into the master branch:
68+
69+
~~~~~~~~
70+
git checkout master
71+
git merge name-of-branch
72+
~~~~~~~~
73+
74+
Add a remote repository:
75+
76+
~~~~~~~~
77+
git remote add origin [email protected]:yourname/projectname.git
78+
~~~~~~~~
79+
80+
List associated repositories:
81+
82+
~~~~~~~~
83+
git remote -v
84+
~~~~~~~~
85+
86+
Pull changes from a remote repository:
87+
88+
~~~~~~~~
89+
git pull origin master
90+
~~~~~~~~
91+
92+
Push changes to a remote repository
93+
94+
~~~~~~~~
95+
git push origin master
96+
~~~~~~~~
97+
98+
Checkout a remote branch:
99+
100+
~~~~~~~~
101+
git checkout -t origin/haml
102+
~~~~~~~~
103+
104+
## Get on GitHub
105+
If you haven't already, create an account at [github.com](http://github.com).
106+
107+
GitHub is a great place to host your code. Many employers hiring for developer and designer positions will ask for a GitHub profile, and they'll use your GitHub activity as part of the criteria in their decision-making process.
108+
109+
In fact, if you're looking to get a job with a particular company, try to find _their_ GitHub profile and start contributing to their open source projects. This will help you stand out, and they'll already know your technical abilities based on your open source contributions. That's a big win.
110+
111+
GitHub has become the de facto code hosting service for most open source communities.
112+
113+
### With GitHub Pages you can:
114+
- design a website any way you want by having complete control over the html, css, and javascript.
115+
- use simple templates for getting started using GitHub Pages.
116+
- create sites for yourself and all of your projects hosted on GitHub.
117+
- use a custom domain name if you want!
118+
119+
Visit the [help section for GitHub Pages](https://help.github.com/categories/20/articles) to learn more details about hosting sites on GitHub.
120+
121+
122+
## Create a site for yourself using GitHub
123+
124+
GitHub has a useful service called [GitHub Pages](http://pages.github.com) that allows you to host a simple site on their servers for free.
125+
126+
To get started, fork this simple template: [github.com/maxogden/gh-pages-template](https://github.com/maxogden/gh-pages-template).
127+
128+
Visit that github project, make sure you're logged in, and click Fork in the upper right side of the screen.
129+
130+
Fork gh-pages-template to your personal account.
131+
132+
Rename the repository from gh-pages-template to whatever you want by clicking on Settings on the right side of your fork of the repository, and changing the name there. GitHub will warn
133+
134+
That's it! You now have a website hosted through GitHub Pages.
135+
136+
You'll be able to visit your site at __YOUR-USERNAME__.github.com/__YOUR-PROJECT-NAME__.
137+
138+
You'll want to edit the content though, right? Add your cat pictures or resume or pizza recipes? You can do that.
139+
140+
You can create, edit, move, rename, and delete files all through the GitHub website. Check out these blog posts on GitHub for details on how to do those things:
141+
- [Create files](https://github.com/blog/1327-creating-files-on-github)
142+
- [Edit files](https://github.com/blog/143-inline-file-editing)
143+
- [Move and rename files](https://github.com/blog/1436-moving-and-renaming-files-on-github)
144+
- [Delete files](https://github.com/blog/1545-deleting-files-on-github)
145+
146+
You can also clone the project repository onto your computer:
147+
148+
~~~~~~~~
149+
git clone [email protected]:__YOUR-USERNAME__/__YOUR-PROJECT-NAME__.git
150+
~~~~~~~~
151+
152+
You can copy the git url to clone from the right-hand sidebar of your project repository.
153+
154+
After cloning the repository, `cd` into it and make some changes:
155+
156+
~~~~~~~~
157+
cd __YOUR-PROJECT-NAME__
158+
nano index.html
159+
~~~~~~~~
160+
161+
Add a bunch of content to index.html, and change the styles in style.css.
162+
163+
After you've made some changes, add them to the repo and commit the changes:
164+
165+
~~~~~~~~
166+
git add .
167+
git commit -m 'include a brief, clear message about the changes'
168+
~~~~~~~~
169+
170+
Now, push your changes back to GitHub:
171+
172+
~~~~~~~~
173+
git push origin gh-pages
174+
~~~~~~~~

‎chapters/15-intro-grunt.md‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
# Introduction to grunt.js
2+
3+
Grunt is a tool for managing the javascript, css, and html files of your web project. Grunt is a task manager similar to Ruby's `rake`. You can run any arbitrary tasks you want, and there are a number of grunt plugins that make it easy to set up common tasks. Grunt is useful for running tests or for build steps, including turning sass, stylus, or less files into css, concatenating files, or creating .zip or .tar.gz packages of your project.
4+
5+
### Outline of the steps in this tutorial:
6+
7+
- Install node.
8+
- Install grunt-cli.
9+
- Setup project.
10+
- Set up package.json.
11+
- Create Gruntfile.js.
12+
- Run grunt tasks.
13+
- Make an awesome project.
14+
15+
### Install node:
16+
17+
You should already have Node.js installed from chapter 4, "In-depth with Node.js". If not, backtrack to that chapter for a guide to installing Node.
18+
19+
### Install grunt-cli
20+
21+
Installing node gives us the node package manager `npm`. We'll use it to install grunt-cli, which is the command-line tool that is used to run grunt tasks.
22+
23+
**Run this in your terminal after installing node.js:**
24+
25+
~~~~~~~~
26+
npm intall -g grunt-cli
27+
~~~~~~~~
28+
29+
This installs the grunt command-line tool globally on your machine. Now you can run the `grunt `command!
30+
31+
And, it won't do anything.
32+
33+
Bummer. **But it will give you a message like this**:
34+
35+
~~~~~~~~
36+
grunt-cli: The grunt command line interface. (v0.1.6)
37+
Fatal error: Unable to find local grunt.
38+
If you're seeing this message, either a Gruntfile wasn't found or grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide: [http://gruntjs.com/getting-started](http://gruntjs.com/getting-started)
39+
~~~~~~~~
40+
41+
The grunt command looks for a locally installed version of grunt, which you can include in your project as a development dependency in a package.json file.
42+
43+
### Hey, package.json files are cool.
44+
45+
You can use a package.json file for a lot of useful purposes. Primarily, it's used to list your project's dependencies on npm packages, as well as list the name, description, version, and source repository of the project. You can specify the type of license, version of node the project requires, the project's contributors, and more. Check out [this interactive package.json cheatsheet][http://package.json.nodejitsu.com/] for a nice rundown on the basics.
46+
47+
So, our package.json will specify some development dependencies.
48+
49+
**Some basic requirements:**
50+
51+
- We'll test the javascript with qunit.
52+
- We'll write scss and compile it to css, then minify the css.
53+
- We'll concatenate and uglify our javascript files.
54+
- We'll use the `grunt watch` command to automatically run grunt tasks when files are edited.
55+
- We'll want a little http server to check out our game as we're developing it.
56+
57+
Some of the above requirements could be perceived as excessive, but they help make this a meaty and useful tutorial, so deal with it.
58+
59+
**So, we'll need to use some grunt plugins. We'll use these ones:**
60+
61+
- [grunt-contrib-qunit][https://github.com/gruntjs/grunt-contrib-qunit]
62+
- [grunt-contrib-jshint][https://github.com/gruntjs/grunt-contrib-jshint]
63+
- [grunt-contrib-connect][https://github.com/gruntjs/grunt-contrib-connect]
64+
- [grunt-contrib-watch][https://github.com/gruntjs/grunt-contrib-watch]
65+
66+
67+
**That means our package.json file will look like this:**
68+
69+
~~~~~~~~
70+
{
71+
"name": "your-project-name",
72+
"version": "0.0.1",
73+
"author": "Super Big Tree <[email protected]>",
74+
"description": "A silly game.",
75+
"repository": {
76+
"type": "git",
77+
"url": "https://github.com/your-profile/your-project-name.git"
78+
},
79+
"devDependencies": {
80+
"grunt": "~0.4.0",
81+
"grunt-contrib-qunit": "~0.2.0",
82+
"grunt-contrib-jshint": "~0.1.1",
83+
"grunt-contrib-connect": "~0.1.2",
84+
"grunt-contrib-watch": "~0.4.4"
85+
},
86+
"license": "MIT",
87+
"engines": {
88+
"node": ">=0.8"
89+
}
90+
}
91+
~~~~~~~~
92+
93+
**Go to your terminal. Create a folder that you want to serve as the project's folder:**
94+
95+
~~~~~~~~
96+
cd wherever/you/want/the/project/to/live
97+
mkdir your-project-name
98+
cd your-project-name
99+
~~~~~~~~
100+
101+
Now, create your package.json file:
102+
103+
~~~~~~~~
104+
touch package.json
105+
~~~~~~~~
106+
107+
Copy and paste the above package.json example into your package.json file using your favorite text editor. Save the file. **Now, you can run
108+
this:**
109+
110+
~~~~~~~~
111+
npm install
112+
~~~~~~~~
113+
114+
to install all the dependencies.
115+
116+
If you run the command and get an error like this at the end, then something is not ok:
117+
118+
~~~~~~~~
119+
npm ERR! not ok code 0
120+
~~~~~~~~
121+
122+
There's an error of some kind that will need to be worked out. For me, typically the problem is that I messed up the syntax or put the wrong version number for a dependency, so check things like that first.
123+
124+
### Project setup:
125+
126+
Let's make all our files and folders now!
127+
128+
**This will make all the folders we want:**
129+
130+
~~~~~~~~
131+
> mkdir -p test js css/scss img
132+
~~~~~~~~
133+
134+
**This will make the files we want:**
135+
136+
~~~~~~~~
137+
touch js/player.js js/game.js js/enemies.js js/ui.js \
138+
touch css/scss/main.scss css/scss/reset.scss css/scss/ui.scss \
139+
touch test/player.js test/enemies.js test/game.js test/ui.js
140+
~~~~~~~~
141+
142+
Cool. Did that. **Now we make the Gruntfile:**
143+
144+
~~~~~~~~
145+
touch Gruntfile.js
146+
~~~~~~~~
147+
148+
**Open Gruntfile.js in your favorite editor and paste in this:**
149+
150+
~~~~~~~~
151+
module.exports = function(grunt) {
152+
grunt.initConfig({
153+
// and here we do some cool stuff
154+
});
155+
};
156+
~~~~~~~~
157+
158+
The above code is the required wrapper code to make a Gruntfile work. Now, remember our package.json file. Buds, we can use the values from that file in our Gruntfile.
159+
160+
**Check it out: **Let's say we're making a javascript library and want to put stuff like the name, version, author, source repository, and license of the project in a multi-line comment at the top of the file. It would be a bummer to have to edit that by hand every time the file is compiled for a new release. Instead, we can use values from package.json in our Gruntfile!
161+
162+
First step is to read the contents of package.json by **putting this line in Gruntfile.js**:
163+
164+
~~~~~~~~
165+
pkg: grunt.file.readJSON('package.json');
166+
~~~~~~~~
167+
168+
A package.json file is just JSON, right? Yeah, so it's easy to get at the values to do cool stuff.
169+
170+
For fun, let's see what it takes to run a custom task inside a Gruntfile, and have it log some attributes from the package.json file. Alright? OK.
171+
172+
This is a really simple task that logs the package name and version to the console, shown here as the complete Gruntfile.js:
173+
174+
~~~~~~~~
175+
module.exports = function(grunt) {
176+
grunt.initConfig({
177+
// read the json file
178+
pkg: grunt.file.readJSON('package.json'),
179+
180+
log: {
181+
// this is the name of the project in package.json
182+
name: '<%= pkg.name %>',
183+
184+
// the version of the project in package.json
185+
version: '<%= pkg.version %>'
186+
}
187+
});
188+
189+
grunt.registerMultiTask('log', 'Log project details.', function() {
190+
// because this uses the registerMultiTask function it runs grunt.log.writeln()
191+
// for each attribute in the above log: {} object
192+
grunt.log.writeln(this.target + ': ' + this.data);
193+
});
194+
};
195+
~~~~~~~~
196+
197+
**You can now run your task on the command line!:**
198+
199+
~~~~~~~~
200+
grunt log
201+
~~~~~~~~
202+
203+
204+
**You should get output like this:**
205+
206+
~~~~~~~~
207+
Running 'log:name' (log) task
208+
name: your-project-name
209+
Running 'log:version' (log) task
210+
version: 0.0.1
211+
Done, without errors.
212+
~~~~~~~~
213+
214+
If you didn't get output like that, check your Gruntfile for typos. If you did get output like that: Awesome! So we've made it pretty far. We've set up a project with a bunch of files and folders, created a package.json file with a list of devDependencies, installed the dependencies, and tried out a simple Gruntfile for running arbitrary tasks.
215+
216+
If this seems like a lot, like it's beating up your brain, don't worry. After a few times of starting a project like this, these initial steps will get faster and easier. Heck, you might even create some kind of base project that you can build on with each new project so that you don't have to write the boilerplate every time. Or you could use a project like yeoman for its code generators. That's up to you, but when first learning this it's a reasonable idea to start from scratch and see how everything works.

0 commit comments

Comments
 (0)