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!
Top comments (21)
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.
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 | shtrick used for bunches of projects over the last decade or two. (Not that that trick is all that advisable, either.)My thoughts exactly.
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 authorwhich could just callnpx wuzor 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 😁
thanks @bnb @wuz
Thanks @wuz ! Just created mine!