Добавил простейшие логи с фильтрацией

И эффекты. Закину релиз с такими возможностями. А всякие дополнительные фичи, буду добавлять уже по необходимости

TverIO продолжает череду онлайн мероприятий. В этот четверг в 19:00 будем говорить о State Management на фронте. Участвуют крутые эксперты, которые помогут раскрыть тему с разных сторон и я).

Присоединяйтесь. https://www.meetup.com/ru-RU/tverio/events/271917823/

Скоро начинаем

https://www.youtube.com/watch?v=cUSyJk6k2rk

Интересно…

RegExp.exec возвращает null буквально через раз. Что за?..

meta = 'https://share.effector.dev/KC3MBolg'
SHARE_REGEXP = /https:\/\/share\.effector\.dev\/([\w\d]+)/gi;

a = SHARE_REGEXP.exec(meta)


У кого ещё воспроизводится?

upd. В чате подсказывают, RegExp объекты в JS — мутабельные. exec метод сдвигает индекс после каждого вызова, а когда не находит совпадений, то сбрасывает в 0
Такое поведение вызвано флагом g, полезно для итерации по матчам (например так)

Затащил inspector в effector-logger.
Пока что в next версии в npm.

yarn add effector-logger@next

Прошу проверить его работоспособность.
https://github.com/sergeysova/effector-logger#inspector

Нужно добавить createInspector() после инициализации приложения, а после запуска, в браузере нажать CTRL+B

Узнал, что с помощью Intl.Collator можно вменяемым способом сравнивать локализованные строки.

Сохраните себе на заметку, если не знали раньше

Я и раньше занимался личными консультациями, но только сейчас осмелился выложить лот на страничку в Buymeacoffee.

Пообщаюсь о том как писать React-приложения, строить архитектуру, зачем нужна структура проекта, как можно организовать команду и как решать конфликты с коллегами. С удовольствием поболтаю на свободную тему, если хочется)

https://www.buymeacoffee.com/sergeysova — Консультация в Zoom

Второй выпуск подкаста «Сова говорит...»
React hooks, classes and bad practice

Поговорим об истории React, как появились хуки, чем плохи классы и ХОКи, разберем построение систем на примере ракет, и как работает развитие технологий на примере репейника.

https://podcast.sova.dev/episodes/1-1-react-hooks-classes-and-bad-practice

Слушать подкаст можно по этим ссылкам

Яндекс.Музыка
https://music.yandex.ru/album/8469435

Google Podcasts
https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5zaW1wbGVjYXN0LmNvbS8xeHRNRlZWcA

Apple Podcasts
https://podcasts.apple.com/us/podcast/%D1%81%D0%BE%D0%B2%D0%B0-%D0%B3%D0%BE%D0%B2%D0%BE%D1%80%D0%B8%D1%82/id1476506663

VK
https://vk.com/podcasts-188742863

Stitcher
https://www.stitcher.com/podcast/sergey-sova/sova-speaking?refid=stpr

А теперь на SoundCloud
https://soundcloud.com/sergeysova/11-react-hooks-classes-and-bad-practices

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

В примере выше, все четыре таски будут ждать, пока builder-image и start-tools-image соберутся параллельно.

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

Недавно столкнулся с необходимостью точно узнать во что разворачиваются короткие CSS-свойства. Например: padding в padding-top, padding-right, padding-bottom, padding-left

В интернетах нашел сниппет, который обращается в document.body.style, но оказалось, что на типичной странице в этом поле уже куча стилей, и сниппет не работает одинаково во всех кейсах. Мне пришлось поправить этот сниппет, чтобы он работал на всех страницах одинаково и предсказуемо. Подумал, что и вам это может быть удобно.

https://gist.github.com/sergeysova/b003fae5670a476c28ff2ff972ec7fbc

Вернемся к CRA.
Этим рассадником я конечно же больше пользоваться не буду. Потому что есть альтернативы:

1. Parcel — самый простой и быстрый старт, но не так всё хорошо с кастомизацией. Лично мой хейт за тильды ~ в качестве несменяемых алиасов для корня проекта. Ещё Parcel не умеет работать с file:../.. зависимостями, по тихому подменяет на версию и устанавливает из интернетов. При всех минусах я его активно юзаю

2. Razzle — да, мы все привыкли, что он не очень хорошо развивается и нужен только для SSR, но на самом деле в него добавляются новые фичи, замержили шаблоны в стиле CRA, а также есть SPA mode. Собственно теперь Razzle является полноценной заменой CRA, при этом без его проблем с кастомизацией и навязываением своих проблем. Используйте babel как удобно. Самое важное, что Razzle поддерживает не только React, ещё и preact, elm, inferno, rax, angular, vue и что-нибудь своё. Например, можно легко сделать шаблон для forest.

Я очень рад, что отвратительное отношение авторов CRA к своим пользователям это не единственный вариант из списка готовых стартеров.

Ещё один сниппет, на этот раз для простого чтения CSS-переменных из js.

trim() нужен, чтобы убрать всякий мусор, а reader облегчает обработку значений.

https://gist.github.com/sergeysova/f1f4d34c59514201494f99c98291185e