experimentation
After joining this years classes I have to face several challenges, and first things first - the website as a documentation tool and how to manage the content, migrate my website from 2016 to 2019 fab academy repository, before I was using Brackets, now in 2019 I switched for using Atom. We gonna be using Git and GitLab for managing our projects troughout the whole fab academy. As a project management tool first I was considering to use tool JIRA, what is also compatible with Slack - team communication, than after discussing with our instructors I switched to use similar tool Trello *free for individuals. Our instructors also use it so it would be much more easier to have an overview from their side too, so I invited them to collaborate on my trello fab academy board too.
For better procedure of the whole Fab Academy programm I decided to use trello - a web-based list-making application for project management. First I logged in to my trello account and created a new board named Fab Academy 2019. I divided whole course according to the schedule with the weekly assignments, so I created a card for each week. Than I created 3 raws - To Do, Doing, Done and I will move cards from left row To Do to the right Done! Main source/input for everything in my website.
GitLab is a repository manager by using it we are going to document all of the assignments + final project of the Fab Academy. They say that GitLab is one of the best web platforms for hosting project source codes. So what does it make so popular? I was brawsing a bit to find out more and I would like to share my findings here. Both - GitHub and GitLab are web-based Git repositories that have streamlined web development workflows. Developed on the basis of Git version control system, they provide centralized, cloud-based locations where teams can store, share, publish, test, and collaborate on web development projects. Git revolutionized version control—crucial when you have more than one developer working on a project—and GitHub added a staging platform to share data, files, prototypes and open-source projects. Using Git Lab has many advantages, so I would like to mention some of them: 1.) It’s free and open-source. Users can find an unlimited number of private repositories. *after exceeding the file size of 10gb payment is required. But till that size feel free to share! the same applies for an enterprise solutions, they are payed as well, moreover they offer more addons and features. 2.) Different hosting options 3.) A convenient user interface enables users to access everything from one screen: projects, latest projects, users, latest users, groups, and stats. 4.) You can attach files like comments to any communications in GitLab. 5.) GitLab has an effective integrated bug tracking mechanism. So for effective workflow and proper documentation of my fab academy progress I followed up some steps, how Git and Atom interact and how I can push my documentation to appear online. This tutorial helped me a lot. atom + Git
Hit it with Git! - the motto of this week
*in 2016 we were pushing the documentation on our websites via Terminal and it was necessary to use some commands, by the time there was created a very useful tutorial. Ok so I got familiar with following commands:
some of the important often used commands explained:
The git status command displays the state of the working directory and the staging area. It lets you see which changes have been staged, which haven't, and which files aren't being tracked by Git. Status output does not show you any information regarding the committed project history.
command is used to fetch and download content from a remote repository and immediately update the local repository to match that content. Merging remote upstream changes into your local repository is a common task in Git-based collaboration work flows. The git pull command is actually a combination of two other commands, git fetch followed by git merge. In the first stage of operation git pull will execute a git fetch scoped to the local branch that HEAD is pointed at. Once the content is downloaded, git pull will enter a merge workflow. A new merge commit will be-created and HEAD updated to point at the new commit.Source
command adds a change in the working directory to the staging area. It tells Git that you want to include updates to a particular file in the next commit. However, git add doesn't really affect the repository in any significant way—changes are not actually recorded until you run git commit.Source
The "commit" command is used to save your changes to the local repository. ... This means that a file won't be automatically included in the next commit just because it was changed.
The git push command is used to upload local repository content to a remote repository. Pushing is how you transfer commits from your local repository to a remote repo. It's the counterpart to git fetch, but whereas fetching imports commits to local branches, pushing exports commits to remote branches. Remote branches are configured using the git remote command. Pushing has the potential to overwrite changes, caution should be taken when pushing. These issues are discussed below. git push is most commonly used to publish an upload local changes to a central repository. After a local repository has been modified a push is executed to share the modifications with remote team members.Source
The .gitlab-ci.yml file is a YML file that we create on the project's root. This file automatically runs whenever we push a commit to the server. Basically, the yml file tells the GitLab runner what to do. There are some instructions how to follow up next.
I also needed to re-generate an SSH public key to share my content through the browser connecting my online repository with my computer, so I followed this tutorial to be able to start with Git again. There is a video how to do it too. Santi helped me with troubleshooting and recovering files from 2016, where I was documented as a student No.39 from GreenFabLab.
Back in the 2016 when I started with Fab Academy, I decided to use a text code editor for working out trough my HTML code using Brackets - an open-source code editor_brackets.io (brackets interface with live preview)
We had to choose a good example and try to customize it for our own purposes. My fab academy website comes from here: template source
Just a preview with color change. I played there with the color change from yellow to turquoise #67e5f7. This was done when I was using Brackets, in the css part of the code I searched for the color # and tried to adjust it in the whole template. I also changed the color of the background image, but then at the end in 2019, I went back to yellow appearance.
The shift from brackets to using atom was in my case essential. I would have to either reinstall new version of brackets or - thats what I decided - to learn new tool and so I installed atom as a main backbone structure to manage the documentation of my fab academy progress on my website.
Welcome! Succes...starting with it. So after downloading and installing new code editor for html Atom I imported my repository folder from 2016 there. My previous repository folder from 2016 had various .html files - pages, for each weekly assignment, index, about, final project, where all the content is uploaded plus the .css stylesheet part of code, where the styles are defined. I played there with the color change from yellow to turquoise #67e5f7, but than went back to yellow again. There were also other assets as javascript files, but I didn't change them. Also a predefined img folder with all the images for the web page is there.
Understanding how to use atom means for me going troughout some tutorials_atom.io and also this tutorial helped me to understand, how atom can collaborate with git to be able to push updates on my website.
Atom interface HTML: using Atom - an open-source code editor_atom.io
Atom workflow - how to push changes on my web:
Stage After making some changes, stage anything you want to be part of the next commit. Choose between staging... * All changes: Click the "Stage All" button in the "Unstaged Changes" bar. * Files: Double-click a file or select a file and press Enter.
Commit Once I ve staged my changes, enter a commit message. Feel free to describe the commit in more detail after leaving an empty line. Finalize by clicking the Commit button.
Publish and push When ready to share the changes - click the Publish button in the Status Bar. It will push the local branch to the remote repository.
For an image upload I am saving images to the repository folder, to each weeks assignment, it is necessary to resize the images in according to keep the size of the web page low. Regarding the images for the website - those I adjust and resize in Adobe Photoshop. After wished img modifications, I go to File/Save for Web and I choose medium quality of the images. Or another online option how to reduce an image size is to upload them to this website and just download them. Easy.
Conclusion: I will see how it goes with workflow in Trello, it is hard to say it now since I am a new user to this, but if it is similar to Jira, than I will be happy using it too and that way manage and visualise my progress. When comparing Atom vs Brackets, the community of users recommends Atom for most people. Atom is ranked 9th while Brackets is ranked 11th. Both Atom and Brackets are lightweight source code editors written in JavaScript. What I miss in Atom is the Live Preview, what Brackets was providing, but this I can easily manage my way - as a Mac user after saving/my fav shortcut cmd+S in atom, I go to the repository folder in Finder and there is a .html this I preview quickly with pushing a space bar, or opening it directly…that way I do my Live Preview with Atom :)
