---
tags: ironhack
---
<style>
.markdown-body img[src$=".png"] {background-color:transparent;}
.alert-info.lecture,
.alert-success.lecture,
.alert-warning.lecture,
.alert-danger.lecture {
box-shadow:0 0 0 .5em rgba(64, 96, 85, 0.4); margin-top:20px;margin-bottom:20px;
position:relative;
ddisplay:none;
}
.alert-info.lecture:before,
.alert-success.lecture:before,
.alert-warning.lecture:before,
.alert-danger.lecture:before {
content:"👨‍🏫\A"; white-space:pre-line;
display:block;margin-bottom:.5em;
/*position:absolute; right:0; top:0;
margin:3px;margin-right:7px;*/
}
b {
--color:yellow;
font-weight:500;
background:var(--color); box-shadow:0 0 0 .35em var(--color),0 0 0 .35em;
}
.skip {
opacity:.4;
}
.gallery {
display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:1rem; align-items:center;
margin-top:.5em;margin-bottom:.5em;
}
@media (min-width:900px) {
.gallery {grid-template-columns:repeat(2, 1fr);}
}
</style>
:::info
ORIGINAL FRENCH VERSION:
https://www.notion.so/abernier/Tech-interviews-0b8e0095df1f49f5a8ef14e21313cc93
:::
# Tech-interviews
## Learning Goals
We are going to coach you on 4 possible formats:
1. Show me the code
2. Coding challenge
3. Long-term assignment
4. Conversational interviews
In this lesson, we will train you through all these types of interviews. :muscle:
## Pre-requisites
Whatever the format chosen by your interviewer, you should have:
- an up-to-date **LinkedIn account** (cf. Carreer week)
- if not mandatory, a **portfolio** could really make the difference.
You could for example use [Behance](http://be.net) for your portfolio add your 3 projects on it.
[](https://www.behance.net/abernier)
In each project of your portfolio:
- include a :link:**link** to your personnal live-demo on Heroku, eg: https://cartierouge45.herokuapp.com
- include beautiful :camera_with_flash:**screenshots**, eg:
<div class="gallery">
<img src="https://i.imgur.com/ek1e2Cq.png">
<img src="https://i.imgur.com/2szaq9X.png">
<img src="https://i.imgur.com/OWxAhm0.png">
<img src="https://i.imgur.com/xiJQmVZ.png">
<img src="https://i.imgur.com/jMh9uue.png">
<img src="https://i.imgur.com/NexNCbt.png">
</div>
- include a :film_frames:**screencast** of your app/website, eg:
{%youtube 3p9YF_cWWrc %} → This is more optional, but it is a precious fallback if your website is down in the future (and you could be sure it will :wink:)
:::info
:bulb: [QuickTime Player](https://support.apple.com/downloads/quicktime) is great tool on mac to create a screencast:
<div class="gallery">
<img src="https://i.imgur.com/2GJastD.png">
<img src="https://i.imgur.com/EmgfIH3.png">
</div>
:::
:::info
:bulb: Once created, you can upload your screencast to Youtube in order to share it easily.
:::
All of this give importance to your work and make you present as a professional.
## Show me the code
Your interviewer will ask you to **present him one of your projects**.
He could for example say:
> What is the project you're the most proud of ? Can you present it to me ?
He could also ask you the link to your Github account and pick himself a project to present :
> I saw in your pinned projects on your Github, one called: `"myproject3"`. Could you present it to me?
### Preparation
#### Invest in your Github account
- First, :do_not_litter: don't remove anything! In effective, each commits counts in your contributions chart:
This chart proves how much you active as a developer: the more green squares the better.
- But rather, **highlight** your main repositories thanks to  link onto your github.com/yourusername page:
<div class="gallery" style="">
<img src="https://i.imgur.com/JEAcLSa.png">
<img src="https://i.imgur.com/wzGa4ef.jpg">
</div>
#### Groom your projects
- In each of your pinned project particularly, check that a link to your live-demo on Heroku is set, as this is the first thing that will appear on the repo:
- Check your project has a `README.md` file at its root. This is the most important file of your project!
- Start by a short summary of your project:
```markdown
cartierouge45
===
This project is a lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean tempus, turpis in aliquet tincidunt, nibh sem pretium leo, at facilisis odio leo eget nunc.
```
- It should describe the `INSTALL`ation procedure in a clear way:
- listing software dependencies
- commands to execute
````markdown
INSTALL
---
Dependencies:
- node >= 8
- mongod 4.x
```sh
$ npm install
```
````
- It should hold instructions for **developers**:
````markdown
Dev
---
```sh
$ npm run dev
```
````
- But also instructions for **sys-admins**:
````markdown
Release
---
You need to be `heroku login` before being able to deploy.
```
$ git push heroku master
```
````
- It's always a good idea to include a table of the different **pages**:
```markdown
Pages
---
| Page | URL | Description |
|--------|---------|-------------|
| HOME | / | homepage |
| SIGNUP | /signup | signup page |
| ...
```
- And even more, to document the **API** your project implements:
````markdown
API
---
### `POST /users` -- CREATE
Create a new user.
```json
POST /users
{
"username": "jdoe",
"password": "toto123"
}
```
responds:
```
201 Created
{
"_id": "kjnc9n213n2384nb1k24jh12g438",
"username": "jdoe",
"password": "1324bhj1{24b2j4.k12h%3b4jh1b234j$"
}
```
if already exists:
```
409 Conflict
{
"message": "This user already exists"
}
```
or if not secure password:
```
422 Unprocessable Entity
{
"message": "`password` must have at least 6 chars"
}
```
````
→ see how we document:
- request
- response
- BUT ALSO supported :boom:errors
- Be ready to talk about you **stack**, frameworks or librairies
Shortcut the controversial questions like `"Why React over Vue?"`. You could for example just say that Ironhack policy is to stick to the most popular techs on the market.
- Reread your code to have your :brain:memory fresh
- Comment your code a lot, especially complex parts: it will also help you to explain it.
### Practice
*Interviewer asks:*
> What project are you the most proud of?
> Can you show it to me and give me the link of the repository?
*Interviewer checks your Github profile and is really impressed about all your green squares in contributions.*
> Can you show me a live demo?
> What are the main technos you used?
*Interviewer goes to the commits list:*
> What rules do you apply when writting a commit message?
> If you should onboard me on the project as a developer, can you briefly explain to me the files structure?
> Can you show me some part of your code that was pretty hard to develop?
*Interviewer then asks questions in order to verify the candidate owns and masters his code.*
## Coding challenges
In this format, interviewer will choose any exercice and ask you to complete it in a limited amount of time.
NB: This could be really stressful, but don't panic. Remember that the most important is not necessarily to complete it: the interviewer will mostly pay attention on how you approach the problem and how you reason.
As an example, let's watch an online interview from Google:
{%youtube tj_sBZw9nS0 %}
The exercice is here not a beginner's one, but it's really interesting paying attention on how the candidate acts. Inspire from him, he is very good!
### Preparation
It's really difficult here to anticipate since this is the interviewer that choose the exercice...
In general, you'll have access to internet and be able to read you notes/cheatsheets. It's therefore the perfect time for you to check they are as complete as possible!
Some advices:
- Do not start by coding! On the contrary, rephrase the problem, take notes...
- It’s ok to use pen and paper or whiteboard while thinking
- Think aloud
- Think twice before saying but it is always better to say something then to stay quiet
- Try to be as autonomous as possible
---
Let's take a simple example:
```javascript
/*
Ex: Create a function `volume` calculating the volume of a room.
Define 3 parameters.
Return the result as a number.
---
*/
```
1. As in the Google interview, let's begin with I/O:
```javascript
/*
Input:
- w: width, ex: 2 (number)
- h: height, ex: 3 (number)
- d: depth, ex: 2 (number)
Output: a number, for ex: 12 (number)
Edge cases:
- what if a parameter is not a number?
- what if the number of parameters is not always 3?
*/
```
- let's define good params names
- let's take sample values
- let's discuss with the interviewer the edge cases
2. Then, let's write our function signature:
```javascript
function volume(w, h, d) {
// TODO
}
```
3. Inside, let's write our pseudo-code:
```javascript
function volume(w, h, d) {
//
// 1. let's define a variable `ret`
// 2. let's assign that `ret` to the result of the formulae: w*h*d
// 3. finally, let's return `ret`
//
}
```
4. Let's try our pseudo-code with sample values
5. Once we are pretty sure, it works, let's transpile it to code:
```javascript
function volume(w, h, d) {
//
// 1. let's define a variable `ret`
// 2. let's assign that `ret` to the result of the formulae: w*h*d
// 3. finally, let's return `ret`
//
// 1.
let ret;
// 2.
ret = w*h*d
// 3.
return ret
}
```
### Practice #1: Katas
For katas, we'll use https://coderpad.io: please register. For each one, a student will be designated as a candidate.
NB: these are kyu-6 katas
#### `encryptThis` -- 30 mins
```javascript
// Encrypt this!
// You want to create secret messages which can be deciphered by the Decipher this! kata. Here are the conditions:
// Your message is a string containing space separated words.
// You need to encrypt each word in the message using the following rules:
// The first letter needs to be converted to its ASCII code ("H".charCodeAt(0) donne 104).
// The second letter needs to be switched with the last letter
// Keepin' it simple: There are no special characters in input.
// Examples:
// encryptThis("Hello") === "72olle"
// encryptThis("good") === "103doo"
// encryptThis("hello world") === "104olle 119drlo"
```
#### `findUniq` -- 30 mins
```javascript
// There is an array with some numbers. All numbers are equal except for one. Try to find it!
// findUniq([ 1, 1, 1, 2, 1, 1 ]) === 2
// findUniq([ 0, 0, 0.55, 0, 0 ]) === 0.55
// It’s guaranteed that array contains more than 3 numbers.
// The tests contain some very huge arrays, so think about performance.
// This is the first kata in series:
// Find the unique number (this kata)
// Find the unique string
// Find The Unique
```
#### `uniqueInOrder` -- 30 mins
```javascript
// Implement the function unique_in_order which takes as argument a sequence and returns a list of items without any elements with the same value next to each other and preserving the original order of elements.
// For example:
// uniqueInOrder('AAAABBBCCDAABBB') == ['A', 'B', 'C', 'D', 'A', 'B']
// uniqueInOrder('ABBCcAD') == ['A', 'B', 'C', 'c', 'A', 'D']
// uniqueInOrder([1,2,2,3,3]) == [1,2,3]
```
:::info
:heavy_plus_sign: If you want to train more, see these others beginners katas: http://www.thatjsdude.com/interview/js1.html
:::
### Practice #2: logic
#### Hotel sliding door -- 10 mins
> **Suggest an algorithm in order the following system works:**
>
> The sliding door of an hotel equiped with:
> - an entry code
> - a caretaker with a opening button
>
> works like this:
> - from 8h to 22h: the caretaker opens the door when someone comes
> - from 22h to 8h: clients enter the entry code to open
with:
| Events | Actions |
| -------- | -------- |
| `daytime` | `open door` |
| `entry code OK` | `wait 5s` |
| `caretaker button pushed` | `close door` |
#### Coffee maker -- 15 mins
> **Suggest an algorithm in order the following system works:**
>
> A coffee maker with a unique `make coffee` button makes a coffee only if there is water and the water is warm enough. If no water, the machine displays a "add water" message
>
> NB: it is supposed to be always filled with coffee
with:
| Events | Actions |
| -------- | -------- |
| `water presence` | `heat water` |
| `temperature >88ÂşC` | `run the coffee` |
| `button "make coffee" pushed` | `display "add water"` |
### Practice #3: CSS
We'll use https://codepen.io. For each one, a student will be designated as a candidate.
#### Popin -- 30 mins
> **Create a popin according to this design:**
>
> 
>
> Assets:
> - close icon: https://fonts.gstatic.com/s/i/materialicons/clear/v4/24px.svg
>
>
> NB: it should be vertically aligned to the viewport
> NB: width should be 80%
> NB: every details count
#### Features list -- 45mins
> **Create that features list according to this design:**
>
> 
>
> Assets:
> - dark green: #459F8B
> - light green: #A7E3DD
> - bath icon: https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/bath.svg
> - couch icon: https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/couch.svg
> - cupboard icon: https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/cupboard.svg
>
> NB: design should be fluid
> NB: it should be vertically aligned to the viewport
> NB: use lorem ipsum for descriptions
### Practice #4: React -- 1 hour
Use your own editor.
Complete that exercice https://github.com/Ironhack-Paris-PTWD-September-2019/coding-challenge-paris
## Long-term assigment
Here, interviewer will give you sereval days to complete the challenge, at home.
Then, you'll have to present your solution during the interview.
### Advices
- Check you have detailed INSTALL instructions in the README so the reviewer can easily install it on his machine without a headache :exploding_head:
- Be proactive! And make the difference!
### Practice -- 3 days
> **Create a SPA React app, with the following features:**
> - [ ] List tasks
> - [ ] Add a task
> - [ ] Complete a task
>
> Backend API is provided: https://github.com/Ironhack-Paris-PTWD-September-2019/basic-to-do-api
>
> Deliver your work on Github.
>
> Design is free.
## Conversational interviews
You will most likely face one of these in every job application process. This is a casual chat with a technical lead. There will be two types of questions:
### Non technical questions
Soft skills and motivation are almost as important, if not more important than technical skills. Here, there’s no right answer - just be yourself. For Junior developers, employers usually look for the following:
- Curiosity and passion. How often do you code in your spare time? Why did you decide to code? What are some of your go to books and online resources?
- Continuous Learning: Are you able to take constructive feedback and act on it? Do you ask questions often? Are you comfortable asking questions if you don’t know something? Do you embrace life long learning? Do you take the time to understand the “why” behind things?
- Problem Solving Abilities: How do you approach problems? Do you employ critical thinking and an analytical mindset?
- Interpersonal Skills: Do you see the value in working in a team? Do you know how to cooperate and effectively communicate with others? What is your level of empathy?
### Technical Questions
Here there are right answers. Employers will be looking to understand whether you comprehend core concepts. What is Javascript? How does the internet work? Why did you choose to use this database? To be able to answer these questions, we recommend two things:
1. Learning mentality: Any time you’re coding, ask yourself why and how. Don’t just use a determined stack because someone tells you to, think of why you’re using it. Understand how it works. In the long term, this differentiates great developers from the rest.
2. Practice: We have compiled a list of resources with most commonly asked questions below.
#### Web
> Write a minimal web-page
> What the `DOCTYPE` is for?
> Explain what happens once the `GO` button is clicked in the address bar of a browser
> Have you heard of separation of concerns?
> What an AJAX request is?
> What's a cookie? What does it allow between HTTP requests?
#### Javascript
> What a variable scope is?
> What is the difference between `let`, `var` and `const`?
> What's the main difference between `forEach` and `map`?
> How to you check an array is empty?
> What is destructuring? Can you give an example?
> Can you explain what a shallow-copy is?
> What a SPA is?
> Can you explain what an algorithm is?
> What a callback function is?
> What an asynchronous function is?
> What a promise is?
> What can we do to reuse a cool function across different files in a project?
> Write a ES6 module `greetings(name)`
#### OOP
> What a `class` is? What is it for? What type of value does it produce?
> What do we call an instance? How to create from a class?
> In a class, what `this` references to? Give an example with a Car example that should have a `brand` property.
> How to inherit from a class?
> Exercice:
>
> 1. Create an `Animal` class:
> - each animal should have a name, given at its creation
> - each animal should have a method `move` which will output in console the message:
> ```
> Alf has moved 3 meters
> ```
> or
> ```
> Yoshi has moved 10 meters
> ```
>
> 2. Create a `Dog` class which inherits from `Animal`:
> - each dog should have (in addition to its name) a own barking, like `"Woof"` or `"Waaff"` (given at its creation)
> - its `move` method should now outputs 2 messages (onto 2 different lines):
> ```
> Waaff
> Rex has moved 90 meters
> ```
#### React
> How components communicate in React?
> Do you know why React is known to be fast?
> Where to typically execute an AJAX request to fetch initial datas in a component?
#### Hard ones
> What is a closure
```javascript
// https://codepen.io/abernier/pen/mdeWQzp?editors=0010
function blindcolor(color) {
// var color = undefined
let finished = false;
function guess() {
if (finished) {
console.log(`You already found the color ${color}`)
return
}
const answer = prompt("Choose a color?")
if (answer === color) {
alert("Yessss, that's it")
finished = true
} else {
alert("Nope!")
}
}
// We choose what to expose (everything else remain internal)
return {
guess: guess
}
}
const game1 = blindcolor('mauve');
// 3 essais
game1.guess()
game1.guess()
game1.guess()
```
→ `color` and `finished` variables still exist over time, despite the function `blindcolor` has already returned.
## Extra content
Resources for Kata practice
- https://www.codewars.com/
- https://www.codingame.com/start
- https://codesignal.com/
- https://projecteuler.net/
FAQ in technical interviews
- [Awesome Interviews](https://github.com/MaximAbramchuck/awesome-interview-questions#javascript)
- [The JS Dude](https://thatjsdude.com/interview/)
Other Resources
- [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook)
- [Hacker Rank](https://www.hackerrank.com/)
- [Free Code Camp](https://learn.freecodecamp.org/)
- [Pramp](https://www.pramp.com/#/)
- [Interviewing.io](https://interviewing.io/)
Sign in with Wallet
Connect another wallet