Project Management

Assignment

  • Build a personal site describing you and your final project.
  • Plan and sketch a potential semester project and add it to your website.
  • Upload it to the class archive. Work through a git tutorial.

What should be done

  • made a website and described how you did it
  • introduced yourself
  • described and made a sketch of your final project
  • documented steps for uploading files to archive
  • pushed to the class archive

Elements

The UI:

I used Twitter's Bootstrap for creating the UI of the website as it has everything that I need and more.

The Generator:

I've been developing web apps using the wonderful Yeoman Scaffolding Tool for a while now. And I LOVE IT.

Why you say?

Well, there are a lot of reasons:

For this website, I'm using Yeoman webapp generator.

The Templating System

I used Jade engine to build the layout of the website and pages for all the sections.

And integrated it into gulp using yeoman recipe

The Editor

At first I used Eclipse as I use it for most of my coding but after a while I noticed that it became heavy so I switched to Sublime Text.

The Version Control and pushing

I used SmartGit for committing changes and pushing to the website

Steps

NVM

As I work on multiple projects simultaneously that uses different versions of NodeJS. I find it a good practice to use Node Version Manager. It allows the user to work with multiple versions of NodeJS on the same machine without conflict and easily switch between them.

I used NVM v0.31.2 which comes with a easy to use install script which I excucuted :

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

Then to reflect the changes:

$ source ~/.bashrc

Then I installed NodeJS v4.4

$ nvm install 4.4
Downloading https://nodejs.org/dist/v4.4.7/node-v4.4.7-linux-x64.tar.xz...
######################################################################## 100.0%
Now using node v4.4.7 (npm v2.15.8)

And whenever I switch back to the project I use $ nvm use 4.4 to switch to the required version.

Webapp generation

First I installed the required node modules (yo, gulp and generator-webapp) globally specifying the versions used:

$ npm install -g yo@1.8.3 generator-webapp@2.0.0

This will install yo the Yeoman command line scaffolding tool and the generator-webapp which will be used to generate the static webapp.

Then I started the the webapp scaffolding by executing yo webapp

Then deselected Modernizr as I only need SASS and Bootsrap for now.

By hitting return yo start install NodeJS modules and Bower packages.

Changes made

  • I moved all the source files to '_yo' directory under my students folder.
  • I changed the gulpfile a little to make some routine things easier:
    • Modify building folder to be the parent of '_yo' and ignoring the folder when executing cleaning tasks
    • Resize images form a 'images_src' folder
    • Create a 'files' folder and ignore it when executing 'clean' task

Files

  • Gulpfile