SEt up SSH Key on local server

go to /home/toru/.ssh/
Create ssh private key file, and name the project/hosting company name. Do the same thing for public key.
copy and private key
Add a shortcut to config file

Host shortcutname
 User login-user account name
 Port login port
 HostName hosting server name
 IdentityFile ssh private key file name
 TCPKeepAlive yes
 IdentitiesOnly yes

However, if you push to live using rsync command like Culturally Connected project, you only need Host and IdentityFile.

Host shortcutname
 IdentityFile ssh private key file name

The rsync command depends on projects, but it should be like the below.

rsync -avz -e 'ssh -p 2222' --exclude 'videos' --no-perms --no-owner --no-group _site/ root@example.ca:/var/www/vhosts/example2.ca/root/_site

Some linux commands

control + a Jump to head
alt + space Jump to previous/next word
To search a file containing some specific words on terminal,

grep -RnisI "Search all Instinct products" ~/www/projectname/

To clear terminal console

clear

Search file

find -name "filename"

Git workflow

git pull

1. ‘git flow release start 1.1’ works

create a new release branch named ‘release/1.1’ (1.1 will be the number you assigned)
bump the version number

2. Fuse custom script makes change log

create changelog entry
commit the change on develop branch

3. ‘git flow release finish 1.1’ works

merge the change after “git flow release start”
*git-flow will make sure everything is correctly merged into both master and develop. Developers can work last modifying before starting release, but Fuse’s nr process merely uses release branch for release purpose.
*Hotfix branches are a lot like release branches, except they’re based on master instead of develop. However, Fuse doesn’t use Hotfix branch.

http://jeffkreeftmeijer.com/2010/why-arent-you-using-git-flow/

Here is how to launch the website from staging server.
If you have not committed anything on master branch

git checkout -b master
git merge develop
git push -u origin master

Then, go back to develop branch

git checkout develop

On the project directory of dev server

git flow init -d

Then follow like below

Which branch should be used for bringing forth production releases?
   - develop
   - helpfullinks-own-block
   - keep-showing-submenu
   - master
Branch name for production releases: [master] 
Which branch should be used for integration of the "next release"?
   - develop
   - helpfullinks-own-block
   - keep-showing-submenu
Branch name for "next release" development: [develop] 
How to name your supporting branch prefixes?
Feature branches? [feature/] 
Release branches? [release/] 
Hotfix branches? [hotfix/] 
Support branches? [support/] 
Version tag prefix? [] 

Componetization – how to name components?

When & how should I separate component and name them?
Divide list and the element, mainComp-list are mainComponent separated as different component
mainComp-list can be wrapper name, mainComp-list__item can be an actual item name
mainComp can be wrapped by mainComponent-list
mainComp includes mainComp-header component which has bunch of elements
mainComp can have general name elements such as image, contents, name, description
If you use wrapper, the element should inside mainComp component like

<div class="header-top">
<div class="header-top__wrapper">
<div class="header-top__hours">{{&gt; "hours-status-markup" }}</div>
<div class="header-top__logo"></div>
<div class="header-top__search">Search Q</div>
</div>
</div>
Table component example
<table class="hours-table hours-table--grouped">
<tbody>
<tr class="hours-table__row hours-table__row--current hours-table__row--today">
<td class="hours-table__label">Monday - Friday:</td>
<td class="hours-table__times">9 AM-10 PM</td>
</tr>
<tr class="hours-table__row">
<td class="hours-table__label">Saturday:</td>
<td class="hours-table__times">8:30 AM-10:30 PM</td>
</tr>
<tr class="hours-table__row">
<td class="hours-table__label">Sunday:</td>
<td class="hours-table__times">10 AM-7 PM</td>
</tr>
</tbody>
</table>
Segment, multiple nested items example
<div class="hours-banner">
<div class="hours-banner__segment hours-banner__segment--today">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Today:</div>
<div class="hours-banner__hours">8am—6pm</div>
</div>
</div>
<div class="hours-banner__inner">
<div class="hours-banner__segment">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Monday-Friday:</div>
<div class="hours-banner__hours">10pm—9pm</div>
</div>
</div>
<div class="hours-banner__segment">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Saturday:</div>
<div class="hours-banner__hours">9:30am—9pm</div>
</div>
</div>
</div>
<div class="hours-banner__segment hours-banner__segment--special">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label"><a href="#">View Special &amp;
Holiday Hours</a></div>
</div>
</div>
</div>

Another nested example

<div class="accordion-list">
<div class="accordion-list__item">
<div class="accordion">
<div class="accordion-header">Lorem ipsum dolor</div>
<div class="accordion__body">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dignissimos pariatur accusamus!</h2>
<h3>Accordion Contents</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit velit, molestias dolores voluptas.

</div>
</div>
</div>
<div class="accordion-list__item">
<div class="accordion">
<div class="accordion-header">Lorem ipsum dolor</div>
<div class="accordion__body">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dignissimos pariatur accusamus!</h2>
<h3>Accordion Contents</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit velit, molestias dolores voluptas.

</div>
</div>
</div>
</div>

You can see other good example here. This one uses the following convention.
directory-listing
__container
__container-inner
directory-group
__contents
__entries
__entry
directory-entry
__title
__contents
__section
__telephone
__level
__notices
__notice
__icons
__icon