---
title: 'Stash changes in a git repository with VSCode'
date: '2023-10-26'
slug: 'stash-changes-with-vscode'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/stash-changes-with-vscode/'
---

`git stash` is a useful command that allows one to shelve current changes in a Git repository temporarily. This can be done without committing the changes anywhere, making it possible to return to them later.

## Stash using VSCode

Visual Studio Code (VSCode) is a highly capable code editor that offers many well-thought-out functionalities. Even after using it for years, I still find new things about it.

Using in-built **Source Control**, you can quickly view the modified files and temporarily save them by stashing them:

- In VSCode, go to the Source Control tab.
- Click the three-dotted menu (`...`) next to Source Control to open a dropdown menu.
- In the menu, select **Stash** > **Stash (Include Untracked)**.
- That's it. The file changes are now stashed locally.

![Stashing changes locally using VSCode](/images/stash-option-vscode.png)

## Bring the latest stashed changes to a branch

Let's assume you've now created a new branch where you want to bring those changes that are saved temporarily.

- In VSCode's Source Control, open the dropdown menu.
- Select **Stash** > **Apply Latest Stash**.

![Stashing changes locally using VSCode](/images/apply-stash-in-branch.png)

You can now bring those changes to the current branch and commit them.

## Conclusion

Stashing is particularly useful when you want to fix something, keep those changes around so that you can return to them later. Collecting the stashed changes can result in a new branch, where local changes can be brought later on.


Stash changes in a git repository with VSCode

---
title: 'Remove bottom border or shadow on header in React Navigation or Expo Router'
slug: 'remove-bottom-border-shadow-on-header-in-react-navigation'
date: '2023-09-24'
thumbnail: '/thumbnails/react-navigation.png'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/remove-bottom-border-shadow-on-header-in-react-navigation/'
---

> **Update:** This blog post was originally written on June 5, 2022. It is now up-to-date to include Expo Router relevant information.

Expo Router and React Navigation are both amazing navigation libraries in the React Native ecosystem. I have been a big fan of React Navigation as I have used it for a while but lately, I have started using Expo Router.

Both libraries share `screenOptions` since Expo Router is built on top of React Navigation. Using these options, the border at the bottom of the header can be removed. By default, the Stack and Tab Navigators in the React Navigation library add a header on the screen. Expo Router version 2 also follows the same pattern. The example described on this blog post applies to both libraries.

## Header with a shadow

The header has a default bottom border or shadow. Here is an example of a border on the header on iOS:

![ss1](https://i.imgur.com/PnxIHxT.png)

The orange arrows are used to highlight the shadow. Similarly, on Android, the width is thin and hard to notice.

![ss2](https://i.imgur.com/MoP6J0t.png)

To make it more visible, you can populate the `screenOptions` of the navigator as shown below:

```js
screenOptions={{
  headerStyle: {
    borderBottomWidth: 4,
  },
}}
```

Increasing the value of the property `borderBottomWidth` will make the border thicker.

![ss3](https://i.imgur.com/I7l8INR.png)

## Disable the shadow

At times, the UI of the screen might not require a header border or shadow at all. In such cases, you can always customize the `screenOptions` by adding the property `headerShadowVisible` and setting it to `false`.

```js
screenOptions={{
  headerShadowVisible: false,
}}
```

You will get the desired output both on iOS and Android:

![ss4](https://i.imgur.com/bBQuIJJ.png)

![ss5](https://i.imgur.com/NId2zbQ.png)

## Conclusion

To learn more about navigation in React Native apps, [React Navigation docs](https://reactnavigation.org/) are a great asset for learning more about the library and what customization options it provides. Also, see [Expo Router](https://docs.expo.dev/routing/introduction/) documentation if you want to implement file-based routing.

Also, check out my other post on [how to remove the bottom tab bar border in React Navigation](https://amanhimself.dev/blog/react-navigation-remove-tab-bar-border/).

> [Source code available at GitHub.](https://github.com/amandeepmittal/react-native-examples/tree/main/remove-header-border-react-navigation)


Remove bottom border or shadow on header in React Navigation or Expo Router

---
title: 'How to configure ESLint and Prettier in an Expo project'
date: '2023-07-25'
slug: 'configure-eslint-prettier-expo-project'
thumbnail: '/thumbnails/expo.png'
tag: 'expo'
canonicalUrl: 'https://amanhimself.dev/blog/configure-eslint-prettier-expo-project'
---

> Make sure to see the official Expo documentation on using [ESLint](https://docs.expo.dev/guides/using-eslint/) in your React Native project.

When writing JavaScript, I spend a good amount of time fixing basic mistakes. Different project files sometimes end up following different syntax and formatting conventions.

Using ESLint rescues me from those mistakes. It is a linter for the JavaScript programming language that helps keep the code syntax consistent and match conventions and warns against the possible source of problems. It is written in Node.js.

Also, I like to use some specific set of Prettier rules in my projects. ESLint configures well with it.

## Create a new project

To create a new React Native project, I use `create-expo-app`:

```shell
npx create-expo-app projectName

# Navigate inside the project folder
cd projectName
```

## Install ESLint and Prettier dev dependencies

After creating a new project, the next step is to install ESLint and Prettier as dev dependencies.

The Expo team has been awesome to provide a package called [eslint-config-universe](https://github.com/expo/expo/tree/master/packages/eslint-config-universe) that comes with basic and shared ESLint configuration for Node.js, React Native and web projects. This is useful because I don't have to set up and define the ESLint configuration from scratch.

Run the following command in the terminal:

```shell
yarn add --dev eslint-config-universe eslint prettier
```

These packages are installed as `devDependencies` since they are only required during the development of the project.

## Configure ESLint

Start by creating a new file called `.eslintrc.js` at the root of the project. This file is responsible to contain all the configuration and linting rules.

Here is the minimal configuration I use:

```js
module.exports = {
  extends: ['universe', 'universe/native'],
  rules: {
    'import/order': 0,
    'react-native/no-inline-styles': 0,
    'import/namespace': 0,
    'no-duplicate-imports': 'error'
  }
};
```

Sometimes I extend this configuration or tweak with rules but for most of the projects I start with this configuration.

In the above snippet, the `extends` is used to apply the pre-defined set of rules from `universe` and `universe/native`.

The `universe` contains basic config JavaScript projects. The `universe/native` contains the config for React Native and Expo projects, with support for React and JSX.

## Configure Prettier

Prettier is a code formatter that ensures that all the code files follow a consistent styling. If you are into Web development, chances are you are already using it.

Create a new file called `.prettierrc` and inside it add the following (_minimal_) configuration:

```json
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}
```

## Ignore files

I also created two new files to ignore trivial or other configurable files and folders from both linting and formatting. Both `.eslintignore` and `.prettierignore` have the following snippet:

```shell
node_modules/**
package.json
yarn.lock
ios/**
android/**
assets/**
.vscode
.expo-shared
.prettirrc
.eslintrc.js
```

## Conclusion

There are about a dozen ways one can configure ESLint rules. However, in this post, I wanted to share this minimal configuration for my future self.


How to configure ESLint and Prettier in an Expo project

---
title: 'Resolve merge conflicts with git rebase'
date: '2023-06-23'
slug: 'resolve-merge-conflicts-with-git-rebase'
thumbnail: '/thumbnails/git.png'
tag: 'git'
canonicalUrl: 'https://amanhimself.dev/blog/resolve-merge-conflicts-with-git-rebase/'
---

Resolving merge conflicts can sometimes be difficult, and using the GitHub UI may not always be the most effective solution. As the complexity of the conflicts increases, it may be necessary to rely on tools on your local machine rather than the web interface provided by GitHub.

I have discovered that using the `git rebase` command is a useful method for resolving merge conflicts in my feature branch before merging it into the `main` branch. Although it took some time to fully understand the process and the necessary steps.

## Problem

I have been working on a `feature-branch` in an open-source repository for work for quite some time. However, recent commits merged into the main branch have caused conflicts in my branch, preventing me from merging my own commit. I have two options to proceed:

- Resolve the conflicts to merge the branches.
- Create a new pull request if the conflicts are too complex and my changes are of low priority.

## Solution: Resolve conflicts with git rebase

Using `git rebase` in the `feature-branch` allows to bring changes from the `main`, and resolve the merge conflicts. Then, I can use VSCode (which has a Resolve merge conflict editor and is pretty handy) and push the changes back to my feature branch. Once the conflicts are resolved, I can merge my branch into the `main` without any issues which will make GitHub happy.

### Step 1: Fetch the latest changes from the main

Open a fresh terminal tab, and navigate into the repository. On the `main` branch, run:

```shell
git pull
```

This makes sure that the local copy of the `main` branch on my machine has all the latest changes.

### Step 2: Run git log to verify

Running `git log` helps verifying that `main` branch has all the latest commits:

```shell
git log --oneline --graph --decorate --color

# I use an alias: glog
```

### Step 3: Checkout to the feature-branch

Time to switch to the `feature-branch`:

```shell
git checkout feature-branch

# I use an alias: gck feature-branch
```

### Step 4: Run git rebase to bring changes from the main

To bring changes from the `main` to the `feature-branch`, run:

```shell
git rebase main
```

Then run `git status` to know the status of the branch:

```shell
git status

# I use an alias: gs
```

### Step 5: Resolve merge conflicts

If there are merge conflicts, running `git status` will let you know. Open VSCode, click on open Resolve Merge Conflict editor and you can now accept changes in the left tab which shows the latest changes from `main` branch.

On the right side, changes from the current `feature-branch` (probably the ones that are causing conflicts) are shown.

After resolving conflicts, save the file and from the terminal run the following command to stage the modified files:

```shell
git add file-name

# I use an alias: ga file-name

# In case, multiple files modified and need to be staged, run:
git add .
```

Then, run `git status` once again to see if the modified files are staged.

Then run the following command to commit those changes:

```shell
git commit -m "commit message..."

# I use an alias: gc "commit message..."
```

### Step 6: Continue the rebase

Run `git rebase` command with `--continue` flag to continue the rebase process:

```shell
git rebase --continue
```

> **Tip:** If required, save changes by pressing `:wq!` in the terminal.

### Step 7: Verify new commits

Run the following command to verify that the new commits from `feature-branch` are at the top of the commit history and changes from the `main`:

```shell
git log --oneline --graph --decorate --color

# I use an alias: glog
```

### Step 8: Commit changes from local to remote

Finally, push the changes from the local `feature-branch` to the remote `feature-branch`:

```shell
git push --force
```

## Summary

A few added rules I think are worth mentioning in this process:

- Only use rebase for local branches and if you are the owner of that branch.
- If you anticipate that the conflicts can become messy, use the strategy described above at regular intervals to avoid a lot of conflicts.

> A big thank you to my colleague [Sundeep Peswani](https://www.sundeeppeswani.com/) for teaching this via live coding and jumping on a call to help me understand the process and making my life easier.


Resolve merge conflicts with git rebase

---
title: 'How to clear global npx cache'
date: '2023-05-30'
slug: 'clear-global-npx-cache'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/clear-global-npx-cache'
---

Recently, I've seen myself running into the following message whenever I'm using a certain CLI tool with `npx`.

```bash
A new version of "x-package" is available
You can update by running: npm install -g x-package
```

I don't want to install the CLI tool globally and go into the rabbit hole of maintaining it as a dependency.

One way I've found that works on macOS to clear the global `npx` cache:

```bash
rm -rf ~/.npm/_npx
```

This will clear the global `npx` cache and you'll be able to use the latest version of the CLI tool.

Also, you can add an alias to your `.zshrc` or `.bashrc` file to make it easier to run:

```bash
alias clearnpx="rm -rf ~/.npm/_npx"
```

If you've trouble finding where npm stores `npx` cache on your system, run the following command to find out the exact path to the `_npx` directory:

```bash
npm config get cache
```


How to clear global npx cache

---
title: 'Bypass CORS to fetch files when working with localhost'
date: '2023-05-24'
thumbnail: '/thumbnails/terminal.png'
slug: 'bypass-cors-when-working-with-localhost'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/bypass-cors-when-working-with-localhost/'
---

Sometime back I learned about [opening files or directories using the `open` command from the CLI on a Mac](/blog/how-to-open-any-folder-from-terminal-in-finder-on-mac/). It's simple yet effective.

Another use case that I've been using it for is to open the current project when in `localhost` in the browser and bypass the CORS policy to fetch files that are also available locally.

```shell
open -a "Google Chrome Canary"  --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
```

The argument passed in the above command overrides the browser's default behavior.


Bypass CORS to fetch files when working with localhost

Setup Macbook M1 for Web and React Native development

---
date: '2023-05-02'
title: 'Set default location for images, files and attachments in Obsidian'
thumbnail: '/thumbnails/ob.png'
slug: 'set-default-folder-for-images-files-and-attachments-in-obsidian'
tag: 'obsidian'
canonicalUrl: 'https://amanhimself.dev/blog/set-default-folder-for-images-files-and-attachments-in-obsidian/'
---

I've used Obsidian as my primary note-taking app for over six months. One thing I've found myself often doing (either work or personal) is using screenshots as images in my notes.

Now, if you have used Obsidian or started using it, all images or attachments are stored in the root vault folder. If you are fine with it, you can skip reading this article and spend your time on something more useful. However, if you are like me, and want to stick to using a note-taking app and keep things organized, then keep reading.
I organize my notes into two top-level folders:

I organize my notes into two top level folders:

- `Areas`: Notes on stuff related to my personal life, books I read, and things I'm learning.
- `Inbox`: Notes on work, meetings, people, and the articles I'm working on.

I wanted a separate folder for images and attachments that could serve both folders and keep things organized in the vault. In Obsidian, it's doable by changing one setting:

- Click **Settings** in the Obsidian desktop app and in the Settings menu, click **Files & Links**.
- In the **Default location for new attachments**, in the dropdown, select **In the folder specified below**.
- In the **Attachment folder path**, choose the path of the folder you want to save all images and other files.

![ss1](https://i.imgur.com/D2AyGqt.png)


Set default location for images, files and attachments in Obsidian

---
title: 'Convert png to jpg using ffmpeg'
date: '2023-04-01'
slug: 'convert-png-to-jpg-using-ffmpeg'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/convert-png-to-jpg-using-ffmpeg'
---

As a documentarian, I've used [ffmpeg](https://ffmpeg.org/) command-line tool for a while now. It is a powerful tool that can do a lot of things. At work, I use it to convert videos and images.

## Prerequisites

Install [`ffmpeg` using homebrew](https://formulae.brew.sh/formula/ffmpeg).

## Why use ffmpeg?

On macOS, Cleanshot X app by default captures the screenshot in **png** format. These files are large in file size and have a large resolution (not usually suitable for a web page).

## How to use ffmpeg to convert png to jpg?

A **jpg** can have a smaller file size and is preferred for web pages. To convert a **png** to **jpg** using ffmpeg, use the following command:

```shell
ffmpeg -i input.png -preset ultrafast output.jpg
```


Convert png to jpg using ffmpeg

---
title: 'Keep homebrew up to date'
date: '2023-04-01'
slug: 'keep-homebrew-up-to-date'
thumbnail: '/thumbnails/terminal.png'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/keep-homebrew-up-to-date'
---

I've been using [homebrew](https://brew.sh/) for as long as I can remember using macOS. I recently learned about cleaning up old and outdated files using the `brew cleanup` command.

Sometimes, I periodically upgrade packages that are installed using brew. Thus, I thought, why not add an alias such as below in my `.zshrc` file:

```shell
alias hbc="brew update && brew upgrade && brew cleanup"
```

This helps me to update and upgrade outdated packages, and clean up old files. Now, whenever I have to run all three tasks, I simply run `hbc` in the terminal.

Upgrading outdated packages periodically saves me from a situation when installing a new package, homebrew will upgrade all outdated packages first.


👋 Hey, I'm Aman

I'm a software developer and a technical writer. I love working with open source technologies and writing about what I learn.

I've been writing online since 2017, mostly cross-platform mobile development and sometimes on web. I've written over 150 articles and tutorials for more than 30 publications and organizations across the internet. Hence, I started this blog to share my software development journey.

Currently, documentation maintainer at Expo. Previously, I've worked as Developer Advocate at Draftbit, and Senior Content Developer at Vercel.

Latest Posts

Open Source Projects I've Worked on

Countries I've Visited