Greetings, here lies my work-log at

______ _ ___ _ _____ _____ __ ______ | ___| | | / _ \ | | / __ \| _ |/ | |___ / | |_ __ _| |__ / /_\ \ ___ __ _ __| | ___ _ __ ___ _ _ `' / /'| |/' |`| | / / | _/ _` | '_ \| _ |/ __/ _` |/ _` |/ _ \ '_ ` _ \| | | | / / | /| | | | / / | || (_| | |_) | | | | (_| (_| | (_| | __/ | | | | | |_| | ./ /___\ |_/ /_| |_./ / \_| \__,_|_.__/\_| |_/\___\__,_|\__,_|\___|_| |_| |_|\__, | \_____/ \___/ \___/\_/ |_|


principles and project management



index



/Assignment goals


/Outcomes


/Checklist



Thoughts on the lecture

I found the following ideas and concepts mentioned by Neil in the lecture to be extremely fascinating and thought-provoking.



Learning 'Git'

/Introduction

Prior to this course, I had a very surface-level understanding of Git which was limited to knowing that it's a source control management tool widely used in the open-source community (since the contributors are spread all over the world) and that Git is a distributed system which doesn't require a central server.


/Insights from the creator of 'Git'

This understanding was partly informed courtesy of this 'Google tech talk'titled - 'Linus Trovalds on Git' The speaker introduces the talk by saying, " and here is the man who will now explain why he built the software(git) that only he is smart enough to use" {paraphrasing} It seems to be that in the early days of Git, it was known to be confusing to use.



/Class archive from FabAcademy

Bookmark the Class notes page or save this list of links for easy access for the rest of the process

Git notes
download
tutorial
book
GUIs
shell
commands
keys ssh-keygen -t rsa -f keyname -C "user@emailaddress"
Mac


/Github's 15 minute intro to Git

The official git-scm learning website also links to a very interactive and fun 15-minute introduction tutorial to Git, it's called try.github.io


Link to open the tutorial in a new page

Here's a quick review of all the commands this tutorial introduced it's reader to

git init -Initialize git in folder.

git status -Shows current statuses of relative changes amongst local and remote repositories.

git add -Stages new files from local repo.

git commit -m -Commits staged files to eventually push.

git log -Shows history of commits, changes to files, etc.

git remote add 'reponame' - Adds remote repo

git push -u origin master - Pushes current files to remote repo

git pull origin master - Pulls files from remote repo

git diff HEAD -

git diff --staged -

git reset - Unstages previously staged files

git checkout --filename.format git checkout master -

git branch newbranch - Creates a new branch with name newbranch

git branch -d (branchname) - deletes named branch

git rm - Deletes named files

git merge - Merge changes from mentioned branch to current branch-

git pull - Pulls changes from remote repo to one's local repo

git push - Pushes changes in local repo to remote repo


Read this book

After this tutorial, one is on one's way to push website-files to his/her fablab's repository. But I would suggest one to also go through the first two chapters (1.Getting Started and 2.Git Basics) of the offical reference manual - 'Pro Git' book by Scott Chacon and Ben Straub


From Signing up on GitLab to pushing your website

I followed this concise and aptly named 'Get started with Git' tutorial authored by 'Matthieu Borgognon' for signing up on GitLab and pushing the first set of commits.



/Sign-up on GitLab


Sign-in with your Fablabs.io account.



















Building this Website

/Planning site content

I used Freeplane, an open-source and cross platform program to construct mindmaps; to planout the layout and content of my website


/Learn HTML&CSS

I chose to learn the basics of HTML and CSS to build a simple website much like the FabAcademy class archive website. My preferred choice of tutorials were from the - "Mozilla Developer Network's - 'Learn Web Development' series" as I found it to be the best structured among the lot for my learning style.


/Chose a text editor and get going

As and when I learnt new elements and CSS rule definitions, I started implementing them in my HTML files, using the open source text editor by 'adobe' called 'Brackets'. I intend to move on to a more versatile text editor like emacs/Vi in the future


/brackets + plugins

the text editor brackets has a very cool 'live preview' option and a collection of plugins which can enhance the functionalities of the text editor. Following, are the plugins, I found useful

emmet - integrates a bunch of shortcuts / haven't explored all the features yet

beautify - autoformats the spacing of code, to better manage whitespace

toolbar for open tabs gives a toolbar for all open documents and easy switching.

color-the-tag-name colors the different html tags in the code, helps in reading the code

brackets-tree-icons gives icons to files in te file tree, it's visually pleasing.

/Basic HTML structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>


/Understanding Cascading Style Sheets

CSS is required because content and 'styling' needs to be seperated for alllowing things like - using the same content to render on different media-types.

I found that the cocept of CSS rules defined under a more specific selector overruling possibly conflicting rules defined for a broader 'selector'; was genius.


/Adding ASCII art to HTML pages

'ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the 95 printable (from a total of 128) characters defined by the ASCII Standard from 1963 and ASCII compliant character sets with proprietary extended characters (beyond the 128 characters of standard 7-bit ASCII).' - Wikipedia.

Browsers reading HTML code disregard any whitespace(spaces and linebreaks) it sees in the code, ruining ascii art, so an html tag called 'pre' is used to tag ascii art. Pre stands for 'preformatted'; and any whitespace enclosed between the 'pre' tags are rendered by the browser as is.


  <pre class="Heading"> <p>
______    _      ___                _                             _____  _____  __   ______
|  ___|  | |    / _ \              | |                           / __  \|  _  |/  | |___  /
| |_ __ _| |__ / /_\ \ ___ __ _  __| | ___ _ __ ___  _   _       `' / /'| |/' |`| |    / / 
|  _/ _` | '_ \|  _  |/ __/ _` |/ _` |/ _ \ '_ ` _ \| | | |        / /  |  /| | | |   / /  
| || (_| | |_) | | | | (_| (_| | (_| |  __/ | | | | | |_| |      ./ /___\ |_/ /_| |_./ /   
\_| \__,_|_.__/\_| |_/\___\__,_|\__,_|\___|_| |_| |_|\__, |      \_____/ \___/ \___/\_/    
                                                        |_|                                
    </p> </pre>