Code exercises to get job interviews, part 1

Hey friends, here are the code exercises I submitted to various tech companies. Each section links to the GitHub repo which includes my code submission. Hope you find it useful!

Update: Part two has been published, go and check it out

Repo: https://github.com/umaar/hyperapp-example

Moved onto the interview stage

Monzo seems like a cool forward thinking company. This coding exercise allowed me to proceed to the final in-person interviews.

For the solution, I got the vibe they preferred a React solution. As I hadn't used React lots, I opted for a lightweight alternative known as Hyperapp, it was my first time using it.

Whether I used Hyperapp in the best way, I don't know. However, here are some aspects of my code which I believe worked out well for me, because it demonstrated awareness. IMO, awareness of a technique/practice/technology is sometimes all that's needed. Using a certain technique/practice/technology effectively is a different point, and something that can be learnt on the job. Anyway, here are those code aspects I'm talking about:

• Modern EcmaScript syntax
• Awareness of large vs. small libraries (I used 'date-fns' over 'moment.js')
• Consideration of UX e.g. where I had to display a time, I displayed an x hours ago-style time, and embedded the actual date in a title attribute
• Awareness of the browser DOM - I used contenteditable so the user could update some text. This is probably terrible for UX & discoverability, but again, awareness
• Error handling - Basically I went through the app and tried to break it, then just showed a relevant error message for most edge cases
• Awareness of layout techniques by using CSS Flexbox
• JavaScript ecosystem - I used a JSON Web Tokens module to decode some JWT data
• Appropriate browser APIs, e.g. I used the Header constructor to construct headers and pass them to a fetch call:

const headers = new Headers({
	'Content-Type': 'application/json'
});

• Storage mechanisms - I used local storage to store the JWT data

This stuff isn't groundbreaking and I don't think I won anyone over with any single point, but maybe a combination of each point is what led to a positive outcome.

Repo: https://github.com/umaar/keypad-challenge

This coding exercise for Google was not part of an application.

I met a guy at Google I/O (see this timelapse to get a feel for what attending I/O is like!). He told me it was an interview challenge his colleague gave out to applicants. For fun, I thought I'd give it a go after I flew back home. I didn't send this out and there's no pass or fail outcome.

In this instance, I can share what the challenge was: You have a keypad:

const alphabet = [
	['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
	['j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r'],
	['s', 't', 'u', 'v', 'w', 'x', 'y', 'z', '']
];

The challenge to solve is, given a character or word, output the directions to get there on the keypad. e.g. for the character a, you're already there. For the character c, the result should be: ['right', 'right', '⏎'].

Algorithms aren't my strong point, but I did my best. The solution works (at least for the few characters I tested) but the solution is probably far from optimal. I tried to do a 'functional' approach using things like Array.reduce. This exercise was a personal goal for myself!

Repo: https://github.com/umaar/meter-display

This is my solution for Geckoboard.

This timeboxed submission did not meet their standard. If you're curious what the challenge was, the initial commit may give a hint.

They gave some interesting feedback which I'm grateful for. I won't repeat the feedback, but here are some areas I'm aware I could have improved:

• Separation of concerns. The updateMeter function is responsible for data fetching, validation, formatting and rendering
• In the initial commit, I checked if the user was online, and if so, returned mock data. Turns out that this worked against me since it was not necessary and confusing to some
• I had a test which failed to mock out the call to Math.random

Repo: https://github.com/umaar/wordcloud

Moved onto the interview stage

This solution for SitePen allowed me to progress to the final interview ✅️.

This was a fun (timeboxed) exercise to do. The requirements were clear and it felt like something I would do in my spare time anyway! If you run the main script in your browser DevTools, for example on a page with lots of text, you'll figure out what was needed.

Not much to say here except:

• I copied a normalize function from stackoverflow, but made a note of that
• I tried to use a a fairly 'functional' approach in my solution, as in, not so many stateful variables
• The main function had a clear and logical ordering of steps, e.g. cleanText, extractWords, getWordFrequency, createTagCloudTemplate, getTagCloudStyles, so it was fairly readable IMO

Repo: https://github.com/umaar/train-timetable-coding-exercise

Moved onto the interview stage

This solution for Masabi got me to the final interview stage.

Really enjoyed this (timeboxed) exercise.

I tried to give this a model-view-controller approach, sort of. I used simple mustache templates which were then rendered client side. I would like to have done some sort of templating precompilation which can have significant network download savings, but also computational savings since there's less JavaScript to execute. I used jQuery, which looking back was not really needed.

 

I have published a part two: go and check it out

 

FAQ

Did you get job offers?

All I'll say is for each company except Geckoboard & Google, I progressed to the next stage!

Aren't these private?

I'm sharing code which I own, and worked on in my own personal time. One company did pay for my time to do a different exercise, and so I haven't shared that. However in this vein, I'm not sharing the instructions I was sent. That being said, for some of these projects, the instructions are already publicly available and discoverable through searching.

I received this challenge as part of my job application, what now?

When doing the Monzo code challenge, amongst others, I intentionally scanned GitHub for other Monzo code exercises and used them as inspiration (related: my blog post on learning from open source). More importantly, I disclosed this information to them in full, making clear what parts were inspired by other code I had seen.

Did you stay within the timeboxed allowance?

Yep! The solutions you see on Github have been cleaned up a bit, e.g. I added a 'GitHub action' to lint code on push. I removed babel from some of them.

What lessons can you share from doing these exercises?

• Before doing anything extra, first meet their requirements!
• Some companies will receive literally hundreds of the same exercise solution, can you make yours stand out at all?
• Try and demonstrate knowledge, or at least awareness, of important concepts, such as functional programming, performance, a11y etc.
• For more algorithmic challenges, solve it in the real world first (paper, whiteboard etc.)

Any more code exercises?

Yes I have a few more! I'd appreciate your feedback on twitter letting me know if you want to see more of these posts.