After a successful call with a recruiter the next step typically is a technical interview. Technical interviews are an opportunity to show off how you code and think. I have frozen up in a lot during these. I am not a fan of toy problems, but it is a necessary evil in the interviewing process.
One way to improve your chances is to practice, practice, practice. A tool that is commonly used is CoderPad and can be set to many languages. This post will focus on javascript, typescript, html and react.
let’s get to it with javascript
Open the CodePad sandbox using https://app.coderpad.io/sandbox and the following java sample code will be shown. Press the run button to run the code. It will output the results in a console on the right section of the screen.
Tip: The keyboard short cut
cmd + /works to comment out code.
You can customize CoderPad by pressing the settings button. I recommend you set “Code Autocompletion” to “Enabled”.
Next select javascript from the dropdown menu. CoderPad will comment out the previous java code and insert a sample app. Press run to execute this code. The javascript example below uses lodash. For more info on lodash check it out here https://lodash.com/docs/.
const _ = require('lodash');
function sayHello() {
console.log('Hello, World');
}
_.times(5, sayHello);
Your interview will probably involve functions. So play around with functions using the code below. Also some interviews use a testing library to test your results. The example below uses the mocha testing library.
const Mocha = require('mocha')
const assert = require('assert')
const mocha = new Mocha()
// --------------------ordinary function----------------------------------------
function myOrdinaryFunction(a, b) {
return a * b;
}
// ---------------------function expression-----------------------------------
let myFunctionExpression = function (a, b) {
return a * b
};
// ---------------------arrow function-----------------------------------
const myArrowFunction = (a, b) => { return a * b }
// -----------------------function constructor-----------------------------------
function myFunctionConstructor(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
this.returnStuff = function () {
return this.firstName + " " + this.lastName
}
}
var x = new myFunctionConstructor("John", "Doe");
// ------------------testing functions using mocha--------------------------
mocha.suite.emit('pre-require', this, 'solution', mocha)
describe('Test suite', function () {
it('myOrdinaryFunction', function () {
assert.equal(myOrdinaryFunction(1, 1), 1);
})
it('myFunctionExpression', function () {
assert.equal(myFunctionExpression(1, 2), 2);
})
it('myArrowFunction', function () {
assert.equal(myArrowFunction(1, 3), 3);
})
it('myFunctionConstructor', function () {
assert.equal(x.returnStuff(), 'John Doe');
})
})
mocha.run()
let’s try some HTML
Your interview might test your knowledge of HTML. Use the example below to play around with HTML in CoderPad.
<html>
<head>
<style>
body {
font-family: Arial;
background-color: lightblue;
color: white;
}
#myId {
color: blue;
}
.myClass {
color: red;
}
.myMargin {
width: 40%;
margin: auto;
}
.myFont {
font-family: 'Brush Script MT', cursive;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id = "myId" class = "myClass myMargin" >Hello, World</h1>
<p class = "myClass myMargin myFont">It's a great day today. You can do this!</p>
</body>
</html>
next some typescript
I have yet to have a technical interview using typescript, but if you use frameworks like React or Angular you will need to know typescript. You can play around with typescript in CoderPad too. Just select the typescript option. Then use the following code to play around with typescript.
let myString: string = "Is typescript being used? "; let isTypeScriptBeingUsed: boolean = true; let sentence: string = myString + isTypeScriptBeingUsed; console.log(sentence);
You can test compile errors by setting the string to a number as shown and press Run.
let myString: number = "Is typescript being used? "; let isTypeScriptBeingUsed: boolean = true; let sentence: string = myString + isTypeScriptBeingUsed; console.log(sentence);
The following error will be shown in the CoderPad output screen. Notice how two errors are created, one for the parameter myString and one for the parameter sentence.
and finally a React example
You can even use react in CoderPad by embedding the following javascript. I have yet to have a technical interview that tests React in CoderPad but it is a fun example play around with. Plus it uses Material Design Lite which makes it pretty!
<!DOCTYPE html>
<html>
<head>
<title>Coder Pad React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"
charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"
charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-deep_orange.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.home-page-top-margin {
margin-top: 6rem;
}
</style>
<script type="text/babel">
const TopNavBar = () => {
return (
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Coder Pad React</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="https://getmdl.io/">Material Design Lite</a>
<a class="mdl-navigation__link" href="https://www.jimmysoftllc.com/">JimmySoftLLC</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Coder Pad React</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://getmdl.io/">Material Design Lite</a>
<a class="mdl-navigation__link" href="https://www.jimmysoftllc.com/">JimmySoftLLC</a>
</nav>
</div>
</div>
)
}
const CounterComponent = () => {
const [count, setCount] = React.useState(0);
const handleChange = (e) => {
setCount(e.target.value)
}
const addOne = () => {
let myCount = count
myCount++
setCount(myCount)
}
const removeOne = () => {
let myCount = count
myCount--
setCount(myCount)
}
return (
<div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
onClick={() => addOne()}
>
<i class="material-icons">add</i>
</button>
</div>
<div class="mdl-cell mdl-cell--2-col">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
onClick={() => removeOne()}
>
<i class="material-icons">remove</i>
</button>
</div>
<div class="mdl-cell mdl-cell--8-col">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" value={count} onChange={handleChange} />
<label class="mdl-textfield__label" for="sample2">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
</div>
</div>
</div>
)
}
const App = () => {
return (
<div className="App">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<TopNavBar />
<main class="mdl-layout__content">
<div class="page-content home-page-top-margin">
<div class="mdl-grid">
<CounterComponent />
<CounterComponent />
<CounterComponent />
</div>
</div>
</main>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
in Conclusion
They are many other languages that can be tested in CoderPad. Pick the language of your choice and have some fun. Best of luck with your interviews. You can do this!