Skip to content

2. Project management

This week I worked on building a personal site describing me and my final project. Also uploading it to the class archive. Finally, I worked through a git tutorial.

How I design my website?

Here you will see the tools I am using for designing my website and how to install the on Linux, specially in Xubuntu.

I decided to use the example given by the Fab Academy 2019 organization, that used Markdown framework. All of these is because it is my first time developing a website, and the template is very helpful for me.

I decided to use Atom as Integrated Development Environment (IDE) because I used before and I was comfortable with it.

Softwares

All the software I installed in Xubuntu. All this process was through the terminal using command lines.

Version control

When you are working on code for a website or a software it is important to track your changes. This is especially critical when collaborating on projects where multiple people will be updating the same code.

Differents models of version control systems:s

  • Local Data Model: This is the simplest variations of version control, and it requires that all developers have access to the same file system.

  • Client-Server Model: Using this model, developers use a single shared repository of files. It does require that all developers have access to the repository via the internet of a local network. This is the model used by Subversion (SVN).

  • Distributed Model: In this model, each developer works directly with their own local repository, and changes are shared between repositories as a separate step. This is the model used by Git, an open source software used by many of the largest software development projects.

Subversion is an open source version control system. Founded in 2000 by CollabNet, Inc., the Subversion project and software have seen incredible success over the past decade. Subversion has enjoyed and continues to enjoy widespread adoption in both the open source arena and the corporate world.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Mercurial is a free, distributed source control management tool. It efficiently handles projects of any size and offers an easy and intuitive interface.

Bazaar is a version control system that helps you track project history over time and to collaborate easily with others. Whether you’re a single developer, a co-located team or a community of developers scattered across the world, Bazaar scales and adapts to meet your needs. Part of the GNU Project, Bazaar is free software sponsored by Canonical. For a closer look, see ten reasons to switch to Bazaar.

Steps to choosing a version control system

This steps depends if you are a company or not, also if you just want to share your project and allow other people collaborate with you.

  1. Determine why you want new version control.

  2. Define what you need from version control.

  3. Define your users.

  4. The evaluation process.

  5. Calculate real costs.

  6. Support and community.

  7. Will it make a real difference use a version control?.

Git

“Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. “

Git services

Nowadays, there are many services for hosting your Git repositories. These are the most important according my to research:

Git Hosting Service Git SVN HG Code Review Issue Tracker
Bitbucket Yes No Yes Yes Yes
CloudForge Yes Yes No No Yes
GitHub Yes Yes No Yes Yes
GitLab Yes No No Yes Yes

How to install

  • Step 1: run general OS and package updates.
sudo su apt-get update
  • Step 2: install Git
apt-get install git-core
  • Step 3: confirm Git the installation
git --version
  • Step 4: configure Git’s settings (for the root user)
git config --global user.name "testuser"

and

git config --global user.email "testuser@example.com"
  • Step 5: Verify the Config changes
cat ~/.gitconfig

or

git config --list

The GIT version that I used

GIT version installed

These are a list of git basics commands

To go through git I followed the tutorial provided for the Fab Academy and also another that I found on the web.

git init <directory>

git clone <repository>  

git config user.name <name>

git add <directory>

git commit -m "<message>"

git status

git push origin <repository>

git pull <branch_name> <remote_URL/remote_name>

Markdown

“Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.”

Text using Markdown syntax

Heading
=======

Heading

## Sub-heading

Sub-heading

Paragraphs are separated
by a blank line.

Paragraphs are separated by a blank line.

Two spaces at the end of a line  
produces a line break.

Two spaces at the end of a line
produces a line break.

Text attributes _italic_,
**bold**, `monospace`.

Text attributes italic, bold, monospace.

Horizontal rule:

---

Horizontal rule:

Bullet list:

  * apples
  * oranges
  * pears

Bullet list:

  • apples
  • oranges
  • pears
Numbered list:

  1. wash
  2. rinse
  3. repeat

Numbered list:

  1. wash
  2. rinse
  3. repeat
An [example](http://example.com)

An example

![Image](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Image

> Markdown uses email-style > characters for blockquoting.

Markdown uses email-style > characters for blockquoting.

Inline <abbr title="Hypertext Markup Language">HTML</abbr> is supported.

Inline HTML is supported.

Viewing locally Markdown

To view your website locally you have to install MkDocs, in order to have a local server and preview your website in your browser.

“MkDocs is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.”

How to install

  • Step 1: In order to manually install MkDocs you’ll need Python installed on your system, as well as the Python package manager, pip.

Xubuntu comes with both Python 2.7 and Python 3.5 by default.

python --version

Python version that I used

Python version

and

pip --version

PIP version that I used

PIP version

If you’re using a recent version of Python, the Python package manager, pip, is most likely installed by default. However, you may need to upgrade pip to the lasted version:

  • Step 2: upgrade pip to the lasted version.
pip install --upgrade pip

f you need to install pip for the first time

python get-pip.py
  • Step 3: install the mkdocs package using pip:
pip install mkdocs
  • Step 4: check that everything worked okay.
mkdocs --version

MkDocs version that I used

MkDocs

  • Step 4: to run your Markdown website locally go to your web page directory using the terminal an execute the following command:
mkdocs serve

Running MkDocs

Material

“Material is a theme for MkDocs, an excellent static site generator geared towards project documentation. It is built using Google’s Material Design guidelines.”

How to install

Install the latest version of Material with pip:

pip install mkdocs-material

ImageOptim

“Why we should aware of the images size that you put in your website is because the images take up big amounts of internet bandwidth because they often have large file sizes. So, to compress them you have a bunch of tools that can help you.”

How to use imageOptim?

The website in the browser

  • Step 2: click on the browser button and select your image format.

Selecting the browser button amplified

Selecting the browser button

  • Step 3: select the image that you want to optimize and press the button open.

Selecting the image to optimize

Open the image selected

  • Step 4: finally save the optimized image.

Save the optimized image

⚠ Do you need to optimize more than one image?

The answer to this question is just select all the image at once.

Problems faced and solutions

Problems:

  • I couldn’t run my website locally on my browser like an HTML file.
  • I tried using xampp, but only runs HTML and PHP files.
  • I tried using HUGO, but I couldn’t use properly.

Solutions:

  • I installed MkDocs, and I successfully run my website.

Atom

A text editor is at the core of a developer’s toolbox, but it doesn’t usually work alone. Work with Git and GitHub directly from Atom with the GitHub package.

How to install?

First you have to download the deb file of atom of the site here

Then you have to open in terminal the directory where your downloaded file is placed and give it permission to the deb file.

chmod +x atom-amd64.deb

Finally install the package.

sudo ./atom-amd64.deb

What I learned this week?

I learned the basics of html programming language. I learned the basics of markdown framework.