December 07, 2017
In my last post, I described some of the trials of making the jump to being a Junior SysAdmin. Jumping into the unknown is one of my favourite parts of working in Web Development. It can be an extremely overwhelming industry at times and I oftenfind myself experiencing a serious amount of imposter syndrome. That said, anytime I take on a project, I break it into smaller components and build it back up. With that method, I rarely hit a wall so large that I can't hurdle over it to the finish line. 🐎
The client in my last project had pretty non-specific needs. He wanted a portfolio site to display his woodworking projects to friends and potential clientelle. I could have easily phoned it in with a quick image upload script, however, I wanted the site to be a joy to use both to ensure he was happy, but also, (selfishly), to reduce the chance that he would require help getting it setup and running. After making the jump to Node.js-land from working on a LAMP stack for most of my web development career, I found the lack of image processing documentation and pre-made packages a little startling. It's not that I set out to just download a pre-made script throw it onto his website, and call it a day but... there wasn't a ton of information on the subject. Admittedly, when I was still in PHP land, I was using a combination of pre-mades and my small amount of knowledge of ImageMagick to get by. I didn't have a huge understanding of multipart file handling, if any. So, I broke it out into pieces:
Woo! Easy, I thought. In hindsight, it wasn't so bad getting this all worked out. But, the road to glory here was a long and treacherous one with many, many late nights. I've emerged as a stronger programmer with an improved toolset—and a reduced feeling of imposter syndrome. So, let's take a quick look at what I used:
I used Passport.js to handle authentication. The site really only needed two admin accounts—one for the client and one for me—so, I didn't want to invest too much time here. Passport.js is a fantastic piece of middleware that works great with Express. It handles authentication locally, and for Facebook, Twitter, and whatever else you can think of. Highly recommend!
Multer is a great tool with not a ton of documentation. Once you figure it all out (lots of StackOverflow reading, folks). This grabs your multipart form data and puts it into an array (files.) for you to work with.
For image-processing on the server side, I used Sharp which has fantastic documentation.
To make things easier for the client, I used Dropzone.js which upgrades your regular <input type="file"> into a super-duper input that handles multiple files that you can just drag-and-drop to. Tons of customization and options made this a breeze to implement. I did a ton of hacking to add extra inputs as the images are dropped so the client could append titles, descriptions, and add gallery information for each image uploaded.
Obviously there is no link for this one but I can't stress it enough. If you're in over your head with a programming problem, take a walk, take a breather, make a coffee, watch an episode of a television show or a YouTube video, and come back to it. You'd be surprised what a 15-minute break does for your brain and allows you to really break problems down and come to a solution that seems so far away when you're stressed.
If you're interested in the project, it was for a home renovations company in Edmonton called Triple C Woodworx that creates beautiful custom wood furniture, cabinetry, and other pieces.
The project can be found on GitHub as well.
Cheers! 🚀