How to create your npm card
Lately, our company started growing so I had to start interviewing frontend engineers, UI/UX designers and other developers who focus on the UI aspect of web development
At first, my expectation was that the process wouldn't involve anything else but talking to a person. I was caught off guard about the fact that a lot these amazing developers shared with me their portfolios, websites or even demos. It was surprising and inspiring to see some of the creative ways people standout.
Because of the simplicity and coolness, one caught my eye as something I could do for myself in less than 15 minutes.
So I did it, you can test it out in your terminal and of course, I'll show you how to do it. See below 👇
How to run
This assumes you have
npminstalled in your system
- Open your
npx oschvrand hit enter
The command will output a nicely formatted ASCII card with my contact information in your terminal. Nice 😎
It works just like
npm, in the sense that it retrieves packages from the NPM (node package manager) registry, except that
npx will execute node binaries, if any.
Essentially, the command:
- Will pull the code
- Fetch the dependencies and
- Run the binary
Incredibly simple, yet, this same system is being used in more advanced and complex projects.
Creating your own
First, things first:
- Create a folder and go into it,
mkdir card && cd card
- Create a new project,
npm init -y
- Open your new created project in your code editor,
Now that you have a new project, go to
package.jsonand make sure you have at least the following keys:
name, main, bin, author, license
name, enter the package name (this is the name you will call in
index.jsas value, we'll continue here in the next step
author, enter your name or email, this one is optional, but I guess it doesn't hurt since your giving out your contact info anyways.
license, go to choosealicense.com and pick one.
Note that I already have two dependencies,
boxen. To install them
- Go to your terminal and enter
npm install chalk boxen
+ firstname.lastname@example.org + email@example.com added 4 packages from 2 contributors, removed 4 packages, updated 21 packages and audited 25 packages in 1.362s 4 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Consider funding open source maintainers !
- Create a new file
index.jsand open it
As you specified in the
package.json, this is your
main file (entry) /
bin (binary) file.
- To specify that
index.jsis a binary file, start with the following:
- Add the dependencies you installed earlier
- Create an
optionsobject for the surrounding box
- Next, create a
dataobject with whatever information you want to include
- Next, create the
There are a lot of ways you can achieve something you like. I found that in my case, this is where I was tweaking the most.
- Finally, log the result to the terminal.
To test your newly created node program,
- Open the terminal and enter
Once you're happy with the result, it's time to publish it so people can use it through
Publishing to NPM
npm utility has a the command
publish that is pretty self explanatory. The only requirement is that you need an account at NPM. Create your account here
There are a lot of things you can do when publishing to the NPM registry, but these are out of the scope of this tutorial.
Here's a great article of how to publish to the npm
npm publishand wait for it to finish.
Test it out
If all went well,
npx <name>where <name> is the package name you specified in
and that's it ! You should see your freshly created
npm card that you can distribute to friends, colleagues and even recruiters.