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

Chrome useful flags for web development

Localhost

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

NonLocalHost

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

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

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

Чекліст перед початком нового проекту для SPA(0) (FRONT_END)

Не функціональні вимоги

Питання	Наслідки
Маленькі (не стандартні) екрани? Якщо так(1), то який мінімальний розмір	Починаємо з мобільної верстки
Які браузери підтримуємо?	Працюємо на найбільш екзотичному браузері або ставимо browserstack
Мультимовність?

Drag13

Git aliases

Sync

• Add

git config --global alias.sync "!git checkout dev && git pull  && git checkout - &&  git merge -"

Drag13

import { useEffect, useState } from 'react';

export default Page;

function Page() {
  const [visible, setVisible] = useState(true);
  const hideCounter = () => setVisible(false);

  return (
    <main>

Drag13

type DelayOptions =
  | { timeout: number; shouldFail?: boolean }
  | { timeout?: number; shouldFail: boolean };

function delayed<T>(
  data: T,
  options: DelayOptions = { shouldFail: false, timeout: 1500 }
) {
  const { shouldFail, timeout } = options
  return new Promise<T>((resolve, reject) => {

Drag13

// imagine this function is out of the file 
function fetchUser(id: number, signal: AbortSignal) {
  return fetch(`/user/${id}`, { signal }).then(x=>x.json());
}

function UserDetails({ userId }: { userId: number }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const abortController = new AbortController();
    fetchUser(userId, abortController.signal).then(setUser);

Drag13

import React from 'react';
import {
  createContext,
  useContext,
  useState,
} from 'react';

export function HomePage() {
  const [s, setS] = useState(1);
  const setValue = (v: number) =>