Flickr Search a Coding Challenge — Using VueJs and TailwindCSS
Recently, I took a challenge test for a freelance job that would consume a public Flickr endpoint to grab public photos. The challenge was pretty straight forward, but they want to see how one would go about the solution, technical experience and coding abilities by judging on coding standard, comments and style, overall solution design and user experience. I thought every company has their own criteria so I thought I give it a shot.
Designing and Solving
One thing to go with the challenge is to use VueJS 2 and then write the solution via a hosted online editor. They also pointed out, that they want the result gets updated as the user types on a search bar, …so how did I go with the challenge? First, I picked codepen as my editor since I already have an account in there. Then, I loaded VueJS 2 for the external Javascripts and added tailwindcss for my styling to get me started. Moving on, there are a couple of things I want to implement: a debounce functionality — ensures that time-consuming tasks do not fire so often, thus makes searching process more performant; a data property named query to be watched on thus triggering a new call to the Flickr public api — this is opposed to using event (keyup, change) trigger. I personally prefer using watcher on query property. This is because I think it is cleaner and also makesquery extensible for future use cases.
The JSONP Trouble
From the information I’ve gathered, JSONP —( JSON with Padding) is a way to circumvent cross-domain boundaries. It requests files using the script tag instead of the XMLHttpRequest object. Flickr uses this methodology and I just realized during this challenge, that the javascript fetch has trouble handling this kind of response. But not to worry, there are brilliant people that created a package to solve such issue — fetch-jsonp . Using it is just as the same as using the native fetch .
The Outcome
If you have trouble seeing the codepen on this page, here is the link — https://codepen.io/dixie0704/full/RwpLGad
Also, in case you were curious if I get the job, sadly I did not. :( It appears I did not meet their standards. I did not bother to ask the reasons though, I just thought, it could be that I did not put some comments in my codes. Anyway, it was a fun challenge, and also, I get to learn something new!
