# Interview Frontend-dev *with answers*

### ==General computer science questions==

Object oriented or Composition approach, which one do you prefer and pros/cons of the approaches (for you).

**Q: What is a closure?**
> You have a closure when a function accesses variables defined outside of it.
> [name=Dario]

Clousure in javascript

**Q: Where is the closure in code below?**

function Button(text){
  const message = `Great! You clicked ${text}.`
  function handleClick(){
    console.log(message)
  }
  const button = document.createElement('button')
  button.onclick = handleClick
  button.textContent = text
  return button
}

const myButton = Button('my button')
document.body.append(myButton)

> The function `handleClick` has an *open binding* because it access to the variable `message` defined outside the function itself. We have a **closure** there.
> [name=Dario]

**Q: Does the code above works?**
> Yes
> [name=Dario]

**Q: Why?**
> Even `message` is a local variable inside the function `Button` it doesn't disappear when we terminate the execution of the function. Javascript engine keeps `message` variable from that particular `Button()` call available as long as the nested `handleClick` function may be called.
> [name=Dario]

---

Do you know what is a FSM and where will you use it?

**Q: What is a Finite-state machine and how it is defined?**
> A FSM is a model of computation, which can be in exactly one of a finite number of states at any given time.
An FSM is defined by a list of its states, its initial state, and the inputs that trigger each transition.
> [name=Dario]

**Q: Can I use state machine in UI development?**
> Why not, you can do pretty much whatever you want.
> [name=Dario]

**Q: Is it a good idea?**

> Yes, I never did it, but i think that could be a good idea. User interfaces are reactive system, their code can become quite messy because of event orchestration complexity. Adopting a common pattern, such state machine and statechart, to describe explicity their behaviors can be useful especially when we add new UI flows and we have to prevent unexpected behavior to happen, and when we onboard new developers onto an existing codebase.
> [name=Dario]

---
### ==React questions==

I see that you have used a lot of redux, do you check out other things related to state management for React (Immer, Jotai, Zustand, Recoil, Overmind)

**Q: State management in React, what are your experiences and preferences?**
>I recently started to study React, so unfortunately not that much experience here. My first impression is that React with hooks is already a great state manager, for sure when things start to become complex an eternal library can be usefull, but I'm not there yet. I did not used yet Redux, so I do not have an opinion on that. I found quite handy to use small libraries like SWR (or React-Query) for server cache states. I'm curious about to try XState for state machines and statecharts. In general I would like to work with someone more experienced than me to learn more about state management. And untangle myself with the abundance of available options: Immer, Jotai, Zustand, Recoil, Overmind.. to name few.
> [name=Dario]

**Q: Take a look to the React custom hook below, and explain why at line 2 is necessary to use `useRef`**

function useToggle({initialOn = false, reducer = toggleReducer} = {}) {
  const {current: initialState} = React.useRef({on: initialOn})
  const [state, dispatch] = React.useReducer(reducer, initialState)
  const {on} = state

  const toggle = () => dispatch({type: 'toggle'})
  const reset = () => dispatch({type: 'reset', initialState})

  function getTogglerProps({onClick, ...props} = {}) {
    return {
      'aria-pressed': on,
      onClick: callAll(onClick, toggle),
      ...props,
    }
  }

  function getResetterProps({onClick, ...props} = {}) {
    return {
      onClick: callAll(onClick, reset),
      ...props,
    }
  }

  return {
    on,
    reset,
    toggle,
    getTogglerProps,
    getResetterProps,
  }
}

[See on Github](https://github.com/kentcdodds/advanced-react-patterns/blob/main/src/final/05.js)
TODO: add answer

---
### ==Vue questions==
Do we need this? if yes add 2 Vue questions (composition API?)

---
### ==Blockchain questions==
**Q: From a frontend engineer perspective, what is difference between developing an app and a dapp?**
> - Usually in a dapp authentication is a bit more complex that in an app, since multiple wallet connector can be used and some of them are available only on certain devices, eg. injected connector provided by browser extensions or dapp browsers, hardware wallets connector and deeplinking connector for mobile wallet. Some blockchains provide libraries to do this, often these library provide ui not customizable or they do not consider the context of use, allowing the user to select a mobile provider from desktop or vice versa.
> - Feedback and error handling need more care than normal apps, usually blockchain technology are slower than common web services, for this reason is particularly important let the user know what is happening. A lot of events that can affect the operation of the dapp happen outside it. eg. The user can switch to a unsupported network from the browser extension wallet, the gas price and the average tx-fee can change, and a transaction can got stuck in the pending pool..

> [name=Dario]

**Q: PoW or PoS**

---

---

### ==CSS questions==

**Q: px, em and rem: give me one example for each unit, for what is appropriate use them?**

> - `px`: **almost never!** Anyway there are some exceptions: eg. for hairline borders (1px). In my opinion they are also the correct unit to define breakpoints in media queries, but some one could argue suggesting to use `em` for that.
> - `em`: for everything that is correlated to the fontsize of the element itself, a good example is `letter-spacing`, by defining it in `em` we can reason in term of expected font tracking, without considering its font-size, this make the declaration auto explanatory regardless the context of application. And give as the possiblity to create an utility class or a bem modifer pairable to every font size declaration.
> - `rem`: for sizes and spacing, with `%` is the unit that i use more. Allow you to quickly scale an entire project by changing the root font-size, and work better with browser zoom, which is important for web accesibility.

> [name=Dario]

**Q: Styling a modern SPA: what are your preferences, which approach you dislike and why?**
> There are a lot of philosophies and solutions for this, what I think is important are essentially the following features.
>1. Defining markup and style of a component in the same file.
>2. Possibility to share design tokens across the componet library.
>3. Good performance in term of bundle size and runtime cost.
>
>I do not like any solutions that does not comply these 3 requirements.
>
>Personally I like the utility css approach and the tailwind implementation of it, regarding the above mentioned feature with tailwind yo can:
>1. Define the style in your JSX or vue template.
>2. Share design tokens through the config file.
>3. It has zero runtime cost since is pure css, and maximize the reusability of the your css, this drastically slow down the grow of your css file.
>
>The downside of tailwind, for me, are:
>1. It not possible to do css code splitting, but ussually the *purged* css is really small.
>2. In some case a component needs some custom styles which doesn't make sense to handle as set of custom utilities and share them within the whole project. There are different ways to do it, but you need to define a strategy with your colleagues to do so consistently, if you don't want to see a mess. The experimental JIT compiler for tailwind seems an excellent solution for this, but probably to experimental for now.

> [name=Dario]
---

### ==Design culture questions==
**Q: Typography is one of the most important design component of the web, name a couple of type foundry you like, and a couple of open-source font families that do not sucks**
>There are a lot, but if I have to pick few, I would probably go for something classic and somehow mainstream: **Klim Type Foundry** and **Commercial Type.** About open source families **Inter** and **IBM Plex** are well designed.
> [name=Dario]

**Q: Name two designer that you like, *in doubt choose italian designers***
>Karl Gerstner and Jan Tschichold
> [name=Dario]