My Favorite Days

Days when we are shipping new products or versions are usually my favorite for obvious reasons. After a whole lot of hard work, you tend to get some recognition, and your hard work in unleashed into the world. I knew on Friday we would be shipping the latest version of the payments application equipped with the step to allow the customer to pay with their bank account instead of just with a credit card, and was given a list of small things to fix up before we went live. The person who acts as a supervisor to me would be presenting this version in a meeting with all of the sales representatives today at 9, so it had to be out by then. I actually finished about 90% of the changes before I finished up on Friday, but I left myself with the hardest part. The check component itself was all janked up due to some Bootstrap layout that is brought in by some PHP legacy code. For the most part I was able to get it working by the time I left on Friday too, and so I got in a little early this morning to get it polished up. When I passed it over to her, she opened it up on her computer and it looked totally different. After about 10 commits, I couldn't seem to fix whatever was going on on her side, but I kept trying. At one point, I scrapped all of the CSS I had already written for this component, which was extensive, and completely rewrote it. I had used the grid system before, but I had to bring in a ton of prefixes to cover for IE11, so I decided to do the whole thing with Flexbox instead.

This rewrite took me until about noon, and I passed it back over to her at this point. When she opened it up, these differences in our 2 systems still persisted. I was convinced it was some setting she had on her browser, so we tested it on different computers and even an iPad. In all cases, the result looked like what I was seeing on my computer, so we dug into her settings for the umpteenth time. Finally, we found she had a minimum font set at 12 pixels, which was throwing off the whole thing. This issue cost me all kinds of time and sanity, but I'm just glad it's in working order now. Still, I'm so frustrated by this layout issue with Bootstrap. This means that while I'm developing locally, my view of the application looks very different from what it looks like live. This is about impossible to develop with; the only way I can make sure it works is to pull it up on our development server, fix the issues in Chrome's Developer Tools, and then transfer those fixes over to the code. When I pull it back on the local server, everything is wrong. At some point, I'm either going to forget that this is different in production or someone else is going to come along and try to fix what isn't actually broken. It defeated me today, but at some point, I need to come back and truly fix this issue, one way or another.

After pushing that to production for the final time, I moved on to other projects, mainly the next version of this payments application. I have pretty much everything in place at this point except for something I can't control yet. If a customer has already purchased a plan, I don't want to show the option to purchase a plan to them, and conversely, if they haven't yet bought a plan, they should not be able to purchase the other items without purchasing a plan alongside. This may seem like some complicated logic, but it really will only come down to a couple of conditional checks in the right places. As of now, I don't get the information I need from the backend to ascertain whether they have already purchased a plan or not, so I can't proceed on this check until I do. I spent the rest of my day today fixing up the step indicator I started working on Friday. As I was working on this component, I realized the logic surrounding whether the steps should be opaque or not was becoming unruly, and decided I really needed to do something about it. I needed a way to keep track of what steps had already been completed to show where they should be in the process. I decided on a stateful array that would be handled by context. Every time a step was completed, it would be pushed to this array as a string. If the user goes back a step, the step would be filtered off of the array. I thought it was going to really difficult to implement, but with the power of context, it was a real cinch. And, for anyone else ever working on this component, they will never know how awful the code could have been to work with.

Until tomorrow!