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 atitleattribute - Awareness of the browser DOM - I used
contenteditableso 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
Headerconstructor to construct headers and pass them to afetchcall:
<span class="hljs-keyword">const</span> headers = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Headers</span>({
<span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/json'</span>
});
- 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:
<span class="hljs-keyword">const</span> alphabet = [
[<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>, <span class="hljs-string">'d'</span>, <span class="hljs-string">'e'</span>, <span class="hljs-string">'f'</span>, <span class="hljs-string">'g'</span>, <span class="hljs-string">'h'</span>, <span class="hljs-string">'i'</span>],
[<span class="hljs-string">'j'</span>, <span class="hljs-string">'k'</span>, <span class="hljs-string">'l'</span>, <span class="hljs-string">'m'</span>, <span class="hljs-string">'n'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'p'</span>, <span class="hljs-string">'q'</span>, <span class="hljs-string">'r'</span>],
[<span class="hljs-string">'s'</span>, <span class="hljs-string">'t'</span>, <span class="hljs-string">'u'</span>, <span class="hljs-string">'v'</span>, <span class="hljs-string">'w'</span>, <span class="hljs-string">'x'</span>, <span class="hljs-string">'y'</span>, <span class="hljs-string">'z'</span>, <span class="hljs-string">''</span>]
];
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
updateMeterfunction 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
normalizefunction 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.