mfrachet

const getPokemon = async () => {
  const response = await fetch();
  const data = await response.json();

  return data.results;
};

mfrachet

- In some countries people have only one name (https://www.liberation.fr/checknews/2019/06/17/referendum-adp-pourquoi-y-a-t-il-une-case-je-n-ai-pas-de-prenom_1734263/)

mfrachet

const { setTimeout: st } = require("timers/promises");

/*
* Permutating the call to the timers setTimeout and the regular setTimeout permutates the order of apparition
* HOWEVER, "Regular promise" will always be shown first, even if declared last (micro task)
* setTimeout is still a macrotask then?
*/
function main() {
  st(0).then(() => {
    console.log("With promise");

mfrachet

Create the HoC

import React from "react";

export const profile = (Component) => {
  const handleRender = (
    id, // the "id" prop of the Profiler tree that has just committed
    phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
    actualDuration, // time spent rendering the committed update

mfrachet

Supervised

4 importants notions:

• dataset
  • target (y) which what we want to optimize
  • features (x1, x2, x3 etc...) that are the "inputs" or helpers to determine y
• model: predicts Y depending on the Xs and some input
• cost function: measure the errors between y and the predictions
• minimize algorithm: minimize the errors

mfrachet

# Time the last 50 files have been modified
git log --format=format: --name-only --since=12.month | egrep -v '^$' | sort | uniq -c | sort -nr | egrep -v '\.json$' | egrep -v '\.lock$' | egrep -v '\.md$' | head -50

mfrachet

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

mfrachet

JavaScript knowledge

• Operators, operands, operator precedence (unary, binary, ternary)
• Dynamic Type system: types and conversion
  • Value type vs. Reference type
• Expression vs. Statement
• Scope
• Hoisting
• Overloading
• Prototypal inheritance vs. Classical inheritance
• Instancing

mfrachet

JS tricks

document.body.addEventListener('focusin', (event) => {
    console.log(document.activeElement)
})

export const getFocusableNodes = (node, includeNegativeTabIndex) => {

mfrachet

import React from "react";

let IDS = 0;
const loaded = {};

export const lazy = modulePathResolver => {
  const id = IDS++;

  return props => {
    const LoadedComponent = loaded[id];