Principles and practices | Project Management

Idea, urban agriculture more accessible

The idea is to create a mini plant nursery, that can auto water the plants and supply light if needed to get strong plants. It should be easily usable by anyone that wants to start growing plants, also it will be used by me to continue with my garden in an easier way.

More of the final project
Idea of the crib shape for the final project Front view sketch of the final project Side view sketch of the final project

Reading the Fab charter

This step helps me to understand more about what the Fab Lab network is about and also how I would be involved in a Fab Lab to develop this curse witch are my responsibilities.

You can reed it here!

How I build this web site

To start I look for an HTML template on html5up, but I wasn't happy about the amount of code that was included on the template. So I build a site with HTML and CSS that uses the style and fonts from the template but has only what is needed for this website

First I build the folder structure on the web, and imported FontAwesome by downloading the .css mini and including a link on the html header, now I can use icons .

learning about html table

I also did a short course on HTML to refresh my knowledge and learn how to use tables, which can be very helpful to present data and make cheat sheets

Tools I use to make the website:

my setup for web dev

Then I set up the FabLab repository to display an HTML by changing the .gitlab-ci.yml file configured to markdown sites to the GitLab provided HTML template. Then I use git to clone, commit and push my changes

Image upload workflow

  1. Get the row image (screenshot or picture)
  2. magick identify the file to get details
  3. du -h to get the size of the file
  4. magick convert -resize and/or -quality to compress the image
  5. mv the compressed file to the img folder of the web page
  6. add the img tag <img src="file path" alt="img description">
Cmder work flow for image compression

Git basics

Git is a distributed version control software that allows you to track the history of changes, within a folder or directory, and sync multiples repositories, used to have the archive change history and combined with GitLab you can deploy the web page to the FabCloud

A cheat sheet of git commands that are commonly used in the workflow are listed below

Command Description -Flags
git status Check the git status and display it, used to know more about the step you're on
git clone Clone a repository, and make it linked to the original so they can sync
git add Adds new or modified files to the staging area . | -A
git commit Make a commit to the git history, you can edit a title and message -m "Description"
git pull Gets the changes and commits made on a remote repository --verbose
git push Sends the commits of the local repository to a remote one <branch>
git rm Removes a file from git repo, can help to un-stage before commit --staged, --cached <file>
git log Shows the repository history, helpful to know the changes you have made --graph,--merges,--branches,--all
git diff Shows the difference between two files, useful to see what's changed
git branch Display the branches of the repository <branch name>(creates a new one)
git checkout Moves the repository head to the named branch
git merge Get changes from named branch to the current one --abort
Note: you can get help and details using: git <command> --help

Archive update workflow

  1. git pull to sync your local repository with the remote
  2. Edit the HTML file that contains the page, add content
  3. git status to see the changes
  4. git add to stage the changes
  5. git commit to "save" on the repository history
  6. git push, to send your changes to the remote repository
Cmder git status and add Cmder git commit adding message Cmder git push

Fab Academy Student Agreement

The Fab Academy is responsible for:

I am a Fab Academy student, responsible for:

Signed by committing this file in my repository,

Ismael Larrea Bravo

Conclusions

This assignment was really helpful because I previously have tried to learn web development before, but this time I was motivated to create a template that could be easily expanded with each assignment; which is a challenge that I enjoy a lot solving.

Also, I have experimented a bit with git, but now I feel conformable using Cmder as a terminal for windows (recommended on the boot camp by Kris), with that I was able to learn how to compress images and use git. Feels amazing to push the commits and see how your site changes on the web.

Have you?


Prev Next