Congratulations on making it this far in the recruitment process!

We have put together this brief technical test, to understand your approach to problem solving
using core programming skills. Please note, that this test is not designed to test your ability to
write React or JavaScript code, merely to get a picture of how you approach a problem.

Part 1 - Low Level Concepts

You are provided with an old machine (from 1980) that has a very simple architecture, and a
very simple machine language. The machine uses an accumulator register on the CPU where a
value is stored, and then can move whatever is stored there to a memory location in the
machine.

As the machine doesn’t have any high-level languages, you are required to work using a
primitive assembly language which interfaces directly with the CPU.

It understands the following operations codes (opcodes):

Opcode What it does

LDA <hexValue> Loads an 8-bit value into the accumulator (A)

register on the CPU using hexadecimal
notation.

STA <memoryAddress> Stores whatever value is on the accumulator

register to a memory address

DEFINE <name> <memoryAddress or For simplicity, allows for named variables to

hexValue> be defined.

INC Increments the accumulator register by 1

JMP <label> Jumps execution of the program to a label

defined by :label
Used to create primitive looping statements or
branches.

BWE <hexValue> Breaks execution when the value stored in

the accumulator register is equal to a
particular value

The manager explains that the machine is an 8-bit machine, and therefore uses hexadecimal
notation to refer to values between 0x00 and 0xFF.
---------------------

Question 1:

How many base-10 / decimal integer values can be stored in two hexadecimal digits?

The maximum hexadecimal value for 2 digits is FF.

Converting (FF)16 to Decimal = 15 * 160 + 15 * 161 = (255)10

---------------------

Question 2:

How many base-2 / binary bits can be stored in two hexadecimal digits? And what word refers
to the amount of data that can be stored in this many bits?

The maximum hexadecimal value for 2 digits is FF.

Converting (FF)16 to Binary:
The first Digit F = (15)16 which equals to (1111)2
The second Digit F = (15)16 which equals to (1111)2
(FF)16 = (11111111)2
Which means That we need 8 bits to store that value in Binary

---------------------

The manager has an old program that he shows you, which counts from 1 to 10 and outputs the
value to the display, which is accessible through memory location #10FF

DEFINE num 0x00

:loop
LDA num
STA #10FF
BWE 0x0A
INC
JMP loop
The manager then explains that he is working on a graphical program, and firstly wants you to
test the graphics capabilities of the machine. He described that the machine uses the memory
addresses #0000 through to #00FF to access each pixel that can be outputted to the display.
Each memory address in that range can store a value between 0x00 and 0xFF which
represents the colour of each pixel.

---------------------

Question 3:

How many colours can this machine display? How many pixels does the display have?
The machine can display 256 colours, and has 256 pixels.

---------------------

He wants you to write a simple program using the machine instructions described above to loop
over the different colours that the machine can output, and print one colour to each pixel on the
display. In other words, each pixel on the display should display a different color.

He also explains a bit more about the INC function, and states that it uses the concept of
pointers that you may be familiar with from other languages, such as C. He states that when
using the INC opcode, the memory address that is pointed to by the accumulator is updated.
For example, if you define a variable and load it into the accumulator, and then increment it, the
original variable is incremented too.

---------------------

Question 4:

Can you use the simple language of the machine to create such a program? One that prints all
colours that the machine can handle to each pixel of the display?

DEFINE colour 0x00

DEFINE pixel 0000
:loop
LDA colour
STA pixel
BWE 0xFF
INC
LDA pixel
BWE 00FF
INC
JMP loop
---------------------
Part 2 - Abstr action

The previous section tested your ability to reason and problem solve at a hardware level. In the
real world, this is rarely necessary, as higher-level abstractions exist that make your life much
easier.

Now let’s imagine we are working with the same vintage machine used in the previous part, but
your manager now tells you that in actual fact, the machine can be programmed using a high-
level language, called Simple C. Simple C is similar to C, but only uses a few reserved words:

Keyword Function

byte / byte[<size>] <name> Used for defining a single byte, or an array of

bytes of a certain size with a given name.

+, -. *, / Operators for addition, subtraction,

multiplication and division

for ( variable; condition; step) { … } Used to create looping code based upon a
variable until a condition is met

= The assignment operator, used in variable

declarations and assignments

==, !=, >, <, >=, <= Comparative operators

++<variable>, <variable>++ Pre and Post Increment a variable

* Declare a variable to be a pointer to a

memory address. For example, byte *ptr
= anotherVariable would declare a
pointer to the memory address that is
occupied by a certain variable. Note, Simple
C does not require any length when declaring
a pointer to array, it infers this itself.

memcpy <memoryAddress1> Used to copy the contents of one memory

<memoryAddress2> address to another. Hint, a pointer to a
variable can help find out the memory
address of something in your code.

The manager states that by using Simple C, an entire frame of data, containing 16 x 16 pixels,
each containing a byte of numerical (decimal) data to represent the color can be written to the
same memory address at #0000 in order to achieve the same output as you demonstrated in
the previous question.
---------------------

Question 5:

Using Simple C syntax, write a program that performs the same function as in the previous part.
The code must write all 256 colors pixel-by-pixel to the display at the location #0000. Hint, the
display measures 16 x 16 pixels (so 256 total pixels). The code must sit within the main
function, provided below. Simple C follows a C-like syntax, with semicolon terminators and
curly braces to delineate blocks of code / closures.

void main() {
byte[256] colors;
byte i;
for(i = 0; i < 256; i++) {
Colors[i] = i;
}
byte *colorsPointer = colors;
Memcpy colorsPointer #0000;
}

---------------------

---------------------

Question 6:

Simple C is a compiled language, much like C, C++ and Objective C. What is code
compilation? What abstractions are happening? Can you understand what is happening at
hardware level?

It’s a process of transferring a program of high level code into machine code, and it’s done in 4
steps:
1. Preprocessing:
Remove the comments from the code and fetching included files from libraries.
2. Compiling:
It takes the output of the project and generates assembly Language code.
3. Assembly:
The assembler will convert the assembly code into pure machine code.
4. Linking:
linker merges all the Machine code from multiple modules into a single one.
---------------------
Section 3
It turns out that your manager is actually hiring you for a NextJS and Google Cloud stack
position, and wanted to understand how you think about problems conceptually first, using his
vintage and limited technology. Why did he do this?

1. His business pays money for hardware infrastructure such as Firebase, and every byte
transferred costs him money!
2. He wants his code to be efficient, so that he can add features later without worrying
about bloat.

The manager then shows you a React component that was developed by his old developer,
which he seems unhappy about. He states that the component is supposed to be a clock,
which counts the number of seconds somebody has been on his website. He displays this
component proudly at the top of his website. The problem is, since his developer created this
component (which works), he states that his website has become really slow to use.

import React from 'react'

export default class MyTimer extends React.Component {

constructor() {
super()
this.state = { timer: 0 }
}

componentDidMount() {
var millisecondsToWait = 1000
var timeStamp = Date.now()

while(true) {
while (Date.now() < timeStamp + ms) {
// JUST WAIT
}
timeStamp = Date.now()
this.setState({ timer: this.state.timer++ })
}
}
render() {
return (
<p>You have been here for {this.state.timer} seconds!</p>
)
}
}
---------------------
Question 7:

Can you refactor the component to make it:

1. Functional, and using React’s useState and useEffect hooks rather than class-based
syntax?
2. Improve the waiting function, to make it non-blocking?

import React, {useState, useEffect} from 'react'

const MyTimer = () => {

const [state, setState] = useState({ timer: 0 })

useEffect(() => {

setTimeout(() => {
setState({ timer: state.timer + 1 })
}, 1000)

}, [state.timer])

return (
<p>You have been here for {state.timer} seconds!</p>
)

export default MyTimer

---------------------