{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/abhimanyu-singh-rathore/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"51149b1a-0e78-555a-a74e-01bd7e137dfa","html":"

Github is great, as you may already know.

\n

But, did you ever think to make your profile attractive for potential employers, followers, recruiters, and visitors?

\n

Let's make a better version of it.

\n

Github Profile Image Frame

\n

It's up to you to decide how you want this frame — photo-less, cartoon avatar, or best explaining image.

\n

For the best image, take a quality click; quality means not blurred, perfect lighting, and good posture.\nIf someone looks at the photo, it shall explain your personality.

\n

Github Profile Page

\n

Github has a feature called README if you do not know already.

\n

Check out some listing of awesome GitHub profiles.

\n

To start this, first, you need to create a project that is the same as your GitHub username.

\n

Example: My user name is abhir9, and I need to create a repo with the same name abhir9 with a README.md file.

\n

This README.me will act as the profile page: abhir9

\n

It is the actual README file created using a repo with my GitHub username: abhir9

\n

Here you can add your quotes, hello statement, greetings, etc. It is connected to the viewer on your behalf.

\n

So write a short paragraph or a brief story to introduce yourself.

\n

There are some apps from contributors that extract the information based on your profile name and share stats and charts.

\n\n

Many other online apps can be used per your need — e.g., how you want to decorate your profile page.

\n

Github Pinned Repos

\n

Github allows you to pin up to 6 repos.

\n

Try to pin the best of your projects' repos. Mostly, people do visit these repos if they land on your profiles.

\n

Greeny Contributions

\n

There is a heat map that represents your contributions.

\n

Heat map graph will automatically generate as per your contributions. Try to keep it greener by contributing usefully to your favorite projects.

\n

README for Every Project

\n

Whether it's a minor or significant project, add a well-descriptive README file. It helps anyone clearly understand what your project does and how they can contribute if they want to.

\n

Format it in a better way; if you don't know very much about Markdown format, you can use an online tool like Pandao

\n

You can use images, screenshots, gifs, resources list, contribution guidelines, license, etc.

\n","frontmatter":{"title":"How to Build Your Github Profile","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"February 28, 2022","updated_date":null,"tags":["Github"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/91552ab64061624f85043adb83cc0973/ee604/index.png","srcSet":"/static/91552ab64061624f85043adb83cc0973/69585/index.png 200w,\n/static/91552ab64061624f85043adb83cc0973/497c6/index.png 400w,\n/static/91552ab64061624f85043adb83cc0973/ee604/index.png 800w,\n/static/91552ab64061624f85043adb83cc0973/f3583/index.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/build-your-github-profile/"}}},{"node":{"id":"70a76127-98dc-5ec2-bf52-0dc9d91965ac","html":"

There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them.

\n

React-Figma

\n

This is a Renderer for Figma. It can use React components as a design source.

\n

Sample code with react-figma:

\n
import * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n    return (\n        <Page name="My Resume" isCurrent>\n            <View>\n                <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} />                <Text style={{ color: 'white' }}>Hi, There</Text>\n            </View>\n        </Page>\n    );\n};
\n

Nowadays, Figma is the most popular design tool, similar renderers available as well: react-sketchapp for Sketch, react-xd for Adobe XD.

\n

React Hardware

\n

A device like Arduino can be operated by React components.

\n

Let's checkout demo code :

\n
import React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n  const [ledStage, setLedStage] = useState(false);\n\n  useEffect(() => {\n    setInterval(() => {\n      setLedStage(prev => !prev);\n    }, 2000);\n  }, []);\n\n  return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);
\n

Ink

\n

Another React solution for CLIs. It allows you to run, build and test your CLI output through components:

\n

The code of the demo:

\n
const Raiser = () => {\n  const [i, setI] = useState(0);\n\n  useEffect(() => {\n    setInterval(() => {\n      setI(prev => prev + 1);\n    }, 200);\n  }, []);\n\n  return <Color>\n    Increased by {i} \n\t</Color>;\n}
\n

Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc.\nreact-blessed is one of the similar libraries.

\n

react-three-fiber

\n

This is a great React renderer for threejs on the react-native and web.

\n

Let's see a sample code:

\n
import ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n  const Ref = useRef()\n  const [hover, setOnHover] = useState(false)\n  const [enable, setEnable] = useState(false)\n\n  useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n  return (\n    <Ref\n      {...props}\n      ref={Ref}\n      scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n      onClick={(e) => setEnable(!enable)}\n      onPointerOver={(e) => setOnHover(true)}\n      onPointerOut={(e) => setOnHover(false)}>\n      <boxBufferGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n    </Ref>\n  )\n}\n\nReactDOM.render(\n  <Canvas>\n    <pointLight position={[10, 10, 10]} />\n    <MyFrame position={[-3.2, 0, 0]} />\n    <MyFrame position={[2.2, 0, 0]} />\n  </Canvas>,\n  document.getElementById('root')\n)
\n

The library has a great ecosystem along with packages such as react-three-flex ,react-xr, react-postprocessing , etc.

\n

react-nil

\n

A renderer for React that render nothing.

\n
import React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n  const [active, set] = useState(false)\n  useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n  return null\n}\n\nrender(<MyComponent />)
\n

It provides you kind of high-level abstraction to Node.

\n

react-docx

\n

Another reconciler for DOCX.js.

\n

Let's understand with a sample code:

\n
renderAsyncDocument(\n  <section>\n    <paragraph heading={Docx.HeadingLevel.HEADING_1}>\n      This is a sample paragraph with paragraph tag\n    </paragraph>\n    <p>      This is a sample paragraph with P tag</p>\n    <p>\n      <t>this is for textrun</t>\n    </p>\n    <p>\n      <img\n        src="base64...."\n        width={200}\n        height={200}\n      />\n      <href\n        src="http://localhost:8080"\n        label={"image n links label"}\n      />\n    </p>\n    <Component text="can try componets in this way of course, like react!">\n    </Component>\n  </section>\n).then((doc) => console.log(doc));
\n

Also, you can checkout react-pdf and redocx for a similar purpose.

\n

Can visit this Github Repo for a curated list of react renderers.

\n","frontmatter":{"title":"React renderers, react everywhere?","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"June 23, 2021","updated_date":null,"tags":["JavaScript","React","Renderer"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png","srcSet":"/static/3e300a00ec9a7919e0e181600a6fc755/69585/react.png 200w,\n/static/3e300a00ec9a7919e0e181600a6fc755/497c6/react.png 400w,\n/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png 800w,\n/static/3e300a00ec9a7919e0e181600a6fc755/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/react-renderer/"}}},{"node":{"id":"50d1d230-39f5-5a37-a507-89d54b49acda","html":"

Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code and set the priority loading of the code snippet.

\n

But how do we set the priority or load them whenever required?

\n

1. React.lazy()

\n

Using this we can set code priority to the lower or it will load only whenever required. So how to do that? it's easy, let's understand through an example.

\n
 //generally approach to import Component\n import Blog from './BlogComponent';
\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));
\n

2. React.Suspense()

\n

Once the component is set for a lazy load then we need to set some kind of fallback option as well, till that code is rendered. This fallback option either could be a loader icon, screen, image, etc.

\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));\n\nfunction AppComponent() {\n  return (\n    // Displays <LoaderSpinner> until BlogComponent loads\n    <React.Suspense fallback={<LoaderSpinner />}>\n      <div>\n        <BlogComponent />\n      </div>\n    </React.Suspense>\n  );\n}
\n","frontmatter":{"title":"Code spliting in React via lazy and suspense","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"May 13, 2021","updated_date":null,"tags":["React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png","srcSet":"/static/12ea532cdd9f0017a02bfb74d888bba7/69585/react.png 200w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/497c6/react.png 400w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png 800w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/react-code-splitting-with-lazy-suspense/"}}},{"node":{"id":"efdddb7e-36bc-564c-b3e8-7f39a6811ca5","html":"

Recoil js is another state management library for React.

\n

Though we already have Redux. Mobx, Context, but here we got a new light entry in the community.

\n

Why I am saying light you will figure it out at the end of this blog.

\n

Why Recoil

\n\n

Recoil concepts

\n

There are two major concepts:

\n
    \n
  1. Atoms
    2. \n
  2. Selectors
    3. \n
\n

Something new? Don't worry will understand this quickly.

\n

Atoms

\n

This is similar to how we use the useState hook in react. If you are new to react hooks, checkout react hooks guide.

\n

e.g.:

\n
 const [age, setAge] = useState(0);
\n

age : this will be used for state variable declaration.\nsetAge :this will be used for state variable updations.

\n

1. Let's start with binding root app with Recoil

\n

Now you need to make a few alterations in your app's root level, like the below snippet.

\n

RecoilRoot will behave like a global context provider that will share the global state to your app tree.

\n

Now update your older code snippet.

\n
ReactDOM.render( <AppPage />, document.getElementById("root"))
\n

to

\n
import { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n    <AppPage />\n </RecoilRoot>, document.getElementById("root"))
\n

2. Set the Atom

\n

Recoil calls this part as atom, where we set the global key, value.

\n
import { atom } from "recoil";\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});
\n

Now this atom will be accessible throughout the app.

\n

3. use the atom

\n

Now update your older code snippet.

\n
 const [age, setAge] = useState(0);
\n

to

\n
import { useRecoilState } from 'recoil'\nconst [ageState, setAge] = useRecoilState(age);
\n

For a Larger view, here is Full Code

\n
import { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}
\n

Quite easy. Isn't it?\nNow let's move to another part selectors.

\n

Selectors

\n

This is similar to how Redux manages states.

\n

if a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors.

\n

1. set the selectors

\n

In the below example, we are getting isChild value from age key, then we can directly use selector instead of adding a new key or atom.

\n
import {selector} from 'recoil'\n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});
\n

2. use the selectors

\n

Now will use the above-mentioned selector.

\n

below code snippet use age value to isChild.

\n
  const [ageState, setAge] = useRecoilState(age);\n\n  const value = useRecoilValue(isChild);
\n

For a larger view, here is Full Code

\n
import {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});\n\nexport const AgeCalculator = () => {\n    const [ageState, setAge] = useRecoilState(age);\n   const value = useRecoilValue(isChild);\n}
\n

That's all, Milord.

\n

Conclusion

\n

I hope you got why I am saying this as light.

\n

Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community.

\n","frontmatter":{"title":"What is recoil.js and how it is managing in react?","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"April 30, 2021","updated_date":null,"tags":["JavaScript","React","Recoil"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f37a15f3f8cda8461c5455bdd2895e0c/ee604/react.png","srcSet":"/static/f37a15f3f8cda8461c5455bdd2895e0c/69585/react.png 200w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/497c6/react.png 400w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/ee604/react.png 800w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/recoiling-the-react/"}}},{"node":{"id":"43de49ea-9c68-55fd-b5cc-3cb805cb98f5","html":"

How Git Local Repository Works

\n

Let's understand how git set up a local repository\nOnce we initialize or clone any git project that will set up a local project environment.

\n

that whole environment will look like the below picture

\n

\n \n \n

\n

Project Folder: The main folder consists of a workspace and local repository

\n

Work Directory: Inside Project Folder where we actually work,  we keep all files and perform many operations like addition, update, deletion of files

\n

Local Repository: Here we don't actually change anything, this is handled automatically by git. this consists staging area, commit history, stash area etc.

\n

Let's get into it step by step and see how we perform command or action and behind the scene, git do its own activity.

\n\n

Hope this makes clear how git handling things at the local repository.

\n
\n

Note: Click here to learn how you can automate your Git workflows with Hooks

\n
\n","frontmatter":{"title":"How Git Local Repository Works","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"April 12, 2021","updated_date":null,"tags":["GIT"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/326443284e0af982c65082fa6f3a393d/ee604/git.png","srcSet":"/static/326443284e0af982c65082fa6f3a393d/69585/git.png 200w,\n/static/326443284e0af982c65082fa6f3a393d/497c6/git.png 400w,\n/static/326443284e0af982c65082fa6f3a393d/ee604/git.png 800w,\n/static/326443284e0af982c65082fa6f3a393d/f3583/git.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/how-git-local-repository-works/"}}},{"node":{"id":"3e95ca78-ccba-5c81-9771-92395b67748e","html":"

Git is an important part of daily programming and is commonly used in the software industry. Since you can use a lot of different commands, mastering Git needs time. But some commands are more commonly used. So I'm going to share the most useful Git commands in this post that every developer should know.

\n

But first you need to know the fundamentals of Git to understand this article.

\n

Useful Git Commands List

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CommandDescription
git initInitialize a local Git repository
git clone repo_urlClone public repository
git clone ssh://git@github.com/[username]/[repository-name].gitClone private repository
git statusCheck status
git add [file-name]Add a file to the staging area
git add -AAdd all new and changed files to the staging area
git commit -m \"[commit message]\"Commit changes
git rm -r [file-name.txt]Remove a file (or folder)
git branchList of branches (the asterisk denotes the current branch)
git branch -aList all branches (local and remote)
git branch [branch name]Create a new branch
git branch -d [branch name]Delete a branch
git branch -D [branch name]Delete a branch forcefully
git push origin --delete [branch name]Delete a remote branch
git checkout -b [branch name]Create a new branch and switch to it
git checkout -b [branch name] origin/[branch name]Clone a remote branch and switch to it
git branch -m [old branch name] [new branch name]Rename a local branch
git checkout [branch name]Switch to a branch
git checkout -Switch to the branch last checked out
git checkout -- [file-name.txt]Discard changes to a file
git merge [branch name]Merge a branch into the active branch
git merge [source branch] [target branch]Merge a branch into a target branch
git stashStash changes in a dirty working directory
git stash clearRemove all stashed entries
git push origin [branch name]Push a branch to your remote repository
git push -u origin [branch name]Push changes to remote repository (and remember the branch)
git pushPush changes to remote repository (remembered branch)
git push origin --delete [branch name]Delete a remote branch
git pullUpdate local repository to the newest commit
git pull origin [branch name]Pull changes from remote repository
git remote add origin ssh://git@github.com/[username]/[repository-name].gitAdd a remote repository
git remote set-url origin ssh://git@github.com/[username]/[repository-name].gitSet a repository's origin branch to SSH
git logView changes
git log --summaryView changes (detailed)
git log --onelineView changes (briefly)
git diff [source branch] [target branch]Preview changes before merging
git revert commitidRevert commit changes
git config --global user.name \"your_username\"Set globally Username
git config --global user.email \"your_email_address@example.com\"Set globally Email id
git config --global --listGet global config
\n

So these are the most helpful git commands I find in my everyday programming. There are several more things to learn about Git, I will explain them in a separate post.

\n","frontmatter":{"title":"35+ Git Commands List Every Programmer Should Know","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"February 17, 2021","updated_date":null,"tags":["GIT"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/dcc4ef7c6f6e2161d168898cf518845d/ee604/git.png","srcSet":"/static/dcc4ef7c6f6e2161d168898cf518845d/69585/git.png 200w,\n/static/dcc4ef7c6f6e2161d168898cf518845d/497c6/git.png 400w,\n/static/dcc4ef7c6f6e2161d168898cf518845d/ee604/git.png 800w,\n/static/dcc4ef7c6f6e2161d168898cf518845d/f3583/git.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/git-commands/"}}},{"node":{"id":"3a33f6f5-df0c-55f0-8d4e-c898e2a8cd12","html":"

Many of us have to choose between Merge and Rebase as a Developer. Here I'll explain what merge and rebase are, why you should use them, and how to do so.

\n

The same function is fulfilled by Git Merge and Git Rebase. They are built to incorporate adjustments into one from different divisions. Although the end objective is the same, it is done in various ways by those two approaches, and it is useful to know the difference as you become a better developer of software.

\n

What are Git Merge and Git Rebase?

\n

Git Merge and Git Rebase are both used to combine the changes of branches but in a distinct way.

\n

Git Merge - For developers using version control systems, merging is a prevalent method. Merging takes the contents of a source branch and combines them with a target branch, to be more precise. Only the target branch is updated in this process. The history of the source branch remains similar.

\n

Git Rebase - Another way to integrate modifications from one branch to another is by Rebase. Rebase compresses all the modifications into a single patch. The patch is then inserted into the target branch.

\n

Git Merge

\n

Combine multiple branch histories together.

\n
  A---B---C feature\n /\nD---E---F---G master
\n

if we are merging feature and master branch, then it would be

\n
  A---B---C feature\n /               \\\nD---E---F---G---H master
\n

Commands for merging feature and master branch

\n

git checkout feature\ngit merge master

\n

Note:

\n\n

Git Rebase

\n

Reapply commits on top of the base branch

\n
   A---B---C feature\n /\nD---E---F---G master
\n

if we are rebasing the feature branch onto the master branch, then it would be

\n
\t   A'--B'--C' feature\n\t /\n\tD---E---F---G master
\n

Commands for merging feature and master branch

\n

git checkout feature\ngit rebase master

\n

Note:

\n\n

When to use Git Rebase or Git Merge

\n

Choose Merge

\n\n

Choose Rebase

\n\n

Conclusion

\n

I hope some perspectives on Git merge and Git rebase have been provided by this description. The strategy of merge vs rebase is still debatable. But maybe this article will help to dispel your doubts and encourage you to take an approach that works for your team. Here are few articles posted by me that will help you in learning few more things in Git:

\n
    \n
  1. How to use Git Cherry Pick
    2. \n
  2. How to Perform a Git Force Pull
    3. \n
\n

Do comment on the subjects that you would like me to write about in the coming weeks :)

\n","frontmatter":{"title":"Git merge vs. Git Rebase: What's the difference?","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"January 27, 2021","updated_date":null,"tags":["GIT"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/84d7585291c78a887f774814c64479d6/ee604/merge.png","srcSet":"/static/84d7585291c78a887f774814c64479d6/69585/merge.png 200w,\n/static/84d7585291c78a887f774814c64479d6/497c6/merge.png 400w,\n/static/84d7585291c78a887f774814c64479d6/ee604/merge.png 800w,\n/static/84d7585291c78a887f774814c64479d6/f3583/merge.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/git-rebase-vs-git-merge/"}}},{"node":{"id":"b6b7417c-1baa-5d47-8d97-0704d063a25d","html":"

It is fine when you and the rest of your team are working on different files. But sometimes, multiple people simultaneously work on the same files, and that's where the problems arise.

\n

Just a Note: git pull = git fetch + git merge

\n

In this scenario, when you have local changes in your system and you pull the latest contribution, you got this error.

\n

error: your local changes to the following files would be overwritten by merge: readme.md\nplease commit your changes or stash them before you merge.\nAborting...

\n

Now you have 2 major choices

\n

Choice 1: you want to keep local changes

\n

git stash (stash the local changes clean the workspace)\ngit pull (pull the latest changes from remote )\ngit stash apply (apply the latest stash)

\n

-----------(or)---------------

\n

git fetch (fetch the local machine folder)\ngit stash (stash the local changes clean the workspace)\ngit merge '@{u}' (merge the changes from local folder to workspace folder)\ngit stash pop (apply the latest stash )

\n

By default, the stash changes will become staged. If you want to unstage them, use git restore --staged (git ver > 2.25.0).

\n

Choice 2: you do not want the local changes

\n

git reset --hard HEAD (reset to the head means remove all local changes)\ngit pull (get the latest changes)

\n

-----------(or)---------------

\n

git fetch (fetch the local machine folder)\ngit reset --hard HEAD (reset to the head means remove all local changes)\ngit merge '@{u}' (merge the changes from the local folder to workspace folder)

\n

git pull --force

\n

Now you must be thinking, what is git pull --force then?

\n

it feels like it would help to overwrite local changes. instead, it fetches forcefully but does not merge forcefully (git pull --force = git fetch --force + git merge).

\n

Like git push, git fetch allows us to specify which local and remote branch we want to work on. git fetch origin/ft-1:my-ft means the changes in the ft-1 branch from the remote repository will end up visible on the local branch my-ft. When such kind of operation modifies the existing history, it is not allowed by the Git without an explicit --force parameter.

\n","frontmatter":{"title":"How to Perform a Git Force Pull","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"December 03, 2020","updated_date":null,"tags":["git"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/496c8e02b6dc1da7410a55bf50a19942/14b42/pull.jpg","srcSet":"/static/496c8e02b6dc1da7410a55bf50a19942/f836f/pull.jpg 200w,\n/static/496c8e02b6dc1da7410a55bf50a19942/2244e/pull.jpg 400w,\n/static/496c8e02b6dc1da7410a55bf50a19942/14b42/pull.jpg 800w,\n/static/496c8e02b6dc1da7410a55bf50a19942/47498/pull.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/git-pull-force/"}}},{"node":{"id":"7ca0500d-9bbc-58e5-bc98-717c63b753d3","html":"

What is Git Cherry Pick

\n

Git cherry-pick is a powerful command that allows any specific Git commits to be selected by reference and append to the current working HEAD. The act of picking a commit from a branch and adding it to another is cherry picking. For undoing modifications, git cherry-pick can be useful. Say, for example, that a commit is made to the wrong branch unintentionally. You may turn to the right branch and select the commit to where it is supposed to belong.

\n

HOW to use

\n

To showcase this, let us assume we have a repository with the following branches:

\n
alpha - beta - gama - delta   `Master`\n     \\\n       x - neutron - Ultraviolet `Feature`
\n

git cherry-pick commitSha

\n

In this example, commitSha is a reference to commit. Using the git log, you can locate a commit referenced assum we wanted to use commit 'neutron' in master in this example. We make sure that we are working on the master branch first.

\n

git checkout master

\n

git cherry-pick neutron

\n

Once executed, our Git history will look like:

\n
alpha - beta - gama - delta - neutron  `Master`\n     \\\n       x - neutron - Ultraviolet `Feature`\n\t
\n

The neutron commit has been successfully picked into the feature branch.

\n

WHEN to use

\n

git cherry-pick is a useful tool but isn't best practice always. Cherry-picking can trigger duplicate commits, and traditional merges are preferred instead in many situations where cherry-picking would work. Git cherry-pick is a useful option for a few situations.

\n

Collaboration

\n

A team will often find individual members working in or around the same code sometimes. Perhaps there is a backend and frontend component of a new product feature. There may be some shared code between two sectors of the product. Perhaps the developer of the backend produces a data structure that will also need to be used by the frontend. In order to select the commit in which this hypothetical data structure was created, the frontend developer could use git cherry-pick. This selection would allow the developer of the front end to continue progress on their project side.

\n

Quick fixes

\n

When a bug is discovered, it is essential to fix that quickly as possible. For example, let's say a developer has started working on a new feature. During the development of a new feature, they find an existing bug. The developer creates an explicit commit to fix this bug. This new patch commit can be cherry-picked directly to the master branch to quickly fix the bug.

\n

Undo and restore commits

\n

A feature branch can often go stale and not be merged into a master. Often, without merging, a pull request might be closed. Git never sacrifices those commits, and they can be identified and cherry-picked back to life by commands such as git log and git reflog.

\n

Other options

\n

-edit\nPassing the -edit option causes git to trigger a commit message before the cherry-pick process is introduced.

\n

—no-commit\nThe —no-commit option executes the cherry-pick, but it transfers the contents of the target commit into the working directory of the current branch instead of making a new commit.

\n

—the-signoff\nThe —signoff option adds the signature line 'signoff' to the end of the cherry-pick commit message at the end.

\n

Git cherry-pick also accepts merge strategy options and conflict resolution as well. Please check the git merge strategy documentation.

\n","frontmatter":{"title":"How to use Git Cherry Pick","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"November 17, 2020","updated_date":null,"tags":["git"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/da6f791029e367a6d1f983172a08cc8a/14b42/cherrypck.jpg","srcSet":"/static/da6f791029e367a6d1f983172a08cc8a/f836f/cherrypck.jpg 200w,\n/static/da6f791029e367a6d1f983172a08cc8a/2244e/cherrypck.jpg 400w,\n/static/da6f791029e367a6d1f983172a08cc8a/14b42/cherrypck.jpg 800w,\n/static/da6f791029e367a6d1f983172a08cc8a/47498/cherrypck.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/git-cherry-pick/"}}},{"node":{"id":"b72ba370-d09d-5284-914e-101c2a0f20cd","html":"

Every Web Developer should know about cross-domain security

\n

While working in the world of the internet, all of the complex systems are interconnected in a shareable environment. But exposing systems in the outer world will invite security vulnerabilities and data breach for the organization. Cross-domain security address this security threat by enabling information sharing in more reliable and secure environments. Cross-domain security is an inclusive approach to defending against all kinds of threats to data connections at the boundaries of sensitive or classified networks.

\n

The Major Concepts of Security

\n

100% Security doesn’t exists.

\n

There is no way of being 100% protected from being hacked. If anyone ever tells you that, they are wrong.

\n

Single layer of protection isn’t enough.

\n

You can’t just say…

\n
\n

\"Oh, because I even have CSP implemented, I am safe. I can cross out cross-site scripting from my vulnerabilities list because that can’t happen now.\"

\n
\n

Maybe that is a given to some, but it is easy to find yourself thinking in this manner. In my opinion one reason that programmers can easily find themselves thinking this way is because so much of coding is black and white, 0 or 1, true or false. Security is not that so simple.

\n

Cross-Origin Resource Sharing (CORS)

\n

Have you ever gotten an error that looked something like this?

\n
No 'Access-Control-Allow-Origin' header is available on the requested resource. Origin 'null' is therefore not allowed access.
\n

You are certainly not alone. And then you Google it, and someone tells you to urge this extension which will make all of your problems go away!

\n
\n

Awesome, right?

\n
\n

CORS is there to protect you, not hurt you!

\n

In order to explain how CORS helps you, let’s starts about cookies, specifically authentication cookies. Authentication cookies are wont to tell a server that you are simply logged in, and that they are automatically sent with any request you make to that server.

\n
\n

Let’s think you’re logged in to yahoo, and they use authentication cookies. You click on bit.ly/r43nugi which redirects you to cryptoearn. A script within cryptoearn makes a client-side request to yahoo.com which sends your authentication cookie!

\n
\n

In a no-CORS world, they might make changes to your account without you even knowing. Until, obiviously , they post bit.ly/r43nugi on your timeline, and everyone of your relative orfriends click on thereon, and then the cycle continues in an evil breadth-first scheme that conquers all of yahoo’s users, and the world is consumed by cryptoearn. ?

\n

In CORS world, however, yahoo would only allow requests with an origin of yahoo.com to edit data on their server. In other words, they might limit cross-origin resource sharing. You might then ask…

\n
\n

Well can cryptoearn just change the origin header on their request, so that it looks like it is coming from *yahoo.com?*

\n
\n

They will try, but it won’t work because the browser will just ignore it and use the actual origin.

\n
\n

Ok, but what if cryptoearn made the request server-side?

\n
\n

In this case, they can bypass CORS, but they can't crack this because they won’t be ready to send your authentication cookie along for the ride. The script should be executed on the client side to urge access to your client side cookies.

\n

What is a security Policy?

\n
\n

Servers are generally host web sites, applications, images, fonts, and many more. When you use any browser, you are likely attempting to access a definite website (that is hosted on a server). Websites often request these hosted resources from different locations (servers) on the web. Security policies on servers mitigate the risks associated with requesting assets hosted on distinct server. Let’s take a glance at an example of a security policy: same-origin.\nThe **same-origin *policy is very restrictive. Under this policy, a document (i.e., sort of a web page) hosted on server A can only interact with other documents that also are on server A. In short, the same-origin policy enforces that documents that interact with one another have the same *origin.

\n
\n

The CORS standards manage cross-origin requests by adding a new HTTP headers to the standard list of headers. The following are the new HTTP headers added by the CORS standard:

\n\n

Content Security Policy (CSP)

\n

To dig in to CSP, we first need to talk about one of the most common vulnerabilities on the web: XSS, which means cross-site scripting.

\n

XSS is when some evil guy injects JavaScript into your client-side code. You might think…

\n
\n

What are they going to do? Change a color from red to blue?

\n
\n

Let’s think of someone has successfully injected JavaScript into client-side code of a website you are visiting.

\n

What could they do that would be malicious?

\n\n

The possibilities are endless.

\n

CSP is something prevent this from happening by limiting:

\n\n

Whenever you click on a link or type a website URL in the address bar of your internet browser, your browser makes a GET request. It eventually makes its way to a server which serves up HTML along with HTTP headers. for more details about what headers, open up the Network tab in your console, and visit some sites.

\n

You might see a response header that looks like below:

\n
content-security-policy: default-src * data: blob:;script-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;
\n

That is the content security policy of yahoo.com. Let’s reformat it to make it easier to read:

\n
content-security-policy:\ndefault-src * data: blob:;\n\nscript-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';\n\nstyle-src data: blob: 'unsafe-inline' *;\n\nconnect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;
\n

Now, let’s break down the directives.

\n\n

Note: there are many more CSP directives than just these four shown above. The internet browser will read the CSP header and apply those directives to everything within the HTML file that was served. If the directives are set correctly, they allow only what is required.

\n

If there is no CSP header is present, then everything goes, and nothing is restricted. Everywhere you see * , that is a wildcard. You can think of replacing * with anything and it will be allowed.

\n

Conclusion

\n

Security is something that should be important to everyone, not just the people who have it explicitly named in their job title, and always try to have additional layer for better security.

\n","frontmatter":{"title":"Cross Domain Security","author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null},"date":"August 16, 2020","updated_date":null,"tags":["Security","Web Security","Cross-Domain"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/790cea1b5ac8ae81febf53547ae0d319/ee604/cross_domain_security.png","srcSet":"/static/790cea1b5ac8ae81febf53547ae0d319/69585/cross_domain_security.png 200w,\n/static/790cea1b5ac8ae81febf53547ae0d319/497c6/cross_domain_security.png 400w,\n/static/790cea1b5ac8ae81febf53547ae0d319/ee604/cross_domain_security.png 800w,\n/static/790cea1b5ac8ae81febf53547ae0d319/f3583/cross_domain_security.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Abhimanyu Singh Rathore","slug":"/engineering/cross-domain-security/"}}}]},"authorYaml":{"id":"Abhimanyu Singh Rathore","bio":"He is a fun-loving technocrat, artist, photographer, nature lover, leisure traveler, and developer. He actively develops full-stack apps and programs in Go and various JavaScript frameworks and libraries, especially React.","github":"abhir9","stackoverflow":"4822703","linkedin":"abhi-rathore","medium":"@abhir95","twitter":"abhir96","avatar":null}},"pageContext":{"id":"Abhimanyu Singh Rathore","__params":{"id":"abhimanyu-singh-rathore"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}