Labelprint.ca custom JavaScript Form

Aug 2020 - Sept 2020
Goals
  • Take existing legacy code and make a plan on how to work with it
  • Write code that is future proof and unlikely to break with future updates

Project Overview

I was tasked with fixing an existing custom JavaScript form on a WordPress theme. The form was built with jQuery and had inefficient code. Moving forward, I decided to completely reimplement it from scratch.

Process

Looking at the sea of jQuery, I was shocked that it managed to reach multiple thousands of lines of code when it really only needed a few hundred max. Realizing that most of the logic was hard-coded and not even being looped through pushed me to do the JavaScript all over again. I started by looping through each form item instead of hardcoding each one and refactored the logic to replicate the intended functionality. No design work was needed, I just had to make sure the previous design elements were present.

After I was done, I had turned a few thousand-line JavaScript file to just shy of 200! Overall, it was satisfying to see how much more efficient I could make the code.

Crystal Rothwell

My experience working with Brandon was very positive. He helped me on a variety of client projects and completed them all successfully. In particular, his help on the labelprint.ca forms was invaluable. He helped update a large amount of custom css and javascript on several long web forms to be compatible with the new version of the form plugin's code. I look forward to working with him again.

Crystal Rothwell

Brandon always does a great job and is very easy to work with.

Crystal Rothwell

Brandon is a great developer. He is very reliable. I hired him to help with some extra work and he did a great job. Thanks Brandon.

Technologies Used

This project was simple, only JavaScript and some jQuery was needed.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Converting jQuery Blog Post Component To Vanilla JS

I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]

Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript

I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]

Demo 3
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

View all 5 code samples