Drag13

import { v4 as uuidv4 } from "uuid";
import { useEffect, useState } from "react";

// Geting user from the "server"
function fetchUsers() {
  return fetch("/users")
    .then((x) => x.json())
    .then((users) => {
      return users.map((u) => {
        // creating the key with uuid package

Drag13

const data = { userName: "test user" };
const delay = 1200;
const errorChance = 0.2;

export function fetchData() {
  return new Promise((rs, rj) => {
    setTimeout(
      () =>
        Math.random() > errorChance ? rs(data) : rj("Something went wrong"),
      delay

Drag13

Chrome useful flags for web development

Localhost

chrome://flags/#allow-insecure-localhost

NonLocalHost

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Drag13

(function clean() {
  const allowed = [];
  const container = document.querySelector("section");
  const $allTopicsRaw = [...container.querySelectorAll("[role=button]")];

  const $allTopics = $allTopicsRaw.reduce((acc, el, i) => {
    const isTopic = i % 2 === 0;
    isTopic ? acc.push({ topic: el }): acc[acc.length - 1].cancel = el
    return acc;
  }, []);

Drag13

interface IStateMachine<TState,TEvent, TPayload = {}> {
    getState():TState;
    dispatch(event: TEvent, payload?: TPayload): IStateMachine<TState,TEvent, TPayload>;
}

type MyEvent = 'start' | 'move' | 'stop';
type MyState = {speed: number, isHealthy: boolean};

class MyStateMachine implements IStateMachine<MyState, MyEvent> {
    constructor(private _state: MyState, private readonly _reaction: Record<MyEvent,(state:MyState)=> MyState>){}

Drag13

export function pipe<I, R1, R>(f1: (a: I) => R1, f2: (a: R1) => R): (a: I) => R;
export function pipe<I, I1, R1, R>(f1: (a: I, b: I1) => R1, f2: (a: R1) => R): (a: I, b: I1) => R;
export function pipe<I, R1, R2, R>(
    f1: (a: I) => R1,
    f2: (a: R1) => R2,
    f3: (a: R2) => R
): (a: I) => R;
export function pipe<I, I1, R1, R2, R>(
    f1: (a: I, b?: I1) => R1,
    f2: (a: R1) => R2,

Drag13

type User = { name: string };
type MyModel = {
    name: string;
    users: User[];
}

type OnlyArrays<TModel> = Exclude<{ [key in keyof TModel]?: TModel[key] extends any[] ? key : never }[keyof TModel], undefined>;

type Numbers = '0' | '1' | '2' | '3' | '4' | '5';
type StringKeyof<TModel> = keyof TModel extends string ? keyof TModel : never;

Drag13

const { readFileSync } = require("fs");
const rawData = readFileSync('./data.json');
const data = JSON.parse(rawData);

const res = data
    .filter(x => x.args?.data?.renderBlocking)
    .map(x => ({
        timestamp: new Date(x.ts),
        url: x.args.data.url,
        priority: x.args.data.priority,

Drag13

import { FC, createContext } from "react";

// Service locator:

interface IService {
  test: () => string;
}

type ServiceLocator = {
  myTestService: IService;

Drag13

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends Array<infer U>
    ? Array<DeepPartial<U>>
    : T[P] extends ReadonlyArray<infer U>
    ? ReadonlyArray<DeepPartial<U>>
    : DeepPartial<T[P]>;
};

// Credits goes to the https://stackoverflow.com/!