Flickr Search a Coding Challenge — Using VueJs and TailwindCSS

Photo by Chang Duong on Unsplash

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!

--

--

--

Programmer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is the Open-Closed Principle?

Fl Studio Beat Maker Free Download

What is flutter_meedu?

How to Build Your Own Python Package

Improving Stability with Modern C++, Part 4 — Memory Management

My Ignite experience

Openness Can Be a Problem in Cross-Domain API Economy Community

Dynamic programming

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dixie Atay

Dixie Atay

Programmer

More from Medium

Add TailwindCSS to Your Gatsby Site

Gatsby Tailwindcss

Authentication with Next.js and Strapi — Part 3: Forgotten & Reset Password

Creating type safe emails with mjml-react and Typescript

Creating a Custom Block Using the Genesis Custom Blocks Plugin