API

Еще в догонку к теме API - отличная книга Сергея Константинова. Маст хев для всех бэкендеров, кому приходится проектировать REST API.
https://twirl.github.io/The-API-Book/index.ru.html

Определение области применения

В предыдущем посте в книге про API описан хороший метод аналитики задач:

"Ключевой вопрос, который вы должны задать себе четыре раза, выглядит так: какую проблему мы решаем? Задать его следует четыре раза с ударением на каждом из четырёх слов.

Какую проблему мы решаем? Можем ли мы чётко описать, в какой ситуации гипотетическим потребителям-разработчикам нужен наш API?

Какую проблему мы решаем? А мы правда уверены, что описанная выше ситуация — проблема? Действительно ли кто-то готов платить (в прямом и переносном смысле) за то, что ситуация будет как-то автоматизирована?

Какую проблему мы решаем? Действительно ли решение этой проблемы находится в нашей компетенции? Действительно ли мы находимся в той позиции, чтобы решить эту проблему?

Какую проблему мы решаем? Правда ли, что решение, которое мы предлагаем, действительно решает проблему? Не создаём ли мы на её месте другую проблему, более сложную?" https://twirl.github.io/The-API-Book/docs/API.ru.html#chapter-8

Особенно мне нравится пункт 4. Действительно бывают случаи, когда вместо одной проблемы создаем другую, городим костыли и т.д.

#product_management #development

Значит, прилетает к нам такое письмецо.
Моя первая реакция - ты чо, пёс, у нас кубернейтесы с масштабированием до 10 нод сударь, тут какая то ошибка, у нас все хорошо с мощностями...
Ну и благополучно забил отложил в беклог данный тикет.

Но несколько дней спустя заметил, что huntica.works у меня с домашнего интернета не открывается, хотя с 4G все отлично. В то же время у нашего CEO из вражеской солнечной Калифорнии все отлично загружается.

Более того, оказалось, что я не могу подключится к нашему кластеру на DO.

При этом при включении VPN все начинало работать "like a charm"

Пишу George Gaál, спрашиваю, вот неведомая хуйня оказия такая случилась, знаешь чего? Он говорит - ага, похоже блокируют, на днях комрады по этой причине драпали с DO на Яндексы...

А так же скинул эту статью https://habr.com/ru/amp/post/667096/

Собственно, привет РКН, КПСС или что там у нас.

На этом месте лимит телеги кончается, дальше решение читайте тут https://bearlogin.notion.site/a62fb447700646e59b790f9450d081ae
#devops

Шпаргалочки

В каждой (но это не точно) технологии можно найти cheetsheets - шпаргалки. Это основные возможности и конструкции языка/фреймворка и т.д.
По ним очень удобно готовиться к собесам или быстро ознакомится с технологией.

Примеры:
https://github.com/typenoscript-cheatsheets/react
https://github.com/dekadentno/vue-cheat-sheet
https://github.com/mbeaudru/modern-js-cheatsheet
https://github.com/wsargent/docker-cheat-sheet
https://github.com/LeCoupa/awesome-cheatsheets


P.S. О шпаргалках я узнал у своего падавана @VicSmol :) Он кстати ищет работу NodeJS Developer

#advices

Форки и зависимости

В работе синьора или миддла возникает такой момент, когда “хватит это терпеть!”©

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

А что делать потом? Надо же проверить, как изменения работают в твоем приложении.

И тут у нас варианты:

1. Правки залить на гитхабы и создать pull request в родительский репозиторий. Затем ждать когда их примут и опубликуют в npm. Выглядит жуть как долго и неудобно.

2. Переназначить зависимость на свой git репозиторий. Например так

"super-lib": "git+https://github.com/org/super-lib.git",

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

3. Деплоить изменения прямиком в node_modules приложения. Дешево, сердито и костыль

4. Использовать yarn link

Делаем

yarn link

в root дирректории форка, затем заходим в наше приложение и делаем

yarn link super-lib

Таким образом зависимость линкуется прямиком в локальную дирректорию без изменения package.json

Последний вариант выглядит интересней всего, но есть нюанс из-за которого, не разобравшись, мне пришлось выбрать третий вариант в далеком(нет) прошлом.

Если эта библиотечка имеет в dependencies какую то зависимость, которая должна быть только одна, например vue или react, то мы получим кучу левых ошибок, из которых не сразу разберем, что дело в link.

Например такое

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

или

[Vue warn]: $listeners is readonly.
[Vue warn]: $attrs is readonly.

Решение

Нужно дополнительно сделать link этих зависимостей

cd /mysuperfork/node_modules/react
yarn link

cd ../react-dom
yarn link
 
cd app
yarn link react
yarn link react-dom

Для vue нужно линкануть сам vue и vue-template-compiler

Happy contributing :)

P.S. Эта история работает так же и при разработке своих либ и создании example к ним. Только нужно указать зависимости через link - "react": "link:../node_modules/react" . Так же можно использовать https://www.npmjs.com/package/create-react-library которая сразу создаст папку example с правильно подключенными зависимостями.

Ну и по традиции, лайки там, дизлайки, реакции

#react #vue

Sample Apps

В Реакт чате нашел список идей для приложений-примеров. https://flaviocopes.com/sample-app-ideas/
Что очень удобно, когда изучаешь новый фреймворк, или пишешь tutorial.
Копипастить бесконечные to-do листы очень скучно, плюс это хороший челлендж для практики - читаешь туториал, и реализуешь другое приложение.

Deno

Вчера только узнал, что есть новая среда исполнения для JS и TS от автора NodeJS Ryan Dahl - https://deno.land/

При первом рассмотрении довольно занимательная штука:
- Написана на Rust и ориентирована на высокую производительность
- Поддержка TS из коробки (правда без runtime type checking)
- Инструменты для разработчика (система разрешения зависимостей и формат кода)
- Приложения работают в песочницах, и требуют выдачи разрешений для доступа к система (например сеть, файловая система, env)
- ES Modules
- стандартная библиотека модулей
- зависимости через url

Нашел даже nestjs порт на https://github.com/SampaioLeal/destjs и full stack фреймворк https://github.com/alephjs/aleph.js

Здесь можно посмотреть про философию Deno https://www.youtube.com/watch?v=1gIiZfSbEAE

А вы уже пробовали Deno?

#js #ts

Разрабатываем форму авторизации на 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

Про софты :)