DEV Community

Conlin Durbin
Conlin Durbin

Posted on • Edited on

Setting up a `npx username` card!

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)))
Enter fullscreen mode Exit fullscreen mode

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:')
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (21)

Collapse
 
worie profile image
Wojciech Połowniak

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.

Collapse
 
panta82 profile image
panta82

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.

Collapse
 
bnb profile image
Tierney Cyren

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

Collapse
 
ben profile image
Ben Halpern

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

Collapse
 
bnb profile image
Tierney Cyren

❤️❤️❤️❤️❤️

Collapse
 
wuz profile image
Conlin Durbin

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

Collapse
 
asdofindia profile image
Akshay S Dinesh

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

Collapse
 
lmorchard profile image
Les Orchard

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

Collapse
 
roborich5 profile image
Rich Howell

My thoughts exactly.

Collapse
 
benenewton profile image
Ben Newton

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.

Collapse
 
wuz profile image
Conlin Durbin

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!

Collapse
 
benenewton profile image
Ben Newton
Collapse
 
nickytonline profile image
Nick Taylor • Edited

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!

Collapse
 
4rontender profile image
Rinat Valiullov

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

Collapse
 
viniciuskneves profile image
Vinicius Kiatkoski Neves

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.

Collapse
 
lauragift21 profile image
Gift Egwuenu

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

Collapse
 
depapp profile image
depa panjie purnama

thanks @bnb @wuz

Collapse
 
themindfuldev profile image
Tiago Romero

Thanks @wuz ! Just created mine!