DEV Community: Punith K

Git: Two ways to merge changes to the base branch from the feature branch

Punith K — Mon, 25 Jan 2021 07:18:24 +0000

Image credit: https://pixabay.com/

In this video tutorial, I'll explain 2 ways to merge changes to the base branch from the feature branch.

Let's learn together 2 ways to merge the changes to the base branch from the feature branch.

Normal merge and
Using the --squash option to squashing multiple commits into a single commit.

And let's also learn 2 strategies used by git to merge the changes based on the base branch changes.

Fast-Forward strategy and
3-way merge strategy

Please leave comments if you want me to cover a specific topic in the next tutorial.

How to create fake API server for react apps with MirageJS

Punith K — Fri, 16 Oct 2020 09:23:54 +0000

If you are building a web app using React, Vue, Angular, or with any of your favorite front end framework, you need to talk to backend APIs for CRUD operations. Let's say you want to build a prototype of the app quickly, but you don't have the backend APIs ready yet, what will do in this case? The best way is to have mock data from a fake server.

How to create mock data, we have so many libraries that can help us achieve this goal, but in this post, I'm considering using miragejs with React.

Why am I considering this while there are other popular libraries to consider, because of 2 reasons, the first one, you don't have to create/spin another server to load your data for eg: http://localhost:3001 where your mock server runs, but mirage runs in the same development server and lets you access the data like you are working with real APIs, and the second one, you can use the mirage as your API endpoint to write end-to-end tests using Cypress, I didn't even think about other options when I get 2 benefits just creating a mock server with mirage and it offers a great developer experience in my opinion.

You can use it to mock your API endpoints with react-testing-library for writing unit test cases too. Please refer the documentation for more details.

Let's get started, create a react app using create-react-app, and add this to index.js. Runs the mock server only during development.

// index.js
import React from "react";
import ReactDOM from "react-dom";

import { makeServer } from "./server";
import UsersLayout from "./users-layout";

// It creates the mock server only in development mode
if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" });
}

const App = () => <UsersLayout />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Create server.js where the real magic happens with less code,

// server.js
import { createServer, Model } from "miragejs";

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { id: 1, name: "Bob Jhon" });
      server.create("user", { id: 2, name: "Alice" });
    },

    routes() {
      this.namespace = "api";

      this.get("/users", (schema) => schema.users.all());

      // To increment the id for each user inserted,
      // Mirage auto creates an id as string if you don't pass one
      let newId = 3
      this.post("/users", (schema, request) => {
        const attrs = JSON.parse(request.requestBody);
        attrs.id = newId++

        return schema.users.create(attrs);
      });

      this.delete("/users/:id", (schema, request) => {
        const id = request.params.id;

        return schema.users.find(id).destroy();
      });
    },
  });

  return server;
}

seeds() method will seed our user model with some initial data so that we can start using it immediately, you can leave it empty if you want to start with an empty user collection.

Define all your API routes in the routes() method and you can define your API namespace with this.namespace = 'api' so that you don't have to repeat it in all the routes like for eg: this.get('/api/users'). Here I've three routes to GET, POST, and DELETE a user.

You need to create a model with the help of mirage Model and with that, you can access data from schema, if you notice carefully, I've created a user model with the name user but accessing it as schema.users.all(), mirage does create the pluralized collection for us looking into the name of the model, its good practice to keep singular names for your models.

Mirage offers other methods on the schema to add and delete an item from the collection, see delete, and post API routes in the code example above.

That's it, let us write React side of the code so that we can consume the mirage's fake API with fetch or axios, I'm using fetch here.

// users-layout.js
import React, { useState, useEffect, useCallback } from "react";
import { useFetch } from "./use-fetch";

export default function UsersLayout() {
  const [users, setUsers] = useState([]);
  const { data, loading: userLoading, error: userError } = useFetch(
    "/api/users"
  );
  const [name, setName] = useState("");
  const [isUpdating, setIsUpdating] = useState(false);

  useEffect(() => {
    if (data) {
      setUsers(data.users);
    }
  }, [data]);

  const onAddUser = useCallback(
    async (e) => {
      e.preventDefault();
      try {
        setIsUpdating(true);
        const res = await fetch("/api/users", {
          method: "POST",
          body: JSON.stringify({ name }),
        });

        const data = await res.json();
        setUsers((users) => users.concat(data.user));
        setIsUpdating(false);
        setName("");
      } catch (error) {
        throw error;
      }
    },
    [name]
  );

  return (
    <>
      <form onSubmit={onAddUser}>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
        <button type="submit" disabled={isUpdating}>
          {isUpdating ? "Updating..." : "Add User"}
        </button>
      </form>
      {userError && <div>{userError.message}</div>}
      <ul>
        {!userLoading &&
          users.map((user) => <li key={user.id}>{user.name}</li>)}
      </ul>
    </>
  );
}

And a bonus in the above code, I wrote a custom hook to fetch the data useFetch from any API endpoints. Let's look at the code for useFetch

// use-fetch.js
import { useEffect, useState, useRef } from "react";

/**
 * Hook to fetch data from any API endpoints
 */
export const useFetch = (url) => {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null,
  });
  const isCurrent = useRef(true);

  useEffect(() => {
    return () => {
      isCurrent.current = false;
    };
  }, []);

  useEffect(() => {
    setState((state) => ({ ...state, loading: true }));
    const getData = async () => {
      try {
        const res = await fetch(url);
        const data = await res.json();

        // If calling component unmounts before the data is
        // fetched, then there is a warning, "Can't perform
        // React state update on an unmounted component"
        // it may introduce side-effects, to avoid this, useRef to
        // check for current reference.
        if (isCurrent.current) {
          setState((state) => ({
            ...state,
            data,
            loading: false,
            error: null,
          }));
        }
      } catch (error) {
        setState((state) => ({ ...state, error: error }));
      }
    };

    getData();
  }, [url]);

  return state;
};

That's it, with a little effort you are able to mock the data with a fake API server using miragejs. And mirage scales well with large applications too, I've battle-tested this and hope you will find it useful. Give a try on your next project. This is going to save a lot of time during development.

I'll write a follow-up article on how I used miragejs as a backend for Cypress end-to-end tests, until then bye, bye.

How to manage a complex UI state with useReducer hook instead of redux

Punith K — Sun, 04 Oct 2020 13:33:08 +0000

If you are the one using the most popular frontend library React to build your UI, you might have definitely heard about props and state which triggers the UI update as and when there is a change to either of them; the state could be a local state(synchronous) or network state(asynchronous).

Managing the state in the React is always been a talk of the down with so many libraries in hand such as, redux, mobx, recoil, and the list goes on, let me explain to you how we can leverage this without adding any additional dependency to the app and reduce the bundle size of the app.

If you are using React for quite a while (at least from React 16.3) you might have heard about one of the most popular library Redux to manage the complex UI state, because of its predictable state and support for async state management with the help of redux-thunk and redux-saga libraries.

There are plenty of libraries that you can use it as middleware in redux and extend the redux capabilities. If you are setting up the redux from scratch you need to have boilerplate code set up before you start working on it. Recent versions of redux offer hooks-based API to reduce some of the boilerplate but still, you need to know about actions, reducers, middlewares, and so on.

If you are using the latest React or React 16.8 or above, you might already be using one of the most popular features introduced in react, hooks. Hooks help you write the components without writing classes and manage the state of the react app with ease.

In this post I'll explain the usage of useReducer hook with the help of other hooks, such as useEffect, useMemo, useRef, and useState to manage the complex UI state without using the redux. This post assumes that you all know the basics of hooks and how to use them. If you have not used it before I recommend you all to read the official documentation for getting started.

Let's assume that we are building a simple book library CRUD app, where you can add, delete, and manage your library based on your interests. I'm using one of the React UI patterns used widely with redux, container, and presentational components pattern to demonstrate this example, this can fit any pattern you are already using.

books-container.js

import React, {useReducer, useMemo, useEffect, useRef} from 'react'
import _ from 'lodash'
import BooksLayout from './books-layout'

// Extract this to utils file, can be reused in many places
// Same as that of redux's bindActionCreators method
const bindActionCreators = (reducerMap, dispatch) =>
  _.reduce(
    reducerMap,
    (result, val, type) => ({
      ...result,
      [type]: payload => dispatch({type, payload}),
    }),
    {}
  )

// Initial state of the app
const initialState = {
  books: {}, 
  // To keep track of progress of a API call and to show the 
  // progress in the UI
  bookReadState: null
  bookDeleteState: null
  bookUpdateState: null
}

const reducerMap = {
  setBooks: (state, books) => ({
    ...state,
    books,
  }),
  updateBook: (state, book) => ({
    ...state,
    books: // merge state.books with updated book details
  },
  deleteBook: (state, book) => ({
    ...state,
    books: // update the state.books with deleted book
  }),
  setBookReadState: (state, bookReadState) => ({
    ...state, bookReadState
  }),
  setBookUpdateState: (state, bookUpdateState) => ({
    ...state, bookUpdateState
  }),
  setBookDeleteState: (state, bookDeleteState) => ({
    ...state, bookDeleteState
  }),
}

const useService = ({id, actions}) => {
  // abortController can be used to abort the one or more request
  // when required, can also be used to abort when multiple requests are made
  // within a short period, so that you don't make multiple requests
  const abortController = useRef(new global.AbortController())

  actions = useMemo(
    () => ({
      ...actions,
      readBooks: async () => {
        try {
          const data = await readBooks({
            fetchCallback: actions.setBookReadState})
          actions.setBooks(data)
        } catch(error) {
          // error handling
        }
      },
      updateBook: async book => {
        try { 
          const data = await updateBook({book, 
            fetchCallback: actions.setBookUpdateState})
          actions.updateBook(data)
        } catch(error) {
          // error handling
        }
      },
      deleteBook: async id => {
        try {
          const data = await deleteBook({id, 
            fetchCallback: actions.setDeleteReadState})
          actions.deleteBook(data)
        } catch {
          // error handling
        }
      },
    }),
    [actions]
  )

  useEffect(() => {
    const controller = abortController.current
    // Invoke the actions required for the initial app to load in the useEffect.
    // Here I'm reading the books on first render
    actions.readBooks()

    return () => {
      controller.current.abort()
    }
  }, [actions])

  return {actions}
}

const reducer = (state, {type, payload}) => reducerMap[type](state, payload)

const BooksContainer = props => {
  const [state, dispatch] = useReducer(reducer, initialState)
  const actions = useMemo(() => bindActionCreators(reducerMap, dispatch), [])
  const service = useService({...props, state, actions})

  return (
    <BooksLayout
      {...state}
      {...service}
      {...props}
    />
  )
}

export default BooksContainer

books-layout.js

import React from 'react'

const BooksLayout = ({books, actions, bookReadState, ...props}) => {
  return (
    <>
    {bookReadState === 'loading' ? <div>Loading...</div> : 
      {books.map(book => (
          // UI Logic to display an each book
          // button to click to delete 
          // call actions.deleteBook(id)
          )
        )
      }
    }
    </>
  )
}

export default BooksLayout

As you can see in the above example you can control the state of your app in the container and don't have to worry about connecting the state to each component separately as you need to do in redux.

In the above example, I kept all the code in a single file for the demonstration purpose and parts of the code were not complete, replace the code with your abstractions for network calls, business logic, and UI logic based on your needs. You can improve this code by separating the logic based on your needs for more reusability across the app as the DRY(Don't Repeat Yourself) principle suggests.

Redux shines and scales well for complex apps with a global store. In this article, I'm trying to explain, how you can leverage the useReducer in place of redux to achieve the global state management with less code, and no need to worry about adding new packages to the app and we can reduce the bundle size of the app significantly.

Please leave a comment and follow me for more articles.

How to use git rebase effectively

Punith K — Sat, 12 Sep 2020 11:19:34 +0000

As I've promised in my previous post git tricks that
I'm going to explain to you the intermediate/advanced concepts that most of the developers are not using it frequently or not aware of.

I'm going to talk about the rebase command in this post which is used relatively less by developers.

Let's get started,

Rebasing

Technically, rebasing helps to combine or move the commits on top of the base branch, so that the history of the current branch is up to date with the base branch (master branch - most of the time).

Rebasing can be helpful to squash the commits into one commit and can also be used to split into multiple commits if you want the clean history of each fix that you want to track.

Let me explain you the basics of rebasing with the help of the below diagram

    B---C---D fix/align-div-vertically
   /
--A---E---F master

Let's assume that the letters (A-F) indicate the commit hashes. The branch fix/align-div-vertically was created on top of commit hash A from the master branch and you have continued working on it, adding commits with the hashes B, C, and D for a couple of days (let's assume you commit once a day). Now you have fixed the issue and want to merge the changes to master, creating a pull request (PR) as a single commit; it can be achieved with the help of squashing which I'm going to explain in the next section.

Meanwhile, the master branch has been updated by your fellow developers with the commits E and F as shown in the diagram, before you want to create a PR to the master branch you need to have the all the commits of your branch to be on top of master's latest commit, F, to have the all the commits of the master on your branch we need to make use of rebase git command.

After the rebase, the commit-tree should look like this,

            B---C---D fix/align-div-vertically
           /
--A---E---F master

Before starting the rebasing you must checkout to master and pull the changes from the remote so that your local master updated with the remote repository.

$(fix/align-div-vertically) git checkout master 

$(master) git fetch -p 

$(master) git pull origin master

Branch point is enclosed within the parenthesis, for eg, $(master) indicates that we are currently in the master branch

The above command can be executed with less typing the help of aliases, check out my previous blog git tricks for more info, it would look like

$(master) git cm && git f && git pom

Using short-circuiting (&& between multiple commands) works with MacOS and in Linux distribution, if you are on windows make sure you execute each command separately.

For the remainder of this article I'll use full commands to avoid confusion with aliases and to deviate from what I want to explain here.

Once you updated your local master branch with remote, checkout to fix/align-div-vertically and execute the following command

$(master) git checkout fix/align-div-vertically

$(fix/align-div-vertically) git rebase master

The above command will look up the commit history of the current branch and rebases with the master commits so that the current branch is on top of the master's last commit. While rebasing you may get merge conflicts if any of the files changed by you have been updated by other developers and git was not able to merge them automatically, you end up with merge conflicts you may need to resolve manually or with the help of kdiff3 a visual tool to resolve conflicts.

Rebase applies each commit of your current branch B, C, and D one at a time, while merging you may encounter git stopping at each commit, at most 3 times in this case because we have 3 commits in fix/align-div-vertically branch; to resolve merge conflicts if there are any.

Git CLI is intelligent enough to resolve most of the conflicts for you, there were the times when git was not intelligent enough to resolve all the merge conflicts, during my initial days I had to manually resolve most of the merge conflicts for more files than with the latest Git CLI, we have a more robust CLI now to deal with most of the merge conflicts.

If it stops at each commit you need to resolve merge conflicts and execute the below command to continue the rebasing(at most 3 times or maybe only once if you don't have any merge conflicts)

$(fix/align-div-vertically) git rebase --continue

After successful rebasing, if you check git log, history would look like this,

$(fix/align-div-vertically) git log --oneline -10
# commit history should look like this
D Commit message-d
C Commit message-c
B Commit message-b
F Commit message-f
E Commit message-e
A Commit message-a

You all know how the commit hash looks, it shows the first 7 chars in hexadecimal format, for eg, 62ef387

If you think you can't resolve all the merge conflicts or confused and want to do it later, you can abort the whole rebase process with the help of

$(fix/align-div-vertically) git rebase --abort

Squash commits into a single commit using interactive rebase

If you don't want rebase to stop at each commit if you get any merge conflicts and want it to stop only once during the rebase process, you can squash all the commits into one in your fix/align-div-vertically branch by squashing them using interactive rebase before rebasing with the master.

Interactive rebase can be done as follows, with option --interactive or -i in short,

$(fix/align-div-vertically) git rebase -i A

Here commit hash A is considered because we want to squash all the commits in the current branch to a single commit considering commit hash A as a base so that we are keeping the B commit as the base which is the first commit on top of master's commit hash A

It opens another window, by default it opens a vi/vim editor, you must be aware of switching modes(ESC) and how to insert(i) the text and save the content and quit(:wq), you can set your favorite visual text editor as a default one with the help of git config --global core.editor (please refer the git documentation) if you are not a big fan of vi/vim editor.

The content of the interactive rebase would look like this, Git CLI version used is 2.26.2 at the time of writing this post

pick B Commit message-b
pick C Commit message-c
pick D Commit message-d

# Rebase A..D onto A (3 commands)
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
# f, fixup <commit> = like "squash", but discard this commit's log message
# x, exec <command> = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with 'git rebase --continue')
# d, drop <commit> = remove commit
# l, label <label> = label current HEAD with a name
# t, reset <label> = reset HEAD to a label
# m, merge [-C <commit> | -c <commit>] <label> [# <oneline>]
# .       create a merge commit using the original merge commit's
# .       message (or the oneline, if no original merge commit was
# .       specified). Use -c <commit> to reword the commit message.
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#

If you check the order of commits listed in the vi editor, it listed in the order you committed, B, C, and D in the current branch but it doesn't list commit hash A because that is the base to squash into one.

Content in the editor gives a guide to what each command you can use and what they do, pick before each commit hash is added by git by default, you need to choose from available options, reword, squash, fixup and so on, see the commented section in the editor.

In this case, we need to use squash or s in short; the commits C and D by picking B as base commit, after changing the pick to squash for commits C and D it should look like this,

pick B Commit message-b
squash C Commit message-c
squash D Commit message-d

# And the remainder of the content, don't change anything, leave as it is.

Once done, save and quit the editor, git may stop at each commit if there are any possible merge conflicts (its very rare to get merge conflicts, if you don't merge with master every day using merge. There are drawbacks using git merge, I'll talk about it in another post if you want it). Make sure you use rebase instead of merge to have a clean history on your branch.

You know what should be done if rebase stops and asks you to resolve conflicts

$(fix/align-div-vertically) git rebase --continue

Once rebase is successful, it opens another window asking for a new commit message for the squashed commit, you can update or leave the commit message as is, once done, you will have a single commit with commit hash, let's say B', not B.

Be aware that the git rebase will re-write the commit history once it is successful, you won't be able to see the same commit hash as that of B once you squashed C, D and B into one commit, that is why I represented it as B' in the below diagram

If you want to keep the commit message for B' like that of B's commit message for a squashed commit, replace squash with fixup or f in short, it would look like this, once rebase is successful, it will not open another window asking for a commit message.

pick B Commit message-b
f C Commit message-c
f D Commit message-d

# And the remainder of the content, don't change anything, leave as it is.

Now the commit tree will look like this, still, you haven't rebased with the latest master commit yet to see on top of the latest commit hash F

    B' fix/align-div-vertically
   /
--A---E---F master

Once successful, you can go ahead and rebase with the master so that you are top of the master's latest commit hash, F.

$(fix/align-div-vertically) git rebase master

Make sure you have switched to master branch and pulled the latest changes from remote to local master branch before rebasing with the master, I've mentioned this already in the top.

Now during the rebase with the master, it stops only once to resolve merge conflicts if there are any because we have a single commit in our branch fix/align-div-vertically.

Please note that we can also pass the master branch to interactive rebase as a base while squashing commits, but it needs a bit more careful thoughts or actions that you should be aware of. Don't pull the changes for the master branch before you want to squash, so that your local master's commit hash still points to A, after pulling the remote changes your local master will have commit hash F.

$(fix/align-div-vertically) git rebase -i master

Now you can pass master as param instead of commit hash A while doing the interactive rebase.

Once done, you go back to master, pull the changes from remote, and rebase with your branch.

There is a way to split a single commit into multiple commits using interactive rebase which is not the most wanted feature for any developers in my opinion and I never encountered a situation where I needed to use that feature at least once in 6 years of experience but I did use squshing over thousands of times.

As I've mentioned, git rebase will re-write the complete history and you can't go back through history to see/check what you have coded or committed part of each commit, B, C, or D, don't worry git provides another powerful tool reflog to get back the history or reset the history in your local branch as it was before squashing multiple commits into one. Please note that it is only possible if you have the locally copy un-altered meaning not deleted, once you have merged your changes to master creating a PR. You don't have to worry if you have deleted the branch in GitHub UI but you have the local copy and still have the local branch in your file system undeleted.

I'll explain how you can do that in reflog in the next post. If you want it in less explained or in the raw form you can access the content in my github-repo but it is the hand note I use every day and doesn't have the explanation that I'm writing in the blogs and haven't given much attention to typos and grammar. It can be a reference for you as well, star it if you find it useful and it has other useful content too, please share it with your friends.

This is getting bigger already and has explained so many things about rebase, please give a try, if you have not tried it before. This will really save a lot of time.

That's it for now. Please leave a comment and share it with your friends if you find it useful. Please let me know if you want me to cover any topic related to git or front/back end related stuff.

Happy Coding and keep smiling.

Git CLI tips and tricks to be more productive

Punith K — Tue, 08 Sep 2020 09:34:45 +0000

If you are a software developer you must be aware of the most popular version control system used git. I use git CLI for my day-to-day developer tasks, few prefer GUI clients such as Sourcetree over CLI.

In this post, I'm going to explain to you the useful commands that I've been using for years and have benefited a lot to be productive.

Let's get started,

Checkout to last checked out branch

Let us say you have created a fix-payment-bill-issue branch from the master branch to fix a bug and want to switch to the last branch you were in. This will be useful when you don't remember the branch name that you have checked out last time.

$ git checkout -

Check whether the current branch is merged with the targeted branch

This will be useful to know whether your changes were merged with the targeted branch.

  $ git branch --merged <targeted-branch>

Copy the files from another branch without switching the branch

Copy a file from another branch without switching the branch, make sure that the file is committed in another branch before copying it.

  $ git checkout <target-branch> -- <complete/path/to/file.js>

Search for a particular text in the commit message

Search git log with a particular text string, it lists all the commits matching the string

  $ git log -S'<search-string>'

Add the modified and uncommitted files to the previous commit

Add the modified and uncommitted files to the previous commit without changing the commit message.

  $ git commit -a --amend -C HEAD

Remove the branches that are deleted from remote in the local copy

   $ git remote prune origin

   $ git fetch -p

Aliases

git provides a feature called aliases, which helps you to define aliases for the list of commands you use more frequently and help you get the work done faster instead of typing out the whole commands in the command line.

Print the last 15 commits with less info

  $ git config --global alias.l15=log --oneline -15

Use --local option instead of --global to apply these aliases to the individual repo.

Fetch the changes from the remote, it removes any remote-tracking references that no longer exist on the remote.

  $ git config --global alias.f=fetch -p

List all the modified files in the current branch, it will give you a holistic picture of which files are committed before pushing to the remote repo.

  $ git config --global alias.list-files=show --pretty="" --name-only HEAD

Sort all the branches that you have created in descending order with author name and other details. Refer documentation to customize the fields you want to display.

  $ git config --global alias.sort-branch=!"git for-each-ref -- sort=-committerdate refs/heads --format='%(HEAD)%(refname:short)|%(committerdate:relative)|%(subject)'|column -ts'|'"

If you delete the cloned copy after a feature/bug is completed and clone the fresh copy each time you work on a new feature/bug, the above alias is of no use. Prefer using the single cloned copy, create as many features, or bug fix branches in the same local copy so that it is easy to look back on history to see which fix/feature went when.

Other useful aliases

  # pull changes from master
  $ git config --global alias.pom=pull origin master/main

  # Rebase with master
  $ git config --global alias.rbm=rebase master

  # To get the list of all the global configs for the machine
  # Change it to --local to see a local configuration
  $ git config --global alias.config-list=config --global --list

  $ git config --global alias.cl=checkout -

Use the created alias as follows, git command before the alias name is mandatory

  $ git f

If you are on macOS or Linux distribution, you can combine more than one command with short-circuiting to execute the commands sequentially.

  $ git cm && git f && git pom && git cl && git rbm

Above command checks out to the master branch from the current branch, then fetches the remote changes, then pulls the changes from master and merges with the master, then checkout to the last branch point you were in, and finally releases the master changes with the current branch.

I recommend you to type the complete commands until you are familiar with them so that you won't forget them because you have aliases defined.

Hope this will help you learn a few git tips and tricks and increases your productivity over time.

Please leave a comment if you want me to cover the basics of git or any other topic related to git. Follow me for more technical content related to JS, React, NodeJS, and other libraries or tools.

Happy coding.