Assignment 1: Project Management

Project Description

Build a personal website and describe the final project

Assignment Details

  • Work through a git tutorial
  • Build a personal site in the class archive describing you and your final project

Background

Early in my career, as part of starting projects, I was responsible for establishing change management processes and procedures, installing the tooling and training developers to be productive in a team environment. As leadership activities took over, I was no longer able to be as active in hands-on development activities. I assigned this task to the person with the “build manager role”. As a result my knowledge of the nuts and bolts of the tooling has faded. I still have a good conceptual understanding of the pieces but needed to relearn the specifics of Git.

Source of Training

Our local library provides access to the lynda.com training site. The site provides an outstanding source of bite sized training on many subjects. lynda.com classes served as the basis to refresh my skills. Last year’s Fab Academy videos were also a great source of knowledge. Here is a list of the videos and classes that I watched:,

Note on Screen Shots

To reduce size and reduce duplication with FabLab documentation, I selectively included screen shots only when it could serve as a reference for future FabLab students working with Eclipse and Bootstrap.

GitLab / Eclipse Configuration Steps

  1. Watched Fiore's last year week one recitation
  2. Took Lynda.com's Eclipse class to configure Git tooling. (The class did not indicate that keys needed to be stored in the .ssh directory. Fiore's lecture helped to solve that problem)
  3. Created SSH key pair
    Eclipse->Preferences Preferences ssh2 Key Management
    Select "Save Private Key...", then "Apply and close" Generate RSA Key Import Git Repo
  4. Exported public key from Eclipse and configured in GitLab
  5. Tested command line access to GitLab
  6. Tested Eclipse access to GitLab

GitLab CI/CD tool chain testing

  1. Cloned GitLab repo
    Clone Repo-1 Clone Repo-2 Clone Repo-3 Clone Repo-4 Clone Repo-5 Clone Repo-5
  2. Found a problem - Could clone content and get status but could not push changes (Eclipse tooling didn’t provide any interactive error messages. Command line tooling indicated a possible key pair issue.)
  3. Changed permissions of public key
  4. Executed add, commit, push chain from command line
  5. Executed delete, commit, push
  6. Made changes on the GitLab server, pulled changes and merged results

Web Site Development

  1. Built a spreadsheet of week number, lecture title, and assignment for use in the web site
  2. Looked at previous year’s sites
  3. Found a bootstrap template that supports selected format
  4. Found an “under construction” icon on Wikipedia and verfied rights to use

CI/CD development chain

  1. Created an Eclipse web project connected to the remote Git repo Create new web project Create new web project 2 Link web project to Git repo 1 Link web project to Git repo 2 Link web project to Git repo 3
  2. Added a HTTP-Preview Server to Eclipse
  3. Saved files were automatically published to the local HTTP server
  4. Validated changes on a local browser pointed at the local HTTP server
  5. Changed files added the the Git commit buffer using the Eclipse Git tooling
  6. Changes committed to the remote repo and then pushed to GitLab using the Eclipse Git tooling
  7. Changes made in Gitlab pulled to the remote (local) repo

Index Page Development

  1. Modified the bootstrap template to add a picture of Cape Flattery. Added a responsive floating icon - Icon is hidden for smaller screen devices. Added the fixed header with navigation menus.
    Bootstrap template Add header picture
  2. Added the title of the lecture to each card based on the spreadsheet information Add card titles
  3. Added the in-work icon and centered icon in “card” Add Icons to cards
  4. Centered text in card
  5. Built the navigation menu to the assignments
  6. Validated that the responsive content on different screen sizes and platforms

About Page Development

  1. Identified a Bootstrap template page that was close to what was desired
  2. Modified the template page to add the fixed header and navigation menus

Weekly Assignment Pages Development

  1. Identified a Bootstrap template page that was close to what was desired
  2. Modified the template page to add the fixed header and navigation menus
  3. Used the content from my spreadsheet to populate the week title and assignment details
  4. Cloned assignment pages for the other weeks and final project
  5. Added content this content to the week one page

What Unexpected Things Did I Discover This Week?

  • I got strange behavior with Git until I changed the permissions on the SSH key files. I could clone, do git status and other query commands, but pushes and pulls failed.
  • If there were more recent changes on the GitLab server that had not been pulled to the remote repo, the Eclipse commit and push failed. When it failed, the commit buffer in the Eclipse tooling blanked out, so content was not pushed to GitLab and there didn't seem to be any way to get the local changes to GitLab. I found that dropping out to the command line, doing a pull/merge and then a push took care of this problem.
  • Use of a template is a mixed blessing - it works well if your content matches what the template provides. Once you start to deviate from the template, the full force of Bootstrap, CSS and Javascript hits you. Getting margins and centering to line up can consume a lot of time.

Related Projects