artalog
Завел багу https://github.com/oven-sh/bun/issues/2121 По спеке должен быть ~следующий тик, но не микротаск.
Так, человеки, я этот баг получил из реального кода - тестов реатома.
Forwarded from undefined
Анализ Core Web Vitals по 9,3 миллионам веб-сайтов по состоянию на 6 февраля 2023 года показывает, что Core Web Vitals как для React, так и для Next.js показывает, что оба они работают хуже, чем совокупность всех других сайтов в архиве как для мобильных устройств, так и для настольных компьютеров. - https://www.zachleat.com/web/react-criticism/
😁10😱2💩2👍1🌚1
Долгожданная фича, в видосе хорошо показаны основные возможности реатома и его простота интеграции с реактом. Всего 8 минут.
https://news.1rj.ru/str/reatom_ru_news/163
По реализации подсказал @ValeryKobzar, спасибо ему!
https://news.1rj.ru/str/reatom_ru_news/163
По реализации подсказал @ValeryKobzar, спасибо ему!
Telegram
Reatom новости
В @reatom/npm-react@3.2.0 появилось логирование атомомв и экшенов с выводом имен используещих компонентов! Очень удобно для дебага причин изменений связанных стейтов.
Как минимум, можно прозрачно заменить useState на useAtom и уже получить хорошее логировании.…
Как минимум, можно прозрачно заменить useState на useAtom и уже получить хорошее логировании.…
🔥8❤3👍1
Записал видосик про атомизацию - паттерн удобного и производительного управления иммутабельными списками.
Это может быть интересным не только тем кто вовлечень в реатом, рассматривается частная реализация “ref-pattern”. Общий пример из будущего: https://twitter.com/sebastienlorber/status/1620385689853661185
P.S. предыдущий видос Имя компонента в логах useAtom тоже залил на ютуб.
Это может быть интересным не только тем кто вовлечень в реатом, рассматривается частная реализация “ref-pattern”. Общий пример из будущего: https://twitter.com/sebastienlorber/status/1620385689853661185
P.S. предыдущий видос Имя компонента в логах useAtom тоже залил на ютуб.
YouTube
Атомизация (reatom)
Поговорим об атомизации (https://www.reatom.dev/guides/atomization) - патерне упрощения работы с иммутабельными списками.
Вне контекста реатома это может еще называться "ref-pattern" (от "reference"), например https://twitter.com/sebastienlorber/status/…
Вне контекста реатома это может еще называться "ref-pattern" (от "reference"), например https://twitter.com/sebastienlorber/status/…
👍9
Пока в твиттере вирусятся сигналы, наружу всплывают более фундаментальные вопросы реактивности. Самая главная практическая проблема, которая следует из отсутствия стандартов, отсутствие единых очередей.
В вебе же есть нативные очереди, скажите вы?
1. Очереди две, а у нас есть доступ только к одной - микротасков (
2. Даже двух очередей не достаточно, браузеры абьюзят нативный доступ к очередям и разные таски вставляют в одни и те же очереди в разные позиции (сортируют по приоритету).
А точно оно надо? Хороший пример, очереди в реакте: рендеринг, рефы, эффекты, лаяут эффекты. И даже этого не достаточно, недавно добавили insertion эффект. Который “should be limited to css-in-js library authors”, но используется для useEvent / useCallbackRef.
В реатоме мне тоже пришлось переизобрести кучку очередей, получилась довольно интересная схема, вот подробный гайд: https://www.reatom.dev/guides/lifecycle
В вебе же есть нативные очереди, скажите вы?
1. Очереди две, а у нас есть доступ только к одной - микротасков (
Promise.resolve().then). Нельзя запланировать таск, setTimeout(cb, 0) в некоторых условиях может подменять “0” на “4”.2. Даже двух очередей не достаточно, браузеры абьюзят нативный доступ к очередям и разные таски вставляют в одни и те же очереди в разные позиции (сортируют по приоритету).
А точно оно надо? Хороший пример, очереди в реакте: рендеринг, рефы, эффекты, лаяут эффекты. И даже этого не достаточно, недавно добавили insertion эффект. Который “should be limited to css-in-js library authors”, но используется для useEvent / useCallbackRef.
В реатоме мне тоже пришлось переизобрести кучку очередей, получилась довольно интересная схема, вот подробный гайд: https://www.reatom.dev/guides/lifecycle
🤡5🌭3👍1🔥1🤔1
Ищу джуна. Делать веб-интерфейсы на реактике. Кода уочень много, он интересный.
Удаленка, не РФ, ~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.
Удаленка, не РФ, ~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.
👍37🤡7👎3💩3
А вы знали что к логам в консоле девтулзов можно применять CSS? Для этого достаточно в начало лога вставить
пример логов реатома
исходники
Из того что я узнал недавно:
- заголовок группы тоже можно красить - это очень удобно!
- вы не можете растянуть контейнер лога на всю ширину экрана через
%c и вторым аргументом передать строку стилей.пример логов реатома
исходники
Из того что я узнал недавно:
- заголовок группы тоже можно красить - это очень удобно!
- вы не можете растянуть контейнер лога на всю ширину экрана через
width и менять display, но можно использовать проценты в padding. Вот так я центрирую текст:
padding-left: calc(50% - `${text.length / 2}`em)
Telegram
Reatom новости
В новой версии @reatom/logger улучшен дизайн логов:
(скрины до и после)
- теперь по умолчанию логи не схлопываются по имени, управляется через опцию shouldGroup
- сам лог (newState / payload, cause, patch, история стейтов…) теперь не виден, название экшена…
(скрины до и после)
- теперь по умолчанию логи не схлопываются по имени, управляется через опцию shouldGroup
- сам лог (newState / payload, cause, patch, история стейтов…) теперь не виден, название экшена…
👍27🔥5
Кто-то пишет на xstate? Покидайте каких-то best practices примеров. Только без логики в jsx, желательно, хочу попереписывать на разные стеки какие-то процессы - асинхронные логические цепочки.
👍4