May 14, 2016 Log No. 609

So recently (or actually, not that recently now that this soon-to-be-explained saga has dragged on), I came up with a rather innocuous idea for my site Discoverit. The color scheme was a bit drab, but instead of just reskinning it myself, why not pull in a random color palette from one of the big palette sites on a user’s initial load and use that per session? Well, there were certainly details to figure out, but it didn’t sound impossible to do, so yeah, why not?

First things first: figure out how to make an api request and pull out the colors I wanted to use.

Which is where I ran into my first problem.

The API I had settled on was ColourLovers. (Initially I had wanted to use Color Hunt but they didn’t have an API and I didn’t want to deal with roundabout ways of pulling hex values out of the source code of their page.) It seemed straightforward enough, but then when I had set up my jQuery AJAX call, I kept seeing this mysterious message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource...

Which led me to reading up on Cross-Origin Requests/Cross-Origin Resource Sharing (CORS). There are a lot of good write-ups of why this security feature is enabled (a particularly excellent write-up about it) and ways to get around it, so I did as many desperate devs do and started copying and pasting co–I mean, examining and testing my options:

Attempt 1: JSONP. Seems easy enough: just add a callback parameter to the API request and it’ll deliver the response as a variable to my JS callback! It actually is pretty magical and I was shocked to get a response. (And then I realized that this came up in a coding exercise during one of my interviews last year and the interviewer must have realized all my questions ==> I had no idea what CORS/JSONP was about. Must not have been a good look. Rectified now though!) However, major issue was that the response was being sent back in XML. And, despite how much I tried to figure out a way to get my XML to work with JSONP…was a no-go. jQuery claimed to be able to translate formats in their $.ajax function, but doesn’t seem to work.

Attempt 2: YQL. Still determined to not write any server-side code of my own (for no reason in particular), I looked to YQL, Yahoo’s Querying Language service. I had no prior experience with it before; had just seen it mentioned in some SO posts as a way to get around CORS. I didn’t want to dig too deeply into it, but it isn’t the most intuitive thing to pick up (it’s kinda like SQL syntax but to query websites for their data…?), which made for a bad combo. Unsurprisingly, did not get it working.

Attempt 3: PHP. (lol) At this point I realized that pure client side finagling wasn’t going to cut it and I guess I would have to try issuing the request on the server-side (where no cares are given about cross-origin) and then querying my own server-side file in my AJAX. One SO answer already had the PHP script written so I was like, “Why not?”…despite my backend actually being in Ruby and my Heroku set up for Ruby. You can kinda see that I was not thinking rationally at this point. Needless to say, didn’t work. Not my proudest moment.

Attempt 4: Ruby. But just as I was setting up my Ruby file, wait…turns out, if I had just READ the documentation for ColourLovers better, I would have seen that there’s a parameter to specify format (XML is default, but can also render JSON).

…

And yep, with JSONP, that works.

Wow I am such an idiot sometimes. But at least I learned a lot about CORS! I guess.