Welcome back, esteemed reader!
This is my first post since graduating Thinkful, and let me tell you, it has been quite a whirlwind in the interregnum! Aside from beginning my job search, which poses its own trials and tribulations, it is during this period that I encountered my first post-production issues in the projects I created.
While such situations can be a frustrating experience for any developer, I also relish in the success of finding solutions to such problems and the additional experience I gained working more in-depth with several technologies.
..And what better way to really test what you know about a technology than having to maintain a project and fix a few bugs that came out of the wood works!
In this post and the next, I want to discuss two scenarios in which I found myself troubleshooting apps I created several months prior, as it was tampered with by outside forces…
The first issue came in the lead-up to graduation. As I was building my portfolio site, I began testing each project once again before going live. While looking back at my first capstone project, Be There, I quickly noticed that when I searched by career title, I was greeted with a blank results page. More specifically, it was nothing but the title and footer along with some hollowed-out graph axes. And no MAP! Where was the pride of this project, the coolest item of all to use
d3 and bring such awesome color to the page??
I got my answer when I opened up the console and realized that my data was no longer successfully being received from the Glassdoor API. I tried the other search method for my app involving career progression, which continued to work just fine. After searching through the now-gutted API docs, I presumed that Glassdoor must have deprecated the specific query parameter. Unfortunately, after some more scouring in the docs and reaching out to the company, it was confirmed that not only was that search action no longer supported, but the entire action behind that portion of the API had been scrapped.
At this point, I thought the best way to salvage the app and get my map back was to find an alternate API that could get me the data I needed. Hello again, Programmable Web! Unfortunately, the API options available were not viable for one reason or another, so I decided to do some manual data scraping instead. I ultimately utilized the data for the top cities and states as the API calls had done originally from Glassdoor and narrowed it down by specific software fields. Lo and behold, my map is back!
While no longer in its ideal form, this project really taught me quite a lot about AJAX and API calls more generally – not to mention the power of d3.js! Unfortunately, I also learned a hard lesson that depending on a third-party library or API – even if it works great in the beginning – can sometimes cause its own problems over time (note this bit of foreshadowing to my next post).
The Glassdoor API docs (or lack thereof) would not be the only problem I encountered. Shortly after fixing this problem, the career progression search results broke as well. This time, it appeared to be a strange mishap with how the
Github Pages HTTPS-enforced environment was retrieving the API data. While I am familiar with problems regarding Mixed Content, I had constructed the app specifically to circumvent this problem, and it has previously always worked with – as Borat would say – great success.
Upon further inspection, it became clear that this error was only occurring in Chrome. Yep, I was shocked too - Microsoft IE could do something Chrome couldn't??
Not to worry – Node came to the rescue on this one! I discovered a handy little tool – the Node Fetch polyfill. I went ahead and built a simple server to handle the requests. This turned out to do the trick! As I had originally constructed the app with jQuery to handle AJAX requests, this process also helped to reinforce some aspects of the
Fetch API (I will never again forget my Content-Type: application/json heading!) Not to mention, a bit more practice with Node never hurt anyone… (More foreshadowing here.)
I will discuss the issue I had more recently with my latest app in my next post.
Until next time!