Прочитал сейчас такое:

Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation. This means that you will have to write extra code to test for different browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code.

Что, действительно, если писать Аяксы ванильно, то надо думать о браузерах? (а с jQuery, как мы понимаем, не надо)

знаете ли вы open source проект, где классно сделаны Storybook story? я пока нашёл один https://5d28eb5ee163f6002046d6fb-sbbmllgpjg.chromatic.com (сайт БиБиСи), но хотел бы посмотреть больше примеров.

это было актуально для IE, объект XmlHttpREquest
https://caniuse.com/?search=xmlhttprequest

Есть компонент Hint(подсказка). Бывает в состояние active=true и active=false. Типо как кнопка - реагирует на нажатие или нет.
А как это состояние (active) можно описать в доке? Нужно именно по-русски здесь описать.

Hint.propTypes = {
  /** Текст подсказки */
  hint: PropTypes.string,
  /** Обработчик клика */
  onClick: PropTypes.func,
  /** ???? */  ///////// <-- как описать?
  active: PropTypes.bool,
};

"Активное состояние (видимость) подсказки" - так и написать. Почему нет?

// Вообще, пропсы имхо лучше переименовать: hint (хинт хинта, что ли?) 🠆 text, active (разве может быть активность у пассивного элемента?) 🠆 isOpen, если не предусматривается сворачивание/разворачивание контента подсказки... если же в будущем подобный функционал возможен, то желательно как-то типа isShowing назвать сразу (менее канонично, зато по смыслу однозначнее)

спасибо

Не подскажете как в Storybook задать React children элемент аргументом в стори?
Компонет принимает либо просто строку, либо React children элемент

const VideoInfoHint = ({
  hint,          //// или строка или React children элемент
}) => {
  return (
    <Hint
    >
      {(typeof hint === "string") ?
        /* логика, если строка */ :
        hint}   // <-- React children элемент
    </Hint>
  );
};

в стори

const Template = args => <VideoInfoHintComponent {...args} />

export const Primary = Template.bind({});
Primary.args = {
  hint: "СТРОКУ ЗДЕСЬ МОГУ ЗАДАТЬ",
};

export const Secondary = Template.bind({});
Secondary.args = {
  hint: ????, <--- А КАК ЗДЕСЬ ЭЛЕМЕНТ CHILDREN задать?
};

Наверное результат рендер-функции передать надо (объектный экземпляр)... если и правда поддерживается экземпляр компонента в качестве пропса.
Тут "задать" это ведь на ньюспике, оно означает передачу значения? или я неправильно понял суть вопроса?

в принципе правильно. только не знаю где его взять, экземпляр этот, в проекте то ему другой компонент передаёт, а в сторибуке этот компонент изолирован.

Ну вот о сторибуке, увы, я вообще не имею представления))
А как эта самая изоляция реализована? Если в общих чертах. Это внутренняя переменная метода который нельзя переопределить, или нечто иное?
То есть, хочется понять сам "путь" передачи нужного экземпляра компонента, как (и через что) он вообще пробрасывается.

сам пока не знаю))

Судя по докам, никак нельзя передать экземпляр компонента через args:
> Args object
> ... It is a JSON serializable object
JSON serializable object
Экземпляр реакт-компонента уж точно не сериализуется в джейсон, равно как и рендер-функция (да и вообще любая функция).

ага. печально

Может от класса стори как-то унаследоваться можно...
Ну, чтобы добавить пропс для объектных аргументов (или, если в хардкор-режиме, вообще переписать обработку args).

Вообще штуки типа сторибука обычно ригидные, это норм... хотя и понятно что подобные ситуации (когда упираешься в ограничения) раздражают. Имхо, эти ситуации в целом перевешивают весь выигрыш от использования: начало-то бодренькое, а потом наступает день когда приходится форкать репо и в кишки лезть, а там обычно жуть жуткая понаворочена и сложно разобрать)) Было такое с другим UI-набором работающим по принципу фреймворка, т.е. с продуктом того же плана.

Всем привет! Поделитесь, кто чем пользуется для оптимизации изображений: галп, вебпак плагины? Возможно поделитесь конфигом, заранее благодарен

Проект на Реакте, стили styled components. Есть тайтл такой

const Title = styled.h1.attrs(({ titleType }) => (titleType && { as: titleType }))`
  color: #5065c8;
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 32px;
  // и тд
`;

и такое его использование в styled components

const TitleStyled = styled(TitleComponent).attrs(() => ({ as: "h2" }))`
    font-size: 19px;
    font-weight: 500;
    text-align: center;  
    line-height: 1.2;
    // и тд
`;

мне непонятен момент про { as: "h2" }. я понял, что этот TitleStyled становится тегом h2, но я думал это и на стиль повлияет, но стиль тот же остается. Так и должно быть? Зачем тогда в h2 тег переделывают стилизованную версию?

А кто может разбирается в лайтхаусе? на работе сказали проверит сайт по перформансу в лайтхаусе и если что критично, поискать причину и исправить. у меня perfomance показатель - мобилка 55, десктоп 70, проверил в браузере chromium - мобилка 26, десктоп 60. Не понял прикола. Попросил друзей проверить в своих браузерах. Десктоп примерно 70, а вот для мобилок сильно отличается 30-60. Непонятно почему такой разброс. Не подскажете в чем может быть причина, такого разброса показателя проверки performance для мобилок?

основной разбег может быть из-за закешированных браузером файлов. Вообще лайтхауз сам указывает что нужно сделать для производительности в отчете

Так смотри не на числа, а на отчет, на список косяков которые выявлены аудитом. Отчет лайтхауса можно экспортировать в файл, если что... собираешь 🠆 читаешь 🠆 фиксишь, как-то так.
Мобильная производительность скорее всего выправится когда исправишь десктопную (70 это весьма мало). В общем, если будет ~95 на десктоп аудите, то и счет мобайл производительности вполне может подрасти до ~70..80 "сам по себе".
Еще нюанс: выполнять автоаудит лучше на сборке без всякого трекинга (яметрика/гтэг/прочие) и строго без браузерных расширений с контент-скриптами.