oschvr

a blog about software, cloud computing, security, money, business, travelling and life.

โ† Posts

How to create your npm card

2 mins ย 

3 months ago

ย 05/07/2020ย 

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 node and npm installed in your system

  1. Open your Terminal
  2. Type npx oschvr and hit enter

npx oschvr

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.

See more about npx

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

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

  • In name, enter the package name (this is the name you will call in npx)
  • In main and bin enter index.js as value, we'll continue here in the next step
  • In 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.
  • In license, go to choosealicense.com and pick one.
{
  "name": "oschvr",
  "version": "2.0.0",
  "description": "oschvr.com",
  "main": "index.js",
  "bin": "index.js",
  "keywords": ["oschvr"],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/oschvr/card"
  },
  "files": ["index.js"],
  "author": "Oscar Chavez <oschvr@protonmail.com>",
  "license": "The Unlicense",
  "dependencies": {
    "boxen": "^4.2.0",
    "chalk": "^4.1.0"
  }
}

package.json

Note that I already have two dependencies, chalkand boxen. To install them

added 4 packages from 2 contributors,
removed 4 packages,
updated 21 packages and audited 25 packages in 1.362s
found 0 vulnerabilities
  • Create a new file index.js and open it

As you specified in the package.json, this is your main file (entry) / bin (binary) file.

  • To specify that index.js is a binary file, start with the following:
#!/usr/bin/env node

node binary

  • Add the dependencies you installed earlier
const boxen = require('boxen')
const chalk = require('chalk')

dependencies

See more about chalk and boxen

  • Create an options object for the surrounding box
const options = {
  padding: 1,
  margin: 1,
  borderStyle: 'round',
}

boxen options

  • Next, create a data object with whatever information you want to include
const data = {
  name: chalk.white.bold(' Oscar Chavez / oschvr'),
  role: chalk.white.bold(' Cloud ๐ŸŒฅ & Software ๐Ÿ›  Engineer'),
  twitter: {
    label: chalk.white.bold('Twitter ๐Ÿฆ:'),
    url: chalk.blue.underline('https://twitter.com/oschvr'),
  },
  github: {
    label: chalk.white.bold('Github ๐Ÿ™:'),
    url: chalk.blue.underline('https://github.com/oschvr'),
  },
  email: {
    label: chalk.white.bold('Email ๐Ÿ“ง:'),
    url: chalk.blue.underline('oschvr@protonmail.com'),
  },
  web: {
    label: chalk.white.bold('Web ๐Ÿ’ป:'),
    url: chalk.blue.underline('https://oschvr.com'),
  },
}

personal information

  • Next, create the card
const newline = "\n";
nconst twitter = `${data.twitter.label} ${data.twitter.url}`;
nconst github = `${data.github.label} ${data.github.url}`;
nconst email = `${data.email.label} ${data.email.url}`;
nconst web = `${data.web.label} ${data.web.url}`;
nconst card =
    boxen(data.name +
        newline +
        newline +
        data.role +
        newline +
        newline +
        twitter +
        newline +
        github +
        newline +
        email +
        newline +
        web, options);

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.
console.log(chalk.white.bold(card))

All together

#!/usr/bin/env node
const boxen = require("boxen");
const chalk = require("chalk");

const options = {
    padding: 1,
    margin: 1,
    borderStyle: "round",
};

const data = {
    name: chalk.white.bold(" Oscar Chavez / oschvr"),
    role: chalk.white.bold(" Cloud ๐ŸŒฅ & Software ๐Ÿ›  Engineer"),
    twitter: {
        label: chalk.white.bold("Twitter ๐Ÿฆ:"),
        url: chalk.blue.underline("https://twitter.com/oschvr"),
    },
    github: {
        label: chalk.white.bold("Github ๐Ÿ™:"),
        url: chalk.blue.underline("https://github.com/oschvr"),
    },
    email: {
        label: chalk.white.bold("Email ๐Ÿ“ง:"),
        url: chalk.blue.underline("oschvr@protonmail.com"),
    },
    web: {
        label: chalk.white.bold("Web ๐Ÿ’ป:"),
        url: chalk.blue.underline("https://oschvr.com"),
    },
};

const newline = "\n";
nconst twitter = `${data.twitter.label} ${data.twitter.url}`;
nconst github = `${data.github.label} ${data.github.url}`;
nconst email = `${data.email.label} ${data.email.url}`;
nconst web = `${data.web.label} ${data.web.url}`;
nconst card =
    boxen(data.name +
        newline +
        newline +
        data.role +
        newline +
        newline +
        twitter +
        newline +
        github +
        newline +
        email +
        newline +
        web, options);

To test your newly created node program,

  • Open the terminal and enter node index.js
os at os-mac in ~/o/b/card (master|โœš2)=ยป node index.js

โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚                                               โ”‚
โ”‚            Oscar Chavez / oschvr              โ”‚
โ”‚                                               โ”‚
โ”‚        Cloud ๐ŸŒฅ & Software ๐Ÿ›  Engineer         โ”‚
โ”‚                                               โ”‚
โ”‚ Twitter ๐Ÿฆ:       https://twitter.com/oschvr  โ”‚
โ”‚ Github ๐Ÿ™:        https://github.com/oschvr   โ”‚
โ”‚ Email ๐Ÿ“ง:         oschvr@protonmail.com       โ”‚
โ”‚ Web ๐Ÿ’ป:           https://oschvr.com          โ”‚
โ”‚                                               โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ

Once you're happy with the result, it's time to publish it so people can use it through npx

Publishing to NPM

The 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

  • Run npm publish and wait for it to finish.

Test it out

If all went well,

  • Enter npx <name> where name is the package name you specified in package.json

and that's it ! You should see your freshly created npm card that you can distribute to friends, colleagues and even recruiters.

Repo

I purposely used a free to use and distribute license, so go and clone it or fork it and make yours ย ๐Ÿ‘‰ ย https://github.com/oschvr/card.