Недавно общался с одной международной IT-компанией. Вкратце про их этапы собесов:

1. Ты разрабатываешь за 1.5 часа реальное приложение по техзаданию в лайв-режиме.
2. Ты заполняешь анкету по cultural fit на 9 страниц.
3. Ты проходишь тех собеседование за 1.5 - 2 часа.
4. Они обзванивают последних двух твоих работодателей и опрашивают их по поводу тебя, твоих успехов, работы и др.

Если все ОК, добро пожаловать на работу в офисе. Никакой удаленки 🤣

Просто пиздец, кого они ищут?)

Может кто-то помнит мой первый пост про то, почему я ненавижу делать тестовые задания при поиске работы в IT?

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

1. Мне скидывают ТЗ и я оцениваю его в часах.
2. Я выполняю задание и мне платят за него по следующей формуле:

Мои ожидания по ЗП (за 1 час работы) * моя оценка ТЗ в часах = заработанная сумма за тестовое.

————————————

В общем и целом, это пример для многих компаний, как нужно делать 😉.

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

Пишу этот пост с горящей жопой 🔥🔥🔥 через 5 минут после конца собеседования в аутсорс-компанию в РБ.

Собес на Senior, а меня гоняют по таким темам, как различие class и id в HTML, различия padding и margin, различия let и const, что такое state и props в React, что вообще такое React и тд и тп.

Если что, эти все вопросы для стажера либо джуна на React. Было настолько не интересно, потому что я знал ответы на все вопросы, я эти темы раз 100 рассказывал будучи джуном.

Я понимаю, если бы они задали хотя бы 5 таких вопросов и поняли, что я действительно не идиот и не очередняра с рынка IT, и начали задавать что-то более хардкорное либо приближенное к позиции Senior. Но нет, каждый следующий вопрос это тупо проверка базы JS и React.

Как будто есть чек-лист из 50 вопросов и обязательно нужно спросить все 50. Они же не поймут на 5-м вопросе, что кандидат вроде как шарит. Нужно же задать все вопросы до конца, вдруг он посыпется...

У меня очень сильно горит, если честно. Я не высокомерный и могу ответить на джуновские вопросы. Но не в такой ситуации, еле вытерпел этот 1 час собеса 😅

Мои 2 самых нелюбимых продукта у Microsoft: Teams и Visio. Первое у меня сжирало всю оперативу на Macbook с icore 9, а второе - просто стандартное приложение для построения блок-схем.

При том для этих блок-схем нет вообще нормальных альтернатив в плане приложений. Кто-то кодга-то придумал ГОСТы, стандарты и блок-схемы и теперь еб*cь с этим в техническом универе 🥲

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

Всего было 4 собеса, и в 4-х из них ни одной задачи на лайв-кодинг. Хотя это и хорошо, меньше как-то напрягался и большинство тех интервью были в удовольствие. Ощущалось, что собес - это разговор двух опытных тех специалистов, а не жесткий прогон хардкорных вопросов по JS + React.

В итоге получил несколько офферов, но об этом попозже 😏

Короче, отвечаю на вопрос, как же я готовлюсь к лайв-кодингу перед собесами?

На самом деле, в лайв-кодинге мне очень помог собес в Yandex, который я проходил в начале лета 2022. В Yandex очень большие требования, очень много этапов на решение задач, и очень много полезных материалов, как готовиться именно к их собесам и в каком формате решать задачи.

Поэтому после такой сильной подговотки я щелкал как орешки собесы в белорусские аутсорсы и продукты.

————————————

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

Hash table:
https://leetcode.com/problems/single-number/ - решить за O(1) по памяти
https://leetcode.com/problems/two-sum/
https://leetcode.com/problems/group-anagrams/
https://leetcode.com/problems/valid-anagram/

Promise
1) fetchWithRetry. Нужно написать функцию, которая принимает в себя promise и объект с функцией retry. fetchWithRetry должна запускать promise заново в случае неудачи. Функция retry во втором параметре возвращает либо число, на которое необходимо отложить перезапуск promise (в ms) либо false (false означает, что перезапускать не нужно, просто необходимо вернуть результат в состоянии reject).

fetchWithRetry(promise, {
retry: (attempts) => {
if (attempts < 3) {
return 500
}

return false
}
})
2) Promise.sleep(2000). Я думаю тут все понятно, необходимо написать функцию, которая выполняет promise через заданное количество милисекунд.

Остальное:
1) https://leetcode.com/problems/valid-palindrome/ - решить за O(1) по памяти
2) https://leetcode.com/problems/coin-change/ - жадные алгоритмы
3) Написать самому функцию, которая реализует бинарный поиск
4) Написать реализацию debounce и throttle
5) Написать реализацию некоторых сортировок: bubble sort, quick sort и др. Кстати, про реализацию quick sort у меня есть статья на Habr: https://habr.com/ru/post/490304/
6) https://leetcode.com/problems/merge-intervals/

————————————

Такую годноту вам подогнал! Поэтому поставьте огонек 🔥 к этому посту и поделитесь им c вашими друзьями/знакомыми 😏

Впервые встретил "стереотипного" таксиста в Минске. Я ехал домой где-то в 5 утра, сел в машину, и мне водила на серьезных щах начинает говорить: "Знаешь, такси это так, чисто для души, я же 20 лет видеомонтажем занимаюсь, на Америку работаю."

Мне нужно было ехать 30 минут, а таксист все продолжал запрягать эту фигню про его жизнь, такси для души и другое. Ну и ему же не скажешь "мужик заткнись".

Короче, таксисты, которые просто молчат, самые лучшие 🤣

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

А давно не получал, потому что я пишу рекрутерам напрямую в личку в LinkedIn. Как по мне, это самый эффективный способ дойти до собеса.

А вы часто получаете такие шаблонные ответы? 😏

————————————

Буквально недели 2 назад я нашел новую работу за 10 дней. И этот способ через LinkedIN мне очень сильно помог. В следующем посте думую рассказать, как проходили мои поиски 😉

Расскажу, как я искал новую работу в IT в октябре (чуть меньше 1 месяца назад).

18 октября - я отрываю сайт rabota.by, вбиваю в поисковую строку "react". Мне находит примерно 150 вакансий. Из них было только 50 нормальных для 3+ годов опыта на позицию Front-End React.

Для каждой вакансии я находил рекрутера в LinkedIn. Просто писал в директ мое шаблонное сообщение:

"_Имя_, здравствуйте! Я нахожусь в данный момент в поиске новых карьерных возможностей. Наткнулся на вакансию в _Компанию_ на позицию React Developer, вакансия меня очень заинтересовала и готов предложить свою кандидатуру. Добавьте меня в ваш список контактов, чтобы я мог скинуть CV"

28 октября - у меня на руках 2 оффера. Один из них я принял 🔥.

Получается, нашел работу за 10 дней. Всего у меня было 4 созвана с рекрутерами и 3 технических собеседования. Многих, конечно, я отсеивал в переписке в LinkedIn, потому что не подходили под мои критерии.

Безусловно то, что я писал в личку в LinkedIn рекрутам, сыграло огромную роль в этом быстром поиске. Если бы я просто откликался через сайт (условный rabota.by или hh.ru), то ждал бы довольно долго ответ на мой отклик. Поэтому выводы делайте сами 😏

Я часто заказываю себе доставку продуктов на дом. И всегда это минимум 5 бутолок воды (1,5 л каждая) + куча еды. И мне обычно привозили все это на машине, потому что обычному человеку нести эти пакеты на спине ну уж очень тяжело.

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

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

Чувствую себя таким говнюком, который нажал пару кнопок в приложении и заставил человека мучаться 😅. Да и еще без чаевых 😬

Как я инициализирую проект на React и создаю его структуру?

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

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

Обычно, я делал папки core, components, common и т.д. в корне (в src) проекта. И когда стояла задача добавить, например, вспомогательную функцию (helper) в проект, то я думал: "ну добавлю эту функцию, наверное, в common". А если нужно добавить новую фичу? Тогда добавляем ее в components, делаем кучу вложенных компонент, зависимых между собой, прикручиваем ко всему этому глобальное состояние. И таким образом увеличиваем проект и строим все больше и больше зависимостей между компонентами, модулями.

Так вот, по описанию можно понять, что это все не очень хорошо. Мне порекомендовали методологию Feature Sliced Design (FSD) для решения таких проблем. FSD описывает свод правил и соглашений по организации кода. Главная цель данной методологии — сделать проект понятным и структурированным.

Сейчас я в процессе инициализации проекта при помощи FSD. Пока что методология меня радует, так как помогает структурировать наш код и ограничить нас в некоторых моментах, чтобы выполнялся шаблон Low Coupling & High Cohesion (слабая зацепленность и сильная связность).

Пока проект не стартовал, и я не смог протестировать методологию в работе с командой и при добавлении новых фич в приложение. Буду смотреть, как все будет развиваться с применением FSD. В процессе буду отписывать сюда по результатам 😉

Лучшая либа для форм в React: Formik VS React Hook Form

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

Так вот, в этом посте я расскажу, почему Formik жестко проигрывает React Hook Form. После прочтения ваши навыки формошлепства улучшатся минимум на 70% 😁.

Чем Formik плох?

1. Обновления формы после каждого изменения в любом input. Представьте форму, где есть, допустим, 10 input-ов разных типов (обычный input, select, textarea, file upload и др). Вы вводите символы в 1-й input, а это вызывает обновление всей формы. И обновление происходит на ввод каждого символа. Представьте, как проседает производительность!!!

React Hook Form, наоборот, изолирует обновление конкретного input-а. То есть, если в форме из 10 input-ов изменяется значение 3-го, то обновится только этот 3-й input (а не ВСЯ ФОРМА!). В основном, такая оптимизация Hook Form реализована благодаря неконтролируемым компонентам. В таких компонентах используется ref для получения значений input-а, а не value + onChange, как в контролируемых.

2. Ну и также немного технических характеристик.

Размер либы: Formik - 12.6kb; React Hook Form - 5.2kb.
Зависимости: Formik - 9; React Hook Form - 0 (нуль зависимостей!).

В общем и целом, на Formik стоит смотреть в последнюю очередь при выборе библиотеки для работы с формами. Как по мне, React Hook Form - это идеальный выбор для большинства решений. Есть еще хорошая либа React Final Form, но она не поддерживает валидацию через yup, поэтому мы от нее отказались на проекте.

А вы какие библиотеки используете при работе с формами? Напишите в комменты 😏.

————————————

Материалы:

Formik,
React Hook Form,
Статья "React Hook Form vs. Formik: A technical and performance comparison".

Впервые сам поставил и собрал елку! 🎄🥳

Всех поздравляю с наступающим Новым 2023 годом! 🎄🍊

Желаю в новом году работать по 2 часа в день вместо 8, либо вообще не работать в IT. Ну и тем кто еще не в IT, желаю найти работу на этом трудном рынке в данный момент 😉

Прикупил себе микрофон. А это значит, будут новые видео на моем YouTube! 🔥

P.S. Если кому интересно, то модель называется Lorgar LRG-CMT521.

На моем YouTube вышло новое видео! 🔥 Посмотреть его можно здесь.

Создаем NPM библиотеку UI компонентов. React, Typescript, Storybook. Публикуем на GitHub Packages

————————————

Вот полезные материалы и упоминания из ролика:

1. В видео в dependencies мы установили только react и данная библиотека не попадает в итоговый билд (в папку dist), благодаря параметру external.
Скорее всего, у вас в библиотеке будут использоваться и другие npm-модули (например, lodash). И чтобы эти модули попадали в билд, вам необходимо установить пакет @rollup/plugin-node-resolve. Также в нем можно указать либо исключить конкретные модули для папки dist при помощи параметра resolveOnly.
2. Начальный код. Склониуйте его себе, если будете разрабатывать библиотеку вместе со мной по видео. tsconfig, eslintrc и другие конфиги также смотрите по этой ссылке);
3. Настройка webpack для storybook;
4. Команда для установки wepback5 модулей:

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 -D

5. Шаблон для файла .npmrc:

registry=https://registry.npmjs.org/
@YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

6. Шаблон названия библиотеки для файла package.json:

"name": "@YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME",
"publishConfig": {
"registry": "https://npm.pkg.github.com/YOUR_GITHUB_USERNAME"
},

7. Необходимые зависимости storybook для работы контролов:

"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-interactions": "^6.5.13",
"@storybook/addon-links": "^6.5.13",

8. Начальные зависимости в package.json.
9. Репозиторий с итоговым кодом.

Когда применять React.memo? Оптимизации в React

В общем и целом, React быстрый, если придерживаться его best practices и в нужных местах применять оптимизации при помощи React.memo.

Хочу поговорить про этот React.memo, потому что штука очень важная и я ее в последнее время часто применяю. Если кто не знает, то React.memo автоматически проверяет, изменились ли пропсы. И если они не изменились, то React не вызовет ререндер и вернет результат прошлого рендера.

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

1. Первым делом нужно посмотреть, можете ли вы вынести состояние в другую компоненту или разбить основную компоненту на подкомпоненты.
2. Если после того, как вы разбили компоненты, у вас проблема с лишними ререндерами не решилась (либо решилась частично), то стоит применить React.memo.

Тут нужно помнить, что если вы оборачиваете компоненту в React.memo, то обязательно стоит смотреть на тип данных пропсов. Если все пропсы примитивы, то оборачиваем спокойно.

Если какие-то пропсы являются объектами и (или) функциями, то значения этих пропсов необходимо обернуть в useMemo и useCallback соответственно. Если вы этого не сделаете, то React.memo уже не будет выполнять свою главную функцию. Конечно, если ваше значение имеет тип данных объект и хранится в useState, то ничего в useMemo оборачивать не нужно.

А вы используете React.memo в своем коде? 😏

В последние полгода я работаю только из дома. Все время сидеть в квартире за ноутом довольно трудно, поэтому вечером либо в обед я прогуливаюсь до кофейни и работаю оттуда.

Кстати, это довольно удобно и очень даже атмосферно ☕️

А вы в каком месте в основном работаете? 😏

Монтируется новый видос на YouTube. Выйдет в воскресенье (сегодня) либо в начале следующей недели. 😉

Наконец-то добрались руки до 3-й части видео про верстку (адаптив) 🔥

Плейлист по версте макета на HTML и SCSS можно найти здесь.