Анализ Core Web Vitals по 9,3 миллионам веб-сайтов по состоянию на 6 февраля 2023 года показывает, что Core Web Vitals как для React, так и для Next.js показывает, что оба они работают хуже, чем совокупность всех других сайтов в архиве как для мобильных устройств, так и для настольных компьютеров. - https://www.zachleat.com/web/react-criticism/

Долгожданная фича, в видосе хорошо показаны основные возможности реатома и его простота интеграции с реактом. Всего 8 минут.

https://news.1rj.ru/str/reatom_ru_news/163

По реализации подсказал @ValeryKobzar, спасибо ему!

AMA

Записал видосик про атомизацию - паттерн удобного и производительного управления иммутабельными списками.

Это может быть интересным не только тем кто вовлечень в реатом, рассматривается частная реализация “ref-pattern”. Общий пример из будущего: https://twitter.com/sebastienlorber/status/1620385689853661185

P.S. предыдущий видос Имя компонента в логах useAtom тоже залил на ютуб.

Ищу джуна. Делать веб-интерфейсы на реактике. Кода уочень много, он интересный.

Удаленка, не РФ, ~5 usd в час, свободный график, fulltime, Intermediate<= English.

Обязателен какой-то бекграунд: прод опыт с любым ЯП или ВУЗ по теме.

Буду менторить жестко, закидывая знаниями, зато активно. Пишите в личку (@artalar) с резюме.

The project is a platform for managing advertisement campaigns (adtech) along with ads banner system and traffic analytics. We use BigData and Data Science to improve the quality of our ads.

Складываем раз, два и получаем:

https://github.com/oven-sh/bun/issues/2255

А вы знали что к логам в консоле девтулзов можно применять CSS? Для этого достаточно в начало лога вставить %c и вторым аргументом передать строку стилей.

пример логов реатома

исходники

Из того что я узнал недавно:

- заголовок группы тоже можно красить - это очень удобно!

- вы не можете растянуть контейнер лога на всю ширину экрана через width и менять display, но можно использовать проценты в padding. Вот так я центрирую текст:

padding-left: calc(50% - `${text.length / 2}`em)

Кто-то пишет на xstate? Покидайте каких-то best practices примеров. Только без логики в jsx, желательно, хочу попереписывать на разные стеки какие-то процессы - асинхронные логические цепочки.

Попробуем сделать автоматически перезапускаемые сайд-эффекты

Всякие интересные и не очевидные штуки 😃

А зочем в node_modules загружать README.md??

Я тут задумался над сокращением размера пакета (не бандла). Реатом сейчас загружает в NPM минимум: бандлы, типы, сурсмапы и ридми как лендос для пакета. Все вместе занимает 100-200кб. Много? MobX и react-dom занимают по 4 мегабайта! Кстати, выхлоп реатома планирую еще немного сократить, сейчас паблишится четыре разных сборки, возможно сократить до трех.

Если у вас много проектов и вы загружаете много раз один и тот же реакт - это лишняя нагрузка на сеть и fs. Современные менеджеры пакетов умеют с этим справляться кешированием. NPM и Yarn копируют из кеша и не ходят в сеть, а pnpm делает симлинки - это это очень быстро.

Но! Если вы часто обновляете пакеты (что хорошо), но делаете это только на свежих проектах (что логично), а старые трогаете редко - кеш будет копиться и занимать лишнее место, его нужно как-то обслуживать… Да и само обновление тоже скачать и установить нужно. А шарится ли кеш у вас в CI между запусками? А есть ли у вас удаленный (его кто-то удалил?) remote cache? Легко его поддерживать? Какая там самая большая проблема в программировании?

Самое больное для меня, не много маленьких проектов, а один большой - когда пакетов много, начинаешь понимать проблему их размера (и бандлсайза и пакаджсайза). Нужна как минимум общая культура минимизации размера бандла и всего пакета. Как максимум - нужен нормальный тулинг, сейчас нельзя тянуть ресурсы из пакета лениво. Те я бы хотел для локальной разработки подгружать дев билды и не подгружать несколько прод билдов под разные браузеры, а на CI не подгружать дев билды. Но, кажется, это мечты еще на долго.

По умолчанию в NPM при паблише льется все из текущей дериктории, те исходники, тесты, инфраструктура - все что не нужно потребителю пакета. В package.json автор пакета может указать массив files и перечислить глобы по которым будут браться нужные файлы и папки, и ничего лишнего. В пакетах реатома это ["/build", "/package.json”]. Наверрное, можно оставить только build, потому что package.json и README.md грузяться в NPM автоматически, просто потому что первый необходим для работы регистра, а ридмишка выступает лицом страницы пакета на npmjs.com. Но проблема, на которую я только сейчас обратил внимание - README.md загружается в node_modules и его нельзя вырезать! Я, как автор пакета, не могу не паблишить этот файл, за меня это делает NPM, а пакетные менеджеры зачем-то тоже его тащат. Надеюсь, скоро это исправят. А я подумываю над подменой контента в ридми при паблише, что бы не гонять лишний трафик. И не говорите что оно того не стоит, без стремления к лучшему, не получится хорошего.

P.S. для просмотра веса билда библиотеки раньше использовался bundlephobia.com, сейчас есть более фичастая альтернатива - bundlejs.com (очень рекомендую), а если вам нужно посмотреть размер пакета в NPM - packagephobia.com

Работа с Copilot