When looking for a new job in Web Development, you always seem to need two things: a resume and a code example. The last 2.5 years of my code, at least the code applicable to my job search, is owned by my previous employer. So I didn’t have any code examples handy that I would be proud to share with a potential employer. And since I needed to update my resume, the obvious solution to both problems was to create a resume builder in WordPress.
I wanted to make a JS driven Resume Builder where I could:
- Dynamically add in fields from a limitted set of field types
- Drag-n-drop to sort those fields
- Easily add new field types by defining a few values and a template
Basically, think ACF’s Flexible Content Field, but less fancy.
Based on my old resume, there are a few types of field I would need:
- Section title – Just a text box that becomes a header on the front end
- Subsection title – Might be useful, a smaller header on the front endd
- List – A collection of text boxes that I can dynamically add to and sort
- Experience – A catch all for both work and education experiences. Includes the name of the place I got the experience from, a title field, and a start/end date.
For context, here’s a quick mockup of my old resume that I used in development
Finally, I wanted to make sure that I used:
- Handlebars – because I’ve had good success using it for templates before
- Backbone – because I needed something to manage my models and views with and WordPress already has it baked in the backend
I had experience with most of what I wanted to accomplish, but not all together, so I ended up using a process like this:
- Write some test code using hard coded data
- Extract what I needed from the test code and put it into a module file
- Remove hard coded dependencies
So after getting some base code in place, I started with creating some Backbone Views for the Resume Builder, a Section Title and a Subsection Title, and hooking up some buttons to let me add one of those fields to the builder.
The trickiest part here was making sure that I built out the fields in a way where I could plug in any type of field. To do that, I grabbed a pencil and some paper to break down what each View would be.
As you can see, that’s a few Views.
By building out the views like that, I was then able to create a new template for the Experience Field that could be plugged into that “meta field wrap”. Also, somewhere in this step, I updated my code to use a JSON object that defined the types of fields used in the Resume Builder, making the views less dependent on hard coded values.
If you’ve been counting, that’s three out of the four planned field types. I still needed to add the list field type, which is the most complex field type planned. Interesting enough, the work was pretty similar to the work I already did on the resume builder, except I only had to worry about one field type!
Finally, with the last field type working fully, I could move on to styling the builder. It might have been a pain to look at during development, but I would rather have it look ugly while developing and style it once at the end than style it up front a little bit and continue to touch it up as I go on. I’m not a front end guy, so that may have played a role in my decision too.
Not the prettiest looking tool, but nice enough for me to build out my resume!
For the final part, and there are no GIFs for this, I moved all the field definitions to PHP and passed them up to the JS via wp_localize_script(), also added the ability to save/sanitize the data entered into the resume builder, passed that saved data up to the JS when editting the page, and created a page template for displaying the resume data on the front end. Not as fun without the GIFs, but still an important part of the resume builder.
All in all, this was a fun project that I learned quite a bit on. You can find the source code for my resume builder on Github. Here are some thoughts I had after finishing the project:
Backbone is a pretty useful tool, but I only really used Backbone Views in this project. I used Models for creating the Resume Builder on the initial page load, but after that, Models became pretty useless for me. I have a new appreciation for Backbone and a better understanding of appropriate uses, and even though it works in this project, it feels like the wrong choice.
I hope this was an entertaining read for you, please feel free to checkout the source code on Github and leave a comment letting me know what you think and if I could have done something a little better.