Marvin Frachet 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

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

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

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

JS tricks

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

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

	import { createFlagEngine } from "@flag-engine/core";
	import crypto from "node:crypto";
	import { headers } from "next/headers";
	import { unstable_flag as flag } from "@vercel/flags/next";

	const engine = createFlagEngine([
	{
	key: "summer-sale",
	status: "enabled",
	strategies: [

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

	return data.results;
	};

	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");

	# 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