Разрабатываем форму авторизации на React, XState, MobX

В этой статье мы поговорим про инструмент из серии "как я раньше без него жил" XState
Он не только для React, а для чего угодно - eсть модули для Vue, Svelte и можно свое написать для любого фреймворка


Мне в React всегда не нравились smart компоненты. Это когда в компонент намешано куча useState, useEffect, бизнес логика и вот это вот все.

Вынос всего этого добра в хуки с одной стороны решает проблему, но вся эта мешанина просто едет в хук. Особенную боль в этом случае доставляет form logic...

Вот возьмем например форму входа на сайт. Казалось бы, что там делать? 2 инпута, кнопка, дернули API, авторизовали - PROFIT!

Однако, если включить голову сделать аналитику фичи более детально, окажется, что не все так просто:

1. Форма входа должна обрабатывать ошибки ввода
2. Форма входа не должна показывать ошибки пока поле не заполнено
3. Ошибка поля должна пропадать после ввода данных
4. Поле должно валидироваться явно (с показом ошибки) только после blur события
5. Не должно быть возможность отправить форму, пока есть ошибки валидации
6. Поля должны валидироваться не явно, для требования 5
7. После нажатия на кнопку отправки формы, кнопка должна исчезать и исключать повторную отправку формы
8. Ошибки сервера должны выводится в читаемом виде и не блокировать повторную отправку формы
9. После успешной авторизации форма не должна выводится. Вместо этого должно показываться сообщение, что пользователь уже авторизован

Вот так. 9 требований для простой формы авторизации из 2 полей без всяких там 2FA.

Я думаю вы уже представили как это реализовывать...

Но здесь нам приходит на помощь... дискретная математика...
Далее с картинками, мемчиками и кодом тут https://bearlogin.dev/blog/xstate-react-mobx-form-logic

Это мой новый сайт, который я собрал за вечер и залил на vdsina. https://vdsina.ru/?partner=pu792sk4w7 - вот ссылка на 10% скидоса вам, и 10% вознаграждения мне

Upd. Фиксанул отображение статьи на мобиле

#frontend #react #xstate #mobx #tutorials

Solvery

Недавно в посте https://news.1rj.ru/str/bearlogin_dev/21 писал про отличия обучения с ментором и самостоятельно.
И сегодня ребята из Solvery дали мне промокод для моих подписчиков - скидка на первое занятие 500р
bearlogindev500
Забирайте, пользуйтесь, там есть менторы на любой вкус и бюджет

Напоминаю свой профиль https://solvery.io/ru/mentor/bearlogin

Кстати, я сам пользовался этим сервисом, нужна была консультация по стартапу. Я написал заявку, и мне подобрали отличного чела, который шарит в венчурных инвестициях https://solvery.io/ru/mentor/vyanko
За 1 час я получил всю информацию, что хотел и направление для дальнейшего поиска информации.

P.S. Нас уже больше 500 человек! Успешный успех! Э чувак, ты куда стой, было же больше 500!

Страх ошибки или почему троечники успешней отличников

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

Казалось бы, все должно быть наоборот. Вот старательный, прилежный ученик, а вот раздолбай «и так сойдет», но почему-то так не работает.

Попробуем разобраться, почему такое происходит.

Наша система образования и воспитания построена на оценивании, исправлении, поощрении. А в каких-то культурах, например в Южной Корее, еще и на жесткой конкуренции.

С малых лет нас лишают права на ошибку. Учителя снижают оценки за ошибки, а родители - наказывают.

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

При этом напрочь пропадает осознание и принятие ошибок как неотъемлемой части обучения. Отношение к своей работе, продукту, коду воспринимается как отношение к себе. Страх конфликтов и критики.

В итоге у человека формируется установка — ошибка -> меня буду ругать, меня будут ругать -> я плохой, я плохой -> меня не будут любить и уважать, меня не будут любить и уважать -> меня не возьмут на работу / не купят мою услугу -> у меня не будет средств к существованию, семьи и т.д.

Получается что ОШИБКА = угроза выживанию и стресс

В итоге чтобы не было стресса, нужно не ошибаться, а не ошибается тот, кто ничего не делает.

И мы откладываем до завтра выпуск продукта, выкладывание резюме, смену работы, выступление на публике и т.д. Постоянно готовимся, улучшаем себя. В итоге к синдрому отличника - синдром самозванца, выгорание и депрессия.

И что делать?

Вы спросите, окей, а что делать? Мы так все время жили, деды наши так жили, нельзя же просто сказать себе: «эй чувак, не парься ты поводу ошибок и мнения окружающих, плевать кто что подумает...»

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

Но осознание проблемы — это уже начало ее решения.

Тем более сейчас очень много сервисов для поиска онлайн психолога:
https://zigmund.online/
https://psyalter.ru/
https://profi.ru/repetitor/psihoterapevty-po-nevrozam/

Так же могу посоветовать прокачивать эмоциональный интеллект.

Заключение

В настоящее время большинство известных учёных-психоаналитиков согласны с тезисом об опасности стремления к идеалу. Это приводит к депрессии и к нарушению психики, снижает интеллектуальные и творческие способности.

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

Hard‘n‘soft

Отличная статья от SkyEng https://habr.com/ru/company/skyeng/blog/667740/

Поможет разобраться, какие софт скиллы нужны современному разработчику.

Конечно не во всех компаниях нужно “челленджить предложения бизнеса”. Где-то главные софтскиллы - “не бухтеть, не просить повышения з/п, давать эстимейты в 200% точности”, но в целом направление здравое. Уже попробовал их опросник на собеседовании.

Кстати, на моей первой офисной работе в компании был грейд “Хороший человек”. Это был самый стартовый грейд, а за ним уже шел стажер.
Суть заключалась в том, что приходил чувак в офис и сидел читал курсы по битре и получал за это 5000р. (для сравнения стажер получал 10к, а программист 15к)

Уже в 2011 году soft был первичней hard. :)

Сейчас еще тема с 4К, как главные софт скиллы будущего: креативность, коммуникативность, кооперативность, критичность.

#articles #teamlead #hr

HH.ru

Если вы вдруг сейчас ищите работу, и разместили объявление на HH.ru, то ваше резюме смогут увидеть только те идиоты богачи, которые готовы 1млн в год заносить за доступ к базе резюме.

Единственная возможность посмотреть ваше резюме на HH.ru - это сделать его доступным только по ссылке.

Если хотите найти на работу на HH - нужно унижаться откликаться на вакансии.

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

Представьте, что вы HR, вам кидают ссылку на, допустим, хабр, а там просьба авторизоваться. Большинство просто забьют.

#advice #hr

Redux

У меня часто спрашивают, как в React лучше использовать Redux?

Обычно отвечаю так:

yarn remove redux @reduxjs/toolkit react-redux
yarn add mobx mobx-react

#react #redux #advice

Я прям из коментов это хочу вынести :)

Поздравьте меня! Мою статью про XState опубликовали на habr. Теперь я полноправный юзер Хабра. 2 недели на модерации висела. Не обошлось без токсичных адептов mol :)

https://habr.com/ru/post/675672/

Автодополнение для alias в bash

Раньше я перезагружал сервис в docker stack руками - через docker ps брал id контейнеров и рестартил.

Затем я почитал доку :) и нашел там такую команду
docker service update --force --update-parallelism 1 --update-delay 30s redis

Очень удобно, ничего не скажешь...

Для удобства сделал alias в .bashrc
alias service-restart='docker service update --force --update-parallelism 1 --update-delay 30s '

Теперь уже лучше. Для перезагрузки контейнеров нужно всего лишь написать
service-restart huntica_front

Но хотелось бы автокомплита, чтобы подставлял сервисы...

Нашел восхитительную утилиту https://github.com/cykerway/complete-alias

Пишем в .bashrc следующий код
source ~/.bash_completion.d/complete_alias
alias service-restart='docker service update --force --update-parallelism 1 --update-delay 30s '
complete -F _complete_alias service-restart

И magic...

#tutorials #bash #devops

Архитектура frontend

В отличие от бека, инфы про архитектуру фронта очень мало.
Но все-таки есть хорошие материалы.

Мне очень нравиться цикл статей https://khalilstemmler.com/articles/client-side-architecture/introduction//
Он поможет разобраться в принципах, философии и реализации архитектуры на фронте.

Так же могу посоветовать https://feature-sliced.design/ но там есть свои нюансы, о которых постараюсь написать позже.

#frontend #architecture #ddd

Дважды батя! Вторая дочка)

Debugger it

Значит занимаюсь с учеником, смотрю он console.log дебажит.
Говорю ему, используй debugger.
Он - какой debugger? Я - ну, обычный debugger.
Не понимает :) И таких случаев много было. Решил написать, вдруг кто тоже не знает.

Значит в js есть такое выражение - debugger
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/debugger

1. Пишешь в любом месте кода, и по-сути создаешь брейкпоинт (точка остановки)
2. Затем открываем любой отладчик, например dev tools в браузере и voilà, открываеться панель sources и приложение останавливается.

Таким образом, для дебага нужен только браузер и слово "debugger"

Из коментов комрадов:
— не забываем ставить линты на debugger, чтобы не утекло в репозиторий
— можно использовать дебаггер чисто для первой остановки, и потом точки ставить дальше в браузере
— setInterval(()=>{debugger}, 1) в проде усложнит жизнь мамкиным хацкерам


#frontend #debugger

Про софты :)

Усталость, отдых и кислота

Наткнулся на статью https://news.mail.ru/society/52587508/ Теперь многое стало понятно. Особенно, почему нужно работать помидорами и хорошо отдыхать. А так же, почему в конце рабочего дня растет количество багов :)

Во всем виновата глупоглутаминовая кислота.

В следующий раз, когда твой ПМ будет заставлять работать ночью или в выходные, скинь ему эту статью :)

P.S. какими помодоро таймерами или техниками вы пользуетесь?

P.P.S. похоже, твой ПМ поставил дизлайк...

Чувак, который дизлайк поставил, в комментах плз напиши, что тебе не нравится :)

BUSIER или зависания Linux

В последнее время моя Ubuntu часто стала зависать наглухо. При чем проблема обычно всегда одна и та же - утечки памяти в Chrome или IDEA. Такой штуки как вызов диспетчера задач как в винде, тут нету (можно запилить, но с бубном). По-этому тупо перезагружал комп. Но вчера обнаружил такую тему как System Request.

Зажимаем Alt + SysReq(PrtSc) и кнопку, например - F - и отправляете команду напрямую в ядро "убить самый жрущий процесс"

А вот последовательность REISUB (BUSIER для запоминания) - gracefull reboot, намного лучше, чем бахнуть кнопку на компе.

R: Switch to XLATE mode
E: Send Terminate signal to all processes except for init
I: Send Kill signal to all processes except for init
S: Sync all mounted file-systems
U: Remount file-systems as read-only
B: Reboot

Но вся эта магия не сразу из коробки работает, нужно заменить 176 на 244 тут

sudo nano /etc/sysctl.d/10-magic-sysrq.conf

Дальше выполняем команду

echo 244 | sudo tee /proc/sys/kernel/sysrq

Дальше жмем Alt+SysReq+F и убиваем какую нить вкладку хром)

Upd. от камрада @artalar - "Можно ещё в обход иксов запустить терминал Ctrl + Alt + F1 to F6. По моему опыту зависают чаще всего именно они (икс сервер для отрисовки гуя)"

Тут инфа
https://askubuntu.com/a/36717

#devops #linux #ubuntu #advices

Чот страшно...