https://www.jsv9000.app/
песочница для ивент-лупа, макротасок/микротасок
красивое

мой код для примера

console.log('first')

Promise.resolve().then(function promise() { console.log('second')})

setTimeout(function time() {console.log('third'), 5000})

async
асинхронная функция возвращает промис

отличия map от weakmap

ключи
map любого типа
weakmap только объекты

итерация и методы keys(), values(), entries()
map поддерживает
weakmap не поддерживает

это происходит пушто garbage collector удаляет из weakmap пары ключ-значение если на ключ (который очевидно объект) больше нет ссылок
поскольку garbage collector делает это довольно непредсказуемо, weakmap не поддерживает итерацию

отличия set от weakset

set данные любого типа
weakset только объекты

weakset не поддерживает итерации, size, keys()

critical path

css is render blocking (because of the cascade)

https://cdn.searchenginejournal.com/wp-content/uploads/2022/01/critical-rendering-path-example-61f038a0a5944-sej.png

разница между атрибутами тега script (async/defer)

- порядок скриптов defer сохраняется браузером
- скрипт с defer сработает только после того как весь html документ будет обработан браузером

cors — cross origin resource sharing
http-based header mechanism that allows to server to indicate any origins (domains) other than its own and allow loading resources

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

jwt token

содержит:
- header
- payload
- signature

header & payload — обычные json-объекты, их нужно закодировать через base64url

Закодированные части соединяются друг с другом, и на их основе вычисляется подпись, которая также становится частью токена

реакт компонент перерендеривает своих детей если перерендеривается сам

pure-компонент перерендеривается только если у него изменились пропсы

отключить error overlay можно добавлением в webpack.dev.js:

  devServer: {
    client: {
      overlay: false,
    },

conditional props версия 2 (в этот раз у меня заработало)

interface CommonProps {
  children?: React.ReactNode

  // ...other props that always exist
}

type ConditionalProps =
  | {
      icon?: JSX.Element;
      src?: never;
    }
  | {
      icon?: never;
      src?: string;
    };

type Props = CommonProps & ConditionalProps  

https://dev.to/maissenayed/conditional-react-props-with-typescript-43lg

3 way merge editor in vs code can be turned off by git.mergeEditor: false in settings.json

https://stackoverflow.com/a/73277865/11043392

рисовалка про которую я постоянно забываю

https://excalidraw.com

узнала сегодня про Reflect object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

неоч понятно зачем он нужен, встретила в контексте работы с прокси

const person = {
    name: "Julia",
    age: 30
}

const personProxy = new Proxy(person, {
    get: (obj, prop) => {
        console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`)
    },
    set: (obj, prop, value) => {
        console.log(`Changed ${prop} to ${value}`)
        return Reflect.set(obj, prop, value)
    }
})

новые (для меня) хуки в реакте


useImperativeHandle — позволяет прокинуть коллбэк/объект со стейтом в родительский компонент через реф

useDebugValue — вешает лейбл на кастомный хук в реакт-девтулзах

useId — генерит id

useDebugValue