maxpfrontend
1.67K subscribers
29 photos
191 links
Это канал о фронтенде.

Сайт: 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
Download Telegram
Базовый курс по JS! Налетай, пока есть места (платно).
Forwarded from JavaScript.Ninja News (Illya Klymov)
Коллеги, период зимней ковидной и постковидной спячки проекта JavaScript.ninja успешно завершен. Мы полны сил и энергии, чего и Вам желаем.

И начинаем нашу зимнюю серию курсов с набора на базовый курс. Все детали и тестовое задание можно найти по адресу http://javascript.ninja
😁1
Мне очень нравится честность этого проекта (js ninja). Вы посмотрите сами (там гугл док по ссылке курса), ребята берут группы с ревью всего 48 человек, а с zoom созвонов - всего 12!

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

а так же maintance: https://survivejs.com/maintenance/preface/
и про react https://survivejs.com/react/introduction/ (еще не обновлено на свежий релиз как в случае с webpack)
Удобный cheatsheet для jest - https://devhints.io/jest
Вообще, 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)) и портянкой выше, лишь в том, что у меня "ожидание" расписано в несколько строк. Отсюда можно сделать вывод, что сам по себе юнит-тест, это легкая конструкция. Обычно все проблемы только с первичной настройкой.
Всем привет, мы ищем коллегу уровня 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)

Если интересно, подавайте заявку по ссылке выше (нужно резюме на англ), и черканите мне в личку имя фамилию.
👍1
Всем привет, готовлю материал по тестированию... Наткнулся на отличный гайд по unit-тестам в js, но на англ - https://github.com/mawrkus/js-unit-testing-guide
🔥1
Опубликованы результаты опроса среди js разработчиков https://2021.stateofjs.com/en-US/

что посмотреть:
- как сделан сайт с результатами (графики огонь)
- что популярно? (svelte идет уверенной дорогой)
- как ангуляр теряет в графе “satisfaction”, но при этом все еще очень популярный
👋 Привет, в данный момент мы перевозим часть легаси кода на 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 , пока что меня останавливает нелюбовь к хукам. Как я увижу в них силу и начну писать их с радостью, так и пообщаемся.

Ниже скину несколько скриншотов.
👍24🔥8
Первая партия - это интеграции для PR. Здесь - sonarcloud про качество кода (test coverage report - jest, баги/ошибки - eslint и что-то свое от sonarcloud). Затем size-limit и lighthouse с говорящими за себя названиями.
👍9🔥1
Вторая партия - пушка-бомба wallaby.js
На первом скрине - оба теста зеленые, на втором я заменил ожидаемый текст и сразу же покраснело. В реал-тайме! Это как test:watch только все интегрировано в VS Code, плюс есть дополнительные плюшки. Утилита еще в стадии теста, но уже есть ощущения магии.
🔥30👍1
Добавил реакции, и обсуждения. Должно работать! Всех с пятницей и до связи.
🔥54👍8🤯1💩1🍾1
Привет, коллеги.

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

📄 https://forms.gle/SL76YwTES49ovf7E6

До связи!
🔥378🍾2
Меня часто спрашивают… Многие из вас писали мне в личку…

🚫 Ха-ха. У меня знатно подгорает от таких вступлений. Никто меня не спрашивал, но повод с вами поговорить наконец-то нашелся. В данный момент есть в работе приложение “Книга Мертвых”, которое является обычным справочником (CRUD), либо если бы продать подороже можно сказать - делаю CRM/Backoffice, что тоже в целом правда, так как в приложении уже есть поддержка логов действия пользователей: кто что добавил, когда и тд тп.

Из интересного, приложение делаю на 🧪 Elixir + Phoenix. И бэкэнд и фронтенд. Да, шок для самого себя: бэкэнд на новом языке (elixir), база данных postgresql, модель-вьюха-контроллер, тесты… По фронтенду пока не решено, либо останется Феникс, либо бэкэнд будет отдавать json и фронт напишу на Elm. В данный момент Phoenix отдает html, то есть сервер-сайд рендеринг.

Приложение максимально написано с помощью Github Copilot, в качестве модели использую Claude AI или ChatGPT. Грока нет в копайлоте, но говорят Грок хорош, если тестировали - делитесь в комментах.

Тестовые данные - сгенерировал бот, svg иконка - тоже.

Верстка! Верстка никак не получается у бота нормально. Кто верстает с AI? Поделитесь как у вас происходит работа? Либо верстальщиков поднимаем вверх по пищевой цепочке и накидываем им зарплаты!

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

Хотите посмотреть как делается фронт на Elm? Интересно с ноги залететь в Elixir? Или попробуете снова заманить меня в React (по работе пишу на нем, но без энтузиазма)? Какие решаете карьерные вопросы на работе? Давайте поговорим, может быть и на стрим тема найдется. В моих планах показать готовую в продакшен Книгу Мертвых, но не умрет ли она сама по пути в релиз, сказать не могу. Тем не менее, текущий код здесь: https://github.com/maxfarseer/botd

Ciao 👋
Please open Telegram to view this post
VIEW IN TELEGRAM
22👍6