res.send(“Happy Valentine’s Day!”)
I want to begin by stating that I’m actually good at remembering dates. I’m in the middle of General Assembly D.C.’s software engineering immersive, and my Google Calendar is a work of art. I track my assignments, schedule out manageable chunks of work, and turn things in on time; all in all, I am #adulting like a champ.
Things changed a bit when we started our unit on Node. These topics were entirely out of my wheelhouse, and I spent so much of my working brain power trying to understand the difference between app.use and app.set that some other things fell by the wayside: laundry, eating the occasional vegetable, and (most notably) Valentine’s Day.
Gradually, heart-shaped decorations started going up right alongside my blood pressure, but I certainly didn’t notice them. Between attending class, keeping up with homework, and making sure I got on the correct train home, February 13th snuck up on me like an ArrayOutOfBounds error at runtime. I had zero Valentine’s Day plans for my boyfriend — who, it should be noted, was being an absolute champ about the whole “long distance relationship” thing so that I could take this course in the first place and has always been nothing but supportive of me pursuing this career change. He deserved something special, but at this point, not even Amazon Prime could save me.
So, I did what any devoted, procrastinating, up-against-the-clock girlfriend does: I built my boyfriend a Node package.
More specifically, I built a Valentine-themed variation of the popular Emergency Compliment Generator. Instead of spitting out a generic compliment, I compiled a list of computer science- and- math-themed pickup lines (Sam is a software engineer himself plus a general geek-of-all-trades) to iterate through. To personalize things a bit, I also curated some of our favorite photos together. Cute picture + ooey-gooey sentiment of love = instant valentine.
Jumping straight into the code seemed daunting, so I tried to think through the very basics. I knew that I’d be building the logic with the Express framework, and I had some experience using Handlebars as a view engine from class assignments. Further, I’d need to use npm to get these facets in the first place, so setting up my development environment seemed like a dandy place to start:
npm initnpm install express handlebars
Next came the file structure, which also didn’t require any code-on-screen to set up. After a little bit of whiteboarding, I really started to understand what should go where:
-public (for my static content: all of my image files and my stylesheet)
-views
---layout.hbs (my main view which contained the link to the stylesheet)
---index.hbs (my homepage)
---pictures.hbs (where I’d display the picture and text pairing)
-comments.js (an array of my text content)
-pictures.js (an array of file paths that reference my photos)
-index.js (where everything comes together: import everything in and write out the display logic)The time came for me to actually put fingers on the keyboard and spit out some code. Gaining momentum was tough, and I initially had to refer to my notes for each line, but after an hour or so I noticed something weird: I was kind of having fun, and after building out the basic display logic I had a new idea to expand the app. I had two arrays of length n, and to pick different values on each page refresh, I generated a single random number between 0 and n-1. This matched the same comment with the same picture every time, which got old pretty quickly. If I simply generated two random numbers, I would have n*n pairs instead. Much more interesting!
app.get(“/pictures”, (req,res) => {
const pictureIndex = Math.floor(Math.random() * pictures.length)
const commentIndex = Math.floor(Math.random() * comments.length)res.render(path.join(__dirname,’views/pictures’),
{pictureFile: pictures[pictureIndex],
comment: comments[commentIndex]})})
I hit a snag getting my stylesheet to play nicely when publishing the package to npm, so I enlisted the help of one of my instructors, Hammad Malik. “You know, this isn’t really what npm is for,” he said, starting to smile, “but this is awesome.” With his help, I realized that index.hbs and pictures.hbs weren’t feeding into layout.hbs as partials. With more time I would have jumped into the documentation, but I was building this because I was low on time, to begin with. For a quick “fix,” I dumped layout.hbs and instead loaded the stylesheet directly into my two other views. 45 minutes and fifteen versions later I pushed the final version out into cyberspace. Valentine’s Day disaster averted.
Hammad was right: npm isn’t really designed to deploy single-use apps that don’t function into other projects. However, by getting a little messy with my code, I learned so much more about Express than I previously had staring at the examples from class, willing them into sense. By finding and challenging the outer limits of Node, I came to appreciate better what it was great at. Trying to cram a square peg into a round hole may not always work out as expected, but the attempt will teach you some interesting properties about those shapes.
The next time I need to deploy a picture-and-pickup-line printer ASAP, I probably won’t turn to npm. Venture capitalists aren’t exactly doling out the big bucks to fund my little pet project, but I do have something properly unique to me, a thorough understanding of Node that will stay with me for a long time, and a happy boyfriend. After all, what says “I love you” like 100 lines of original code?
Oh, and in case you were wondering: he loved it.
You can download Sam’s 2019 Valentine’s Day gift at https://www.npmjs.com/package/for-sam-2019. You know, if you’re interested in pictures of a couple of sun-deprived programmers and some bad puns.
