Greetings, here lies my work-log at
______ _ ___ _ _____ _____ __ ______ | ___| | | / _ \ | | / __ \| _ |/ | |___ / | |_ __ _| |__ / /_\ \ ___ __ _ __| | ___ _ __ ___ _ _ `' / /'| |/' |`| | / / | _/ _` | '_ \| _ |/ __/ _` |/ _` |/ _ \ '_ ` _ \| | | | / / | /| | | | / / | || (_| | |_) | | | | (_| (_| | (_| | __/ | | | | | |_| | ./ /___\ |_/ /_| |_./ / \_| \__,_|_.__/\_| |_/\___\__,_|\__,_|\___|_| |_| |_|\__, | \_____/ \___/ \___/\_/ |_|
I found the following ideas and concepts mentioned by Neil in the lecture to be extremely fascinating and thought-provoking.
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.
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.
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
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
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 repogit diff HEAD
-
git diff --staged
-
git reset
- Unstages previously staged filesgit checkout --filename.format
git checkout master
-
git branch newbranch
- Creates a new branch with name newbranchgit branch -d (branchname)
- deletes named branchgit rm
- Deletes named filesgit merge
- Merge changes from mentioned branch to current branch-git pull
- Pulls changes from remote repo to one's local repogit push
- Pushes changes in local repo to remote repoAfter 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
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-in with your Fablabs.io account.
I used Freeplane, an open-source and cross platform program to construct mindmaps; to planout the layout and content of my website
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.
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
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.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
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.
'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>