DEV Community: Ritesh Kumar

SOME AWESOME FEATURES OF JAVASCRIPT ECMAScript 2016 (ES7)!

Ritesh Kumar — Thu, 03 Mar 2022 19:05:18 +0000

Javascript ES7 was a cake on top of the ES6 update. In my previous blog ES6 way of coding Javascript! , I discussed a few useful features that were added to JavaScript in order to make our lives easier. Now, Let's have a look at some of the features that ES7 has to offer!

EXPONENTIATION OPERATOR

The exponentiation operator, **, was introduced in ECMAScript 2016(ES7).
Performs exponential calculation on operands, Same algorithm as Math.pow(x, y). It returns the first argument raised to the power of the second argument.

With ES7 with can do ( base** power )

const value = 2**5
console.log(value) //32

ASYNC FUNCTIONS

ES7 given us the way to make any function 'asynchronous' explicitly. Very useful when we want wait for asynchronous request like http request, setTimeout etc.

function wait(){
   return new Promise((res, rej) => setTimeout(res, 2000));
}
async function asyncMania(){
   console.log("1"); 
   await wait();   /// It will wait for promise to get resolve 
   console.log("2");
}

Array.prototype.includes()

Surprised right? Yes the include() method in Array was introduced with ES7.
Used for checking if the given element is in array or not.

Array.prototype.includes() checks the array for the value passed as an argument. If the array contains the value, it returns true; otherwise, it returns false.

const arr = ['Hello', 'World', '!']
console.log( arr.includes('Hello') )        //true
console.log( arr.includes('Hello !!') )    // false

Object.entries()

Takes an object as parameter and returns a Array of arrays of key, value pairs.

const myObj = {name: "Ritesh Kumar", username: "@wordsaysalot"}
console.log( Object.entries(myObj) )

//OUTPUT
//[ ['name', 'Ritesh kumar'], ['username', '@wordsaysalot'] ]

Add Paddings in String !

String.prototype.padStart() and String.prototype.padEnd() allows you to add padding to the string towards left and right side.

const myStr = "Hello"

console.log( myStr.padStart(10) )  //"_________Hello"
console.log( myStr.padEnd(10) )   // "Hello__________"

console.log( myStr.padStart(10, 'tests')) // "testsHello"
console.log( myStr.padEnd(10, 'tests'))   //  "Hellotests"

Trailing commas

Last but not the least :) You can have trailing commas in function parameters.

const myfun = (a,b,c,)=> console.log(a,b,c)
myfun(1,2,3)    //OUTPUT: 1 2 3

Conclusion

Over time, JavaScript has grown in popularity, and its community is continuously expanding. I tried to cover some of the key features brought to JS by ES7, but there is always more to learn.

Thanks for reading the article! I hope you guys found this article useful.

ES6 way of coding Javascript!

Ritesh Kumar — Mon, 27 Dec 2021 09:40:46 +0000

JavaScript is an incredibly fast and efficient programming language to use for a variety of purposes. Today Every type of software uses JavaScript, including Web apps, 3D games, robots, IoT devices, etc.

Back in 2007, Jeff Atwood (founder of StackOverflow), made a case that JavaScript would become a bigger part of web development. Atwood coined the term Atwood’s Law, which states:

Any application that can be written in JavaScript, will eventually be written in JavaScript.

It’s now ten years later, and Atwood’s statement is truer than ever. JavaScript is continuing to gain more and more adoption. The “next generation” of Javascript is something known as ES6. ES6 is so far the best and biggest update javascript has ever received. It streamlined the javascript development and almost killed jQuery's career. ES6 mainly allows you to write less code and do more.
In this post, I'll go over the six major differences between ES6 and ES5. Let’s take a look.

Arrow function: write less do more

ES5 WAY

function add(a,b){ 
    return a+b
}
console.log(add(2,3))
//OUTPUT: 5

ES6 WAY

const add = (a,b)=> a+b
console.log(add(2,3))
//OUTPUT: 5

Use const if you don't want to reassign the 'element variable by mistake.

ES5 WAY

var element = document.getElementById('myForm')

ES6 WAY

const element= document.getElementById('myForm')

De-structuring: write less do more!

ES5 WAY

var user = {
    name "Ritesh Kumar", 
    username: "@0xRitesh"
}
const name = user.name
const username user.username

ES6 WAY

var user = {
    name "Ritesh Kumar".
    username: "@0xRitesh"
}
const {name,username} = user

Template Literals

ES5 WAY

function getUsertMessage(name,country){
    console.log('Hi, my name is '+ name+ ',and I am from '+ country)
}
logUserMessage('Ritesh, 'India')

ES6 WAY

function logUserMessage(name,country){
    console.log(`Hi, my name is ${name}, and I am from ${country}`)
}
logUserMessage('Ritesh', 'India')

improve Object Literals

ES5 WAY

function getUserObj ( name, age, address){
    return {
        name: name,
        age: age,
        address: address
        }
}

ES6 WAY

function getUserObj ( name, age, address){
    return {
        name,
        age,
        address
        }
}

Default Parameters

ES5 WAY

function ES5Fun( username, platform){
    username, = username, || '@wordssaysalot';
    platform = platform || 'Dev';
}

ES6 WAY

function ES6Fun( username = '@wordssaysalot' , platform= 'Dev') {
}

Conclusion

Thanks for reading the article! I hope you guys found this article useful, and I hope I was able to introduce you to some of the ES6 features.

Why React Hooks Exist?

Ritesh Kumar — Mon, 23 Aug 2021 11:02:48 +0000

Introduction

React.js is the most widely used JavaScript library for front-end developers at the moment. It is utilized by developers and corporations all around the world as an open-source project.

Hooks are one of the most useful features of react. When interacting with the state, hooks allowed us to employ functional components instead of class-based components. Aside from built-in hooks, React also allows us to create our own custom hooks.

In this post, We'll look at what React Hooks are and why they're important.

Problem :

Before react 16.8 (16 Feb 2019) developers were limited to use class-based components if they want to maintain state in the component, and functional components were used for only those components, which don't require any state.

This results in inconsistency through the app and there were several issues with class-based components.

Issues :

The use of two different types of components created these major issues:

Inconsistency through the app
If someone wants to add states in functional

the component that requires the whole state to be converted into the class-based component.

To use class-based components proper 'bind' has to be maintained.

Hooks

Hooks actually doesn't solve the problem related to class-based components.

I just give some extra power to a functional component that allows developers to do anything with a functional component that they were already doing with class-based components.

Hooks let you always use functional components instead of having to constantly switch between functions, classes, higher-order components, and render props.

Result

Now most developer uses functional component with hooks because:

They can add remove states as they require.
Hooks simplifies the development process and maintains consistency through the app.
You no longer need to struggle with 'bind'
Functional components became more versatile than class-based.

Final Notes

Finally, I can guarantee you that learning React Hooks is not difficult. when I first started using react, I wasn't a big fan of hooks. But now I'm completely enamored with it.
It may appear challenging at first, but as long as we focus on the fundamentals and learn how each component works, we will be able to incorporate this feature with ease.
Wait a minute, if you want to learn the basics of react hooks, go through this documentation .

In the next article of this series, I'll go through some of my favorite instances of custom hooks and how to use them in your own apps. Until then, stay tuned.

Thanks for reading!

As always, any questions or suggestions, please feel free to leave a response or tweet me 🐦! Good luck and happy coding!!

My Journey Of Building pascaline 🧮

Ritesh Kumar — Thu, 05 Aug 2021 18:16:32 +0000

Hi Everyone 👋, hope you all are doing well. 🚀

In this article, I'll tell you how the notion of pascaline came to me.

Last week, I took part in the week-long IBD WFH tool building challenge hosted by crio.do.
In this challenge, We were instructed to build useful open-source apps or extensions that would help us work more efficiently and increase productivity.

So I began thinking about what I could build and decided to work on an issue I found a few days ago.

Problem

a while ago while filling out a form and had to answer some questions about my budget, so I think of quickly installed an extension to help me out. As soon as I opened the chrome store and explored some extensions, I found that all of them had a really unpleasant UI, they were working perfectly fine but the experience I found was not that pleasant. After that, I looked into some articles on how to build an extension and found the Chrome documentation & this article to be really informative and useful.

So I decided to build a new one because we all know from personal experience that a good User Interface is important in the sense that it allows everyone to clearly see and use the products. also, It was an excellent opportunity for me to implement the stack that I've recently learned.

“Good design is like a refrigerator—when it works, no one notices, but when it doesn’t, it sure stinks.” –Irene Au

Design

I've been going deeper into the world of UI/UX for a few months now, and I'm loving the procss.
Now, I started with a sketch.

After that, I began creating the Design in FIGMA,
screenshot of my untidy artboard

Development

Basically, Extensions are software programs, built on web technologies that enable users to customize the browsing experience.
First, let's talk about the

Tech Stack I used

HTML
CSS
JavaScript

Library I used

math.js

Now, Phases of Development

Extension Interface
Manifest File
Testing

I will explain each phase of development with relevant screenshots and code for better understanding.

1. Extension Interface

To build the extension interface, we should have a fundamental knowledge of HTML, CSS, and JavaScript. HTML (index.html) is used to build the skeleton body of our extension and we style the components and button using CSS (style.css). We use JavaScript (script.js) to giving it life, i.e, make it work to solve the equations.

So let’s dive into the first Part: The structure and design of our calculator.
In the HTML skeleton Inside Body, I’m defining a new div with a class named “button”.

<div class="button"> </div>

I place one more div, inside this div and there will be text that our button should hold is placed between these two tags. Along with the tag, I’ll be giving them an id. This id will help at the time of back-end programming. See example below

<div class="button">
<div class="inner-button">
0
</div>
</div>

&, I’ve coded the same div approx 20 times to make the basic structure of the calculator.
You can find the whole HTML code below

Let’s jump to the CSS section.

I primarily worked on these properties in order to make the calculator look nice.

background-color
Padding
Width
Text alignment
Font size
BORDER RADIUS
Box- Shadow complete CSS code for this:

Now, We will be coming to the javascript part

Until now the calculator is lifeless. We have to give it life.
So let’s dive into the backend section and make the calculator solve our problems.
Now we have to define a function, that can perform different tasks and for the calculation part I used Math.js i.e an extensive math library for JavaScript, It features real and complex numbers, units, matrices, a large set of mathematical functions, and a flexible expression parser.

Below is the complete script.js :

2. Manifest File

We have now reached the second phase in our extension development and it involves creating a manifest.json file. The manifest.json file is the only file that every extension using WebExtension APIs must contain. Using manifest.json, we specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions). We also add icons to our extension and test them in the browser to connect everything.

We set our extension name in the name attribute. We define a version number and type out a description which the users can see after loading the extension. We set our background script in place. We use a 128px icon and a default icon to be displayed on the extension bar, both designed in Figma. Whenever the user opens a new tab we want our extension page to be loaded there. This is possible because of chrome_url_overrides which overrides the default new tab layout and loads our extension home index.html. We lastly add manifest version and security policies.

Below is the complete manifest.json code:

3. Testing

Loading and Testing the extension

We open the Chrome web browser. On the top right corner customize button is represented by three vertical dots. Go to More tools -> Extensions.
Enable Developer Mode on the top left after opening the Extensions page. Then Click on Load unpacked and select the parent directory of the built extension.

Fact: While loading an unpacked extension, Chrome always looks for the manifest.json file and loads the extension using that file as a parent. Know we know the importance of manifest.json.

3. Once loaded, on the extension page, we can see our extension with the icon and description as below. Click on Details.

4. Here, we can see each and every detail about our extension which we put in our manifest.json file and the directory from which it was loaded.

5. Enable the extension and open a new tab. Voila! You should be able to see the extension up and running.

You can now see the Pascaline logo in the browser's extension bar on the top right, from which you can also launch the extension.

This brings us to the end of our development, and it was a great learning experience for me because I had never built an extension before.

Feel free to star ⭐️ the project if you found it useful -
https://github.com/wordssaysalot/Pascaline

Thanks for reading!

Let me know your thoughts and feedback in the comments section.

art of writing a good commit message

Ritesh Kumar — Wed, 21 Jul 2021 12:11:12 +0000

Hi there, In this article, I will be discussing the importance of commit messages and I'll walk you through a format that will assist you in crafting effective commit messages.

“A commit message shows whether a developer is a good collaborator.”

-Peter Hutterer, Senior Software Engineer at Red Hat

Let's start with an explanation of what a commit message is:

A commit message is a short description of the changes you've made to a file added before committing the changes. It is one of the most common ways for developers to communicate with one another & important to properly express any changes so that someone else reading it isn't left in the dark.

If you browse through a random GitHub repository, you'll frequently come across an extremely random commit message that is not descriptive and is difficult to understand.
So, It is essential that you take the time to write a proper commit message. Good commit messages are important not only for the people working on the project with you but also for you to keep track of all your commits and know exactly what changes were made during that commit.

To compose a good commit message, I will recommend using This Commit Message Style Guide

Defining a Commit Message Convention

type(scope): subject

body (optional)

footer (optional)

The commit contains the following structural elements, to communicate intent to the consumers:

Type of commit

feat - a new feature
fix - a bug fix
docs - changes in documentation
style - everything related to styling
refactor - code changes that neither fixes a bug or adds a feature
test - everything related to testing
chore - updating build tasks, package manager configs, etc

Scope of commit (Optional)

A scope MUST consist of a noun describing a section of the codebase affected by the changes (or simply the epic name) surrounded by parenthesis. Example:

Subject

This contains a short description of the changes made. It shouldn't be greater than 50 characters, should begin with a capital letter and written in the imperative eg. Add instead of Added or Adds.

Body

The body is used to explain what changes you made and why you made them. Not all commits are complex enough that they need a body, especially if you are working on a personal project alone, and as such writing a body is optional.
A blank line between the body and the subject is required and each line should have no more than 72 characters.

Footer

The footer is also optional and mainly used when you are using an issue tracker to reference the issue ID.
Good commit messages serve at least three important purposes:

To speed up the reviewing process.
To help us write a good release note.
To help the future maintainers of Erlang/OTP (it could be you!), say five years into the future, to find out why a particular change was made to the code or why a specific feature was added.

Example of a good commit message used by Udacity

feat: Summarize changes in around 50 characters or less

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of the commit and the rest of the text as the body. The
blank line separating the summary from the body is critical (unless
you omit the body entirely); various tools like log, shortlog
and rebase can get confused if you run the two together.

Explain the problem that this commit is solving. Focus on why you
are making this change as opposed to how (the code explains that).
Are there side effects or other unintuitive consequences of this
change? Here's the place to explain to them.

Further paragraphs come after blank lines.

Bullet points are okay, too

Typically a hyphen or asterisk is used for the bullet, preceded
by a single space, with blank lines in between, but conventions
vary here

If you use an issue tracker, put references to them at the bottom,
like this:

Resolves: #123
See also: #456, #789

Some more simple examples :

feat: JIRA-123 -implement new set-group api

docs: added banner in README.md

While writing a commit message, keeping these things in mind

Rules for a great git commit message style

Separate subject from body with a blank line
Do not end the subject line with a period
Capitalize the subject line and each paragraph
Use the imperative mood in the subject line
Wrap lines at 72 characters
Use the body to explain what and why you have done something. In most cases, you can leave out details about how a change has been made.

Information in commit messages

Describe why a change is being made.
How does it address the issue?
What effects does the patch have?
Do not assume the reviewer understands what the original problem was.
Do not assume the code is self-evident/self-documenting.
Read the commit message to see if it hints at improved code structure.
The first commit line is the most important.
Describe any limitations of the current code.
Do not include patch set-specific comments.

Summarizing the Commit Message Guide

type(scope): subject 
<body>
<footer>

1. Type of commit

feat:     The new feature being added to a particular application
fix:      A bug fix
style:    Feature and updates related to styling
refactor: Refactoring a specific section of the codebase
test:     Everything related to testing
docs:     Everything related to documentation
chore:    Regular code maintenance

2. Scope (optional)

Provided in parentheses after the type of commit, describing parts of the code affected by the changes or simply the epic name.

feat(claims)
fix(orders)

3. Subject

Short description of the applied changes.

Limit the subject line to 50 characters
Your commit message should not contain any whitespace errors or punctuation marks
Do not end the subject line with a period
Use the present tense or imperative mood in the subject line

feat(claims): add claims detail page
fix(orders): validation of custom specification

4. Body (Optional)

Use the body to explain what changes you have made and why you made them.

Separate the subject from the body with a blank line
Limit each line to 72 characters
Do not assume the reviewer understands what the original problem was, ensure you add it
Do not think your code is self-explanatory

refactor!: drop support for Node 6
BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.

5. Footer (optional)

Use this section to reference issues affected by the code changes or comment to another developers or testers.

fix(orders): correct minor typos in code
See the issue for details
on typos fixed.
Reviewed-by: @John Doe
Refs #133

references

Thanks for reading!

Let me know your thoughts and feedback in the comments section.

Popular GitHub repositories Every Developer Should Follow

Ritesh Kumar — Sun, 20 Jun 2021 20:07:21 +0000

GitHub is not just a version control service; it is a terrific content resource for all-things-development From free e-books and tutorials, to interview preparation material and ‘awesome’ listicles, GitHub is the go-to learning hub for Developers.
If you are one of the developers who visit GitHub quite often then greetings we have something for you, a collection of GitHub repositories that you should mark star in your favorite repository list
but it depends again on things that you want to learn or want to explore.

I've compiled a list of the most valuable repositories, I'm willing to bet you haven't come across most of them!

1. Awesome

GitHub stars: 164k+

Awesome is, without a doubt, the most popular repo that curates all topics from software development to hardware to business. It has more than 123,000 stars on Github at this moment, and one could spend days (nights) browsing it. It is my one-stop shop if I want to learn something new.

sindresorhus / awesome

😎 Awesome lists about all kinds of interesting topics

2. Free Programming Books

GitHub stars: 194k+

Despite the fact that the repository's name is Free Programming Books, it offers much more. It includes sections for free online classes, interactive programming materials, problem sets and competitive programming, podcasts, and programming playgrounds, and is available in a variety of languages.

However, the vast majority of them are programming books. And that is an amazing collection.

EbookFoundation / free-programming-books

📚 Freely available programming books

3. Build Your Own X

GitHub stars: 110k+

This incredible repository is basically a collection of lessons on how to create your own technology. There are examples of how to create a command-line tool, an operating system, a search engine, a 3D renderer, and a plethora of other things.

Have you ever considered developing your own Cryptocurrency, Database, Bots, programming language? Then this is the right repository for you.

codecrafters-io / build-your-own-x

Master programming by recreating your favorite technologies from scratch.

3. Awesome interview questions

GitHub stars: 41k+

A curated awesome list of lists of interview questions, With over 40k stars, this repository contains a huge volume of interview questions in almost every programming language and framework you can think of.

Very useful if you're preparing for an interview!

DopplerHQ / awesome-interview-questions

:octocat: A curated awesome list of lists of interview questions. Feel free to contribute! 🎓

4. Javascript algorithms

GitHub stars: 111k+

This repository contains JavaScript-based examples of many popular algorithms and data structures.

Each algorithm and data structure has its separate README with related explanations and links for further reading (including ones to YouTube videos).

trekhleb / javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

5. Public Apis

GitHub stars: 132k+

If you are a developer, then definitely you will have to deal with APIs for your application. This repository makes the developer tasks easier by presenting a list of frequently updated collections of public APIs. These APIs are free and separated into different categories to explore them easily.

This list contains a wide range of APIs. There are APIs that provide funny memes and images of cats.
However, there are some that are more helpful, such as the Gmail API or the Google Analytics API. Star mark this repository and get the benefit of it while building your application.

public-apis / public-apis

A collective list of free APIs

6. The art of command line

*GitHub stars: 92k+ *

The command line is usually overlooked by developers, yet this could help you increase your productivity and flexibility as an engineer. This repository contains useful notes and tips on using the command line when working on Linux, Windows, or macOS.

This repository also contains tips and hacks to save time while using the command line and is useful to both inexperienced and experienced users

jlevy / the-art-of-command-line

Master the command line, in one page

7. Project Based Learning

GitHub stars: 51k+

A list of programming tutorials in which learners build an application from scratch. These tutorials are divided into different primary programming languages. Some have intermixed technologies and languages.
This repository is for you if you believe in the notion of "Learning by Doing."

practical-tutorials / project-based-learning

Curated list of project-based tutorials

8. Beautiful Docs

GitHub stars: 6.4k+

It is a well-known fact that Documentation is an important asset to any software project. Writing self-documented code is one thing, but presenting it in a meaningful way is another. The author has collected those online resources that are ‘beautiful’ in terms of structure, design, usability, styling, diagrams, etc — so anyone that looks for inspiration on how to design their own documentation will find it resourceful.

matheusfelipeog / beautiful-docs

Pointers to useful, well-written, and otherwise beautiful documentation.

9. Developer roadmap

GitHub stars: 163k+

A very good developer roadmap guide was created by Kamran Ahmed. A lot of students and newbies in programming get confused about what technology they should learn and what path they should follow step by step to become a developer. He has prepared a complete chart including the technology in each category of development(frontend, backend, DevOps..) that will give you a clear understanding of what you should learn next. Bookmark this repository if you like the way he guided you to become a developer.
The repo gets updated every year to reflect changes in the ecosystem.

kamranahmedse / developer-roadmap

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

10. 30 seconds of code

GitHub stars: 77k+

This repository contains short JavaScript code snippets for all your development needs.
30 seconds of code provides free high-quality learning resources for web developers of all skill levels in the form of snippet collections in various programming languages since its inception in 2017. Today, 30 seconds of code consists of a large community of contributors and a handful of dedicated maintainers working towards creating the best short-form learning resources for software developers.

Chalarangelo / 30-seconds-of-code

Short code snippets for all your development needs

Bonus:

Design Resources for Developers

This repository has a curated list of design and UI resources, including stock images, web templates, CSS frameworks, UI libraries, tools, and more, all of which are accessible for use in your projects and apps for free.
Everything you'll need to get started with your Front-end development.

bradtraversy / design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

Awesome repositories

All of GitHub's great repositories are collected in Awesome repositories. It contains a number of helpful repositories that might aid you in future development projects or help you acquire a new skill.

0xRitesh / awesome-repositories

Useful GitHub Repos That Every Developer Should Follow

I hope you find these resources valuable.

Thanks for reading! and happy Developing!

Important git commands every developer should know

Ritesh Kumar — Sat, 05 Jun 2021 14:41:53 +0000

Since there are many various commands you can use, mastering Git takes time. However, certain commands are used more frequently than others. So, in this article, I will provide and explain the ten most often used Git commands that every developer should be familiar with.

Please note that you must be familiar with the fundamentals of Git in order to comprehend this article.
If you want to learn the basics of git and GitHub. I wrote an article on it in a previous blog.

This is a list of few commands that you can use frequently on GitHub(git bash) :

Everything starts from here. The first step is to initialize a new Git repo locally in your project root.
The git init command creates a new Git repository. It can be used to convert an existing, unversioned project to a Git repository or initialize a new, empty repository. You can do so with the command below:

git init

Git clone is a command for downloading existing source code from a remote repository (like Github, for example). In other words, Git clone basically makes an identical copy of the latest version of a project in a repository and saves it to your computer.

There are a couple of ways to download the source code, but mostly I prefer the clone with HTTPS way:

git clone <https://name-of-the-repository-link>

Branches are quite significant in the world of git. Using branches, several developers may work on the same project at the same time. We can use the git branch command for creating, listing, and deleting branches.

Creating a new branch:

git branch <branch-name>

This command will create a branch locally. To push the new branch into the remote repository, you need to use the following command:

git push -u <remote> <branch-name>

Viewing branches:

git branch or git branch --list

Deleting a branch:

git branch -d <branch-name>

This is also one of the most used Git commands. To work in a branch, first, you need to switch to it. We use git checkout mostly for switching from one branch to another. We can also use it for checking out files and commits.

git checkout <name-of-your-branch>

There are some steps you need to follow for successfully switching between branches:

The changes in your current branch must be committed or stashed before you switch
The branch you want to check out should exist in your local
There is also a shortcut command that allows you to create and switch to a branch at the same time:

git checkout -b <name-of-your-branch>

This command creates a new branch in your local (-b stands for the branch) and checks the branch out to new right after it has been created.

The Git status command gives us all the necessary information about the current branch.

git status

We can gather information like:
Whether the current branch is up to date
Whether there is anything to commit, push or pull
Whether there are files staged, unstaged or untracked
Whether there are files created, modified, or deleted.

When we create, modify or delete a file, these changes will happen in our local and won't be included in the next commit (unless we change the configurations).
We need to use the git add command to include the changes of a file(s) into our next commit.

To add a single file:

git add <file>

To add everything at once:

git add -A

Important: The git add command doesn't change the repository and the changes are not saved until we use git commit.

This is maybe the most-used command of Git. Once we reach a certain point in development, we want to save our changes (maybe after a specific task or issue).

Git commit is like setting a checkpoint in the development process which you can go back to later if needed.

We also need to write a short message to explain what we have developed or changed in the source code.

git commit -m "commit message"

Important: Git commit saves your changes only locally.

After committing your changes, the next thing you want to do is send your changes to the remote server. Git push uploads your commits to the remote repository.

git push <remote> <branch-name>

However, if your branch is newly created, then you also need to upload the branch with the following command:

git push --set-upstream <remote> <name-of-your-branch>
or
git push -u origin <branch_name>

Important: Git push only uploads changes that are committed.

The git pull command is used to get updates from the remote repo. This command is a combination of git fetch and git merge which means that, when we use git pull, it gets the updates from a remote repository (git fetch) and immediately applies the latest changes in your local (git merge).

git pull <remote>

This operation may cause conflicts that you need to solve manually.

Sometimes we need to reverse the changes we've made. There are several ways to reverse our modifications locally or remotely (depending on what we require), but we must use these commands with caution to avoid undesired removals.
We can reverse our commits in a more secure manner by using git revert. To view our commit history, we must first run git log.
Now,we just need to specify the hash code next to our commit that we would like to undo:

git revert  <hash code>

The advantage of using git revert is that it doesn't touch the commit history. This means that you can still see all of the commits in your history, even the reverted ones.
Another safety measure here is that everything happens in our local system unless we push them to the remote repo. That's why git revert is safer to use and is the preferred way to undo our commits.

When you've completely finished on your branch and everything is working well, the next step is to merge it with the parent branch. The git merge command is used to do this.

Git merge merges your feature branch and all of its commits back to the master branch. It's critical to remember that you must first be on the branch that you wish to combine with your feature branch.

For example, when you want to merge your feature branch into the master branch:
First you should switch to the master branch:

git checkout master

Before merging, you should update your local master branch:

git fetch

Finally, you can merge your feature branch into master:

git merge <branch-name>

Hint: Make sure your master branch has the latest version before you merge your branches, otherwise you may face conflicts or other unwanted problems.

If you are having trouble remembering commands or options for commands, you can use Git help.

There are a couple of different ways you can use the help command in command line:

git command -help : See all the available options for the specific command git help --all : See all possible commands

git command -help

These are the commands that I believe every developer should know in order to get things done evenly. Please let me know in the comments if you think I've missed anything important or if you think something could be done better.

Thank you for reading!

An Introduction to Git And Github

Ritesh Kumar — Fri, 21 May 2021 20:09:32 +0000

Git and GitHub are at the core of open source in today’s programming world. However, there are a lot of confusing often seem about these terms, similar yet have different meanings and uses. Let’s demystify this confusion by decoding their underlying meanings

In this article, we’ll first explain Version control Then, we’ll dig into more about Git and GitHub.

A quick aside: git is not the same as GitHub. Git is an open-source version control tool that was developed in 2005 by Linux developers; GitHub is a company that produces software that integrates with git and was established in 2008. You can use git without GitHub, but you can't use GitHub without git.

What Is Version Control?

Version control refers to the practice of tracking and managing changes to software code, and Version Control Systems refers to software tools that assist software teams in managing changes to source code over time. It allows developers to monitor and handle modifications to the code of a software project.
Version Control becomes more important as a software project increases in size. Version management enables developers to deal safely with splitting and combining.
A creator uses branching to repeat a portion of the source code (called the repository). The developer will then easily modify the section of code without disturbing the remainder of the project. When the developer’s part of the code is running well, he or she will integrate it back into the main source code and make it official. Many of these modifications are then monitored and, if necessary, may be undone.

What is Git?

Git is a commonly used Version Control System (VCS) that allows you to keep track of all the code changes. This means you can simply roll back to a previous update if a new function causes problems.

Git, on the other hand, isn't just any VCS; it's a Distributed VCS. This means that each project partner would have a record of the modifications made to their own computer. As a result, people will focus on various aspects of the project without having to connect with the website that hosts the remote version. This is extremely effective, and any modifications made to the project can be quickly merged with the remote copy.

What exactly is GitHub?

Git is at the heart of GitHub, a commonly used version management tool. It allows you to host a remote version of your project, which all partners can use. Any GitHub user, not just members of your team, will add to your code (that is of course if you choose to accept the changes made).

GitHub is a social forum where you can discover open-source software and its source code.
You can work together on incredible projects and share your contributions! This is the most effective open-source framework available.
Additionally, anyone can sign up and host a public code repository for free, which makes GitHub especially popular with open-source projects.

Git vs Github

What’s the difference between Git and GitHub then?

It's equivalent to asking for Email vs. Gmail. Git is a version control system, and GitHub is a cloud-based hosting service that helps in managing Git repositories.

Exploring The GitHub Interface

To give you a basic understanding of what the GitHub interface looks like, here’s the freeCodeCamp source code hosted at a GitHub repository:

From here, you can view the various branches that are being worked on, as well as when someone made a commit (this is kind of like “saving” a file). Depending on how a repository is set up, you also might be able to create your own branch and make your own commits there.

Once you've made the modifications, you can add the code to a branch by making a pull request. A pull request is essentially a request to the branch's maintainer to include your code. It also allows the person to see exactly what changes you've made to the code.

If you were to make permanent changes to any or more of the freeCodeCamp source code on your account, you might fork it by pressing the Fork button (a fork is equivalent to a branch in concept, but a fork is more permanent).

If you want to learn more about Git and GitHub :
Git Documentation
GitHub’s Hello World guide
Git Handbook
MDN Web Docs