Git Tutorial - Commands from Beginner to Advanced Level

What is Git?

Git is a world wide populor distributed version control system which keeps track of all files in a cenrtalized location. It is a free and open source created by Linus Torvalds in 2005.

In short there will be a centralized copy (master) available in one location and the copy of the same will be copied into each user machine. All users changes will be pushed/merged into the same centrlized/parent copy (maseter) with the help of git commands (add, commit, push, pull etc.)

Advantages of Git

- Speed
- Simplicity
- Fully Distributed
- Excellent support for parallel development, support for hundreds of parallel branches.
- Integrity

Thinking in Git

Thinking in git is simple and easy by practicing it. This article covers the Git commands for beginner to advanced level. Each and every command will be presented with simple and straight forward explanation.

Git Commands

What is my git version?

Command: git --version

Show git configuration details

Command: git config --list
This command shows detailed git configuration for the branch like below.
- remote.origin.url
- user.name
- user.email
- credential.helper (Type of credential stored)

How to create an empty git repository?

Command: git init
Creates an empty repository (Folder) in the machine with the hidden git configuration files in it.

How to clone an origin branch?

Command: git clone <branch_link> <local_branch_name_optional>
It copies all the files from the specified remote branch into the current local machine folder. This stores the chain with remote branch for pushing and pulling the changes.  

Workflow of pushing changes

Modify Files > Staging > Committing > Pushing

What are my pending/modified changes?

Command: git status
Lists the modified files both staged and unstaged.

How to stage files?

Command: git add .
All the modified files will be shown in the unstaged/changes area. To push the local changes you need to stage, commit and push them. Above command will add all the files to the staging area.
Command: git add filename
If the given file name is existed in the modified list then the file will be staged.

How to commit changes?

Command: git commit -m "Commit Message"
You can only commit the staged changes. All the staged files will be committed with the above command. Make sure the files are available in staged area before running this command. Every commit will be generate with an unique hash id to address the commit. This is unique across the all the branches.

Reverting Commit

Command: git revert <commit_hash>
Every commit assigned with an unique hash id (Ex:f26ef0db7d33b46cccccda4699319ef518fdd3c7) to address or refer the commit. This is unique across the all the branches. The above command will revert the given commit.

Pushing changes to origin branch

Command: git push
Pushes all the local commits to origin branch

What are the available changes in origin and how to fecth them?

Command: git fecth
This will compare the origin branch with local branch and list out the commits or changes which are available in origin branch but not available in the local repository. These changes in origin branch can be pushed by the other users from thier local brach. This command helps in knowing what are all the incoming commits before pulling them.

How to pull the changes from origin branch?

Command: git pull
Gets all the pending commits from origin branch into the working branch.

Lis out commit history

Command: git log
Get all the detailed commits history (Commit hash, message, committed owner, committed date, files changed etc.) of the working branch.

Get names of all local branches

Command: git branch

Get names of all remote branches

Command: git branch -r

Get names of both local and remote branches

Command: git branch -a

Switch from one branch to another branch

Command: git checkout <local_branch_name>

Branching - Create a new branch from working / current branch

Command: git checkout -b <new_branch_name>

Branching - Create a new branch from another local branch

Command: git checkout -b <new_branch_name> <source_branch_name>

Branching - Create a local branch from a remote branch

Command: git checkout -b <new_branch_name> <origin/remote_branch_name>

Branching - Delete local branch

Command: git branch -d <local_branch_name>

Branching - Push local branch to remote

Command: git push origin <branch_name>
This will push the local branch to the remote which can be shared with the others.

Branching - Merge another local branch into current branch

Command: git merge <other_local_branch_name>
This compares the commit history of source branch with current branch and merges the changes from source branch into current.

Stashing - Saving Changes Temporarly

Stashing helps in saving the modified and uncommitted changes temporarly. Each stash will be stored with an index by following LIFO (Last In First Order). You can re-apply the saved stash or changes across all the branches. It supports deleting or dropping. You can create a new branch with the stash as well.

Stash the changes
command: git stash

Stash the changes with message
command: git stash save "<stash_message>"

Show all the saved stashes
command: git stash list

Re-apply most recent stash and keep it in your stack
command: git stash apply

Re-apply stash by index
command: git stash apply <index>

Apply most recent stash and then drop
command: git stash pop

Remove most recent stash
command: git stash drop

Remove stash by index
command: git stash drop <index>

Create a branch from stash
command: git stash branch <branch_name> stash@{index}

Get commit details by commit-hash

Command: git show <commit-hash>
This command gets the details of commit which are commit hash, message, owner, date, files changed along with changes.

Cherry-pick commit

Command: git cherry-pick <commit-hash>
Cherry-pick command copies the commit into the current branch. This we use to copy the commit from one branch to another branch.

What is a HEAD?

HEAD is a reference to the last commit in the currently check-out branch. When you do a new commit then HEAD will be pointed to the newly created commit.

Below command shows where and which commit the HEAD is currently pointing to
Command: git show HEAD

Show nth commit with the HELP of HEAD
Command: git show HEAD~<index>

How to rename local and remote branch?

1. Switch to the branch you want to rename
Command: git checkout <branch_name>

2. Rename the branch
Command: git branch -m <new_branch_name>

3. Push the renamed local branch to the remote and reset the upstream branch. This will create the new branch in remote with the new_branch_name and keep the old branch as it is.
Command: git push origin -u <new_branch_name>

4. Delete remote branch with the old_branch_name
Command: git push origin --delete <old_branch_name>

CSS Basic Selectors - Learn CSS | Html with CSS Tutorials | Tricks | Front-end Development

CSS selectors are useful in front end development. In this tutorial I am going to show you what are the CSS basic selectors.

Below are the four basic selectors which we use on daily web development

1. Universal Selector

2. Type Selector

3. Class Selector

4. ID Selector

1. Universal Selector

The universal selector matches all elements of any type in HTML document. Consider the below scenario in where we have div, span and paragraph for which I want to set a a green font colour for all of them.

CSS

*{

     font-color:green;

 }

<div>div content</div>

<span>span content</span>

<p>paragraph content</p>

User Interface

div content

span content

paragraph content

2. Type Selector

Type selector matches all the HTML elements by the given HTML element name. This selector travels throughout the HTML document and find out the elements which are matched with the given element name and apply the styles on them. Cosider below where we have to set a light green background colour for all the paragraphs.

CSS

p{

background-color: lightgreen;

}

<span>Paragraph 1</p>

<p>dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers</p>

<span>Paragraph 2</p>

<p>dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers</p>

<span>Paragraph 3</span>

<p>dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers</p>

User Interface

Paragraph 1

dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers

Paragraph 2

dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers

Paragraph 3

dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers

3. Class Selector

The class selector matches all the HTML elements by their class attribute value. If any HTML element class attribute value is matches with the given class name selector then the changes will apply to them. Consider the below scenario in which we want to apply a light green colour background to the success message and light  yellow colour message to info message.

CSS

.success {

background-color: lightgreen;

}

.info {

background-color: #f4ff54;

}

<div class="success">Congratulations! Your are successfully completed CSS basic selectors blog post</div>

<div class="info">You need to go through the other tutorials to become an expert in CSS</div>

User Interface

Congratulations! Your are successfully completed CSS basic selectors blog post

You need to go through the other tutorials to become an expert in CSS

4. ID Selector

The ID selector applies the styles to the elements based on the value of their id attribute. The HTML elements should be identified by the unique ids. Lets take two containers , apply the background colour for the div container which id value is equal to "warningMessage".

CSS

#warningMessage{

background-color: lightgreen;

}

<div id="warningMessage">HTML does not allow the duplicate id values.</div>

<div>Please go through the other tutorials on this blog to become an expert in CSS</div>

User Interface

HTML does not allow the duplicate id values.

Please go through the other tutorials to become an expert in CSS

Above are the basic selectors which we use regularly in our web development.

JavaScript - window.location.origin is not working in Internet Explorer

window.location.origin does not work on Internet Explorer. 

Follow the below code which will set the window.location.origin value by concatenating the portions of the URL. 

 if (!window.location.origin)

{ 

    window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? (':' + window.location.port) : ''); 

}

window.location properties

window.location.protocol         - Return the protocol of the current URL

window.location.hostname      - Returns the domain name of the web host

window.location.port                  - Number of the internet host port (of the current page)

JavaScript - How to Download All Pictures from Instagram Profile on Single Click

1. Open Instagram profile you want to download images from in Chrome browser.

2. Open Chrome Console (Press F12).

3. Enter the below script in console window then all appearing images in the Instagram profile current screen will be opened into a new tab.


document.querySelectorAll("div.v1Nh3.kIKUG._bz0w a").forEach(function (item) { window.open(item.querySelector("img")["src"]) });