maxpfrontend @maxpfrontend Channel on Telegram

maxpfrontend

@maxpfrontend


Это канал о фронтенде.

Сайт: http://bit.ly/react-ru (есть расписание)
VK: http://bit.ly/vk-react
YouTube: http://bit.ly/react-youtube (записи вебинаров и стримов)
Twitch: http://bit.ly/react-twitch (стримы)
Twitter: http://bit.ly/twitter-react

maxpfrontend (Russian)

Канал "maxpfrontend" - это идеальное место для всех, кто интересуется фронтенд разработкой. Здесь вы найдете множество полезной информации, связанной с созданием интерфейсов и веб-приложений.

На канале представлены ссылки на различные ресурсы, которые помогут вам расширить свои знания в этой области. Вы можете ознакомиться с расписанием вебинаров на сайте http://bit.ly/react-ru, посетить группу ВКонтакте по ссылке http://bit.ly/vk-react, посмотреть записи вебинаров и стримов на YouTube по ссылке http://bit.ly/react-youtube, а также насладиться стримами на Twitch по ссылке http://bit.ly/react-twitch. Кроме того, вы можете следить за обновлениями и интересными материалами на Twitter http://bit.ly/twitter-react.

Присоединяйтесь к каналу "maxpfrontend" и станьте профессионалом в мире фронтенд разработки!

maxpfrontend

06 Nov, 10:34


Статья про повышение зарплаты готова: https://habr.com/ru/articles/767760/ , буду рад положительной реакции на хабре! Всем 💰

maxpfrontend

27 Sep, 11:47


Привет, коллеги.

Многие из вас, кто когда-то читал мои учебники уже давно выросли и я, надеюсь, вы на позиции middle/senior. Я хочу рассказать и показать на конкретных примерах, как можно повысить свою зарплату. Как всегда, я ничего не прячу под спойлеры. Мы поговорим о метриках, так как без цифр шансы на повышение ниже, о доступных сценариях: sentry/datadog ошибки, тестирование, нагрузочное тестирование api, уменьшение платежей за сервисы, которые вы используете (например github, про aws, к сожалению, не расскажу, лучше пообщаться на эту тему с devops). Зацепим и софт скилы: сходить помочь с переездом или посетить корпоративный футбол. Если хотите сделать встречу интереснее - пройдите опрос (там всего три вопроса).

📄 https://forms.gle/SL76YwTES49ovf7E6

До связи!

maxpfrontend

13 May, 07:17


Добавил реакции, и обсуждения. Должно работать! Всех с пятницей и до связи.

maxpfrontend

13 May, 07:14


Вторая партия - пушка-бомба wallaby.js
На первом скрине - оба теста зеленые, на втором я заменил ожидаемый текст и сразу же покраснело. В реал-тайме! Это как test:watch только все интегрировано в VS Code, плюс есть дополнительные плюшки. Утилита еще в стадии теста, но уже есть ощущения магии.

maxpfrontend

13 May, 07:12


Первая партия - это интеграции для PR. Здесь - sonarcloud про качество кода (test coverage report - jest, баги/ошибки - eslint и что-то свое от sonarcloud). Затем size-limit и lighthouse с говорящими за себя названиями.

maxpfrontend

13 May, 07:08


👋 Привет, в данный момент мы перевозим часть легаси кода на AntD (design system), плюс внедряем React-query.
Попутно, приходится почитывать про хуки, нашли интересную обертку для http запросов - ky (например, вы знали что нативный fetch не выбрасывает exception если статус не 200? В итоге react-query не хочет из коробки показывать error кейс. Axios или ky, например, по умолчанию уже делают throw error для не 200 ответов, редирект не в счет).

🧪С тестами стало гораздо веселе работать в связке react-testing-library + msw (для мока запросов), и плюс wallaby.js (для более быстрого отклика от тестов; еще тестирую, но выглядит изумительно. Есть подозрения, что на большой кодовой базе умрет, но у нас микросервисы, пока что летает). Для поддержки качества кода, я разобрался и настроил на проекте sonarcloud, мне это дало пару пинков в сторону лучшего покрытия тестами. Так же, у нас есть пара других интеграция в моменты pull request review: например size-limit, который показывает насколько разбухнет бандл, или lighthouse check - который показывает сколько гугл даст баллов после мерджа PR.

🤵‍♂️ До кучи я уже скоро год как тим-лид на текущей работе. Мне повезло, что у меня есть технический директор, который прокачивает меня как успешного лидера команды. Удалось сплотить команду, удалось найти ответы на многие вопросы. В этом помогла книга "Extreme ownership" (не знаю, есть ли на русском). Книга сначала идет очень весело, потом надоедает вся эта военная гордость Америки, но советы и рекомендации мне пригодились. До этого я работал тим-лидом в двух других командах, но они не были интернациональными и я там скорее просто раздавал задачи и консультировал, поэтому можно назвать не "лид", а программист + менеджер 🙂

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

Я думаю, что можно будет к лету сделать стрим по: react-query + ky + react-testing-library + msw , пока что меня останавливает нелюбовь к хукам. Как я увижу в них силу и начну писать их с радостью, так и пообщаемся.

Ниже скину несколько скриншотов.

maxpfrontend

17 Feb, 07:30


Опубликованы результаты опроса среди js разработчиков https://2021.stateofjs.com/en-US/

что посмотреть:
- как сделан сайт с результатами (графики огонь)
- что популярно? (svelte идет уверенной дорогой)
- как ангуляр теряет в графе “satisfaction”, но при этом все еще очень популярный

maxpfrontend

22 Oct, 11:38


Всем привет, готовлю материал по тестированию... Наткнулся на отличный гайд по unit-тестам в js, но на англ - https://github.com/mawrkus/js-unit-testing-guide

maxpfrontend

14 Jun, 13:41


Всем привет, мы ищем коллегу уровня middle+ / senior

Описание вакансии здесь (там же форма для заявки), но я могу его перефразировать и немного рассказать о нас.

Что мы делаем? Продаем онлайн-букинг. Например, у вас есть ателье, вы покупаете нашу систему, и теперь у ваших клиентов есть возможность забронировать встречу онлайн, а у вас календарь событий, касса и прочее. Клиентов много, менеджмент сильный.

⚙️ По тех.стэку:
- бэк: ruby, elixir.
- фронт: js/ts, react (redux, redux-loop, redux-saga, react-hooks), elm (0.18, 0.19)

На фронте микросервисы, поэтому сверху перечислен зоопарк подходов и технологий. То есть, у нас много мини-приложений, которые работают с разным набором библиотек. Есть даже react 0.14 и без redux, в то же время есть свежие приложения с последним реактом и хуками.

👷‍♂️ Что предстоит делать?
- пилить новые фичи (предпочтительно typescript+react, elm под вопросом, в будущем может попробуем rescript или что-нибудь еще)
- поддерживать текущий код и фиксить баги (и на js и на elm)
- работать над дизайн системой (недавно к нам присоединился сильный UX-дизайнер)
- тестировать код (!). У нас нет тестировщиков, тестируем сами + пишем авто тесты (unit и e2e)

Если в двух словах: много легаси, есть свежее, есть свобода выбора инструментов.

🇩🇪 Вакансия предполагает, что вы переедете жить в Германию, предпочтительно в Мюнхен. Так же можно в Берлин и в исключительных случаях на удаленку.

Язык коммуникаций в компании английский. Немецкий для жизни в Германии не обязателен. Я здесь уже два года и знаю много людей, кто, вообще, не интересуется немецким языком.

🍴Вилка 65000-75000 euro в год (gross)

Если интересно, подавайте заявку по ссылке выше (нужно резюме на англ), и черканите мне в личку имя фамилию.

maxpfrontend

06 May, 08:02


Вообще, jest вижу на сегодня почти как стандарт в индустрии юнит тестирования. Не обязательно его использовать с react.
Плюсы - отличная документация, большие возможности
Минусы - слишком жирный 🙂 тесты запускаются медленно, но прогоняются быстро.

Конкретно в данный момент, пишу тесты на jest для работы с датами (у нас legacy библиотека, известная всем кто работал с датами - moment).

пример теста:

```
describe(`Group by ${GroupByPeriod.DAY}`, () => {
it(`dayOfYear 68 (2021-03-09)`, () => {
const pickerRange = {
startsAtUTC: '2021-03-08T21:00:00.000Z',
endsAtUTC: '2021-05-05T20:59:59.999Z',
};
const p = {
...params,
payload: {
employeeId: 'employee-1',
period: GroupByPeriod.
DAY,
startsAt: '2021-03-09',
...pickerRange,
},
};

const expected = {
employeeId: p.payload.employeeId,
startsAtForDict: p.payload.startsAt,
startsAt: pickerRange.startsAtUTC,
endsAt: '2021-03-09T20:59:59.999Z',
};

expect(
makeStartEndDatesWithTimeZone(p)).toEqual(expected);
});
});

```

Как видите, никакого "реакта" тут нет. Все тесты всегда сводятся к тому, что мы запустили настоящую функцию (в моем случае makeStartEndDatesWithTimeZone) и ждем ожидание (expected).

Если вы не пишите юнит-тесты, то я очень советую разобраться. Так как научиться недолго, а времени экономит уйму. Причем не только вам, но и вашим коллегам.

если перевести на русский, в тесте выше я проверяю, что дата старта и дата окончания, то что я ожидаю.

---
Итого:
Разница между тестом expect(add(1,3)).toBe(4) (якобы тестируем функцию сумма (add)) и портянкой выше, лишь в том, что у меня "ожидание" расписано в несколько строк. Отсюда можно сделать вывод, что сам по себе юнит-тест, это легкая конструкция. Обычно все проблемы только с первичной настройкой.

maxpfrontend

06 May, 07:58


Удобный cheatsheet для jest - https://devhints.io/jest

maxpfrontend

03 May, 11:10


Привет, сегодня наткнулся на старую книгу по webpack, которую обновляют! В онлайне бесплатно, поэтому если вам скучно и хочется разобраться с webpack 5 (на англ, разумеется) - https://survivejs.com/webpack/foreword/

а так же maintance: https://survivejs.com/maintenance/preface/
и про react https://survivejs.com/react/introduction/ (еще не обновлено на свежий релиз как в случае с webpack)

maxpfrontend

13 Jan, 12:09


Подвели итоги State of JS 2020 - https://2020.stateofjs.com/ru-RU/

maxpfrontend

01 Jan, 18:57


Мне очень нравится честность этого проекта (js ninja). Вы посмотрите сами (там гугл док по ссылке курса), ребята берут группы с ревью всего 48 человек, а с zoom созвонов - всего 12!

И с новым годом всех! 🎄

maxpfrontend

01 Jan, 18:55


Коллеги, период зимней ковидной и постковидной спячки проекта JavaScript.ninja успешно завершен. Мы полны сил и энергии, чего и Вам желаем.

И начинаем нашу зимнюю серию курсов с набора на базовый курс. Все детали и тестовое задание можно найти по адресу http://javascript.ninja

maxpfrontend

01 Jan, 18:55


Базовый курс по JS! Налетай, пока есть места (платно).

maxpfrontend

22 Dec, 14:31


Так, телега тут не дает нормально все в одном сообщении указать.
Суть:
- релиз первой таблицы уже близок
- вторую таблицу я делал на 90% следуя подсказам в терминале, это реальное “вау”, которое перевешивают непопулярность Elm.

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

Будем смотреть реальный (не идеальный, разумеется) код 🤫