Make Your Identity in Cli World.

Now share only one command in your meetups, conferences, seminars, etc to connect with awesome people.

Once on Twitter, I saw a post that is too old but inspired me to create an animated CLI Profile Card by simplifying for others to create their own Profile Card in few minutes.

You can hit npx imvv in your terminal right now to learn more about me 😉.

JavaScript is awesome for CLIs

• npx allows execution without installation
• npm ecosystem is ripe for CLI wrappers, just write the stdio handler for your favorite package
• the npm build, publish, share cycle is so easy

Now, let’s come back to our topic
we’ll create a npx enabled Profile card. The final output might look something like this:

NOTE: Animations are not supported by Windows Terminal. There would be a rotated straight-line ‘|’. To see or to customize the given animations use your Editor Terminals.

Let’s see how will you make your own Profile card. It's pretty simple.
I will be explaining step by step process, Just be with me 👍

Prerequisites:

1. Create an Account on npm, if you don’t have it already.
2. Create a GitHub account, if you don't have it already.

Now you are all set to go-ahead

Step 0: If You like the Project then support it by giving a Star ⭐️

Step 1: Navigate to the repository at Cli Profile Card.

Step 2: Above the file list, click “Use this template”.

“Use this template” Button

Note: How to set up “Use this template” refer to this easy tutorial.

Step 3: Now clone your newly made repository in your Directory

Step 4: cd <project directory>

Step 5: Open your project in your favorite Editor and install all dependencies by npm install or npm i

— Relax while Load ☺ —

Step 6: Direct to the data.json file. Change the fields with your data appropriately.

data.json file

Step 7: Now time to do some changes to the package.json file.

• name : your_name. (It's the your_name in npx your_name)
  → Tip: Choose your GitHub username as your_name
• version : 1.0.0
• author : your name
• description : put whatever you like
• Under repository -> url : your GitHub repo url

package.json

Step 8: Check Everything before commit, Run the project by command npm run dev .
→ If everything seems good then go ahead.

Hurray! Now We are going to commit our changes to GitHub

Step 9: Copy this command git add . && git commit -m "made my Profile Card" && git push origin main .

Publishing Your Package

Step 10: Log in to your npm by running npm logincommand.

Step 11: npm version major

Step12: npm publish

→ If everything went good then You will see your version and you can check the same into your npm profile/packages.

Congratulations! You did it. Now share your command npx name in the end of your seminars, conferences, workshops to quickly connect with people.

Check the Profile Card by command npx name .
→ Are You wondering, why we are using npx instead of npm
→ Npm is a tool that use to install packages.
→ Npx is a tool that use to execute packages.

Npm VS Npx ( source — More about Npx at GFG )

Package Name Exists

Now, this can be a scenario if your preferred name is already used. Your name
must be uniquely identified. For this you can follow two steps:

1. You can use your GitHub username.
   → Check the username you want here. If there is already one, you can’t use that. Think something unique or You can stick to that one by publishing to a scope.
2. Publish as a Scope: You can publish the package under your own username (or npm organization) i.e., publishing to a scope
   → In the package.json file, change the name field to @user-name/package-name manually where "user-name" is your npm username and "package-name" is the name of the package you want.
   → This will publish your package under your username.
   →When you sign up for an npm user account or create an organization, you are granted a scope that matches your user or organization name. You can use this scope as a namespace for related packages.
   → A scope allows you to create a package with the same name as a package created by another user or organization without conflict.
   → Read more about Scopes.

If you find any difficulty in creating your Profile Card You can ask for help Here
Or You want add some feature lets discuss about it Here

Connect With Me:

→ npx imvv 😃