Movatterモバイル変換


[0]ホーム

URL:


Skip to main content
CSS-Tricks
Search

How to Build Your Resume on npm

Maks Akymenko on

Get affordable and hassle-free WordPress hosting plans with Cloudways —start your free trial today.

Just yesterday, Ali Churcher shared a neat way tomake a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up whenever we want using the command line. The cool thing about that is that you’ll be able to run it with just one command.

I know the command line can be intimidating, and yes, we’ll be working inNode.js a bit. We’ll keep things broken out into small steps to make it easier to follow along.

Like many projects, there’s a little setup involved. Start by creating an empty folder in your working directory and initialize a project using npm or Yarn.

mkdir your-project && cd "$_"## npmnpm init## Yarnyarn init

Whatever name you use for “your-project” will be the name of your package in the npm registry.

The next step is to create an entry file for the application, which isindex.js in this case. We also need a place to store data, so create another file calleddata.json. You can open those up from the command line once you create them:

touch index.js && touch data.json

Creating the command line interface

The big benefit we get from creating this app is that it gives us a semi-visual way to create a resume directly in the command line. We need a couple of things to get that going:

  • The object to store the data
  • An interactive command line interface (which we’ll build using theInquirer.js)

Let’s start with that first one. Crack opendata.json and add the following:

{  "Education": [    "Some info",    "Less important info",    "Etc, etc."  ],  "Experience": [    "Some info",    "Less important info",    "Etc, etc."  ],  "Contact": [    "A way to contact you"  ]}

This is just an example that defines the objects and keys that will be used for each step in the interface. You can totally modify it to suit your own needs.

That’s the first thing we needed. The second thing is the interactive interface.Inquirer.js will handle 90% of it., Feel free to read more about this package, cause you can build more advanced interfaces as you get more familiar with the ins and outs of it.

yarn add inquirer chalk

What’s thatchalk thing?It’s a library that’s going to help us customize our terminal output by adding some color and styling for a better experience.

Now let’s open upindex.js and paste the following code:

#!/usr/bin/env node"use strict";const inquirer = require("inquirer");const chalk = require("chalk");const data = require("./data.json");// add response colorconst response = chalk.bold.blue;const resumeOptions = {  type: "list",  name: "resumeOptions",  message: "What do you want to know",  choices: [...Object.keys(data), "Exit"]};function showResume() {  console.log("Hello, this is my resume");  handleResume();}function handleResume() {  inquirer.prompt(resumeOptions).then(answer => {    if (answer.resumeOptions == "Exit") return;    const options = data[`${answer.resumeOptions}`]    if (options) {      console.log(response(new inquirer.Separator()));      options.forEach(info => {        console.log(response("|   => " + info));      });      console.log(response(new inquirer.Separator()));    }    inquirer      .prompt({        type: "list",        name: "exitBack",        message: "Go back or Exit?",        choices: ["Back", "Exit"]      }).then(choice => {        if (choice.exitBack == "Back") {          handleResume();        } else {          return;        }      });  }).catch(err => console.log('Ooops,', err))}showResume();

Zoikes! That’s a big chunk of code. Let’s tear it down a bit to explain what’s going on.

At the top of the file, we are importing all of the necessary things needed to run the app and set the color styles using the chalk library. If you are interested more about colors and customization, check outchalk documentation because you can get pretty creative with things.

const inquirer = require("inquirer");const chalk = require("chalk");const data = require("./data.json");// add response colorconst response = chalk.bold.blue;

Next thing that code is doing is creating our list of resume options. Those are what will be displayed after we type our command in terminal. We’re calling itresumeOptions so we know exactly what it does.

const resumeOptions = {  type: "list",  name: "resumeOptions",  message: "What do you want to know",  choices: [...Object.keys(data), "Exit"]};

We are mostly interested in thechoices field because it makes up the keys from ourdata object while providing us a way to “Exit” the app if we need to.

After that, we create the functionshowResume(), which will be our main function that runs right after launching. It shows sorta welcome message and runs ourhandleResume() function.

function showResume() {  console.log("Hello, this is my resume");  handleResume();}

OK, now for the big one: thehandleResume() function. The first part is a conditional check to make sure we haven’t exited the app and to display the registered options from our data object if all is good. In other words, if the chosen option isExit, we quit the program. Otherwise, we fetch the list of options that are available for us under the chosen key.

So, once the app has confirmed that we are not exiting, we getanswer.resumeOptions which, as you may have guessed, spits out the list of sections we defined in thedata.json file. The ones we defined were Education, Experience, and Contact.

That brings us to the Inquirer.js stuff. It might be easiest if we list those pieces:

Did you notice thatnew inquirer.Separator() function in the options output? That’s a feature of Inquirer.js that provides a visual separator between content to break things up a bit and make the interface a little easier to read.

Alright, we are showing the list of options! Now we need to let a a way to go back to the previous screen. To do so, we create anotherinquirer.prompt in which we’ll pass a new object, but this time with only two options: Exit and Back. It will return us the promise with answers we’ll need to handle. If the chosen option will beBack, we runhandleResume() meaning we open our main screen with the options again; if we chooseExit, we quit the function.

Lastly, we will add the catch statement to catch any possible errors. Good practice. :)

Publishing to npm

Congrats! Try runningnode index.js and you should be able to test the app.

That’s great and all, but it’d be nicer to make it run without having to be in the working directly each time. This is much more straightforward than the functions we just looked at.

  1. Register an account atnpmjs.com if you don’t have one.
  2. Add a user to your CLI by runningnpm adduser.
  3. Provide the username and password you used to register the npm account.
  4. Go topackage.json and add following lines:
    "bin": {  "your-package-name": "./index.js"}
  5. Add aREADME.md file that will show up on the app’s npm page.
  6. Publish the package.
npm publish --access=public

Anytime you update the package, you can push those to npm. Read more aboutnpm versioning here.

npm version patch // 1.0.1npm version minor // 1.1.0npm version major // 2.0.0

And to push the updates to npm:

npm publish

Resume magic!

That’s it! Now you can experience the magic of typingnpx your-package-name into the command line and creating your resume right there. By the way,npx is the way to run commands without installing them locally to your machine. It’s available for you automatically, if you’ve gotnpm installed.

This is just a simple terminal app, but understanding the logic behind the scenes will let you create amazing things and this is your first step on your way to it.

Source Code

Happy coding!

Psst! Create a DigitalOcean account and get$200 in free credit for cloud-based hosting and services.

Comments

  1. Chris Coyier
    Permalink to comment#

    I think the easiest way of understanding what’s going on here is to type

    npx maks-dev-resume

    into a terminal and just see what it does!

    Here’s a video

  2. Brandon Tran
    Permalink to comment#

    Lol… So funny how a command line interface is considered impressive now after we spent like 3 decades making GUIs look fucking fantastic.

  3. Mahendra
    Permalink to comment#

    Cool man. Thanks for sharing.

  4. Agney Menon
    Permalink to comment#

    Back when these were all the rage, I created a CLI to automate this process. A CLI to create Profile CLIs, I guess.
    https://github.com/agneym/create-profile-card

  5. Daniel15
    Permalink to comment#

    Executing arbitrary code in order to see someone’s resume is an… interesting approach. A good experiment I guess, but I wouldn’t recommend this for an actual resume.

    The funny thing is that this seems to be going backwards a bit… One of the original advantages of web apps was that youdidn’t have to install separate apps for each site.

  6. FKA
    Permalink to comment#

    I kind of got it to work, very nice and stuff. Except that navigating with the arrow keys is a absolute hassle, I just cannot get it to work.

    Any ideas where this goes wrong?
    (I can only press enter to cycle through the options and it also never goes back, is this due to inquirer?)

  7. Krzysztof
    Permalink to comment#

    Hi
    Nice article and I’m thinking about doing it myself .
    I’m wondering about security – could it be that without looking at source code someone
    can inject malicious code at machine?

This comment thread is closed. If you have important information to share, pleasecontact us.

[8]ページ先頭

©2009-2025 Movatter.jp