01-Project Management

Week 1’s assignment

Developing a website using HTML and CSS

During this first week, the goal was to familiarize ourselves to web development and in order to achieve that, to create our own website to present ourselves, our final project idea and to document every step of our training.

I used to using Sencha extjs to create some apps, but extjs is a little heavy for blog type web pages. So I decided to find a small and easy using framework. After a few baidus and googles, and following the advice of Marvin Felix, one of our Shenzhen co-students, I chose HEXO for the framework. It’s really easy to use and deploy, I keep the hello-world page for the reference of init and creation of new post.

For the html editor, I use my favorite tool, TextMate. I like the cobalt color scheme. I even change my Arduio IDE color scheme the same with TextMate. To my surprise, it support markdown type syntax. I can preview the page directly in preview mode. It’s realy a good tool to recommend.

Here’s Hexo’s website : [hexo] (https://hexo.io/)
It’s only a few steps to create a blog template like this :

  • install Xcode if not, and install brew, and using brew install npm and nodejs
  • install hexo: npm install -g hexo
  • init a hexo workspace : hexo init fabwork
  • start hexo server : hexo server –debug
  • new post : hexo new “01-project management”
  • generate static page : hexo generate

After this, the default blog is ready for you to modify.

Edit Tool Textmate

01-project-management.md file is on the _posts folder, and on the foot bar, the syntax format is set to Markdown.

To reduce the photo size. I use imagemagick’s posts command line tool to do the trick. When I got a image from screen cap, it was png format. I need to change it to jpg with quality 80% and resize to 75%, which can reduce the file size round to 30%-40%. 

1
convert -resize 75% -quality 80 /Users/liujun/Desktop/Snip20160202_4.png textmate_03.jpg

Using GIT

The other main subject of this first assignment is to learn ho to use GIT, which is a source code management system for software development. Source code management is very important because it allows you to keep history of every version and every changes that you have made on a particular file or set of files. With the help of git, everything will recorded and nothing will be lost.

For me, GIT branch command was a little bit uncomfortable to use at the beginning. I used to directly push the files to the master. But with the help of @00, the article on git introduction, I finally was more comfortable with the whole thing.

Basically it is quite simple because it only consists on passing lines of command into the Mac Terminal to communicate with the Git Lab once it is configured.

  1. Clone the fablab source to local 

    1
    git clone git@git.fabacademy.org:fabacademy2016/fablabnanjing.git

  2. Copy the Hexo generated files to fablabnanjing directory 

    1
    liujun-mac:fabwork liujun$ hexo generate 
INFO  Files loaded in 416 ms
INFO  Generated: 2016/02/02/01-project-management/index.html
INFO  Generated: 2016/01/31/Week-01/index.html
INFO  Generated: 2016/01/31/hello-world/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2016/index.html
INFO  Generated: archives/2016/01/index.html
INFO  Generated: archives/2016/02/index.html
INFO  Generated: index.html
INFO  8 files generated in 132 ms 
liujun-mac:fabwork liujun$ cp -r public/archives/2016/fablabnanjing/students/203 \
../fablabnanjing/students/

  3. Go to fablabnanjing dir and show git status 

    1
    liujun-mac:fablabnanjing liujun$ git status 
On branch liujun_dev
Your branch is up-to-date with 'origin/liujun_dev'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   students/203/2016/01/31/Week-01/index.html
	modified:   students/203/2016/01/31/hello-world/index.html
	modified:   students/203/archives/2016/01/index.html
	modified:   students/203/archives/2016/index.html
	modified:   students/203/archives/index.html
	modified:   students/203/index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	students/203/2016/02/
	students/203/archives/2016/02/
	students/203/css/images/textmate_03.jpg

no changes added to commit (use "git add" and/or "git commit -a")

  4. Push the file to the git server

    1
    liujun-mac:fablabnanjing liujun$ git add students/203/
liujun-mac:fablabnanjing liujun$ git status 
On branch liujun_dev
Your branch is up-to-date with 'origin/liujun_dev'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	modified:   students/203/2016/01/31/Week-01/index.html
	modified:   students/203/2016/01/31/hello-world/index.html
	new file:   students/203/2016/02/02/01-project-management/index.html
	modified:   students/203/archives/2016/01/index.html
	new file:   students/203/archives/2016/02/index.html
	modified:   students/203/archives/2016/index.html
	modified:   students/203/archives/index.html
	new file:   students/203/css/images/textmate_03.jpg
	modified:   students/203/index.html

liujun-mac:fablabnanjing liujun$ git commit -m "<< >>"
liujun-mac:fablabnanjing liujun$ git push 

Everything up-to-date

Presentation of my Final Project
During this first week we were also invited to present our ideas for a final project. You can find this presentation in the final project post on the right side.