---
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.


Keep homebrew up to date

---
title: '2022 - A year in review'
slug: 'year-in-review-2022'
date: '2023-01-01'
thumbnail: '/thumbnails/writing.png'
tag: 'year-review'
canonicalUrl: 'https://amanhimself.dev/blog/year-in-review-2022/'
---

My blog has been neglected for the last few months. Writing a year review is my way of making amendments to start writing back and reflecting on the year gone by.

It's been a good year that allowed me to focus on myself. I do not feel one bit guilty about not writing enough or creating enough. I spent most of my time prior to this year in a burnout state. I did not want to repeat that. Getting over burnout is tricky, and I am not sure if I am completely over it, but I often feel that I am coping better than before.

Right now, I'm still trying to balance my life and work and find a way to fit the new endeavors I'm seeking to pursue in between.

## Starting the year with a new job

I started the year by switching jobs in a new role as a [Senior Content Developer at Vercel](https://twitter.com/amanhimself/status/1488351029708341251).

I was excited to work full-time on the docs team. In the past year, I have often felt like I have been working towards this career path. I started at the end of January and left it at the end of April.

During my time there, I learned a lot about working on a team full of creative and hyper-focused people who shared a love for writing and creating content like mine. But unfortunately, it was a short adventure. I felt left out as the weeks passed. Besides writing in tech, I've been a part of React Native community since almost the beginning of my career. So that shift in tech focus I was working daily was a huge leap to take mentally.

## App.js conf 2022

[App.js conference](https://appjs.co/) has been a vital part of my professional career. I forgot what it felt like to be at a tech conference (since the last one I attended was in 2019) and in the end, it was an amazing experience.

Meeting with beautiful and like-minded people who share their work and interesting ways of solving problems is always fascinating and curiosity-engaging. Not only one gets to see the new and exciting upcoming stuff but also meeting people in person after such a long and limited human exposure felt like it was the first time.

![Me with friends at the App.js conference in June 2022](https://2022.appjs.co/images/photos/0014.jpg)

[It was a wonderful experience to attend it in person](https://twitter.com/amanhimself/status/1535694759653740547), meet old friends, make new ones and travel once again. Everything from the venue, the beautiful city of Krakow, the quality talks, and the MCs, was a great experience. Kudos to the organizers for hosting it and providing that altogether!

## Joining Expo

I joined Expo at the end of June 2022. Leaving my previous role, traveling and attending a tech conference, and getting the new opportunity was like a full circle. I am working majorly on the docs. Other areas of my work include engaging with the community.

Before joining, I'd been familiar with the team and their work for four years. From the outside, I know the tremendous amount of hard work the whole team puts in. Driving React Native ecosystem forward, making exponential improvements with each SDK version, focusing on better tooling, Developer Experience (DX), and adding support for native modules. After joining, it is exciting to observe that closely and be a part of it every day!

## I wrote 21 articles

I enjoy the process of writing for many reasons. One is that I get to learn something new and deepen my understanding of a topic. Another is pretending to be the first user and trying to understand a way of solving a specific problem.

It also opens doors for me to explore new opportunities. This year, I got to work with some of the publications I have been working with for a long time such as Jscrambler and Logrocket. Two new additions where I published a couple of tutorials as a guest author for [Sentry](https://blog.sentry.io/authors/aman-mittal/) and [FlyCode](https://blog.flycode.com/how-to-use-flycode-to-update-your-react-apps-on-the-fly).

It also turns out people like to read them too. Here are some of the most popular posts I wrote this year:

- [Setup Macbook M1 for Web and React Native development](https://amanhimself.dev/blog/setup-macbook-m1/): Even though, this post was Originally published in 2021, I'm actively updating this post and will continue to do so for a while. It's been a popular post once again and I hope it helped folks to get started with their new Macbooks.

- [How to install Node.js using NVM on macOS M1](https://amanhimself.dev/blog/install-nodejs-using-nvm-on-macos-m1/): I had fun collecting this piece of information. For a long time, I have been using NVM to manage Node.js on the fly. I wrote this one to make a walkthrough of how to set it up and keep up with the latest Node.js versions.

- [Getting Started with React Navigation v6 and TypeScript in React Native](https://amanhimself.dev/blog/react-navigation-v6-and-typescript-in-react-native/): A post that was exciting to work on. In this tutorial, I discussed how to add type checks to the app screens and how to add type checks to the React Navigation navigators. Using type checks and annotating navigators is a great way to make your app more robust and maintainable when using TypeScript with React Navigation.

- [Implementing Infinite Scroll with React Query and FlatList in React Native](https://amanhimself.dev/blog/infinite-scroll-with-react-query-and-flatlist-in-react-native/): Another exciting post that I wrote to explore how to implement infinite scrolling in an app using React Query and a real-time external API.

- [Set up a Next.js project with ESLint, Prettier, Husky, and Lint Staged](https://amanhimself.dev/blog/setup-nextjs-project-with-eslint-prettier-husky-lint-staged/): In this post, I shared my personal and minimal configuration that I used in a couple of Next.js projects.

## I redesigned my blog

My blog is one of the most consistent things in my life. This year, I decided to finally move it to Next.js (if you have been reading this post from the top, you might have realized why 😄). It was fun to do it and to learn new frameworks such as Next.js and Chakra UI.and and implement some of the tweaks that have been on my backlog for a while. I have decided to call the current version 9. Honestly, there have been so many changes and tweaks since I started it in 2019 that I have lost track in the past.

### My blog in numbers

I moved away from Google Universal Analytics since their public announcement about GA4 to Fathom in the middle of March. However, I did not remove Google Analytics from my blog after I realized that I might lose historical data for the first three months.

Overall I got a pretty consistent readership this year with over [150k+ views](https://amanhimself.dev/blog/year-in-review-2021/#i-wrote-43-articles):

![Yearly stats from Google Analytics 3](https://res.cloudinary.com/amanmittal/image/upload/v1672559907/CleanShot_2023-01-01_at_13.24.51_2x_zujbbg.png)

It is also interesting to see that what's driving most of the traffic is a mixture of both old and new articles:

![This year, both old and new articles are driving traffic to my blog](https://res.cloudinary.com/amanmittal/image/upload/v1672561827/CleanShot_2023-01-01_at_13.59.48_2x_bv5t2n.png)

Also that visitors are coming mostly through organic search:

![Most traffic is organic](https://res.cloudinary.com/amanmittal/image/upload/v1672561601/CleanShot_2023-01-01_at_13.56.26_2x_x6jacf.png)

I occasionally cross-posted my articles on [Medium](https://medium.com/@amanhimself), [Dev.to](https://dev.to/amanhimself) and [Hashnode](https://amanhimself.hashnode.dev/). Not as much as I would like to since I didn't spend that much time writing.

Dev.to is my primary platform to focus on cross-posting this year. I did manage to get 45k+ views.

![Dev.to stats, in a nutshell, this year](https://res.cloudinary.com/amanmittal/image/upload/v1672562431/CleanShot_2023-01-01_at_14.05.52_2x_z0rws4.png)

## Hackernoon award

Awesome folks at Hackernoon nominated me for two categories in the Noonies 2022 awards. One of the categories was [Most authentic Developer Advocate of the year](https://noonies.hackernoon.com/2022/programming/2022-most-authentic-developer-advocate-of-the-year).

I ended up winning the award (to my surprise). **A huge thanks to anyone who voted for me (and is reading this post 🤗).** I'm humbled by the recognition

![Noonies 2022 award for most authentic developer advocate of the year](https://pbs.twimg.com/media/Fj7zc51acAELXgH?format=jpg&name=medium).

### Newsletter saga continues

Less writing equals less number of issues. I did manage to send out a newsletter anytime I had something to share. However, this project was also abandoned for the last four or five months.

[Last year](https://amanhimself.dev/blog/year-in-review-2021), I was charmed by Revue and decided to jump on the wagon. Unfortunately, however, Twitter's new owners have decided to close it down. After moving to Revue, I thought I could stick with the service for some time, but the newsletter saga continues.

I have decided to move to Substack. I have used it in the past, and it's a good service. If you haven't already subscribed and would like to, here is the link: [amanhimself.substack.com](https://amanhimself.substack.com/). Even though Revue did allow migrating existing subscribers to Substack, there was no way of migrating the previous issues.

## Highlights from my GitHub

A couple of years back, I started to maintain a [single repo](https://github.com/amandeepmittal/react-native-examples) for all the demos and example apps I write using React Native and Expo. These example apps are part of the tutorials you see on this blog. To my surprise, it reached 700+ stars. It's still being actively maintained by me and occasional PRs from other contributors.

I also continued to maintain the [Expo Community project that integrates Firebase JS SDK in an Expo app](https://github.com/expo-community/expo-firebase-starter). After being involved directly with the [changes in the latest Expo SDK around Firebase](https://docs.expo.dev/guides/using-firebase), I planned out a new version of this project. Even after working on official integration documentation and guides, I feel this project can still serve as an additional resource.

### I made a lot of commits

Working on open-source projects makes the GitHub chart go green:

![A glimpse of activity on my GitHub account](https://res.cloudinary.com/amanmittal/image/upload/v1672574631/CleanShot_2023-01-01_at_17.32.15_2x_px9qkx.png)

_A big shout and a huge thanks to folks who [sponsored me on GitHub](https://github.com/sponsors/amandeepmittal) this year!_

## Reading

I did manage to go through some good books this year. Here are some of my picks that I enjoyed reading:

- [First, We Make the Beast Beautiful by Sarah Wilson](https://www.goodreads.com/book/show/35847961-first-we-make-the-beast-beautiful): A beautifully written book about anxiety for anxious people without any fluff. Love the short chapters, and the writing style which is quite soothing.
- [The Practice of Groundedness by Brad Stulberg](https://www.goodreads.com/book/show/57504944-the-practice-of-groundedness): I first heard Brad speaking about his book on a podcast. I don't remember what got me hooked in the first place. I remember picking this book after listening to that episode and I am glad I did. It talks a lot about patience.
- [Four Thousand Weeks by Oliver Burkeman](https://www.goodreads.com/book/show/55742688-four-thousand-weeks): Having read "time hacks" books in the past, this book becomes a bit easier to read and understand the flaws with the former strategies (or hacks). I realized that those "hacks" work only until one gets burned out completely and gets put off track in life. The importance of flexibility, living one's life, being patient, and coming to a realization that work is a never-ending, spiral pit.

## Traveling

I did manage to escape on two occasions but overall did not travel as much as I would have liked to.

## Wrapping up

I have been writing [yearly reviews](https://amanhimself.dev/tags/year-review/) since 2020. It's fun for me to look back over what I did and what I focused on last year or where my time went.

Thank you all for reading this post or reading any other post!

That's it for now. Happy New Year!


2022 - A year in review

---
title: 'Change the color of hidden files and folders in VSCode'
date: '2022-09-04'
slug: 'change-color-hidden-file-folder-name-in-vscode'
thumbnail: '/thumbnails/vscode.png'
tag: 'vscode'
canonicalUrl: 'https://amanhimself.dev/blog/change-color-hidden-file-folder-name-in-vscode/'
---

Using VSCode, I love switching back and forth between dark and light themes to make things interesting for myself when working. Generally, I prefer a [light-ish dark theme](https://amanhimself.dev/blog/setup-macbook-m1/#themes) such as [fairyFloss](https://marketplace.visualstudio.com/items?itemName=nopjmp.fairyfloss) or Quiet Light that comes pre-installed.

I recently switched to [morgan.code](https://marketplace.visualstudio.com/items?itemName=morgan-codes.morgan-codes-vscode-theme) theme, which uses a set of contrasting colors that are pleasing to my growing old eyes. It is developed by a fellow developer [Morgan Richardson](https://www.instagram.com/morgan.codes/).

Using this theme for a while, I realized I am so used to seeing files and folder names that git ignores in a specific gray color.

The original theme comes with blue-ish (maybe some sort of Cyan or Aqua) color for the ignored files and folders.

![original theme](https://i.imgur.com/J6hik7g.jpg)

To customize this color value, VSCode, provides a property called `gitDecoration.ignoredResourceForeground` which accepts a color value in hexadecimal format. It can be used with the VSCode theme color setting: [`workbench.colorCustomizations`](https://code.visualstudio.com/api/references/theme-color) to override the value that the original theme provides.

```json
// settings.json

{
  // ...
  "workbench.colorCustomizations": {
    // select theme you want to apply color customization value
    "[morgan.codes]": {
      "gitDecoration.ignoredResourceForeground": "#434343"
    }
  }
}
```

That's it! And now, my optic nerves are happy again.

![customized theme](https://i.imgur.com/sk0tFYi.jpg)

VSCode is so customizable that it surprises me at times.


Change the color of hidden files and folders in VSCode

---
title: 'How to add opacity to a Pressable component in React Native'
date: '2022-08-04'
thumbnail: '/thumbnails/react.png'
slug: 'add-opacity-to-pressable-component-react-native'
tag: 'react-native'
canonicalUrl: 'https://amanhimself.dev/blog/add-opacity-to-pressable-component-react-native/'
---

Pressable component was introduced in 2020 as a core component wrapper that can be used instead of existing touchable components in React Native. These touchable components are TouchableOpacity, TouchableHighlight, and TouchableWithoutFeedback. These components include styles and effects that sometimes do not meet the desired outcome on individual platforms (Android and iOS).

The way I see using the Pressable component is that it can be customized in terms of style, appearance, and extended functionality by creating a custom wrapper/component around it. It also offers a lot of props such as `onPressIn`, `onPressLong`, `hitSlop`, `delayLongPress` and so on, that can be used to implement these extended functionalities.

At times, one thing I like to do is to add opacity feedback when the touch is active. It doesn't provide in the form of a prop directly. Something similar to what [activeOpacity](https://reactnative.dev/docs/touchableopacity#activeopacity) prop on TouchableOpacity does.

In this post, let's build a wrapper component that uses Pressable to add opacity feedback to the component.

## Creating a wrapper component

Start by creating a custom Pressable component with no styles of its own so it can be a reusable component.

```jsx
// Pressable.js

import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, ...otherProps }) {
  const _style = useCallback(() => [style && style], [style]);

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;
```

So far, it accepts only two props:

- `children` that is used to add a label on the button (using like a `Text` component from React Native)
- `...otherProps` is used to pass down all the props to the underlying Pressable component.

In this case, since the wrapper component, you are creating will only be responsible for handling opacity, other important props like `onPress` are left to be handled where this wrapper component is used. I have to use the [Touch indicator on an iOS simulator](https://amanhimself.dev/blog/show-touch-indicator-on-ios-simulator/) to show that the button is pressed.

## Using the wrapper component

To use the wrapper component in its current state, import it:

```jsx
import { StyleSheet, Text, View } from 'react-native';

import Pressable from './Pressable';

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 24,
    color: '#fff'
  }
});
```

Make sure to add some styles to the `Text` and the `Pressable` components.

## Running the example

Here is the output I get by running the code above. Notice that there is no visual feedback when I press the component on the app screen.

![ss1](https://i.imgur.com/XcLXQbn.gif)

## Adding opacity prop to the wrapper component

In some scenarios, you may want to add and use opacity as the feedback. For example, decrease the opacity to `0.5` when the button is being pressed.

You can extend the `styles` to accept a `pressed` argument. It is a boolean that tells whether the component is currently pressed or not. Using it, you can alter the value of the opacity property in styles.

In the wrapper component, add a new prop called `activeOpacity`. This prop accepts a number between `0` and `0.99`. It is used conditionally on the `opacity` property and will only be true when the component is pressed.

When the component is not in a pressed state, the opacity value is `1`.

```jsx
import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, activeOpacity, ...otherProps }) {
  const _style = useCallback(
    ({ pressed }) => [{ opacity: pressed ? activeOpacity : 1 }, style && style],
    [style]
  );

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;
```

## Running the example with activeOpacity value

The below code snippet modifies the previous example to add an activeOpacity value of `0.5`:

```jsx
export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
        activeOpacity={0.5}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}
```

The output after this step confirms that the opacity is changing as expected.

![ss2](https://i.imgur.com/LDyiXIu.gif)

## Conclusion

The [Pressable component](https://reactnative.dev/docs/pressable) has many props that can be used to write an extensive and customized wrapper that fulfills your app's requirements. It is preferred in the official React Native documentation and provides a future-proof way of handling touch-based events.


How to add opacity to a Pressable component in React Native

---
title: 'Open any folder from the Terminal app in a Finder on macOS'
date: '2022-07-21'
thumbnail: '/thumbnails/terminal.png'
slug: 'how-to-open-any-folder-from-terminal-in-finder-on-mac'
tag: 'tools'
canonicalUrl: 'https://amanhimself.dev/blog/how-to-open-any-folder-from-terminal-in-finder-on-mac/'
---

Often, I struggle or want to open the current directory I am working from the Terminal app to the Finder window on macOS.

I have been a macOS user for almost eight years now, and it never occurred to me that I couldn't open the current location from the Terminal app. Until recently, a frustration point led me to find the solution. Again, though, I am surprised by its simplicity.

To open the current working directory in the Finder window, use the following command:

```shell
open .
```

The `open` command opens a file or a folder. It exists on the macOS.

You can do more with this command. The `/` argument opens the root directory.

```shell
open /
```

A specific directory is also allowed:

```shell
open ~/Desktop
```

Using the option `R`, you can locate a specific file or folder in the Finder:

```shell
open -R /blog
```

## Opening files

There are more things that the `open` command can do. It can open files. For example, to open a markdown file in the default editor or IDE:

```shell
open ./blog/mm-yy/your-file-name.md
```

The above command opens the markdown file in the Xcode. You can pass the `-t` option to open in the file in a text editor.

```shell
open -t ./blog/mm-yy/your-file-name.md
```

## Opening URLs

It can do more than open files and folders. It can also open a URL in the default web browser set up on your machine:

Use option `a` to override the default web browser and specify a different one.

```shell
open -a Safari https://www.google.com
```


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, and Senior Content Developer with companies like Draftbit and Vercel.

Latest Posts

Open Source Projects I've Worked on

Countries I've Visited