# Tech-interviews

## Learning goals

After this workshop, you will have a basic understanding of the following types of interviews:

1. _"Show me the code"_,
2. Coding challenge,
3. Long-term assignment,
4. Conversational interviews.

We are going to coach you on all of the 4 interview formats. :muscle:

## Pre-requisites

Whichever format your interviewer chooses, nevertheless, you should have the up-to-date **LinkedIn account** (cf. Career week) and, although it is not mandatory, it is highly recommended to have a **portfolio**. A cool portfolio could really make a difference.

You could, for example, use [Behance](http://be.net) for your portfolio and add your projects to it. Here is a simple example:

[](https://www.behance.net/abernier)

In each project that you are adding to your portfolio:

- include a **link** :link: to the live demo, whether it is deployed on Heroku, GitHub pages, or some third service. Here is an example: https://cartierouge45.herokuapp.com
- include beautiful **screenshots** :camera:. Here is example:
<div class="gallery" style="display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:1rem; align-items:center;">
<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 **screencast** :video_camera: of your app/website, for example:

{%youtube 3p9YF_cWWrc %}

→ This is more optional, but it is a precious fallback if your website is down for some reason at some point in the future.

:::info
:bulb: [QuickTime Player](https://support.apple.com/downloads/quicktime) is great tool on mac to create a screencast:
<br />

<div class="gallery" style="display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:1rem; align-items:center;">
<img src="https://i.imgur.com/2GJastD.png">
<img src="https://i.imgur.com/EmgfIH3.png">
</div>
<br />

:bulb: Once created, you can upload your screencast to YouTube to share it easily.
:::

If you have all these set and ready for future employers, simply demonstrates how much importance you give to your work and helps you present like a professional.

Now, let's chat about the previously mentioned interview formats.

## _"Show me the code"_

Your interviewer(s) will most likely ask you to **present to them one of your projects**.

They could, for example, say:

> "What is the project you are the proudest of? Can you present it to us?"

The second option is them asking you the link to your GitHub account and picking themselves the project for you to present:

> "I saw in your pinned projects on your GitHub, one called: `"myproject3"`. Could you present it to me please?"

### Preparation

#### Invest in your GitHub account

- First, don't remove anything! :do_not_litter: Each commit counts in your contributions chart, so if you remove something, you will create empty spots on the chart. We are talking about the chart on your GitHub profile page:


This chart proves how much you are active as a developer: the more green squares, the better.

- **Highlight/pin** your main repositories on the `github.com/yourusername` page:

<div class="gallery" style="display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:1rem; align-items:center;">
<img src="https://i.imgur.com/JEAcLSa.png">
<img src="https://i.imgur.com/wzGa4ef.jpg">
</div>

#### Groom your projects

- Make sure that the link to the live demo is set in each of your pinned projects. This is mandatory since this is the first thing that will appear on the repo:


<br />

- Your project should have the `README.md` file in their root. This is the most important file in your project and it should have (at least) the following:

- In the beginning, start by a summary of your project:

    # 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.

- Next, it should describe the `INSTALL`ation procedure as clear as possible:

- list software dependencies
- list which commands to execute to have your projects up and running:

    ## INSTALL

    Dependencies:

    - node >= 8
    - mongod 4.x

$ npm install

- It should hold instructions for **developers**:

    ## Dev

$ npm run dev

- But also instructions for **sys-admins**:

    ## Release

    You need to be `heroku login` before being able to deploy.

$ git push heroku master

- It is always a good idea to include a table view with root and **pages**:

    ## Pages

    | Page   | URL     | Description |
    | ------ | ------- | ----------- |
    | HOME   | /       | homepage    |
    | SIGNUP | /signup | signup page |

    | ...

- And even more, to document the **API** your project implements:

    ## API

    ### `POST /users` -- CREATE

    Create a new user.

POST /users
{
"username": "jdoe",
"password": "toto123"
}

    response:

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"
}

As you can see, we documented:

- request,
- response,
- BUT ALSO supported :boom: errors.

Whoever has an interest, can find all (or majority) of useful information in the readme.

- Be ready to talk about the **stack**, frameworks or libraries you used.
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.
- Re-visit your code before the interview so you have fresh memory. Now, when you are at the end of the bootcamp, can you go and take us line by line through your project one, explain what exactly you have done and why? Yes, correct, we tend to forget things if we don't use them, so don't be stressed if you forgot something. Take your time and ...
- Comment your code a lot, especially complex parts. This is will help you to explain it.

### Practice

_Interviewer asks:_

> 1. "What project are you the proudest of?"
> 2. "Can you show it to me and give me the link of the repository?"

_Interviewer checks your GitHub profile and he/she is really impressed about all your green squares in contributions._

> 3. "Can you show me a live demo?"
> 4. "What are the main technologies you used?"

_Interviewer goes to the commits list:_

> 5. "What rules do you apply when writing a commit message?"
> 6. "If you should onboard me on the project as a developer, can you briefly explain to me the file structure?"
> 7. "Can you show me some part of your code that was pretty hard to develop?"

_Interviewer then asks questions to verify the candidate owns and masters their own code._

## Coding challenges

In this format, the interviewer will choose some coding exercise and ask you to complete it in a limited amount of time.

This could be stressful, but don't panic. Remember, the most important part is not to complete it 100% correct: the interviewer will mostly pay attention to how you approach the problem and how you reason.

As an example, let's watch an online interview from Google:

{%youtube tj_sBZw9nS0 %}

This example is not using a beginner-friendly code challenge, but it is really interesting paying attention to how the candidate acts. Inspire from him, he has an amazing attitude!

### Preparation

It is really difficult here to know how exactly to prepare since the interviewer is the one that chooses the exercise. But what matters a lot is staying calm and trying to sort things in your head to remember if you ever previously dealt with a similar challenge.

In general, you will have access to the Internet and be able to read your notes/cheatsheets. This being said, have your notes as complete as possible!

Some bits of advice:

- Do not go straight to coding! On the contrary, rephrase the problem, take notes...
- It is recommended to use a pen and paper or whiteboard while thinking.
- Don't hesitate to think aloud.
- However, think twice before saying something, but keep in mind, it is always better to say something than to stay quiet.
- Try to be as autonomous as possible.

---

Let's take a simple example:

/*
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:

   /*
   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 template:

   function volume(w, h, d) {
     // TO DO
   }

3. Inside, let's write our _pseudo-code_:

   function volume(w, h, d) {
     //
     // 1. let's define a variable `result`
     // 2. let's assign the `result` to the result of the formulae: w*h*d
     // 3. finally, let's return `result`
     //
   }

4. Let's try our pseudo-code with sample values.
5. Once we are pretty sure, it works, let's transpile it to code:

   function volume(w, h, d) {
     //
     // 1. let's define a variable `result`
     // 2. let's assign the `result` to the result of the formulae: w*h*d
     // 3. finally, let's return `result`
     //

     // 1.
     let result;

     // 2.
     result = w * h * d;

     // 3.
     return result;
   }

### Practice #1: Katas


For katas, we can use https://coderpad.io. If you haven't before, please register. For each one, a student will be designated as a candidate.

Sidenote: these are `kyu-6` katas. :muscle:

#### `encryptThis` -- 30 mins

// 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 the input.
// Examples:
// encryptThis("Hello") === "72olle"
// encryptThis("good") === "103doo"
// encryptThis("hello world") === "104olle 119drlo"

#### `findUniq` -- 30 mins

// 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

// 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 other 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 a hotel equipped with:
>
> - an entry code
> - a caretaker with an 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 for the following system that should work:**

> 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 an "add water" message
>
> Sidenote: 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 will use https://codepen.io. For each one, a student will be designated as a candidate.

#### Pop-in -- 30 mins

> **Create a popin according to this design:**
>
> 
>
> Assets:
>
> - close icon: https://fonts.gstatic.com/s/i/materialicons/clear/v4/24px.svg
>
> Sidenote: It should be vertically aligned to the viewport.
> Sidenote: The width should be 80%.
> Sidenote: Every detail counts.

#### Features list -- 45 mins

> **Create feature 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
>
> Sidenote: The design should be fluid.
> Sidenote: It should be vertically aligned to the viewport.
> Sidenote: Use lorem ipsum for descriptions.

### Practice #4: React -- 1 hour

Use your own editor. Complete the **[exercice](https://github.com/Ironhack-Paris-PTWD-September-2019/coding-challenge-paris)**.

## Long-term assignment

Here, the interviewer will give you several days to complete the challenge, at home.

Then, you will have to present your solution during the interview.

### Advices

- Make sure you have detailed `INSTALL`ation 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 is 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 ability**. How do you approach problems? Do you employ critical thinking and an analytical mindset?
- **Interpersonal skills**. Do you see the value of 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 are coding, ask yourself why and how. Don't just use a determined stack because someone tells you to, think of why you are 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 the most commonly asked questions below.

#### Web

> Write code for 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 about the _separation of concerns_?
> What an AXIOS request is?
> What is 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 do you check if 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?

> Exercise:
>
> 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 the 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) an 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 do components communicate in React?
> Do you know why React is known to be fast?
> Where to typically execute an AXIOS request to fetch initial data in a component?

#### Hard ones

> What is a closure

// https://codepen.io/abernier/pen/mdeWQzp?editors=0010

function blindcolor(color) {
  // let 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');

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/)