Size: a a a

Сова пишет…

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

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

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

https://www.buymeacoffee.com/sergeysova — Консультация в Zoom
источник
2020 August 02
Сова пишет…
Второй выпуск подкаста «Сова говорит...»
React hooks, classes and bad practice

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

https://podcast.sova.dev/episodes/1-1-react-hooks-classes-and-bad-practice
источник
2020 August 03
Сова пишет…
источник
Сова пишет…
Я начал выкладывать текст подкастов в VK и Patreon. Будете читать?
Анонимный опрос
55%
Да, мне удобнее прочесть
22%
Послушаю, без текста
22%
Не, забей
Проголосовало: 107
источник
Сова пишет…
sergeysova
Я начал выкладывать текст подкастов в VK и Patreon. Будете читать?
Анонимный опрос
55%
Да, мне удобнее прочесть
22%
Послушаю, без текста
22%
Не, забей
Проголосовало: 107
источник
Сова пишет…
источник
2020 August 13
Сова пишет…
Как же я люблю Github Actions.

Четыре крейта собираются через матрицу сборки параллельно. Помню, как страдал с подобным в Travis.
источник
Сова пишет…
источник
Сова пишет…
Не так давно узнал, что таски могут дожидаться выполнения других тасок.

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

То есть, не нужно указывать, что собирать паралельно, а что последовательно, CI сам разберется как собирать и в каком порядке. Вот это декларативный подход во все поля.
источник
2020 August 14
Сова пишет…
Недавно столкнулся с необходимостью точно узнать во что разворачиваются короткие CSS-свойства. Например: padding в padding-top, padding-right, padding-bottom, padding-left

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

https://gist.github.com/sergeysova/b003fae5670a476c28ff2ff972ec7fbc
источник
2020 August 15
Сова пишет…
sergeysova
Как же меня сейчас разбомбило!

Итак, почему CRA это отвратительная штука:
- невозможно просто так подключить babel плагины
- заставляет юзать свой eslint-config-react-app, и env ESLINT_EXTEND
- вокруг него есть десятки расширителей rewired, customize-cra, craco…. и всё это работает не очень хорошо и имеет проблемы с обновлениями CRA
- он насильно исправляет tsconfig при запуске (WTF?)
- подключить postcss плагин уже проблема
- env переменные обязаны начинаться с REACT_APP_

Я думаю вы сможете накидать ещё десятки комментариев о проблемах с CRA. Но у меня весь процесс “БЫСТРОГО” старта выглядит так:
1. yarn create react-app my-app
2. исправить все косяки CRA (3-4 коммита)
3. писать немного код
4. понять, что нехватает расширения
5. пытаться жить с craco/rewired+customize-cra
6. получить какой-то баг при обновлении
7. сделать eject и исправить всё что нужно руками
8. переписать все конфиги

Итого, просто на мучения с CRA в сумме уходит несколько рабочих дней и 2000±500 строк изменений. Это неправильно. Такую систему невозможно называть УДОБНОЙ или УПРОЩАЮЩЕЙ. Оно даже для старта ничего не упрощает.

Зачем было навязывать свои еслинт плагины?
В чем проблема сделать как Razzle? Он решает одну задачу — конфигурирует webpack для SSR, и делает её очень хорошо. При этом позволяя легко кастомизировать и расширять любую часть, что бабель, что вебпак, что энвы, что еслинт.
Но авторы CRA это дичайшие вахтеры, навязали десятки спорных решений, и называют это хорошим решением для новичка. Притом новичок не может использовать инструменты вроде eslint и postcss по документации этих инструментов, CRA ломает использование инструментов.

Так не должно быть. Я собираю голоса на создание нормального инструмента для бутстрапинга react приложений. Пишите в комментариях всё, что думаете про CRA и его проблемы. Какие плюсы лично вам нравятся в CRA и их нужно перенести в адекватную реализацию?
Вернемся к 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
источник
2020 August 16
Сова пишет…
Какой кейс проще читается для имен файлов и директорий?
Анонимная викторина
13%
Смешанный, где как
16%
PascalCase
19%
camelCase
14%
underscore_case
38%
kebab-case
Проголосовало: 393
источник
2020 August 23
Сова пишет…
Выползли на выходных на финский залив возле Сестрорецка. Существенный глоток свежего воздуха, после изоляции в душном городе.

Круто, что днём было не жарко, около 23 градусов и ветрено. Гулять сплошное удовольствие.

Хочется выбраться куда-нибудь подальше... из России
источник
Сова пишет…
источник
Сова пишет…
источник
2020 September 03
Сова пишет…
Switch

Многие часто воспринимают его как замену Checkbox — выбор true/false значения в форме, но семантика и UX отличается у этих компонентов.
источник
Сова пишет…
Было бы странно создать новый компонент, который ведет себя также как и привычный всем Checkbox. Для начала нужно вспомнить, где используется Checkbox:
- в формах входа "Запомнить пароль"
- во время регистрации "Принимаю соглашение"
- в качестве флага включающего часть формы "Нужна доставка"
Самое важное — чекбокс сам по себе не изменяет внешнее состояние, то есть не отправляет данные куда-либо, то есть ведет себя как обычный input — отправляется как часть формы при нажатии на кнопку "Отправить" или "Сохранить".

Switch напротив, является самостоятельным компонентом, он изменяет внешнее состояние сразу после изменения. Ему не нужна форма или отдельный сабмит, ведь свитч сам по себе сигнализирует о своем состоянии и меняет его мгновенно. Примеры:
- frozen в codesandbox
- WiFi в iOS
- Персонализация для бизнеса в myaccount Google

Детали реализации
Зачастую изменение состояния на сервере требует времени, и иногда эту задержку полезно показать на самом компоненте — задержать переключение тумблера в Switch на середине в состоянии loading, а также показать легкое оповещение "Изменено", так пользователь точно поймет, что изменение происходит не мгновенно и действительно что-то меняет, нет необходимости применять изменения.

Switch должен быть доступен через клавиатуру, пробел или space должны переключать его.
источник
Сова пишет…
источник