Macy's 10 Days of Glam

10 Days of Glam is an annual 10-day promotional sales event for Macy's. The products are updated yearly and the sales dates themselves change, but the codebase itself remains roughly the same. This is a static website built on NodeJS. Based on a date query passed in the URL, for example: ?date=06-15-2018, the date's card would have a special class and all relevant products to that date's deals would display below.

I was brought onto Macy's as a contractor, assisting the existing web marketing team with their needs. My contribution to this project was meant to be frontend only, making sure the website matched the comps. However, I ended up contributing more than just some responsive styles. I feel very proud of my contribution since part of it was a literal rescue operation!

Correcting DateTime Discrepancies

First, I was able to solve a problem that had been stumping the senior developer who was the primary on this project. The core feature of this mini-site was to display products based on the current date, as explained above. This was a functionality, written in Node, that compared the current, real-time date using JavaScript's Date object against a JSON set of established dates: ten days of pre-planned glam.

The problem was that despite the dates being the same, the comparison conditional kept failing. As it turns out, the Date object being created would give you the current timestamp, right down to the exact millisecond. The date stored in the JSON set only had the Year-Month-Date, thus failing each and every check. To solve this, I simply set the seconds of the Date object to zero (0) with the setSeconds() method.

Well, what about the hours and minutes? Were those also compared? The answer is YES! And this leads me to my next notable contribution to this project...

Wrangling with Time Zones on a Friday Evening

Although our team was located in the east coast, specifically in New York, deployments were handled by the IT team in the west coast and all promotional events were to be based off Pacific Standard time.

It was Friday. This mini-site had been approved, bundled up, and sent off to be deployed earlier in the week. Everything appeared to be working well and the event was going on, when suddenly, a bug is reported! It was a high urgency ticket since it affected potential revenue from sales, as well as downright annoyed shoppers who might have been trying to purchase a previous day's sale item.

The JavaScript Date object will return the current time based off the local time of the client's device (Reference: MDN), which meant that west coast users would be given access to the newest Deal of the Day 3 hours later than east coast users. We needed to standardize this so that all users across the United States (and even world-wide users) would experience the Deal of The Day switching at the same exact time, regardless of time zone.

5pm rapidly approached. The primary developer had to leave early and had not figured out a fix, and so he assigned the ticket to me. The team manager also had to leave. One by one, the team left the office and I was left alone with the task of fixing this. It felt a little strange to be handed such a critical ticket on a Friday evening, since I was the newest addition to the team and a contractor to boot, but ultimately I understood my function as a contractor was to provide assistance when needed and this was definitely a situation where I could absolutely provide assistance.

It took some time into the evening but I was able to come up with a successful solution. The Date object would output UTC (Coordinated Universal Time) and it would then be compared against the current west coast time, with consideration for Daylight Saving Time for future-proofing. This solution required not only updates to the backend JavaScript (node) but also tweaks to the frontend JavaScript to ensure things ran smoothly and the correct products and styles would appear. I felt pretty proud of the challenge that I had vanquished.

Per the team manager's request, I placed the entire solution into a git branch completely separate from our standard dev/master/fix branches, and assigned it to him so that he could make the commits into the repository.

Other Notable Contributions

When looking at the seed repository used to build these mini-sites, I realized that there was a lot of unused or commented out code being packaged up and shipped. Knowing that there were existing concerns about the large size of packages that this team was sending over to IT, I (with permission) was empowered to optimize and update the entire codebase as much as possible.

I completely modularize and optimize Gulp tasks to enhance readability and reduce unnecessary code. Then, I went ahead and introduced PostCSS. I opted for a post-processor because many of the existing sites were written in straight CSS and I did not want to change up the team's existing workflow too much. I also added Babel to compile ES6 JavaScript syntax as a way to slowly encourage modernized practices. There was also a lot of cleanup required in the actual Node application itself, so I went ahead and optimized as much as I could.

My other projects at Macy's were: Black Friday deals and Cyber Monday deals, although the work required there was not nearly as exciting and fun as my work for this project.

Year: 2018