How to Build your Resume on Npm

css-tricks.com css-tricks.com6 months ago in #Funny Love142

Just yesterday, Ali Churcher shared a neat way to make 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 in Node.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 “$_” ## npm npm init ## Yarn yarn initWhatever 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 is index.js in this case. We also need a place to store data, so create another file called data.json. You can open those up from the command line once you create them:touch index.js && touch data.jsonCreating the command line interfaceThe 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 dataAn interactive command line interface (which we’ll build using the Inquirer.js)Let’s start with that first one. Crack open data.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 chalkWhat’s that chalk 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 up index.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 color const 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 out chalk documentation because you can get pretty creative with things.const inquirer = require(“inquirer”); const chalk = require(“chalk”); const data =…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply