DEV Community

loading...

Setting up a `npx username` card!

Conlin Durbin
senior binary warlock at Somewhere New? ๐Ÿง™ DM for Functions And Dragons ๐Ÿ—ก๏ธ Making D&D homebrew @ Wuz's Bazaar ๐Ÿบ he/him/his ๐Ÿ™๐Ÿปโ€โ™‚๏ธ
ใƒป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
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!

Discussion (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 Author

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 Author

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
4rontender profile image
Rinat Valiullov

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

Collapse
nickytonline profile image
Nick Taylor (he/him) • 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
lauragift21 profile image
Gift Egwuenu

Awesome post Conlin. Now I'm going to create mine ๐Ÿ˜

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
depapp profile image
depa panjie purnama

thanks @bnb @wuz

Collapse
themindfuldev profile image
Tiago Romero Garcia

Thanks @wuz ! Just created mine!

Collapse
rbuitragoc profile image
Rick Buitrago

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

Collapse
natashadecoste profile image
natashadecoste

โœŒ๏ธโœŒ๏ธ stuff like this is keeping coding cool โœŒ๏ธโœŒ๏ธ