Building an Interview App
15 Aug 2019
Building an Interview App
with Vue.js
There sometimes seems to be a gap in between skills that are vetted in the job interview process, and the skills that are actually needed to manage the job advertised. We therefore decided to build an app to help job applicants being more successful in their tech job interviews.
The content of the app is not meant to be serious. We wanted to take a humoristic approach on the questions that might come up in a tech interview.
Try the app here: interview.redonion.se
Vue
Vue is a javascript front-end framework for building web applications. If you want to read more about front-end frameworks, see our article “Frameworks: What are They?”.
We chose to use Vue for this project based on the following reasons:
- The structure of Vue seemed to align with how we wanted to set up our code.
- Out of the three major frameworks at the moment, Vue seemed to us like the easiest and fastest to get started with.
If you want to read a more comprehensive comparison between frameworks and how to choose between Angular, React, and Vue, see our article “Frameworks: Comparing Angular, React, and Vue”.
Single Page Application (SPA)
A Single Page Application (SPA), is a web app or site where the user stays on a page that dynamically reloads its content. For the user, these types of websites come across as more similar to the look and feel of (mobile) native apps.
For this project, we decided to build out the website as a SPA since it’s very limited and because we wanted to mimic certain native app behaviors like screen transitions.
Animations
Transitions are a type of animations. In Vue.js, these type of transitions between views are integrated within the framework and can be written in a specific way to take advantage of the integration. However, it is also perfectly alright to add animations in other ways, or to add animation libraries on top.
For this app, we added some animations using Vue’s built-in <transition> element, and some using non-Vue related CSS.
Mathematics
Question 1: How many of X can fit into Y?
For those mathematically inclined, we used approximations of the inner capacities of what we perceived was a typical vehicle size. We also took into account how dense spheres can be packed.
Question 2: Convert a binary
Check out this article on binary numbers to dig deeper into the subject. There are also a lot of other material on the Internet for those who want to immerse themselves even more.
Colors
Question 3: What’s the hexadecimal color of success?
For allowing users to pick a color, we got the chance to use the native HTML element <input type="color">.
In order to print the chosen color in an accessible way, we had to make sure there was enough color contrast between the background and the text color of the hexadecimal color code.
This was to make sure users would be able to choose both black and white, and still have the color displayed as a background color of the hex code.
We recalculated the hex code to HSL format, and then checked if the lightness was over or below 50%. If it was higher than 50, we set the text color to black. If it was lower than 50%, we set the text color to white.
Wikipedia API integration
We’re utilizing Wikipedia’s open API to display short descriptions of the submitted text. In some cases, the short description of a topic on Wikipedia might be inadequate, but in most cases the text is thoughtfully authored and serves its purpose.
