loading...

Setting up a `npx username` card!

wuz profile image Conlin Durbin Updated on ・3 min read

I recently saw this awesome post from bnb on Twitter:

The community response has been awesome and I quickly knew I wanted to make my own:

Today, I wanted to show everyone the process of making one.

First, let's clone the repo:

git clone https://github.com/bnb/bitandbang

Now, we need to edit some stuff. First, let's open up the package.json and update some of the details. First, change the package name:

name: <your username>

This will let you publish to npm and get your card with npx <your_username>.

You can also update the description and author fields to reflect your information.

If we run npm run dev, we'll see that Tierney's information shows up. Let's make it your card.

Open up build.js:

'use strict'

// Pull in our modules
const chalk = require('chalk')
const boxen = require('boxen')
const fs = require('fs')
const path = require('path')

// Define options for Boxen
const options = {
  padding: 1,
  margin: 1,
  borderStyle: 'round'
}

// Text + chalk definitions
const data = {
  name: chalk.white('               Tierney Cyren'),
  handle: chalk.white('bitandbang'),
  work: chalk.white('Senior Cloud Developer Advocate at Microsoft'),
  opensource: chalk.white('Node.js Community Committee ') + chalk.green('⬢'),
  twitter: chalk.gray('https://twitter.com/') + chalk.cyan('bitandbang'),
  npm: chalk.gray('https://npmjs.com/') + chalk.red('~bnb'),
  github: chalk.gray('https://github.com/') + chalk.green('bnb'),
  linkedin: chalk.gray('https://linkedin.com/in/') + chalk.blue('bitandbang'),
  web: chalk.cyan('https://bnb.im'),
  npx: chalk.red('npx') + ' ' + chalk.white('bitandbang'),
  labelWork: chalk.white.bold('       Work:'),
  labelOpenSource: chalk.white.bold('Open Source:'),
  labelTwitter: chalk.white.bold('    Twitter:'),
  labelnpm: chalk.white.bold('        npm:'),
  labelGitHub: chalk.white.bold('     GitHub:'),
  labelLinkedIn: chalk.white.bold('   LinkedIn:'),
  labelWeb: chalk.white.bold('        Web:'),
  labelCard: chalk.white.bold('       Card:')
}

// Actual strings we're going to output
const newline = '\n'
const heading = `${data.name} / ${data.handle}`
const working = `${data.labelWork}  ${data.work}`
const opensourcing = `${data.labelOpenSource}  ${data.opensource}`
const twittering = `${data.labelTwitter}  ${data.twitter}`
const npming = `${data.labelnpm}  ${data.npm}`
const githubing = `${data.labelGitHub}  ${data.github}`
const linkedining = `${data.labelLinkedIn}  ${data.linkedin}`
const webing = `${data.labelWeb}  ${data.web}`
const carding = `${data.labelCard}  ${data.npx}`

// Put all our output together into a single variable so we can use boxen effectively
const output = heading + // data.name + data.handle
               newline + newline + // Add one whole blank line
               working + newline + // data.labelWork + data.work
               opensourcing + newline + newline + // data.labelOpenSource + data.opensource
               twittering + newline + // data.labelTwitter + data.twitter
               npming + newline + // data.labelnpm + data.npm
               githubing + newline + // data.labelGitHub + data.github
               linkedining + newline + // data.labelLinkedIn + data.linkedin
               webing + newline + newline + // data.labelWeb + data.web
               carding // data.labelCard + data.npx

fs.writeFileSync(path.join(__dirname, 'bin/output'), chalk.green(boxen(output, options)))

Play around with the data const and add your information. For me it would look like this:

const data = {
  name: chalk.white('Conlin Durbin'),
  handle: chalk.greenBright.bold('wuz'),
  work: chalk.white('Frontend software engineer at Lessonly'),
  twitter: chalk.redBright('https://twitter.com/CallMeWuz'),
  github: chalk.redBright('https://github.com/wuz'),
  linkedin: chalk.redBright('https://linkedin.com/in/wuz'),
  web: chalk.redBright('https://wuz.fyi'),
  npx: chalk.white('npx wuz'),
  labelWork: chalk.white.bold('      Work:'),
  labelTwitter: chalk.white.bold('   Twitter:'),
  labelGitHub: chalk.white.bold('    GitHub:'),
  labelLinkedIn: chalk.white.bold('  LinkedIn:'),
  labelWeb: chalk.white.bold('       Web:'),
  labelCard: chalk.white.bold('      Card:')
}

You can play with the colors as much as you like - check out the chalk package for more options.

Once you are done, run npm run dev again. If everything looks good, we are ready to publish to NPM.

If you don't have an NPM account, go make one! Once you have you account set up, run npm login and follow the prompt to login to your account. Once that is done, go ahead and run an npm publish. Make sure your have changed the package name.

If everything is set up right, you should see a success message! Try running npx <your_username>.

Once you get it done, take a screenshot and send it to me here or on Twitter - I'd love to see it!

Posted on by:

wuz profile

Conlin Durbin

@wuz

Software Engineer at @HackerRank 💻 Working on http://stdio.app ⚒️ writing at http://dev.to/wuz ⌨️ art+community+tech 👾🎨🏘 http://pronoun.is/he

Discussion

markdown guide
 

Thanks for a guide how to set it up. But I'm curious - perhaps someone can answer - what's the motivation behind this? I mean this seems like a bussinecards by-developers-for-developers, but how do you guys find it useful? You use npm package XYZ, check the author, and check his/hers bussines card like this? Because I suppose companies and recruiters will still favor other media to look for developers. It's cool and all but I probably don't understand its usecase fully.

 

Yeah, I can't imagine HR people / recruiters typing anything in terminal as part of their workflow. Just an in-joke among developers, I guess.

 

Either you make a print order to your local printing business or you use something like carbon.now.sh to generate a high-quality PNG of that.

 

Made my day. Thank you for writing this, Conlin ❤️

 

Made my day to see you show up to comment Tierney 😄

 

❤️❤️❤️❤️❤️

 

I loved the idea! Thanks for all you do for the community!

 

How did running random code from the internet become a fad?

 

Well, I mean, it's not any worse than the old curl | sh trick used for bunches of projects over the last decade or two. (Not that that trick is all that advisable, either.)

 
 

This reminds me of cracked games on Apple //s back in the 80s. I think if you could run this at the end of a build script to show who built the package you’re using, we’re right back to the messages put in the splash screens of cracked games. This is pretty cool in that respect.

 

Ooh I really like this idea. You could add a npm script to package.json that just runs this. Something like npm run author which could just call npx wuz or whatever your card is. I might start doing this!

 
 

Super fun article! I saw @bnb 's tweet but hadn't got around to making mine yet. Thanks for the instructions. The only thing I'd mention is enabling 2FA for your npm account if people are new to publishing to npm.

Looking forward to your next post!

 

I made it too. Really cool! Thanks for article.

 

Thanks! Really easy to follow and fun to play with :p

I would just suggest people to fork it to their on account and commit all the changes before publishing to NPM.

 

Awesome post Conlin. Now I'm going to create mine 😁

 

Though this could be really helpful to enrich the look and feel: unicode.org/emoji/charts/full-emoj...

 

Thanks @wuz ! Just created mine!

 

✌️✌️ stuff like this is keeping coding cool ✌️✌️