mycontractorexam.com
Winter 2023
About
This is a Shopify theme built custom for the CEI/MyContractorExam arm of Colibri. While initially it looked like the team for this project would be larger, I ended up as the sole developer as well as primary technical contact fairly early on into the project. My role encompassed development of UI components, customization of the theme and tools for the client’s content needs, extensive data migration, third party integrations (beyond simple plugin installation) and project tooling.
At the time I wanted to minimize dependencies, and we did not have the team size to justify full Hydrogen theme even if we had the team I initially expected, so the theme was built from scratch using a blank template, a bespoke CSS library which used SCSS for setup but largely relied on extensive use of CSS custom properties. Component Javascript was written with bare classes which I mention for posterity. In retrospect I would have simplified this with web components but here we are.
A few of particular interest or below, but it is worth reiterating that, for better or worse, there isn’t a line of Liquid, Javascript or CSS or JSON for this project that I did not touch.
Main Navigation
This, to me, is of note because it is more-or-less built on the fly with custom JS from JSON generated by a plugin. The plugin’s scripts were taking upwards of three seconds to load (occasionally much, much worse) and were not deferred and thus keeping the menu unusable for far too long. I noticed that even with the plugin set not to display on the front end, any changes I made to its structure on the back end were saved to a developer-accessible JSON file which I sorted out and mapped to usable markup which I then styled. It’s not at all wonderful, but there were major performance improvements with this technique and was robust enough to handle a number of pre-launch changes.
Course Finder
The most noteworthy thing here is the logic going on activating and deactivating options based on selections. This, like everything else, was done custom.
Product Comparison Table
An unassuming table layout that took forever to get right. It is dynamic to both the number of products on the table as well as the number of rows; empty rows are dynamically removed and there are options for sorting as well as custom ordering.
Link Cards
I really like hover effects with continuous motion, like the ones on these boxes that go top left to bottom right. Little UI flourishes like this make me very happy.