Проблема: “С styled-components смена темы занимает несколько секунд, они безнадежны”. Плавали, знаем. Совет простой - не использовать динамические значения от пропсов и темы. Нет ну иногда можно, для всяких вариантов, но для темы точно лучше использовать уже везде доступные css-vars.

Но как это делать тайпсейф? В лоб:

// no
color: ${p => p.theme.color}

// yes
color: ${THEME.color}

Заведите контанту темы со всеми параметрами и придуманными css-vars в значениях. Не забудьте закинуть для всех переменных значения в руте, подвяжите какие-то из них на стейт, если нужно.

Конкретно этот совет почему-то не подсвечен в прекрасной статье The styled-components Happy Path, но в остальном крайне рекомендую к ее ознакомлению пользователям SC.

Не оставлю вас в пятницу без видосов 🙂
Зацените на что способно лего https://www.youtube.com/c/BrickTechnology/videos

Буду под #help_oss публиковать разные простые ишьесы, может кому интересно будет порешать и свой github пополнить.

Например, вот.

Привет! @reatom/form и @reatom/form-web уже почти готовы, вот моя песочница где я их разрабатываю. Пример использования в App.tsx. Обратите внимание, что апишка практически никак не завязана на реакт :)

Объявление филдов через заранее созданный инстанс формы помогает правильно синкать все рантайм связи. Само объявление (а не регистрация через name и тп) необходимо для надежной проверки типов - тип для переменной data корректно выводится, несмотря на то что во всем App.tsx вообще нет типов. Ну и все эти филды-этомы можно как угодно комбинировать совместо: зависимые поля, лайфсайкл хуки - проще простого, попозже наделаю примеров.

Весит это все (кор, биндинги реакта, сами формы) в три раза меньше react-hook-form, а bind к элементу раз в 10 быстрее register из react-hook-form (и это заметно на больших формах, я проверял).

Основные штуки (регистрация, валидация, типы и еще кучка всего) уже написаны, но сейчас есть только поддержка HTMLInputElement (и то не все типы).

В файле reatom-form-web.tsx есть константа UNSUPPORTED_INPUT_TYPES, хорошо бы перетащить из нее хотя бы radio, во вторую очередь file. Так же есть тудушка на HTMLSelectElement.
Если кто-то может с этим помочь - будет очень круто! Форкайте сендбокс, изменения в итоге через ПР закинем в репо реатома, когда я запаблишу новые пакеты и накопленные изменения для npm-react, lens, primitives, logger.

4 года я уже говорю что нужно разделять инициализацию модели и ее обновление (ререндер). Но хуки победоносно идут по плане с просто ворохом проблем.

Сделано! https://github.com/artalar/reactive-computed-bench/pull/5

Большое спасибо @art_bazhin. Решение с svg достаточно простое и не требует никаких зависимостей.

Внезапно, Preact по статам httparchive распространен почти так же как Vue o_O

https://twitter.com/_developit/status/1588079570783199232

vivaldi

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

Еще фича на которую я сильно расчитывал - одно место под веб, почту и календарь, но оказалось что это возможно только на компе, а на мобильном браузере синкаются только заметки и закладки.

Сейчас я активно пользуюсь лишь двумя отличительными фичами: второй ряд вкладок в группе и веб панели для музыки, почты, календаря. Последние от Proton которым я пока что очень доволен.

Ну а теперь по мелочам:

- регистрация почты на их домене vivaldi требует другой почты (а я хотел все с нуля начать)
- про не синхронизацию напоминалок, календаря, почты уже сказал
- ховер на таб показывает превью с первым загруженным экраном (не обновляет картинку для SPA)
- не работает ctrl+F в настройках
- нельзя из результата поиска по настройкам перейти на страницу этой настройки
- при клике вне веб-панели она закрывается, но клик так же попадает на страницу (можно случайно что-то нажать)
- создание задачи не сабмитится по Enter
- ui иногда замирает полностью на пару секунд (было в первую неделю, во вторую не замечал)
- кастомизируется очень многое, но не абсолютно все, я ни раз натыкался на то что чего-то не хватает
- из попапа почты нельзя отметить письмо как прочитанное
- из превью письма (в новой вкладке) нельзя архивировать или удалить его
- в некоторых меню сложно ориентироваться: нет иконок, нет вложенности, просто большо список
- стили в некоторых местах едут
- в нативных интерфейсах не работают расширение - забудьте про переводчик и grammarly в почтовом клиенте
- сообщение при открытии его в списке не прочитывается и кнопки для этого нет
- странно синкает (не синкает?) прочитанные письма с ориджином

Я не почувствовал единого и слаженного UX, хотя и какие-то намеки были. Попробовать рекомендую, можно найти что-то действительное интересное, но я сейчас в поисках другого браузера.

Кирилл Мокевнин вообще легендарный человек и любые его доклады рекомендуются к ознакомлению.

Например:

Ментальное программирование

Почему сложно программировать UI

Сегодня будет релиз третьего реатома, итог работы последних четырех лет: исследования, разработка, прототипирование и поддержка.

Ещё много впереди, но, объективно говоря, уже сейчас это ультимативное решение, все аналоги имеют лишь с половину фич.

Первая презентация сегодня будет тут: https://holyjs.ru/schedule/days/1

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

Welcome reatom.dev

Хочется напомнить этот пост про headleess-ui.

Замена реакита сейчас разрабатывается в виде https://ariakit.org. Кстати, вот моя старая заметка он нем.

У меня есть сильное намерение переписать его на реатом. Точнее, понемногу портировать самые сложные компоненты, что бы дать больший контроль над ними и отвязать от тяжелого и медленного реакта. В ближайшее время накидаю ишьесов и расскажу подробнее на сколько тяжело сделать хорошо "простой" автокомплит.

В чате спросили “Где можно проверить сайт на доступность?”в в другом чате ответили:

https://developer.chrome.com/docs/devtools/accessibility/reference/

https://wave.webaim.org

https://www.deque.com/axe/ (бесплатное расширение)

http://accessibilityinsights.io

https://accessibe.com/accessscan

#help_oss Помогите пофиксить баги в мобильной версии reatom.dev 🙂 Нужно провести небольшое тестирование, в том числе на айфоне (у меня нет).
https://github.com/artalar/reatom/issues/445

Сегодня опять напомню о хорошем посте - про CSS-шлюзы 🙂

В последних веб-стандартах обсуждали ремы и склонялись скорее к тому что бы их не использовать и были аргументы в пользу консистентности макета и верстки, едениц измерения. Наверное, в большинстве случаев так и есть, но я бы не ставил здесь точку и по возможности экспериментировал 🙂

Зум отличается от подхода с ремами тем что он скейлит не только текст, но и вообще все визуальные элементы, в том числе бордеры, что иногда смотрится стремно. При верстке на ремах же для некоторых размеров можно (и нужно!) использовать пиксели.

Ещё на мобилках зумить весь сайт иногда вообще нельзя или не удобно.

Аргумент про большие компании вообще не считайте, они решают свои проблемы, у них нет цели сделать всем хорошо, там важнее мейнстрим.

А если вам хочется посмотреть на наглядный пример использования ремов - reatom.dev. Лайфхак - у меня нет макета ни к нему, не к mono 😃

И специально для тестов я добавил поддержку url параметра __remSize, который задает documentElement.style.fontSize. Вот попробуйте, откройте две вкладки рядом, поменяйте значение __remSize:

reatom.dev
reatom.dev/?__remSize=16px